search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.02k stars 32.3k forks source link

[material-ui][Alert] Potential accessibility issues #40198

Open garyb1 opened 11 months ago

garyb1 commented 11 months ago

Hi, I was looking at the Alert component and I noticed it added an ARIA alert role to the component. This component may potentially not exist on page load and might be displayed dynamically.

In your accessibility notes for the alert component you say:

When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads.

The content is not always automatically announced by some screen readers though. Scott O'Hara talks about this in a post called are we live.

Dynamically injecting a live region node or changing an existing live region from display: none to display: block are effectively the same. In both cases (being absent or set to display: none) the live region does not exist in the a11y tree. Rather, as the following test cases show, ensuring an empty live region exists in your DOM, and injecting content into it when necessary, proves to be the most robust way to ensure a live region will be announced.

Severity of Alerts

Some people might not consider a success message an alert, and depending on context, info and warning might not be either. You are appending role="alert" to the component for all variants. I really think this should be revisited. At the very least mentioned in the documentation. I don't think pointing to the WAI-ARIA Authoring Practices helps here.

Thanks.

DiegoAndai commented 11 months ago

Hey @garyb1, thanks for the report!

This audit of the Alert component is very helpful. I hope we get to improve this soon.