aria-hidden state not honoured with CSS generated content

(NeedInfo from)



4 years ago
10 months ago


(Reporter: tink, Unassigned, NeedInfo)


(Blocks 1 bug)

36 Branch
Windows 7
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)



(2 attachments)



4 years ago
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:36.0) Gecko/20100101 Firefox/36.0
Build ID: 20150320202338

Steps to reproduce:

When content inside a button is generated using the CSS before/after selectors with aria-hidden applied, Firefox does not honour the hidden state of the content.

If the generated content is not inside a button, Firefox honours the hidden state as expected.

Test cases:

Actual results:

Firefox disregards the hidden state and exposes the generated content as the accessible name for the button.

Expected results:

Firefox should not expose the generated content as the accessible name for the button. The content should not be available via the accessibility tree.
Hi Léonie,

The posted link by you is not working, can you please provide another examples of web pages so I can reproduce your issue on my environment? 

Also, can you please test this on the latest Firefox release (43.0.1) or latest Nightly (46.0a1, and tell me if this still reproduces for you ? When doing this please use a new fresh Firefox profile, maybe also in safe mode ( Sometimes this kind of issues could appear when using custom settings, themes or some addons.

Flags: needinfo?(tink)

Comment 2

4 years ago
Thanks Cosmin. 

I've reposted the test case and verified the results in Firefox 43 x64.

The CSS generated content is exposed as text in Firefox/IAccessible2. By contrast it is hidden in IE/MSAA as expected.
Flags: needinfo?(tink)
Hi Léonie,

I have tested your issue on  latest Firefox release (43.0.1),  latest Nightly (46.0a1). Exactly what do you want it to be hidden? The arrow from the button or  “::after” selector  from inspect element?
I have tested even in Chrome but I had the same result.

Flags: needinfo?(tink)

Comment 4

4 years ago

in short, the generated content should be hidden and not exposed - it should honor/inherit the aria-hidden=true on the <span>.

Currently, using JAWS 17 and Firefox (tested using both stable and Developer Edition 45.0a2) the button in the example is announced as "foo single right pointing angle quotation mark button", and using aViewer ( to inspect the exposed accessibility tree shows that indeed the right pointing angle quotation mark is passed on as part of the accName (see attached foo-aviewer-firefox.png). Compare this to Chrome, which exposes only "foo" as part of the accName (see attached foo-aviewer-chrome.png)

I have try to reproduce the issue using the aViewer program but I have encountered some errors and could not test. 
Considering this, I will assign a component to this issue in order to involve the development team. Maybe someone with more experience on this could share an opinion. 

Component: Untriaged → Disability Access APIs
Product: Firefox → Core
Alex, I think we should take over from here, right? :-)
Blocks: aria
Flags: needinfo?(surkov.alexander)
css generated content is children of the accessible element the CSS rule was applied to. So no special processing is required, which means this bug should be fixed as bug 1123360 is fixed.
Flags: needinfo?(surkov.alexander)
Blocks: aria-hidden
No longer blocks: aria
Priority: -- → P2

Comment 10

2 years ago
Based on this <a href="http://ljwatson.test-cases/aria-hidden/index.html">test case</a>, the problem still exists in Firefox 54 and Nightly 56.

Comment 11

10 months ago
I can't seem to find this test case any more; none of the links in this bug work. However, this test case works correctly now that bug 1349223 is fixed:
data:text/html,<style>span:before { content: "before"; }</style><button><span aria-hidden="true"></span>content</button>
The button gets an accessible name of "content".
Last Resolved: 10 months ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.