Skip to content

[toast] Add focus option to move focus to toast on open#4533

Open
Jihye2ee wants to merge 1 commit intomui:masterfrom
Jihye2ee:fix/toast-undo-keyboard-accessibility
Open

[toast] Add focus option to move focus to toast on open#4533
Jihye2ee wants to merge 1 commit intomui:masterfrom
Jihye2ee:fix/toast-undo-keyboard-accessibility

Conversation

@Jihye2ee
Copy link
Copy Markdown

@Jihye2ee Jihye2ee commented Apr 6, 2026

Summary

Adds a focus option to toastManager.add() that moves focus to the toast when it opens. This enables keyboard and screen reader users to reach interactive actions (e.g. Undo) without relying on the F6 shortcut.

Closes #4253

Changes

  • useToastManager.ts — Add focus?: boolean to ToastObject
  • ToastRoot.tsx — On mount, if focus is true: save prevFocusElement, focus the toast, pause timers, and set focused state (same pattern as F6 in ToastViewport)
  • ToastRoot.test.tsx — Add tests for focus behavior
  • Undo demo — Apply focus: true to demonstrate the pattern

How it works

1. toastManager.add({ focus: true, ... })
2. Toast mounts → useEffect saves prevFocusElement, focuses the toast
3. Viewport's handleFocus pauses timers (existing infra)
4. User interacts (Undo/Close) or tabs away → timers resume (existing infra)
5. On close → handleFocusManagement restores focus (existing infra)

When focus is not set, behavior is identical to before — no breaking changes.

Screenshot

Tab → Undo → Click Tab → Undo → Tab out → auto-dismiss

When focus is true, the toast receives focus on mount, pauses
timers, and restores focus to the previously focused element
when closed. This enables keyboard users to reach action buttons
(e.g. Undo) without relying on the F6 shortcut.

Closes mui#4253
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Apr 6, 2026

commit: 3d20398

@mui-bot
Copy link
Copy Markdown

mui-bot commented Apr 6, 2026

Bundle size report

Bundle Parsed size Gzip size
@base-ui/react 🔺+171B(+0.04%) 🔺+45B(+0.03%)

Details of bundle changes


Check out the code infra dashboard for more information about this PR.

@netlify
Copy link
Copy Markdown

netlify bot commented Apr 6, 2026

Deploy Preview for base-ui ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 3d20398
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/69d3663eaf07d0000915c474
😎 Deploy Preview https://deploy-preview-4533--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@Jihye2ee Jihye2ee marked this pull request as ready for review April 6, 2026 08:07
@zannager zannager added the component: toast Changes related to the toast component. label Apr 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component: toast Changes related to the toast component.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

3 participants