Declined
Last Updated: 13 Jan 2023 11:52 by ADMIN
eDAD
Created on: 26 Aug 2022 11:30
Category: Kendo UI for Angular
Type: Bug Report
0
Screen reader is not announcing the State of the "page number" buttons whether it is selected or not

Issue description: While navigating through page number buttons Screen reader does not identify which page number is selected. Issue is observed with “Narrator” and “NVDA” as well

Test Environment:

Narrator (Windows 11), NVDA (Version: 2022.1)

Repro steps:

  1. Hit on the link Overview - Grid - Kendo UI for Angular (telerik.com)
  2. Tab navigate to table under “Angular Data Grid Overview”
  3. Run Screen reader
  4. Tab Navigate to page navigation buttons
  5. Observe that Screen reader does not identify which page number is selected

Actual results: While navigating through page number buttons Screen reader does not identify which page number is selected. Issue is observed with “Narrator” and “NVDA” as well

Expected results: While navigating through page number buttons screen reader should identify which page number is selected

Attachments:  Attachments

4 comments
ADMIN
Martin Bechev
Posted on: 13 Jan 2023 11:52

Hi,

Indeed you are right. The aria-current attribute must be present on the currently selected page element.

Generally, we are working on creating common accessibility and keyboard navigation specifications for each component from the suite that must be applied through all Kendo flavors. The primary tool that we are aiming to comply with is axeDevTools. The above aria-current description is part of the specification of the Grid which is going to be applied, hopefully, this year.

Indeed updating the packages according to these specifications is a long-term task. So far we successfully updated some packages from the suite and still trying to fix as many issues as we can. However, the Grid is not reviewed yet, thus accessibility issues might still appear.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

eDAD
Posted on: 06 Jan 2023 20:39

Hi Martin - the issue that's being reported here is that the pagination controls for the grid are styled to convey a selected state, but there this state is not provided programmatically, as can be demonstrated by reviewing the demo you posted.

What's missing here is that the button that is currently active needs to have an aria-current=true to reflect the state it conveys visualy via the "k-selected" class.  This is the fix that's necessary to resolve this issue.

Thanks!

ADMIN
Martin Bechev
Posted on: 02 Sep 2022 10:39

Hi all,

Indeed the mentioned Overview demo is not navigable. Set the navigable option to true in order to enable the built-in keyboard shortcuts of the Grid and pager, and proper announcement of the selected pages. For more details please check this article:

https://www.telerik.com/kendo-angular-ui/components/grid/keyboard-navigation/

As a side note, please next time make sure that the correct component from the right Kendo suite is chosen (Angular, React, Vue, jQuery) before submitting a ticket, as this determines which team will handle it. Thank you.

Regards,
Martin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Amit
Posted on: 01 Sep 2022 14:28

Hi Team , 

 

This is bit urgent for us for fix. Which we can triage for a fix?

 

Regards,

Amit