fix(a11y): restore focus after dialog opened from switch#1584
Open
binrogithub wants to merge 1 commit into
Open
fix(a11y): restore focus after dialog opened from switch#1584binrogithub wants to merge 1 commit into
binrogithub wants to merge 1 commit into
Conversation
…1568) When a Dialog is opened from a Switch inside a Row, focus was not returned to the Switch after the Dialog closed. Two issues: 1. Switch didn't explicitly focus itself on click before calling onChange, so document.activeElement could be wrong when the Dialog captured the trigger element. 2. FocusTrap remained active during the dialog closing animation, causing react-focus-lock to steal focus back after triggerEl.focus() fired in the onDestroy callback. Fix by ensuring Switch focuses itself on click, disabling FocusTrap when the dialog is closing, and making returnFocusOnDeactivate explicitly false so DialogRoot.onDestroy is the single source of truth for focus restoration. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #1568 — Dialog does not return focus to the trigger element when opened from a Switch inside Row.
Root cause: Two interacting issues:
onChange, sodocument.activeElementcould be wrong when the Dialog captured the trigger element.react-focus-lockto steal focus back aftertriggerEl.focus()fired in theonDestroycallback.Fix:
switch-component.tsx: Addede.currentTarget.focus()beforehandleChange()in theonClickhandler, ensuringdocument.activeElementis the Switch whenonChangefires synchronously.focus-trap.tsx: AddedreturnFocusOnDeactivateprop that maps toreact-focus-lock'sreturnFocusprop, making focus restoration behavior explicit and configurable.dialog.tsx: PassedreturnFocusOnDeactivate={false}anddisabled={isClosing}to FocusTrap. This disables the focus trap when the dialog starts closing (preventingreact-focus-lockfrom stealing focus back) and makes it explicit thatDialogRoot.onDestroyis the single source of truth for focus restoration.Test plan
returns focus to the trigger button after alert closes(baseline)returns focus to the switch inside a row after confirm closes(exact bug scenario, pointer interaction)returns focus to the switch after alert closes (keyboard activation)(keyboard interaction)useRestoreFocus, not affectedfocusTriggerElement(), not affected🤖 Generated with Claude Code