Declined
Last Updated: 27 Jun 2023 08:26 by ADMIN
eDAD
Created on: 20 Jun 2023 14:05
Category: UI for ASP.NET MVC
Type: Bug Report
0
Accessibility bug-While using Tab navigation, keyboard focus is not moving to the filter buttons.

Test Environment:

OS Version: 22H2 OS Build 22621.1702

Edge Version: Edge(Chromium) Version 114.0.1823.37 (Official build) (64-bit)

 

Repro-Steps:

  1. Open  ASP.NET MVC Grid Web API Binding Demo | Telerik UI for ASP.NET MVC with valid credentials in Edge browser.
  2. Navigate through the page using Tab key till filter buttons.
  3. Run Tab stops and observe the issue whether focus is moving to the filter buttons or not.

Actual Result:
While navigating through the page, the Tab focus is not moving to the filter buttons.

Expected Result:
While navigating through the page, the Tab focus should move to the filter buttons.

User Impact:
Users with motor impairment and who rely on keyboard will face difficulties if the tab focus is not moving to the filter buttons.
1 comment
ADMIN
Aleksandar
Posted on: 27 Jun 2023 08:26

Hello,

The Grid supports its keyboard navigation functionality through the Navigatable() method. As documented, when enabled, you can initially select a row or cell and then move within the Grid by using the Arrow keys. You can refer to the Keyboard Navigation Demo for further details on supported keyboard shortcuts, listed underneath the demo description. 

That said, in the linked demo the Navigatable option is not enabled, thus the observed behavior is expected. If you run the Keyboard Navigation Demo, where the Navigatable option is enabled after focusing the header row you can navigate with the arrow keys through the header cells and press Alt+Down to open the Filter Menu. Use Tab to navigate through the Filter Menu items, as documented. Here is a screencast demonstrating this.

On a side note we distribute a WAI-ARIA and Keyboard Navigation Spec npm package that  contains the WAI-ARIA and Keyboard Navigation spec for the UI suites in the Progress Web Components and Tools division: Kendo UI for Angular, Kendo UI for jQuery, Kendo React, Kendo UI for Vue, Telerik UI for Blazor, Telerik UI for ASP.NET Core (Kendo jQuery based), and Telerik UI for ASP.NET MVC (Kendo jQuery based). Once you get the package follow the instructions for generating WAI-ARIA specification and keyboard navigation specification for complete details, per component and per version, on the implemented accessibility specification and keyboard navigation options.

Feel free to get back to me in case you have additional questions.

Regards,
Aleksandar
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.