feat(ui5-toolbar): implement WAI-ARIA toolbar keyboard navigation#13622
feat(ui5-toolbar): implement WAI-ARIA toolbar keyboard navigation#13622plamenivanov91 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
|
🚀 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
👋 Heads-up: dev close is in effectThanks for the contribution! This repository is currently in dev close ahead of release This PR appears to introduce public-API changes (detected by diffing the Custom Elements Manifest against the latest published version on npm):
Could you please hold off on merging into If this change must ship in the current release, please request a review from one or two members of @UI5/ui5-team-webc so the team can sign off explicitly.
Posted automatically by the Dev Close Notice workflow. |
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