mui / mui/base-ui

[toast] accessibility: Undo action can't be reached in time with a keyboard or screen reader, or its timing adjusted

Open
#4,253 3 comments 0 reactions 1 assignee Claimed by @aarongarciah View on GitHub
accessibility component: toast docs
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

## Current behavior

The "Undo action" Toast example triggers an important Toast with an "undo" button inside it. **Keyboard and screen reader users can't undo the action because focus doesn't move to the toast notification**.

This should be high priority to fix as it potentially blocks keyboard and screen reader users from being able to complete important actions.

Potential WCAG failures:
* See [Understanding WCAG 2.2 Success Criterion 2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html)
* See [Understanding WCAG 2.2 Success Criterion 2.2.1 Timing Adjustable](https://www.w3.org/WAI/WCAG21/Understanding/timing-adjustable.html)

## Expected behavior

Keyboard focus either needs to move to these Toast notifications or the toast needs to be the next tab stop, and the toast should persist until dismissed or focus moves back out of them.

## Reproducible example

To replicate

1. Navigate to [Toast: Undo action example](https://base-ui.com/react/components/toast#undo-action)
2. Using only a keyboard, activate the "perform action" button
3. Try to tab to the toast and activate the "Undo" button
4. Note the toast has been loaded at the end of the DOM and disappears before it can be easily reached
5. Repeat the test using a screen reader with keyboard

## Base UI version

v1.2.0

## Which browser are you using?

Chrome

## Which OS are you using?

Mac OS

## Which assistive tech are you using (if applicable)?

Keyboard, VoiceOver

## Additional context

In this case, moving focus to the toast and back to the originating control on close (or near to it, if the originating control no longer exists) would be a good solution. The toast should remain until it has been intentionally dismissed.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.