[DataGridPro] column resize handles are not keyboard accessible

[petermikitsh]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

• Mouse must be used to resize columns

Expected Behavior 🤔

• Keyboard tab focus column resizers
• Left/right arrow keys shift column size some small amount, say, 5px

Steps to Reproduce 🕹

Steps:

1. Go to https://mui.com/components/data-grid/#commercial-version
2. Observe resize behavior needing mouse

Context 🔦

This is partially an accessibility question, and may not be a bug.

I'm not an a11y expert, but my understanding is all controls should at least be keyboard focusable.

But the broader question remains: what should the acceptance criteria be for column resizers and a11y? It may be possible this current implementation is considered accessible, and there is no bug.

[oliviertassinari]

@petermikitsh Do you have an example of a data grid that supports it?

I personally think that we should close as "won't fix". From my perspective, if an end-user needs a screenreader, he doesn't care about how the cells are layout, the SR will read the content for him. I also have no idea how the UX could actually be made to be great.

[petermikitsh]

I took a look at a few other implementations. None supported keyboard-driven column resizing.

• DevExtreme: https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/ColumnResizing/jQuery/Light/
• Kendo: https://www.telerik.com/kendo-react-ui/components/grid/columns/resizing/
• Ignite: https://www.igniteui.com/grid/column-resizing
• AG Grid: https://ag-grid.com/react-data-grid/column-sizing/

[oliviertassinari]

I have added the waiting for users upvotes tag. I'm closing the issue as we are not sure enough people are looking for such capability. So please upvote this issue if you are. We will prioritize our effort based on the number of upvotes.

[httpete]

@petermikitsh Do you have an example of a data grid that supports it?

I personally think that we should close as "won't fix". From my perspective, if an end-user needs a screenreader, he doesn't care about how the cells are layout, the SR will read the content for him. I also have no idea how the UX could actually be made to be great.

I do - ag-grid does this properly. Keyboard navigation isn't just for people with disabilities, it is for keyboard only users.

https://www.ag-grid.com/react-data-grid/keyboard-navigation/

I have another ticket in, discussing this:

If you TAB into a grid, it should start by focusing the first cell, then the menu button (to allow for keyboard navigation into the menu items) and then tab focuses the next cell . SHIFT+TAB goes the opposite way.

If a user is focused on a cell (enter press goes through sort states like it does today) CTRL+RIGHT / LEFT arrow will resize the column in small increments. Ag-grid doesn't do this part, but they provide for an extension point with the "suppressHeaderKeyboardEvent". This is nice because, the grid will work the way I suggest by default, but if any custom behavior is required (and the ctrl+arrow functions are custom) the dev can provide their own pure function that returns true or false, allowing for custom behavior. I was able to do this with Ag-grid pretty quickly. I think mui-x should follow this idea - providing a WCAG out of the box keyboard a11y, and an extension point for other cases that can't be predicted.

[oliviertassinari]

@httpete I feel like we are going on a tangent. This issue is specifically about keyboard support for column resizing. For generic keyboard support, please refer to https://www.w3.org/TR/wai-aria-practices/#dataGrid. I would encourage to have a dive into the content as I feel they argue for a different approach than you do. They encourage the grid to be a single step in the tab sequence (what we have implemented, not multiple ones).

As an end-user, I would personally expect Command + Arrow Left, to move me to my previous page in the history, and Control + Arrow Left to move to my next window workspace. I'm on macOS

I think that we can use #3015 to make sure we allow developers to implement a custom logic on their own.
And keep this one for the default support (currently won't fix).

[httpete]

I feel it all comes under the discussion of how keyboard a11y should work.
ctrl+arrow left does not navigate on my system, ALT+Arrow left does.
I see your point about conflating tab behavior, and if you want to slice that way I understand. The bare minimum would be to allow the user to use arrow key to highlight the column (enter to sort) and then ctrl+left / right to resize in increments.