Repository navigation
DataViews table and list are difficult to navigate with a screen reader #67598
Description
Description
@dcalhoun and @holdercp did extensive testing (thank you!) on the keyboard and screen reader (SR) navigation on the DataViews Storybook and I want to capture their findings here:
- Navigating the table and list view with a SR is difficult or impossible. "I am unable to move SR focus into individual rows or cells, I can only focus the top-level table/list. For the list view, I sporadically successfully move focus into a subset of rows/cells when moving focus rapidly—I am unsure what internal component state might be leading to this."
- DataViews list view rows seemingly offer two distinct focus states. "Tabbing focus into the first row toggles the first state, where one can use arrow keys to move row selection. Further tabbing then moves focus into a second state, that state/focus can be moved to additional rows by pressing tab. However, the second state does not allow moving selection with arrow keys. I found these two distinct states surprising, I expected a single row "selected" state that would support both arrow keys and tabbing."
| First State | Second State |
|---|---|
 |
 |
- The screen reader experience has issues when the list view is used. "The table view works as expected (using the SR navigation keys worked like I would expect and I was able to visit each row). Using regular keyboard navigation (Tab then Arrow for nav, Enter and Space for selection) does seem to work correctly for table and list views."
392095361-d88d563e-d943-4736-b999-e36a1add91d5.mov
Step-by-step reproduction instructions
- Visit https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataviews--docs
- Navigate the different Views with a screen reader.
Screenshots, screen recording, code snippet
No response
Environment info
DataViews 4.4.0
Please confirm that you have searched existing issues in the repo.
- Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
- Yes
Please confirm which theme type you used for testing.
- Block
- Classic
- Hybrid (e.g. classic with theme.json)
- Not sure
Activity
jameskoster commentedon Dec 5, 2024
I wonder if you could expand/clarify this? It should be possible to focus any interactive elements in rows/cells, such as links, or buttons in the actions column. I presume the values of each cell are accessible?
I can replicate this in Storybook, but it's interesting that this is inconsistent with the shipping software. When focus is on a row in list layout, tabbing should move focus to the footer; the page selector specifically.
dcalhoun commentedon Dec 5, 2024
No, the values are not accessible from my findings—both interactive elements (buttons, links, etc) and all other content (text, images, etc).
I always find it quite difficult to convey to someone else via text what specifically occurs when navigating with a screen reader (SR), as stepping through the hierarchy of elements can be so nuanced. However, when attempting to move focus to an element within the announced "table," focus is almost always moved to the pagination element beneath/outside of the table. Occasionally, focus successfully moves to buttons within a given row, but it is sporadic and difficult for me to reproduce.
I attached a screen recording of my interactions, but I'm not sure how helpful it may be.
Screen reader recording
data-views-screen-reader.mov
If case it is helpful, I'll share that I navigated using VoiceOver in a few different ways:
holdercp commentedon Dec 6, 2024
I had a similar experience in the SB (Storybook). Here's a video with audio attempting to explain what I'm seeing vs. expect (note: some of my expectations/assumptions might not be what others expect. I'm just highlighting what I found confusing). Also, this capture was recorded for a particular PR we were working on in the Reader so some of my comments are out of that context but hopefully it's still helpful.
My screen recording file somehow became corrupted so here's the link to the PR comment.