Grid Default Filters Skipped in Tab Order when navigatable={true}

[Noah]

Version:
@progress/kendo-react-grid: 9.4.1

When using the nagivatable and filterable props on KendoReact's Grid component, the automatically rendered, the input elements for default filter cells are no longer in the tab order.  However, the elements for custom filter cells are in the tab order, as expected.

Please see this stackblitz demo: 
https://stackblitz.com/edit/react-ts-wzme7qjm?file=App.tsx
https://react-ts-wzme7qjm.stackblitz.io

This behavior appears to also be the case on KendoReact 10.0.0.

Is there a known work-around to ensure that the Input components for automatically rendered, default filter cells, are in the tab-order and are tab-focusable?  If not, is this a known issue, and a plan to resolve this?

[Yanko]

Hi, Noah,

The behavior you're experiencing with the navigatable property in KendoReact Grid, where default filter cells are not included in the tab order, is expected. When navigatable is enabled, it establishes a tab trap for the filterRow, requiring the use of arrow keys for navigation instead of the default tab order. This feature is designed to improve keyboard navigation within the grid.

Known Issue and Resolution Plan

• This behavior is not considered a bug, but rather a feature of the navigatable property. Therefore, there isn't a specific plan to change this behavior in future updates as it aligns with the intended functionality of enhancing keyboard navigation.

Workarounds

If you want to include default filter cells in the tab order, consider the following workarounds:

1. Custom Filter Cells: Create custom filter cells and explicitly set their tabIndex. This allows you to manage their focus behavior more directly.

2. Disable Navigatable: If maintaining the default tab order is more important than keyboard navigation within the grid, you can disable the navigatable property. This will restore the default tab order.

If you have further questions or need additional assistance, feel free to ask!

Regards,
Yanko
Progress Telerik

[Noah]

Thank you for your response.  Unfortunately, disabling navigatable is not an option for our use-case.  Can you elaborate as to why it is expected behavior that the control elements in custom filter cells, even without explicitly defined tab-indexes, are tab focusable, but not the control elements in default rendered filter cells? 

This causes a pretty clear inconsistency in the filter row, which to me, seems like a very bad thing and not an enhancement of any sort.  I would expect either all of the filter control elements to be tab focusable, or for none of them to be.  Is there some advantage of making the custom filter controls tab focusable but not the default filter controls, that I am not aware of?

[Yanko]

Hi, Noah,

I further inspected the keyboard navigation of other Kendo/Telerik UI products and fully agree with you that there is room for improvement in KendoReact. Therefore I will contact our Accessibility team to discuss and reconsider the tab order and the way the keyboard navigation works. I appreciate your feedback, it is valuable for us as it helps us gradually improve over time.

Regards,
Yanko
Progress Telerik

[Yanko]

Based on your feedback and on an internal discussion with the team, I logged an enhancement item for the Focus trap of the filter row in the Grid, in our GitHub repo, where you can subscribe to get notified with status updates:

• https://github.com/telerik/kendo-react/issues/3003

[Noah]

Hi Yanko,
Thank you for taking another look at this.  If there's any further information I can provide, or if I can be of any assistance, please let me know!

-Noah