[a11y]: Table is not navigable

elycheea commented 1 month ago

Package

@carbon/ibm-products

Browser

Firefox

Operating System

Windows

Package version

v2.44.0-rc.1

React version

No response

Automated testing tool and ruleset

manual

Assistive technology

JAWS

Description

Reported by Raghu during screen reader testing.

Using standard keyboard shortcuts (Ctrl + Alt + Up/Down) in the Datagrid with a screen reader results in unexpected navigation. Instead of moving within the same column, focus jumps to adjacent column cells and announces the content from there, making it difficult to follow the table structure.

For example: If given alt+ctrl+up arrow from the “status” column first cell, the focus moves to “joined” column header.

[!NOTE] Raghu will check this defect in one more system.

Recommended fix

Ensure that meaningful reading sequence is maintained while navigating with screen reader / table reading commands:
Fix table navigation issues:
- Using Up/Down arrow keys with Alt + Control combination, should keep focus within same column, instead of jumping to nearby columns.

User impact Screen reader users struggle to understand and interact with the table data, creating a difficult experience.

WCAG 2.1 Violation

1.3.2 Meaningful Sequence

Reproduction/example

https://carbon-for-ibm-products.netlify.app/?path=/story/ibm-products-components-datagrid--selectable-row&globals=viewport:basic

Steps to reproduce

Documented in the following Datagrid stories: Radio select, selectable row, hide select all, actions dropdown, batch actions, disable select row, frozen columns

Use a screen reader and try navigating using standard keyboard shortcuts.

Using Up/Down arrow keys with Alt + Control combination, should keep focus within same column, instead of jumping to nearby columns.

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I checked the current issues for duplicate problems

davidmenendez commented 1 month ago

after reviewing Raghu's notes, talking to Jan, and going through the WCAG guidelines it looks like we've got our work cutout for us in regards to this issue.

the keyboard navigation that's enabled on the editable cell story has most of the basic functionality from the looks of it. it just needs to be applied at the default level. i can't confirm it right now because i have to test it locally, but i wanted to document it here for later: while end and home appear to work as intended (although it doesn't scroll to the end of the table, which i believe is a problem) page up and page down don't appear to be working. i will have to confirm that locally.

i did also notice some inconsistent behavior while using voice over to do some testing.

while using VO if you are focused on the bottom of the age column 4 and you try to move down, which takes you to the top of the row, it targets the slider instead of the table header and bypasses the header totally. you can access it when going in the opposite direction though. so clearly there's something funky going on with the tab index or whatever mechanism is in place for the width sliders.

matthewgallo commented 1 month ago

Just to follow up here from our morning huddle, we only need to follow the WCAG Data grid guidelines when Datagrid is using useEditableCell, since that is the only time it's a true Data grid.

davidmenendez commented 1 month ago

makes sense. Raghu will be recording another session with datagrid to demonstrate the issues he was experiencing. I'll work with him to ensure we address the issues that appear to be specific to VO / JAWS.

davidmenendez commented 3 weeks ago

still waiting for Raghu's recording. without this i'm unable to proceed since i have to verify and attempt to replicate the behavior.

davidmenendez commented 1 week ago

having reviewed the material provided by Raghu i'm going to close this issue as complete. my own manual testing was unable to replicate the buggy behavior, nor was Komal Shedge, Raghu's associate, who provided a recorded walkthrough of the defects. the noted behavior was either already fixed unintentionally by the time it reached me or is environment specific. either way it doesn't appear to be happening now.

we just need to keep a close eye on it as we continue making accessibility updates to datagrid

carbon-design-system / ibm-products