[Webkit-unassigned] [Bug 236790] New: AX: VoiceOver does not announce row/column header and index information when navigating focusable rows or cells within WAI-ARIA data grid

Thu Feb 17 10:37:20 PST 2022

https://bugs.webkit.org/show_bug.cgi?id=236790

            Bug ID: 236790
           Summary: AX: VoiceOver does not announce row/column header and
                    index information when navigating focusable rows or
                    cells within WAI-ARIA data grid
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: All
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Accessibility
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: mijordan at adobe.com
                CC: andresg_22 at apple.com,
                    webkit-bug-importer at group.apple.com

Using VoiceOver to navigate a WAI-ARIA data grid that follows the https://www.w3.org/TR/wai-aria-practices-1.2/#grid design pattern with arrow, page up, page down, home, end keys or type ahead to select functionality, rather than table cell navigation using Control+Option+Arrow keys:

1. VoiceOver fails to announce the row index position, specified using aria-rowindex, when focusing a row or cell within a row following ArrowUp, ArrowDown, PageUp, PageDown or type ahead.
2. VoiceOver fails to announce the row header when focusing a cell within a row following ArrowUp, ArrowDown, PageUp, PageDown or type ahead.
3. VoiceOver fails to announce the column header when focusing a cell within a row following ArrowRight, ArrowLeft, Home, or End.
4. VoiceOver announces a column index when focusing a cell within a row following ArrowRight, ArrowLeft, Home, or End, however the index reported is not based on the aria-colindex on the cell, but rather on its position within the rendered cells in the DOM within the row and will be incorrect for data grids that use virtualization to speed rendering performance of large data sets. Also, the column index announcement is provided without context, e.g. "(4 of 14)", so it is difficult to intuit to what the index position is for. Is it the fourth row of fourteen rows or the fourth column of fourteen columns?

Without this additional context, the VoiceOver user is forced to use table cell navigation so that cells are announced with their full context. This creates problems when navigating data grids that use virtualization to speed rendering performance of large data sets, because only rows or columns currently visible in the table will be rendered to the DOM. Even if we provide a buffer of rows or columns beyond the visible viewport, so that navigating to the next row outside of view with VoiceOver will scroll the table body to bring the element focused using the VoiceOver cursor into view, the browser does not seem to refresh the accessibility tree after items are recycled by the virtualizer to render new rows. This creates a broken experience for a VoiceOver user navigating a virtualized table using table navigation. (Note, that these challenges with virtualized data grids will be opened as a separate, related accessibility issue.)

Steps to reproduce:
1. Open https://gnqhc0.csb.app/, which provides an example of a virtualized data grid showing details about Star Wars characters. The source application can be found here: https://codesandbox.io/s/virtually-scrolling-table-with-async-loading-gnqhc0?file=/src/AsyncTable.js.
2. With VoiceOver running, navigate to the data grid using the Tab key. 
3. VoiceOver should announce the first data row of the table as "Entering Star Wars Characters table. Luke Skywalker, list box, Star Wars Characters table, 4 columns, 21 rows." It's a bit odd for the control to be announced as both a table and as a list box, but that seems to be how VoiceOver announces a row when it receives focus. 
4. Notice that VoiceOver fails to announce the index of the focused row within the table's 21 rows. 

   VoiceOver should announce this first row focused on entering the table as "Entering Star Wars Characters table. row 2 of 21, Luke Skywalker, list box, Star Wars Characters table, 4 columns, 21 rows."

5. Press ArrowDown key to focus the next row.
6. VoiceOver announces "C-3PO list box, Star Wars Characters table, 4 columns, 21 rows."
7. Notice that VoiceOver fails to announce the index of the focused row within the table's 21 rows as something like "row 3 of 21".
8. Also, announcing "Star Wars Characters table, 4 columns, 21 rows." again for each row may be overkill. 

   VoiceOver should announce the row as "row 3 of 21, C-3PO."

9. Press ArrowRight key to focus the first column in the focused row.
10. VoiceOver announces "C-3PO, (1 of 4)."
11. Notice that VoiceOver fails to announce the column heading for the cell, and the index position is offered without context. 

   VoiceOver should announce the cell the same as it would when using table navigation, "NAME C-3PO, column 1 of 4."

12. Press ArrowRight key again to focus the second column in the row.
13. VoiceOver announces "167, (2 of 4)."
14. Notice that VoiceOver fails to announce the column heading for the cell, and the index position is offered without context. 

   VoiceOver should announce the cell the same as it would when using table navigation, "HEIGHT 167, column 2 of 4."

15. Press ArrowUp key again to focus the same column in the preceding row.
16. VoiceOver announces "172, (2 of 4)."
17. Notice that VoiceOver fails to announce the row heading or index position for the focused row; the cell content and the index position are offered without context. 

   VoiceOver should announce the cell the same as it would when using table navigation between rows, "row 2 of 21, Luke Skywalker 172."

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20220217/c1198ec4/attachment-0001.htm>