Repository navigation
fix(focus region): leave Ctrl+Tab and Meta+Tab to the page - #11247
Merged
Merged
Conversation
…tate the chorded Tab rule Dialog FR7 and the Popover Tab row state that Tab and Shift+Tab wrap with or without Alt (Option), and that Tab chorded with Ctrl or Meta passes through to the browser. The tests add Alt+Shift+Tab and plain Tab and Shift+Tab at either end. The changeset credits both authors.
cixzhang
requested review from
imdreamrunner and
josephfarina
as code owners
November 11, 2026 14:21
meta-cla
Bot
added
the
CLA Signed
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
AI review status for this pull request.
|
Contributor
Author
|
/approve-spec 0bd5bf4 |
cixzhang
added
ci:run
![astracat-bot[bot]](https://avatars.githubusercontent.com/in/4796231?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Approved pending CI: a CI run on this head is still in progress.
The focus region now leaves Ctrl+Tab and Meta+Tab to the browser and the page at the first and last controls of a modal or Popover, while Tab, Shift+Tab and Alt+Tab still wrap. The new test fails against main's hook and passes here, browser checks on the Dialog and Popover stories show the same, and the Dialog FR7 and Popover wording carries an engineering owner's spec approval for this head. No blocking findings.
Contributor
PR Analysis Report🔎 Preview ·
|
| Component | Size | LoC |
|---|---|---|
| Popover | 95.1 kB (+19 B) · 14.3 kB CSS (0) | — |
| ChatComposerTokenElement | 80.2 kB (+18 B) · 11.3 kB CSS (0) | — |
| BaseTypeahead | 76.3 kB (+17 B) · 11.0 kB CSS (0) | — |
47 more components
| Component | Size | LoC |
|---|---|---|
| ChatComposer | 82.6 kB (+17 B) · 12.1 kB CSS (0) | — |
| ChatComposerInput | 80.2 kB (+17 B) · 11.3 kB CSS (0) | — |
| lab/ChatReactionBar | 111.5 kB (+17 B) · 1.1 kB CSS (0) | — |
| ComplexSelector | 75.5 kB (+16 B) · 11.9 kB CSS (0) | — |
| DropdownMenu | 101.8 kB (+16 B) · 17.6 kB CSS (0) | — |
| MultiSelector | 99.3 kB (+16 B) · 16.9 kB CSS (0) | — |
| SideNavHeading | 80.2 kB (+16 B) · 11.3 kB CSS (0) | — |
| BreadcrumbItem | 89.4 kB (+15 B) · 12.1 kB CSS (0) | — |
| MoreMenu | 102.0 kB (+15 B) · 17.6 kB CSS (0) | — |
| SideNav | 118.0 kB (+15 B) · 11.4 kB CSS (0) | — |
| TabMenu | 76.4 kB (+15 B) · 11.2 kB CSS (0) | — |
| TopNavHeading | 79.7 kB (+15 B) · 11.3 kB CSS (0) | — |
| TopNavMenu | 79.1 kB (+15 B) · 11.3 kB CSS (0) | — |
| lab/Comments | 358.3 kB (+15 B) · 2.5 kB CSS (0) | — |
| AlertDialog | 108.9 kB (+14 B) · 14.6 kB CSS (0) | — |
| Lightbox | 125.8 kB (+14 B) · 10.6 kB CSS (0) | — |
| MobileNav | 73.7 kB (+14 B) · 10.6 kB CSS (0) | — |
| TopNav | 75.4 kB (+14 B) · 11.0 kB CSS (0) | — |
| TopNavMegaMenu | 74.1 kB (+14 B) · 11.9 kB CSS (0) | — |
| lab/CommentComposer | 156.1 kB (+14 B) · 1.9 kB CSS (0) | — |
| lab/TourStep | 101.4 kB (+14 B) · 590 B CSS (0) | — |
| lab/TransferListSelector | 114.1 kB (+14 B) · 1.4 kB CSS (0) | — |
| richtext/RichTextEditorToolbar | 284.0 kB (+14 B) · 454 B CSS (0) | — |
| CommandPalette | 75.0 kB (+13 B) · 12.7 kB CSS (0) | — |
| DateInput | 192.4 kB (+13 B) · 17.1 kB CSS (0) | — |
| Pagination | 115.0 kB (+13 B) · 17.8 kB CSS (0) | — |
| Selector | 104.8 kB (+13 B) · 17.5 kB CSS (0) | — |
| SideNavItem | 74.9 kB (+13 B) · 11.2 kB CSS (0) | — |
| Typeahead | 85.5 kB (+13 B) · 12.5 kB CSS (0) | — |
| Drawer | 52.5 kB (+12 B) · 8.3 kB CSS (0) | — |
| DateTimeInput | 214.6 kB (+11 B) · 18.8 kB CSS (0) | — |
| lab/ChatEmojiPicker | 110.3 kB (+11 B) · 773 B CSS (0) | — |
| DateRangeInput | 97.1 kB (+9 B) · 12.5 kB CSS (0) | — |
| Dialog | 24.9 kB (+9 B) · 6.9 kB CSS (0) | — |
| AppShell | 94.9 kB (+8 B) · 13.5 kB CSS (0) | — |
| Markdown | 192.9 kB (+8 B) · 20.8 kB CSS (0) | — |
| Tokenizer | 101.2 kB (+8 B) · 19.2 kB CSS (0) | — |
| BottomSheet | 69.4 kB (+6 B) · 7.7 kB CSS (0) | — |
| PowerSearch | 298.1 kB (+6 B) · 24.5 kB CSS (0) | — |
| Table | 129.8 kB (+6 B) · 18.4 kB CSS (0) | — |
| TimeInput | 167.2 kB (+6 B) · 16.1 kB CSS (0) | — |
| lab/CommentThread | 351.5 kB (+6 B) · 2.4 kB CSS (0) | — |
| TableHeaderCell | 113.5 kB (+4 B) · 17.7 kB CSS (0) | — |
| ContextMenu | 112.7 kB (+3 B) · 17.5 kB CSS (0) | — |
| TableCell | 113.9 kB (+2 B) · 18.0 kB CSS (0) | — |
| BottomSheetSwitcher | 18.6 kB (0) · 3.4 kB CSS (0) | — |
| DropdownMenuSubMenu | 72.6 kB (0) · 9.7 kB CSS (0) | — |
Package size: @astryxdesign/core 7.34 MB packed (+248 B); no new dependencies.
Not run on this PR: add ci:run-visual or ci:run-rtl to run them.
Generated by PR Enrichment workflow | View full report
cixzhang
marked this pull request as draft
November 11, 2026 15:06
cixzhang
marked this pull request as ready for review
November 11, 2026 15:06
This branch was successfully deployed
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.
User impact
Problem and solution fit
component:DialogFR7: the region keeps focus inside the modal. Ctrl+Tab and Meta+Tab do not move focus, so they are not the region's.The fix is an early return in
useFocusRegionContainment's Tab handler forctrlKeyormetaKey, as the records now state.Expected behavior and authority
component:DialogFR7, now: "Tab and Shift+Tab wrap with or without Alt (Option), since Safari moves focus on Option+Tab; Tab chorded with Ctrl or Meta passes through to the browser."component:Popover's Tab row mirrors it, where Popover's trap applies.Smallest restoration
hooks/useFocusTrap.ts: a 6-line early return.useFocusTrap.test.tsx, "useFocusTrap chorded Tab"):[fix]Changeset.The fix and its first test are vjeux's (
fix/focus-trap-chorded-tab), cherry-picked with authorship kept. This PR adds the Alt+Shift+Tab and plain-Tab cases and the records. It builds onmainrather than on the open focus-trap drafts #11156 and #11121, which will mergemainand resolve a small conflict.Evidence
main'suseFocusTrap.ts, "leaves Ctrl+Tab and Meta+Tab at either end to the browser" fails. The Alt and plain-Tab cases pass onmainand with the fix, as guards.useFocusTrap, Dialog and Popover suites: 344 passed.Scope
Writing rubric results
Run over the Dialog FR7 sentence, its verification row, and the Popover Tab row.
Co-authored-by: Christopher Chedeau vjeuxx@gmail.com
(Posted by Cindy's agent on her behalf.)