fix(lab): add tab stops to scrollable regions - #4691
Open
AKnassa wants to merge 1 commit into
Open
Conversation
axe scrollable-region-focusable (serious): overflow containers with no focusable content are unreachable by keyboard. Component fixes: CodeEditor's contenteditable code element gets an explicit tabIndex=0 (read-only editors gain a tab stop, matching native readonly textarea); Schedule's monthly grid gets tabIndex=0 (it already carries role and label). Story fixes: Outline Scroll Spy and Stack Scrollable panes get tabIndex + role=region + aria-label — Stack itself is untouched, a layout primitive should not grow a tab stop by default. Baseline: -6 entries. No changeset (lab + stories). Verified: lab 388/388 and core 5786/5786 suites, storybook typecheck, eslint clean, axe audit zero scrollable violations. Part of facebook#4681.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meta-cla
Bot
added
the
CLA Signed
AKnassa
marked this pull request as ready for review
August 4, 2026 01:48
AKnassa
requested review from
cixzhang,
ejhammond and
imdreamrunner
as code owners
August 4, 2026 01:48
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
1 participant
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.
Part of #4681 (weekly a11y scan). Clears all 6
scrollable-region-focusablebaseline entries (CodeEditor, CodeEditorPerf x2, Outline, Schedule, Stack).What this does
Scrollable containers with no focusable content are unreachable for keyboard users. Two component fixes in lab and two story-level fixes make each flagged scroll region keyboard-reachable.
What changed
packages/lab): explicittabIndex={0}on the contenteditable code element. Editable editors already had an effective tab stop (this just materializes the attribute axe inspects); read-only editors genuinely gain one, matching native readonly<textarea>behavior, so keyboard users can reach and scroll them. That read-only change is intentional and pinned by a test. Covers all three CodeEditor/CodeEditorPerf entries.packages/lab):tabIndex={0}on the month grid, which already carriesrole="grid",aria-readonlyand a label. The grid has no interactive descendants today; if day cells or event pills ever become interactive, this should convert to a roving-tabindex pattern (recorded here so the constraint is known).tabIndex,role="region"and anaria-labelat the story level. Stack itself is untouched on purpose: a generic layout primitive should not grow a tab stop by default, and that API call belongs to maintainers if ever wanted.Note on Schedule::Monthly
The violation does not reproduce at the local audit viewport (it fires on CI's). The unit test pins the attribute mechanism either way; the weekly scan will confirm on CI.
Verification
Full lab suite 388/388 and full core suite 5786/5786, storybook typecheck, eslint clean, and the repo's axe audit with
--fail-on-new: zero scrollable-region-focusable occurrences across all five components' stories.