Grid Keyboard Navigation for Sorting, Filtering and Paging

[David]

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

[Stefan]

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

[David]

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]

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.