fix(material/dialog): dialog content not being read out by screen readers

[crisbeto]

Currently we focus the first focusable element inside a dialog as per the accessibility recommendations, however moving focus to the first item causes some screen readers not to read out the rest of the dialog content. These changes switch to focusing the dialog container by default which allows screen readers to read out everything. If users press tab, they'll land on the first tabbable element anyways. The old behavior can still be opted into via the autoFocus option.

Fixes #10591.

[crisbeto]

@jelbourn these changes are based on our discussion from a while back. An alternate approach we can take is to move focus to the first focusable element immediately, rather than assigning it to the dialog container in between. This allows the screen reader to read out a bit more, but still not everything (it reads out the dialog header and buttons, but it skips the content vs the behavior in master where only the button is read out).

I opted for this approach, because it allows for all the content to be read out, even though it's not the recommended one.

[jelbourn]

Which screenreaders did you test this in?

[crisbeto]

I've been testing it with NVDA.

[ngbot]

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

[ngbot]

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

[ngbot]

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

[jelbourn]

LGTM

[benjspriggs]

What's the status on this PR?

[jelbourn]

It looks like this change breaks a large number of targets in Google and needs some scheduled time to land

[DmitryEfimenko]

I've been experiencing this issue in the application I'm working on, which led me to diving deeper into it. Based on my research, I don't think that the proposed fix is the best way forward.

Please have a look at the example of accessible dialog here, which has autofocusing functionality as well. I've tested it with NVDA. The screen reader announces both, the title and the description while having the first focusable element autofocused. This is due to the fact that the element with attribute role="alert" also has attributes aria-labelledby pointing at the title and aria-describedby pointing at the description.

I've attempted to apply this fix in my app, but I'm still not getting the title or description read out. I believe this is due to the fact that focus is assigned to the dialog container first and then immediately assigned to the first focusable element. Instead, it needs to be assigned to the first focusable element immediately. This is a running theory - not something I have confirmed. However, given the working example of a dialog above, I think we should be able to fix material dialog to read out all content while keeping the default value of autoFocus to true

[crisbeto]

This fix was superseded by #23085.

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