SnackbarContent role="alertdialog" is incorrect role depending on Snackbar usage #17560
Closed
2 tasks done
Labels
accessibility
a11y
component: snackbar
This is the name of the generic UI component, not the React module!
Current Behavior 😯
When using a Snackbar, the SnackbarContent adds
role="alertdialog"
. According to MDN, if an alert includes interactive controls, the role should be set to"alertdialog"
. If it does not, then it should be set to"alert"
.If the Snackbar is given some interactive buttons then
role="alertdialog"
is appropriate, but since users can decide to only set text on Snackbars, they should be able to customize which role they would like to have set to meet the specification."If an alert also provides interactive controls (such as form controls that allow the user to rectify a problem, or an "OK" button that discards the alert) the alertdialog role should be used instead."
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role
Expected Behavior 🤔
The user should be able to set their own role attribute by passing in a prop, just like how the message can be set.
Steps to Reproduce 🕹
You will notice that the Snackbar's div shows
role="alertdialog"
even though there are not interactive elements on the Snackbar. This is being hardcoded on line 55 in SnackbarContent.js: https://github.com/mui-org/material-ui/blob/824294842997c79494b4f328bb7903774a05422b/packages/material-ui/src/SnackbarContent/SnackbarContent.js#L55Context 🔦
This is an accessibility concern as the role helps screen readers to read out alert messages as they pop up onto screens and incorrect roles can be confusing to screen reader users.
Your Environment 🌎
The text was updated successfully, but these errors were encountered: