Skip to content

feat(ui5-toolbar): implement WCAG-compliant keyboard navigation#13231

Open
plamenivanov91 wants to merge 4 commits intomainfrom
tb-wacg-arrow-nav
Open

feat(ui5-toolbar): implement WCAG-compliant keyboard navigation#13231
plamenivanov91 wants to merge 4 commits intomainfrom
tb-wacg-arrow-nav

Conversation

@plamenivanov91
Copy link
Contributor

@plamenivanov91 plamenivanov91 commented Mar 9, 2026

Add comprehensive keyboard navigation to toolbar following WCAG toolbar pattern:

  • Arrow keys (Left/Right/Up/Down) navigate between toolbar items
  • Home/End jump to first/last item
  • Tab/Shift+Tab navigate within toolbar, exit at edges
  • Roving tabindex pattern
  • Focus entry: remembers last focused item on re-entry, defaults to first item on initial entry
  • Proper handling of complex nested controls (ToolbarSelect)

Resolves focus loss when pressing Shift+Tab on complex toolbar children. Ensures all toolbar items are reachable via keyboard navigation.

Optimizations:

  • Extracted _focusItem() helper to reduce code duplication
  • Simplified Tab/Shift+Tab navigation logic

Fixes: #12945

Add comprehensive keyboard navigation to toolbar following WCAG toolbar pattern:
- Arrow keys (Left/Right/Up/Down) navigate between toolbar items
- Home/End jump to first/last item
- Tab/Shift+Tab navigate within toolbar, exit at edges
- Roving tabindex pattern (single tab stop, toolbar is one stop)
- Focus entry: remembers last focused item on re-entry, defaults to first item on initial entry
- Proper handling of complex nested controls (ToolbarSelect)

Resolves focus loss when pressing Shift+Tab on complex toolbar children.
Ensures all toolbar items are reachable via keyboard navigation.

Optimizations:
- Extracted _focusItem() helper to reduce code duplication
- Simplified Tab/Shift+Tab navigation logic

Fixes: #12945
@ui5-webcomponents-bot
Copy link
Collaborator

ui5-webcomponents-bot commented Mar 9, 2026

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview March 9, 2026 17:11 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview March 9, 2026 17:33 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview March 10, 2026 13:23 Inactive
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.

[ui5-toolbar][A11y]: toolbar keyboard interaction does not align with WCAG requirement

2 participants