mui
[Snackbar] Screen reader not reading a snackbar when triggered from a button within a dialog
Duplicates
- [X] I have searched the existing issues
Latest version
- [X] I have tested the latest version
Current behavior 😯
When snackbars are triggered from a button within a dialog they are not read by the screen reader.
Expected behavior 🤔
When snackbars are triggered from a button within a dialog they should be read by the screen reader.
Steps to reproduce 🕹
Steps
- User launches NVDA or JAWS
- User opens https://codesandbox.io/s/dialog-snackbar-not-accessible-gzl5o?file=/demo.js in Chrome, Firefox or Edge
- User clicks the "OPEN DIALOG" button and the dialog is launched
- User clicks the "OPEN SNACKBAR" button within the dialog and the snackbar is launch
- The screen reader does not read the snackbar and the user of the assistive technology is unaware the snackbar exists
Context 🔦
We are building forms and flows that combine the dialog and snackbar components. We need some none intrusive alerts that inform users their task was successful. Snackbars fit our need but are not accessible when triggered from a button within a dialog.
Your environment 🌎
`npx @mui/envinfo`
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
This is related to #29080 and has been created so it can be handled as a separate issue.
I suspected that the problem was the following:
- This is a modal dialog, which means that when it's open, the rest of the page is
aria-hidden. - When the snackbar first appears, it does so in the part of the page that is
aria-hidden, which means that screen readers are unaware of it and cannot announce it.
I tested my theory by delaying the opening of the relevant snackbar:
const handleClickOpenSnackbar3 = () => {
setTimeout(() => {
setOpenSnackbar3(true);
}, 1000);
};
And it worked (on Chrome + VoiceOver + macOS)! The snackbar is now announced. So you could use that as a workaround for now (there are bigger issues with the Modal component that Dialog is based on, which I think should be tackled in a larger refactor, as I've recommended in some other open issues).
Referencing this: https://mui.com/base-ui/react-snackbar/
Just adding to this bug, I would also expect a screen reader to have the notification announced (and perhaps even pull focus)
Additionally notification div has role="presentation" which is incorrect, this basically removes semantics from the element but as it's a div anyway it's not needed.
This seems like a fail of WCAG 4.1.3 with my current understanding.
For Mui4 users - another workaround is to pass disablePortal to <Dialog> but you might experience issues with stacking context.
