Accessibility, animated components aren't focusable

[mush42]

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

Expected Behavior

Animated components that use TransitionComponent prop (e.g Drawers, Dialogs) should be keyboard accessible after the transition animation. Moreover the focusable children (e.g Buttons, Links) of those components should be immediately focusable after their parent component is animated into view.

Current Behavior

The animated components which use the TransitionComponent prop (e.g Dialogs, Drawers) are not focusable after the animation. Moreover, the children of those animated components couldn't be navigated to using the Arrow keys, the tab key, or using touch.

Steps to Reproduce

The official component demos of the latest version of Material UI is used for testing.

Steps:

1. Open the dialog demo in the official material UI demo site
2. Click the button labeled Slide in alert dialog
3. Neither the alert dialog itself nor its children is keyboard focusable or touch focusable when using a screen reader.

Context

Making components focusable is critical for those who use assistive technology. The menssioned problem render a lot of pages unusable when using a screen reader. For instance, it is very hard for me to access the different parts of the MUI website because the drawer used in the home page is not focusable.

Your Environment

Tech	Version
Material-UI	v3.1.1
Browser	Firefox (62.0.2)
Browser	Chrome for android (latest)

[eps1lon]

I don't know how to reproduce this. The only issue I have is that I have to tab twice before Disagree is focused.

[mush42]

@eps1lon which screen reader have you used for testing?

[eps1lon]

Firefox, Chrome, Chrome Vox. Excuse my ignorance here. Would like to know your setup.

[mush42]

On my Windows 10 Box I use the NVDA screen reader along with Firefox. On Android I use Talkback along with Chrome.

[eps1lon]

Took some time for me to get used to Talkback but I can see what the issue is now. An open drawer basically blocks the user from setting focus to anything within that drawer. Drawers in native apps work fine. Do have an example website that is using drawers like the one on the docs page on mobile devices?

[eps1lon]

I did some digging and it's very like that the main issue is that aria-hidden is set to true not only on the backdrop but also on parent containers that contain the dialogs, drawers etc. It's working for the simple dialog example though.

[mush42]

Yep, That is the issue I'm talking about. I don't know of a site, other than the MUI docs, that uses drawers. The argument is valid for dialogs though.

[eps1lon]

This is only happening for Modals with keepMounted. Do you want to work on this?

[eps1lon]

No need to look far: https://material.io/design/color/the-color-system.html#color-theme-creation

Works fine with TalkBack. Only problem is that it tabs through all elements in the page and not just the drawer.

Still it's a bug with Modals and keepMounted

[eps1lon]

Duplicate of #12710.

#13082 is attempting to fix it.