aria-expanded status not announced when ::before element has content

[jmuheim]

I'm working on a simple dropdown implementation. Using JavaScript, an aria-expanded attribute is toggled between false and true, and its specific content's visibility is toggled then.

I'm used to NVDA announcing a change of aria-expanded very reliably when the focus is on the specific link or button.

Demo: https://codepen.io/accessibility-developer-guide/pen/pKoJbK

But I noticed that when this link or button has some content with ::before { content: '...' }, the change is not announced anymore.

Demo: https://codepen.io/accessibility-developer-guide/pen/VdwvwW

I wanted to display a + or - sign in front of the dropdown toggler to indicate its status visually. But this doesn't seem to work with content: '...'.

Is this expected behaviour? Or a bug?

[michaelDCurran]

It looks like in the second example, the node with focus (the button) is being completely replaced each time it is expanded or collapsed. Thus, to NVDA the expanded/collapsed state is not just changing, but rather the focus in its entireity is changing.
Are you creating a new node here? or is this some kind of Browser defect that is causing the node to be recreated?
To see that the node is being recreated/refocused from NVDA's point of view, tab to one of the buttons, switch to focus mode with NVDA+space, and then press space to expand/collapse the button. NVDA will announce the button in its entireity just like a new focus. Rather than in the first example where it just announces the change of expanded / collapsed.

[michaelDCurran]

@jcsteh: possibly another real-world testcase where Firefox is re-creating an Accessible element because of a change in CSS.

[jcsteh]

Correct. Mozilla bug 395900.

[jmuheim]

Thanks for sorting this out, guys.

[michaelDCurran]

Reopened as #8869 had to be reverted for now.

[afercia]

Hello. Should #5247 be reopened as well?

[JamesCatt]

Hello. Should #5247 be reopened as well?

I'm seeing this issue even without a pseudo element. Firefox 69.0 + NVDA 2019.2

[Adriani90]

Yes this is also reproducible for me.
cc: @jcsteh, @MarcoZehe

[jcsteh]

Fixed by https://bugzilla.mozilla.org/show_bug.cgi?id=686400 in Firefox 70 (currently in beta).

[vchereshnevyi]

Hi there, looks like this issue still reproduce in Chrome. NVDA blocked events for keypress ENTER/SPACE when pseudo element :before is changed on expand state. Demo: https://codepen.io/accessibility-developer-guide/pen/VdwvwW
It works fine when you change pleudo :before to :after . Demo: https://codepen.io/cherry-v/pen/VwPawYZ
But I'm not feel that it good fix. We need fix it in NVDA side to feel free use CSS pseudoelements in our side