[data grid] When deleting a row on the Data Grid using keyboard, the focus after deleting should go to the next line

[joserodolfofreitas]

Summary

When we delete one line with the delete button, focus should be moved on the first cell of the next line

Reported by iValua accessibility report.

Steps to reproduce

• Go to https://mui.com/x/react-data-grid/editing/#full-featured-crud
• Navigate to the delete action button on a row using the keyboard
• Input enter on keyboard
• The row is deleted but the Data Grid loses focus.

Caveats

They haven't provided a reproduction case, so I'm guessing the problem is when using action buttons, which is not a direct responsibility of the Data Grid, and if that's the case, how could we solve it?

Search keywords:

[joserodolfofreitas]

@abdermaiza, could you please confirm the steps to reproduce this? Does it indeed involve using the action button?

[abdermaiza]

I confirm, we just need to move the focus on the next line, after deleting the line.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[abdermaiza]

Hello,

Doesn't seem ok, on this URL:
https://deploy-preview-15061--material-ui-x.netlify.app/x/react-data-grid/editing/

The focus is on the edit button instead of the fist cell (Name cell)...

[cherniavskii]

@abdermaiza Hmm, do you expect the focus to move to the first cell?
To me, it seems natural that the focus stays in the same column. Moreover, when there are a lot of columns with horizontal scroll, wouldn't it be strange to scroll all the way to the first cell?
What do you think?

[abdermaiza]

When we delete one line with the delete button, focus should be moved on the first cell of the next line.
This was the request of an accessibility expert who saw the data grid selection component.

[cherniavskii]

I checked the ARIA guide for the Grid pattern, but I couldn't find any info regarding focus after deleting a row. There's only a general keyboard navigation block which doesn't clarify it much:

Source

However, I found this example they provide that uses the same Grid pattern: https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/layout-grids/#ex2_label.

When the row is deleted, the focus moves to the equivalent cell in the next row:

Screen.Recording.2024-10-23.at.14.55.51.mov

This makes me believe that keeping the focus in the same column is technically correct and should be the default behavior.
Are you sure you want a different behavior? We can consider making it configurable.

[abdermaiza]

I agree but this is not what is done in the example here:
https://deploy-preview-15061--material-ui-x.netlify.app/x/react-data-grid/editing/

Because I see that the focus is moved in the edit button of the deleted row... :(

[cherniavskii]

Well, the focus moves to the cell in the same column, and it automatically focuses the first button in the cell 🙂
The demo from the guide I shared above only has one button in the cell, in which case the behavior would be identical for the Data Grid.

[abdermaiza]

Ok, so that's fine, thanks.