Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[a11y]: DataGrid using EditableCell unexpected behavior after finishing edit using keyboard #5649

Closed
2 tasks done
jjennings7 opened this issue Jul 8, 2024 · 0 comments · Fixed by #5744
Closed
2 tasks done
Assignees
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

Comments

@jjennings7
Copy link

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

@jjennings7 jjennings7 added status: needs triage 🕵️‍♀️ type: a11y ♿ Issues not following accessibility standards labels Jul 8, 2024
@github-project-automation github-project-automation bot moved this to Needs triage 🧐 in Carbon for IBM Products Jul 8, 2024
@matthewgallo matthewgallo added type: bug 🐛 Something isn't working Sev 3 Visible or noticeable to users but does not impede functionality. Has a workaround. labels Jul 8, 2024
@matthewgallo matthewgallo moved this from Needs triage 🧐 to Backlog 🌋 in Carbon for IBM Products Jul 8, 2024
@devadula-nandan devadula-nandan moved this from Backlog 🌋 to Needs review 👋 in Carbon for IBM Products Jul 29, 2024
@github-project-automation github-project-automation bot moved this from Needs review 👋 to Done 🚀 in Carbon for IBM Products Jul 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
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
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

3 participants