[docs] MUI Snackbar Accessibility

[AJ-Kazazian-Calero]

Related page

https://mui.com/material-ui/react-snackbar/?srsltid=AfmBOoq7503ueVGgPcEqALorwd5zyF6eQFiqvwj__Dpqa49pRxf-XLOf

Kind of issue

Other

Issue description

The demo on https://v5.mui.com/material-ui/react-snackbar/#introduction does not talk about how to make the Snackbar accessible for tabbing into it when it's dynamically created, and I can't find much information about this issue.

Context

I am trying to make our Snackbar accessible via keyboard navigation - it is somewhat accessible, however, not fully. Basically, we have a notification service which triggers the Snackbar to appear which has a "X" button to close it and sometimes another nested link. I cannot tab into that Snackbar notification unless I tab through the entire page, which is not feasible. Our desired outcome would be to have that Snackbar be next in the tab order, like how the "Open Snackbar" demo on https://v5.mui.com/material-ui/react-snackbar/#introduction works, however I could not get that to work with dynamic Snackbars.

Search keywords: Snackbar Keyboard Navigation Tab Order / Focus

[AJ-Kazazian-Calero]

Update: Could not find a way to use MUI directly to do this, however by moving the newly created Snackbar element in the DOM to directly after the current active element's parent, I was able to get it to have the appropriate tabbing order

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@AJ-Kazazian-Calero How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[AJ-Kazazian-Calero]

Reopened - realized that I closed it too early as it's not fully resolved. Inserting into the appropriate place in the DOM is not a good approach as it's not dynamic, won't always work as may not always even have active element parent (such as when page first loads and snackbar is displayed off the bat)

[ZeeshanTamboli]

We can consider adding an F6 shortcut to move focus to the snackbar region, as implemented in Base UI (https://base-ui.com/react/components/toast). We can do it in the next major where we implement Material UI components using Base UI.