fix(History): trap the keyboard focus inside the desktop popup - #250
Draft
vladimirfilosof wants to merge 2 commits into
Draft
vladimirfilosof wants to merge 2 commits into
vladimirfilosof wants to merge 2 commits into
Conversation
The desktop popup is rendered in a portal at the end of the chat container, so with
the default non-modal Popup the focus stayed on the trigger button when the popup
opened, and `Tab` walked through the rest of the chat before ever reaching the chat
list. `Shift + Tab` never reached it at all, which left the history unusable from the
keyboard.
Render the popup as a modal dialog instead: the focus moves inside on open, `Tab` and
`Shift + Tab` cycle within the popup, and `Escape` closes it and returns the focus to
the trigger button. The popup reuses the sheet title as its accessible name. Pass
`modal={false}` to keep the previous behaviour, or `initialFocus` to choose the
element focused on open.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Contributor
|
🚀 Prerelease version published! Install this PR version: npm i --save-dev @gravity-ui/aikit@2.20.2-beta.c5ae09a2cb6c7029ac0e61b52d84d93c6200e7aa.0 |
|
Preview is ready. |
Contributor
|
🎭 Component Tests Report is ready. |
`Popup` runs its props through uikit's `filterDOMProps` without the `labelable` option, so an `aria-label` passed to it is dropped before it reaches the floating element, and the dialog ends up nameless. Set the attribute on the element through `floatingRef` instead. Co-Authored-By: Claude Opus 5 <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
2 participants
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.
The chat history popup cannot be reached with the keyboard on desktop. It is rendered in a portal at the end of the chat container, and the underlying uikit
Popupis non-modal by default, so opening the history leaves the focus on the trigger button:Tabwalks through the rest of the chat — the remaining header actions, the message list, the prompt input — before it ever reaches the chat list, andShift + Tabnever reaches it at all.Historynow renders the desktop popup as a modal dialog: the focus moves inside when the popup opens,TabandShift + Tabcycle within it, andEscapecloses it and returns the focus to the trigger button. The popup reuses the sheet title as its accessible name. Passmodal={false}to keep the previous behaviour, or the newinitialFocusprop to choose the element focused on open. The mobile sheet is unchanged.Covered by four component tests: the focus entering the popup, staying inside while tabbing, returning to the trigger on
Escape, and staying on the trigger withmodal={false}.Console: CLOUDFRONT-62526