Modal dialogs need keyboard focus management

[steverep]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

For nearly all modal dialogs I can think of, the keyboard focus does not transfer to the dialog as it should for accessibility. I need to to click or space bar once to get the focus inside the dialog to be able to read it with a screen reader. Furthermore, after closing a dialog with escape or button, keyboard focus is transferred all the way back to the beginning of the page DOM, instead of back to the button which opened the dialog as expected.

Describe the behavior you expected

In general, these dialogs should all follow the modal dialog design pattern in the W3C ARIA Authoring Practices. These design patterns have detailed notes on managing keyboard focus.

Steps to reproduce the issue

For example, I might go to Configuration → Entities and:

1. Click on an entity to get it's settings dialog, and then click again to read it

2. Click the control button to get that dialog, then have to click again to read it

3. Click the attributes button, then have to click again to read them

4. Hit escape to get out, then have to navigate back to where I started

...
For example, I might go to Configuration → Entities and:

1. Click on an entity to get it's settings dialog, and then click again to read it
2. Click the control button to get that dialog, then have to click again to read it
3. Click the attributes button, then have to click again to read them
4. Hit escape to get out, then have to navigate back to where I started

What version of Home Assistant Core has the issue?

Any

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Firefox & Chrome (latest stable)

Which operating system are you using to run this browser?

Windows 10

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

I suspect that the cause of this may be also causing lots of other "double action" keyboard issues throughout the UI, but I figured I'd keep this issue tight and to the point rather than jumping to that conclusion.

[steverep]

I'm starting to work on this issue, and figured out the cause of another minor issue in the process. Every time a dialog opens, my screen reader tells me it's a "true dialog" which is annoying.

ha-dialog extends the class from the material components, hacks in a custom heading, and every instance sets .heading=${true} to make sure it renders. What is missed is that the dialog is aria-labeledby that heading, so screen reader users get the unintended consequence of hearing it's a "true dialog" instead of a useful label.

On another aside, I filed this issue for the mwc-dialog component: material-components/material-web#3095.

[bramkragten]

Thanks for the heads up about the heading! I'll fix that.

[steverep]

I'm noticing a common issue among the "hassio" dialogs. None of them hide the sidebar - neither visually nor programmatically. Should probably fix that as part of this issue too.

[steverep]

@bramkragten so far each dialog you've converted to using ha-form is just reintroducing this issue again...

• Zone detail
• Lovelace dashboard detail
• Lovelace resource detail

[github-actions]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates.
Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍
This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[steverep]

Still have more dialogs to fix

[github-actions]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates.
Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍
This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[github-actions]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates.
Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍
This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.