Skip to content

Conversation

@p-nadeem
Copy link

Description

This PR improves the keyboard accessibility of the Snackbar component by adding an F6 keyboard shortcut that moves focus directly to the Snackbar when it is open. This makes it easier for keyboard users to access dynamic snackbars and their interactive elements (such as the close button or links) without having to tab through the entire page.

Changes

  • Updated the Snackbar implementation to:
    • Register a keydown listener when the Snackbar is open and handle the F6 key.
    • Focus the Snackbar container when F6 is pressed.
    • Make the Snackbar container focusable by default with tabIndex={0}.
    • Expose the Snackbar container as a live region with role="status" for assistive technologies.
  • Updated the Snackbar docs (docs/data/material/components/snackbars/snackbars.md) to document:
    • The new F6 shortcut under the Accessibility → Keyboard navigation section.
    • How the shortcut helps keyboard users reach the Snackbar without traversing the full page.
  • Added unit tests for:
    • Focusing the Snackbar when F6 is pressed.
    • Ensuring no focus change occurs when the Snackbar is closed.
    • Verifying role="status" is applied to the Snackbar.
    • Verifying tabIndex="0" is applied so the Snackbar is focusable.
    • Ensuring the behavior works correctly when multiple Snackbars are open.

Related issue

Fixes #45243

Additional

@mui-bot
Copy link

mui-bot commented Dec 11, 2025

Netlify deploy preview

Bundle size report

Bundle Parsed size Gzip size
@mui/material 🔺+305B(+0.06%) 🔺+59B(+0.04%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 1a66e60

@p-nadeem p-nadeem marked this pull request as draft December 11, 2025 05:50
@p-nadeem p-nadeem closed this Dec 11, 2025
@p-nadeem p-nadeem reopened this Dec 11, 2025
@p-nadeem p-nadeem changed the title [material-ui][Snackbar] Add F6 keyboard shortcut for accessibility [Snackbar] Add F6 keyboard shortcut for accessibility Dec 11, 2025
@p-nadeem p-nadeem marked this pull request as ready for review December 11, 2025 06:08
@zannager zannager added docs Improvements or additions to the documentation. scope: toast Changes related to the toast. labels Dec 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Improvements or additions to the documentation. scope: toast Changes related to the toast.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[docs] MUI Snackbar Accessibility

3 participants