Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug(cdkTrapFocus): Sets aria-hidden to true

See original GitHub issue

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 https://github.com/angular/components/commit/f66302d44301c936d5647c6d6cfd326b118808fb

Environment

CDK/Material:

Issue Analytics

State:
Created 3 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

jelbourncommented, Jun 1, 2020

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.

0reactions

angular-automatic-lock-bot[bot]commented, Jul 8, 2020

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.}

Top Results From Across the Web

javascript - "aria-hidden elements do not contain focusable ...

This is because the React modal adds a aria-hidden="true" to the root element of the application (the div all my apps components are...

Accessibility

The cdkTrapFocus directive traps Tab key focus within an element. ... the equivalent of calling monitor on the host element with checkChildren set...

Get attribute style from an element - Katalon Recorder

Hi, I have an element on my page: <div cdktrapfocus="" role="dialog" ... aria-hidden="true" data-e2e="ux-modal"> Bla Bla </div>.

aria-hidden elements do not contain focusable elements

The following examples PASS the aria-hidden="true" elements do not contain focusable ... aria-hidden can't be reset once set to true on an ancestor....

A CSS Approach to Trap Focus Inside of an Element

Also, we set the transition property with a very small duration because we ... The solution is quite easy: apply aria-hidden="true" to the ......