Icons incorrectly use aria-hidden instead of aria-label, and some lack either

[SveinungTorresdal]

When browsing the internet with a screenreader one depends on aria-label to accurately describe functionality. By contrast, aria-hidden removes the element from the screenreader's DOM tree, as well as its children. Therefore, it is important that interactive elements are labeled, and especially elements that only use an icon.

The following components use aria-hidden for its accompanying material icon, even though the button is an interactive element with no other label, or lack aria-hidden and aria-label:

• Action Lists - 🍔 more-vert icon should have aria-label instead of aria-hidden
• Alerts - ❌ close icon should have aria-label instead of aria-hidden
• Dialog - ❌ close icon should have aria-label instead of aria-hidden
• Nav - icons-only are aria-hidden, should have aria-label, or change with breakpoint.
• Sheet - ❌ close icon should have aria-label instead of aria-hidden.
• Sidebar - icons lack aria-hidden and aria-label, should likely use aria-hidden.
• Toast - ❌ close icon is missing aria-hidden and aria-label, should have aria-label.
• Tooltips - ❓ help_outline is missing aria-hidden and aria-label, should have aria-label
• Topbar - 🍔 menu and ❌ close icons should have aria-label instead of aria-hidden.

To Reproduce
Steps to reproduce the behavior:

1. Launch Chrome.
2. Install ChromeVox.
3. Recommended: Enable focus on cursor in the settings.
4. Visit the Design Guide with ChromeVox enabled.
5. Navigate to the components mentioned and interact with the icon(s).
6. Observe lack of speech, or strange speech. Example: Screen readers will read _, i.e. help underscore outline.

Expected behavior

1. Purely decorative icons should be aria-hidden.
2. Interactive elements that combine icons and text should always use aria-hidden if text is sufficiently descriptive.
3. Interactive elements that exclusively use icons should always use aria-label to describe the function of the element.
4. All material icons should use either aria-hidden or aria-label.

Actual behavior

As described above, a number of icons use aria-hidden, or lack both aria-hidden and aria-label when one of them should always be present.

[SveinungTorresdal]

Some further discoveries show that rather than aria-label on the icon we should employ it on the parent element if it is interactive, or use a .sr-only span element next to it for static, non-interactive content.