Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Snackbar] Accessibility - ESC key while focus is on the toast should close the toast

See original GitHub issue

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 you keyboard tab-navigate to a snackbar toaster and hit ESC, the toast stays open.

Expected Behavior 🤔

When you keyboard tab-navigate to a snackbar toaster and hit ESC, the toast should close, and focus should return back to the element that opened the toast. While there are no specific aria guidelines for toasters, a modal dialog is probably the closest example: https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/alertdialog.html We’ve also been given this feedback from our users.

Steps to Reproduce 🕹

Steps:

Open up https://material-ui.com/components/snackbars/#simple-snackbars
Using keyboard only, navigate to “Open Simple Snackbar” button and activate it with space or enter keys.
Hit tab key once to tab navigate to the toast that appears.
Hit the ESC key.
Toast remains open

Context 🔦

Our keyboard-only users expect to be able to close modals/toasters/pop-overs using the ESC key.

Your Environment 🌎

Tech	Version
Material-UI	Latest as per docs

Issue Analytics

State:
Created 3 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

1reaction

eps1loncommented, Nov 23, 2021

Our keyboard-only users expect to be able to close modals/toasters/pop-overs using the ESC key.

I think it’s reasonable to extend WCAG 1.4.13 to Snackbars i.e. add an affordance to dismiss Snackbar without moving mouse or keyboard cursor. Technically 1.4.13 generally doesn’t cover Snackbar since Snackbar can be shown via keyboard interaction (or any other interaction other than hover or focus). But since it’s visible content that’s not blocking the workflow, it should also not block the screen.

1reaction

ahayes91commented, Aug 25, 2020

On a related note, should the Snackbar be in the tab sequence or should it be portal?

This is not easily answered. Should be a separate issue.

I’ve raised https://github.com/mui-org/material-ui/issues/22354 about focus / tab interactions after playing with it a bit more and scratching my head 🤔 😂