Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drawer with keepMounted has incorrect aria-hidden value #12710

Closed
2 tasks done
roosmaa opened this issue Aug 29, 2018 · 0 comments
Closed
2 tasks done

Drawer with keepMounted has incorrect aria-hidden value #12710

roosmaa opened this issue Aug 29, 2018 · 0 comments
Labels
accessibility a11y component: drawer This is the name of the generic UI component, not the React module!

Comments

@roosmaa
Copy link
Contributor

roosmaa commented Aug 29, 2018

When using the following snippet:

<Drawer
    variant="temporary"
    ModalProps={{
        keepMounted: true
    }}
    {..other}
/>

The aria-hidden attribute logic gets applied incorrectly.

  • This is a v1.x issue.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When the drawer is open, the content gets aria-hidden="true" and drawer modal gets aria-hidden="false".
When drawer is closed, the content gets aria-hidden="false" and drawer modal gets aria-hidden="true".

Current Behavior

When the drawer is open, the both the content and drawer modal get aria-hidden="true" (resulting in a screen reader stating that there is no content).
When drawer is closed, both the content and drawer modal get aria-hidden="false".

Looping GIF demonstrating the issue

Steps to Reproduce

Link: https://material-ui.com/

  1. Open drawer
  2. Open dev-tools
  3. Check aria-hidden attributes for drawer modal & content
  4. Close drawer
  5. Recheck aria-hidden attributes for drawer modal & content

Context

To make temporary drawer apps friendly to screen readers.

Your Environment

Tech Version
Material-UI v1.4.2
React v16.4.0
TypeScript 3.0.1
etc.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility a11y component: drawer This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

2 participants