This is a migrated thread and some comments may be shown as answers.

Grid Keyboard Navigation for Sorting, Filtering and Paging

1 Answer 53 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
Iron
Iron
Veteran
David asked on 08 Dec 2020, 08:05 AM

Hi,

We are using a KendoReact Grid with pageable and sortable options enabled, and columnMenus for specific columns requiring filtering. We are using the columnMenu approach because we are using the GridColumnMenuCheckboxFilter as recommended here: https://www.telerik.com/kendo-react-ui/components/grid/filtering/

I have some questions regarding keyboard navigation:

  1. The column headers are keyboard-focusable by default and allow for navigation using the Tab key and sorting using the Enter key, however there is no visual indication of which heading has focus. Is there a style that can be set to achieve this?
  2. The paging controls are keyboard-focusable by default and allow for navigation using the Tab key and paging using the Enter key, however there is no visual indication of which control has focus. Is there a style that can be set to achieve this?
  3. We used css to relocate the paging controls to the top of the grid, but they still come after the column headers in keyboard navigation order. Is there anything that can be done to change this?
  4. The column menus are not keyboard-focusable by default, is there anything that can be done to change this?

Kind regards,

David

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 08 Dec 2020, 10:20 AM

Hello, David,

We are working on a large task that adds keyboard navigation logic + styles to the Grid and its elements.

The task is currently on a pull request and it is already in a testing phase.

It is planned for the next release (min January).

Once it is ready we will have official demos showcasing and it will be set up and how it is expected to work.

I have made a public item for this task, and we will update it once the feature is live:

https://github.com/telerik/kendo-react/issues/802

If there are still issues after the new feature is live, please let me know and we will discuss them with the team.

Regards,
Stefan
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/.

David
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 02 Jul 2021, 11:40 AM

Hi Stefan,

I still have some issues with the Grid keyboard navigation logic and styles after the implementation of the new 'navigatable' property:
* The paging controls are keyboard-focusable and allow for navigation using the Tab key and paging using the Enter key, however there is no visual indication of which control has focus. Is there a style that can be set to achieve this?
* We used css to relocate the paging controls to the top of the grid, but they still come after the column headers in keyboard navigation order. Is there anything that can be done to change this?
* The column menus are not keyboard-focusable, is there anything that can be done to change this?
Vladimir Iliev
Telerik team
commented on 06 Jul 2021, 11:28 AM

Please check the answers of your questions below:

1) All Kendo React themes contains styles for the focused state of the Grid pager - please check the screenshot below:

2) I would suggest to try using the Pager component and rend it before the Grid in order to have the correct tab position:

- https://www.telerik.com/kendo-react-ui-develop/components/datatools/pager/

3) I would suggest to share this idea at Kendo React FeedbackPortal. We constantly evaluate the ideas there and include the best ones in next Kendo React releases.

Tags
General Discussions
Asked by
David
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Stefan
Telerik team
Share this question
or