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

[caroline-ferri]

Bug Description

The ui5-toolbar applies role='toolbar' to the web component. However, the toolbar items are not navigable via arrow keys. This is violates the expectations documented in WCAG Keyboard Interaction and Mozilla Accessibility Toolbar Role.

According to the following resources, a control that uses role="toolbar" should navigate between the inner controls via "Left Arrow" / "Right Arrow" keys if horizontal and "Up Arrow" / "Down Arrow" keys if vertical. Currently, if a toolbar has multiple toolbar items, the user can only navigate to the next item via the "Tab" key.

To align with WCAG requirements, we expect the toolbar items to be navigable via arrow keys. This issue is reproducible in the current Toolbar sample.

Affected Component

ui5-toolbar

Expected Behaviour

Toolbar items should be navigable via arrow keys

Isolated Example

https://js-kh1uvjsa.stackblitz.io

Steps to Reproduce

1. navigate to stackblitz
2. tab to Button 1
3. Try to navigate to Button 2, Button and Button 4 via the arrow keys
   ...

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

2.18.0

Browser

Chrome

Operating System

macOS

Additional Context

This is a customer reported a11y violation.

Organization

SuccessFactors

Declaration

• I’m not disclosing any internal or sensitive information.

[NHristov-sap]

Hi @UI5/ui5-team-ctr-pir ,

Just to follow the process - I saw that there is pending change related to this issue, but please take a look of it after that.

Best Regards,
Nikolay Hristov