feat(ui5-toolbar): implement WAI-ARIA toolbar keyboard navigation#13622
Draft
plamenivanov91 wants to merge 10 commits into
Draft
feat(ui5-toolbar): implement WAI-ARIA toolbar keyboard navigation#13622plamenivanov91 wants to merge 10 commits into
plamenivanov91 wants to merge 10 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
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
element in the document (shadow-DOM-aware traversal)
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
internal arrow traversal
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
Minor
Fixes: #12945
JIRA: BGSOFUIPIRIN-7018