Accessibility of UI components with hyperlinks

[steverep]

Checklist

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

Describe the issue you are experiencing

In various areas of the frontend, anchor elements are used within or around components which have another interactive role (e.g. tab, button, menu item). This causes several accessibility issues:

• Confusing/extra speech: A screen reader might say "visited link tab selected integrations".
• Extra tab stops: One for the lin and one for the button, with unpredictable label announcements.
• Breaks some functionality: When wrapped around an mwc-tab or mwc-listitem, arrow key functionality to move to the linked items is broken and the wrong number of items is reported.

In many cases, this also violates the HTML and/or ARIA specifications (e.g. a <button> inside a <a>> is not valid).

Some notable places this occurs are:

1. Back button
2. More options button menu for integrations
3. Navigation tab bars on settings pages

Describe the behavior you expected

• Per spec, interactive components should have only one role
• One tab stop per component
• No breaks in container's functionality

Steps to reproduce the issue

1. Turn on a screen reader
2. Try to interact with affected mentioned components

What version of Home Assistant Core has the issue?

2022.5.5

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

Probably in all cases, this can easily be fixed by removing the anchor element in favor of using window.open or window.location with a simple click event listener.

[steverep]

Root of these issues lies with Material components not being able to easily handle anchors:

• material-components/material-web#328
• material-components/material-web#441
• material-components/material-web#1095

[piitaya]

Looks like m3 buttons support href and target attributes. We should move to these ones to fix the accessibility issue for buttons.

[github-actions[bot]]

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 relevant

[github-actions[bot]]

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[bot]]

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.