bug(cdkTrapFocus): Sets aria-hidden to true

[jrood]

Expected Behavior

cdkTrapFocus should not set aria-hidden to true because hidden area elements are not supposed to have focusable content https://dequeuniversity.com/rules/axe/3.2/aria-hidden-focus?application=AxeChrome but the point of having a focus trap is so that you can use it with focusable content.

Actual Behavior

cdkTrapFocus sets aria-hidden to true
See comments on this commit f66302d

Environment

• CDK/Material:

[jelbourn]

This is working as intended. Focus trapping is a special case where this is necessary and a11y linters often report it as a false positive.

[jrood]

Thanks @jelbourn ! I'm hoping to report this as an issue with axe-puppeteer in that case. Do you know what criteria/marker an a11y linter could use to identify this as a special exception (since, in general, the no-focusable elements rule for aria-hidden should still be enforced)?

[jrood]

@jelbourn could you also help clarify why focus trapped elements would need to be aria-hidden at all? It seems like it would be confusing that something could be in focus but not visible.

[junyper]

@jelbourn I think axe is technically correct. To correctly implement focus trapping we need to implement or use the inert attribute polyfill, which would essentially make focusable elements that are hidden not focusable temporarily. Otherwise, by putting aria-hidden on focusable elements you are building a UI that is confusing for screen reader users.

https://github.com/GoogleChrome/inert-polyfill

[jelbourn]

We have the practical equivalent to the inert polyfill tracked in #9035. The current approach definitely isn't perfect, but has plugged along as "good enough" for the most part. IMO linters like axe are great for capturing oversights and mistakes, but in this case we did deliberately use this pattern and tested with screen-readers we support.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}