NVDA disables arrow keys keyboard navigation shortcut

[zstoyanova9]

Description

When the NVDA screen reader is turned on, the default arrow keys keyboard navigation shortcut stops working properly and the items in the popup of the DropDownButton cannot be navigated.

Steps To Reproduce

1. Open the following StackBlitz example - https://stackblitz.com/edit/angular-j6klficc
2. Turn on the NVDA screen reader.
3. Focus the component and open its popup.
4. Try to navigate through the items using the arrow keys.

Screenshots or video

chrome_QPUCmp81Es.mp4

Actual Behavior

The items in the DropDownButton popup cannot be navigated with the arrow keys when NVDA is turned on.

Expected Behavior

The NVDA screen reader should not affect the default behavior of the arrow keys keyboard navigation shortcut of the DropDownButton.

Last working version of the Kendo UI for Angular package (if regression).

v16.0.0

Example with v16.0.0 - https://stackblitz.com/edit/angular-9tjqbf

[mbechev]

The issue is also valid for the Splitter component when focusing the resizer and trying to resize the panes using the arrows:

The panes cannot be resized using the arrow keys when NVDA is enabled.

[dtopalov]

The observed behavior is expected and NVDA-specific for both the DropDownButton and Splitter components. The Splitter case is related to the innate assistive technologies behavior to provide their own arrow keys behavior. Further details and a possible solution, are available in the following KB article:

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/general-keyboard-navigation-screenreaders

As for the DropDownButton, the observed behavior is caused by the fact that in a past revision of the accessibility of the component, we decided that the previously implemented Menu Button pattern - https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/, was too restrictive, and assuming the component is used for certain purposes only, which proved to be incorrect. Thus, we decided to change our a11y implementation to follow the simpler and more generic Disclosure Pattern, not imposing a specific role of the Popup content:

https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/

The reason for the observed behavior when NVDA is on is again their own interpretation of the content and usage of the arrow keys (the built-in DropDownButton KB navigation cannot kick-in due to NVDA hijacking the arrow buttons). To avoid this, users can switch the NVDA's Focus mode so that the same DropDownButton behavior as when NVDA is not turned on is achieved:

https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts#:~:text=Focus%20Mode%3A%20Focus%20mode%20is,them%20using%20Insert%20%2B%20Space%20Bar.