feat(ui5-toolbar): implement WAI-ARIA toolbar keyboard navigation#13622
Open
plamenivanov91 wants to merge 12 commits into
Open
feat(ui5-toolbar): implement WAI-ARIA toolbar keyboard navigation#13622plamenivanov91 wants to merge 12 commits into
plamenivanov91 wants to merge 12 commits into
Conversation
…2 (prevent page scroll on unhandled up/down)
Refactor toolbar keyboard handling around a single toolbar-owned flow. - centralize arrow and tab navigation in Toolbar - add movement-info and roving-tabindex hooks to ToolbarItemBase - adapt grouped ToolbarItem content through shared internal target logic - restore caret-aware movement for Input and TextArea - apply forced tabindex to toolbar button/select templates - remove redundant select-owned keyboard handling - add Toolbar regressions for checkbox groups and overflow-button exit
Collaborator
|
🚀 Deployed on https://pr-13622--ui5-webcomponents-preview.netlify.app |
- Skip focusin/keydown handling when focus is inside the open overflow popover, preventing arrow-nav logic from firing inside the popover - Skip forcedTabIndex on overflowed ToolbarButton/ToolbarSelect so overflow items keep their natural tab order - Fix Tab-exit containment check to use shadow-DOM-aware walk (_isNodeInsideElement) instead of contains/shadowRoot.contains - Remove own-fallback movement info path from ToolbarItem; items without _itemNavigation or getToolbarMovementInfo are now treated as single tab stops - Drop dead WeakMap tab-index restoration machinery (no longer needed now that overflow items manage their own tab order)
…ling when up/down keys are pressed
dobrinyonkov
reviewed
Jun 9, 2026
dobrinyonkov
reviewed
Jun 9, 2026
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.
Replace Tab-through-every-item with a proper roving tabIndex +
arrow-key pattern per the WAI-ARIA toolbar pattern.
Keyboard handling
handles this naturally because only one item has tabIndex=0
handling are suppressed when the popover is open, leaving the
popover's natural Tab order intact
Roving tabIndex
overflow layout changes
focus moves to the last navigable item via focusForToolbarNavigation
overflow popover
ToolbarItemBase — hook API for complex items
New overridable methods (all no-ops in base):
toolbar knows when a Left/Right press is at an internal boundary
ToolbarItem — three navigation paths
internally (e.g. SegmentedButton) are detected via duck-typing and
their currentIndex/itemCount is read directly
that want to expose caret/selection position as boundary info
(radio button groups, checkbox groups) are treated as a navigable
group using _getCurrentNavigationState — no API needed on children
Input / TextArea — caret-aware boundary
Both implement getToolbarMovementInfo() using selectionStart and
value.length so Left/Right only exits to the next toolbar item once
the caret reaches the start or end of the text.
Templates
ToolbarButtonTemplate and ToolbarSelectTemplate: removed tabIndex JSX
prop — setting it on the UI5 host broke F6Navigation's focus traversal.
Docs
Tests (Toolbar.cy.tsx)
ToolbarButton directly instead of shadow .ui5-tb-item wrapper
JIRA: BGSOFUIPIRIN-7018
Fixes: #12945