Skip to content

feat(ui-tabs): add roving tabindex and manual activation mode - #2712

Open
aaronshaf wants to merge 1 commit into
instructure:masterfrom
aaronshaf:instui-5181-tabs-roving-tabindex
Open

aaronshaf wants to merge 1 commit into
instructure:masterfrom
aaronshaf:instui-5181-tabs-roving-tabindex

Conversation

@aaronshaf

@aaronshaf aaronshaf commented Sep 8, 2026

Copy link
Copy Markdown
Member

Summary

  • Give the Tabs tablist a proper roving tabindex: exactly one tab has tabindex="0" at a time, tracked per tab node instead of via a Focusable wrapper.
  • Add activationMode="manual", so arrow keys move focus without changing selection until Enter or Space is pressed (for screen readers that reserve arrow keys for their own cursor).
  • Add Home/End support to jump to the first/last enabled tab, and set aria-orientation and aria-selected="false" on unselected tabs to match the WAI-ARIA tabs pattern.

Test plan

  • vitest run --project browser --project node packages/ui-tabs — 61 passed
  • New TabsKeyboard.test.tsx covers arrow/Home/End navigation, manual activation, and roving tabindex placement for both v1 and v2 themes

INSTUI-5181

@aaronshaf
aaronshaf force-pushed the instui-5181-tabs-roving-tabindex branch from 145edff to d3e6c85 Compare September 8, 2026 12:59
Tabs previously gave every unselected tab no tabindex and relied on a
Focusable wrapper to restore focus, so keyboard users tabbing into a
tablist always landed back on the last selected tab rather than
following the roving-tabindex pattern from the WAI-ARIA tabs spec.

Track focus per tab node directly (dropping the Focusable dependency)
and give exactly one tab tabindex="0" at a time: the selected tab by
default, or a separately tracked focused tab when activationMode is
"manual". Manual mode lets arrow keys move focus without changing the
selection until Enter or Space is pressed, for screen readers that
reserve the arrow keys for their own cursor. Also add Home/End support
to jump to the first and last enabled tab, and set aria-orientation
and aria-selected="false" on unselected tabs to match the ARIA tabs
pattern.

INSTUI-5181
@aaronshaf
aaronshaf force-pushed the instui-5181-tabs-roving-tabindex branch from d3e6c85 to 72924e8 Compare September 8, 2026 13:03
@aaronshaf
aaronshaf marked this pull request as ready for review September 8, 2026 18:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant