Skip to content

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

@grace-snow

Description

@grace-snow

Bug report

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:

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
  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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    accessibilitya11ycomponent: toastChanges related to the toast component.docsImprovements or additions to the documentation.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions