[a11y]: DataGrid using EditableCell unexpected behavior after finishing edit using keyboard #5649
Closed
2 tasks done
Labels
Sev 3
Visible or noticeable to users but does not impede functionality. Has a workaround.
type: a11y ♿
Issues not following accessibility standards
type: bug 🐛
Something isn't working
Package
@carbon/ibm-products
Browser
Chrome
Operating System
MacOS
Package version
all
React version
No response
Automated testing tool and ruleset
N/A
Assistive technology
No response
Description
When using the keyboard to navigate and edit cells in the datagrid, I expected the focus/selection to remain on the cell I just edited after using the return key to finish my edit, so that I have a choice of where I want to go next. Instead, upon clicking the return key, the focus is dropped to the cell immediately beneath the cell I just finished editing. This can be disorienting and causes me to have to do extra work to move the focus back to where I actually wanted to go.
The dropdown and checkbox inputs appear to be working as expected. The text, date, and number inputs have the issue as described above.
Per the W3 DataGrid examples for editable cells (see Example 2: Sortable Data Grid With Editable Cells), the focus remains on the currently focused/selected cell until the user explicitly moves it, using the arrows on the keyboard or the mouse.
WCAG 2.1 Violation
Success Criterion 2.4.3 Focus Order
Reproduction/example
https://carbon-for-ibm-products.netlify.app/?path=/story/ibm-products-components-datagrid-editablecell--editable-cell-usage-story&globals=viewport:basic
Steps to reproduce
Use the keyboard arrows to navigate to a text, number, or date cell and spacebar or return key to select and make edits. After using return key to finish editing, the focus is moved to the cell beneath the one that was just edited.
Contrast this with editing a checkbox or dropdown. After clicking return there, the focus remains on the cell that was just edited. This is in line with what's shown in W3 linked above, and I believe it's in line with what users would expect and what's required to pass WCAG Success Criterion 2.4.3 Focus Order.
Code of Conduct
The text was updated successfully, but these errors were encountered: