Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SnackbarContent role="alertdialog" is incorrect role depending on Snackbar usage #17560

Closed
2 tasks done
emilyuhde opened this issue Sep 24, 2019 · 1 comment · Fixed by #17897
Closed
2 tasks done

SnackbarContent role="alertdialog" is incorrect role depending on Snackbar usage #17560

emilyuhde opened this issue Sep 24, 2019 · 1 comment · Fixed by #17897
Labels
accessibility a11y component: snackbar This is the name of the generic UI component, not the React module!

Comments

@emilyuhde
Copy link
Contributor

emilyuhde commented Sep 24, 2019

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

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 🕹

  1. Go to the Material UI site's Snackbars demo page https://material-ui.com/components/snackbars/
  2. Open/view any of the Snackbars that do not have buttons, such as the "Positioned snackbars" section's "TOP-CENTER" Snackbar.
  3. Right click and inspect the Snackbar.

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#L55

Context 🔦

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 🌎

Tech Version
Material-UI v4.3.1
React 16.8.0
Browser all
TypeScript N/A
etc.
@eps1lon eps1lon added accessibility a11y component: snackbar This is the name of the generic UI component, not the React module! labels Sep 25, 2019
@emilyuhde
Copy link
Contributor Author

I'm working on a fix for this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility a11y component: snackbar This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants