Bug 257458 – AX: Tables with display properties are skipped, report wrong col/row counts

• Component: Accessibility
• Status: RESOLVED FIXED

[Adrian Roselli]

Created attachment 466529 [details]
Video of Safari iPadOS 16.5 navigating assorted tables via swipe-right (with some explore-by-touch to demonstrate cells mid-table).

Test page:
https://cdpn.io/aardrian/debug/xxGEKKJ

Each table is the same except the rows or cells have CSS display properties set.

1. Tables with `display: flex` on the `<tr>` cannot be navigated into using swipe gestures (swipe right or left).
2. Tables with `display: flex` on the `<tr>` are skipped when using read-all.
3. Tables with `display: grid` on the `<tr>` cannot be navigated into using swipe gestures (swipe right or left).
4. Tables with `display: grid` on the `<tr>` are skipped when using read-all.
5. Tables with `display: block` on the `<td>` and `<th>` give the wrong column count.
6. Tables with `display: block` on the `<td>` and `<th>` announce each `<th>` with the first `<th>` when first entering a row.
7. Tables with `display: block` on the `<td>` and `<th>` announce each column header `<th>` as a row header.
8. Tables with `display: block` on the `<td>` and `<th>` announce each column header `<th>` as column 1.
9. Tables with `display: block` on the `<td>` and `<th>` announce each `<td>` with the wrong or no column header.
10. Tables with `display: block` on the `<td>` and `<th>` announce each `<td>` as column 1.
11. Tables with `display: inline-block` on the `<td>` and `<th>` give the wrong column count.
12. Tables with `display: inline-block` on the `<td>` and `<th>` announce each `<th>` with the first `<th>` when first entering a row.
13. Tables with `display: inline-block` on the `<td>` and `<th>` announce each column header `<th>` as a row header.
14. Tables with `display: inline-block` on the `<td>` and `<th>` announce each column header `<th>` as column 1.
15. Tables with `display: inline-block` on the `<td>` and `<th>` announce each `<td>` with no column header.
16. Tables with `display: inline-block` on the `<td>` and `<th>` announce each `<td>` as column 1.
17. Tables with `display: contents` on the `<td>` cannot be navigated into using swipe gestures (swipe right or left).
18. Tables with `display: contents` on the `<td>` are skipped when using read-all.

These issues have all existed since at least Safari iPadOS 15.5, but items related to `flex`, `grid`, and `contents` causing the entire table to be skipped appear to be new in Safari iPadOS 16.5.

This issue from last year has not resolved any of these:
Bug 243474 - AX: On iOS, display:contents elements are inserted in the wrong position when they have inline renderer siblings
https://bugs.webkit.org/show_bug.cgi?id=243474

I have attached a video showing these issues in action using only the swipe gestures. You can confirm using read-all, table navigation, explore-by-touch into a table and swiping from there, and so on.

If you prefer I file 18 distinct issues I am happy to do so.

[Radar WebKit Bug Importer]

<rdar://problem/109975031>

[Adrian Roselli]

Related issue:

AX: Support display:contents for table elements
https://bugs.webkit.org/show_bug.cgi?id=239479

Filed 18 April 2022, no activity since.

[Adrian Roselli]

Tested again in Safari 16.5 and VoiceOver on macOS 12.6.6:

1. Tables with `display: flex` on the `<tr>` cannot be navigated into using table navigation (Ctrl + Opt + arrows).
2. Tables with `display: flex` on the `<tr>` are skipped when using read-all.
3. Tables with `display: grid` on the `<tr>` cannot be navigated into using swipe gestures (Ctrl + Opt + arrows).
4. Tables with `display: grid` on the `<tr>` are skipped when using read-all.
5. Tables with `display: block` on the `<td>` and `<th>` give the wrong column count.
6. Tables with `display: block` on the `<th>` announce each as a cell.
7. Tables with `display: block` on the `<td>` and `<th>` do not support navigating within a column.
8. Tables with `display: block` on the `<td>` and `<th>` do not announce column headers.
9. Tables with `display: inline-block` on the `<td>` and `<th>` give the wrong column count.
10. Tables with `display: inline-block` on the `<td>` and `<th>` announce the entirety of cells in a row as a single node.
11. Tables with `display: inline-block` on the `<td>` and `<th>` do not support navigating within a column (because it is treated as one column).
12. Tables with `display: inline-block` on the `<td>` and `<th>` do not announce column headers.
13. Tables with `display: contents` on the `<td>` and `<th>` cannot be navigated into using table navigation (Ctrl + Opt + arrows).
14. Tables with `display: contents` on the `<td>` and `<th>` are skipped when using read-all.
15. Tables with `display: contents` on the `<td>` and `<th>` have each row read as a single string of text.

If you prefer I file another 15 distinct issues, I can do it but it seems redundant.

[Ahmad Saleem]

It might get fixed with this:

bug 258430

https://github.com/WebKit/WebKit/commit/23e7f4efeb894ce46f230ca7298130f83563412c

[Adrian Roselli]

Thanks for linking that issue. That issue appears to only address `display: contents`, however.

This bug report also covers `flex`, `grid`, `block`, and `inline-block`. So addressing `contents` bugs solves 4 of the 33 specific buts I filed here.

I am still happy for progress regardless.

[Ahmad Saleem]

(In reply to Adrian Roselli from comment #5)
> Thanks for linking that issue. That issue appears to only address `display:
> contents`, however.
> 
> This bug report also covers `flex`, `grid`, `block`, and `inline-block`. So
> addressing `contents` bugs solves 4 of the 33 specific buts I filed here.
> 
> I am still happy for progress regardless.

Another commit landed: https://github.com/WebKit/WebKit/commit/5da3ca1446784ca0ef8c55e5eb292c855b85575d

bug 258439

[Tyler Wilcock]

Yes, https://github.com/WebKit/WebKit/commit/5da3ca1446784ca0ef8c55e5eb292c855b85575d should address many of these issues. However, even after that commit, read-all skips the display:contents table cells. So at least one more follow-up patch will be necessary.

The other linked bug, https://bugs.webkit.org/show_bug.cgi?id=258430, is unrelated to the testcases in this bug.

[Tyler Wilcock]

OK, STP 174 was just released with the recent table improvements:

https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-174#Accessibility

With STP 174, I am able to Ctrl-Option-Arrow and Ctrl-Option-A (read-all) through all tables in the given Codepen (https://cdpn.io/aardrian/debug/xxGEKKJ). Row and column count, and column header announcements also seem correct. But please give it a try and let me know if you experience otherwise, or if any of the 15 listed macOS issues are otherwise missed. Thanks!

[Adrian Roselli]

It looks like I need macOS 13 or later. My machine (MacBook Air 2017) will not upgrade to macOS 13, which means I would need to spend $1,000+ USD to test this.

Does that mean Safari 17 will also only run on macOS 13 or later?

[Adrian Roselli]

I *did not* test on iOS/iPadOS. The first list of 18 items is not being reviewed in this comment.

Tested again in Safari Technology Preview 174 on macOS 13.4.1:

1. WORKS.  Tables with `display: flex` on the `<tr>` cannot be navigated into using table navigation (Ctrl + Opt + arrows).
2. WORKS. Tables with `display: flex` on the `<tr>` are skipped when using read-all.
3. WORKS. Tables with `display: grid` on the `<tr>` cannot be navigated into using swipe gestures (Ctrl + Opt + arrows).
4. WORKS. Tables with `display: grid` on the `<tr>` are skipped when using read-all.
5. WORKS. Tables with `display: block` on the `<td>` and `<th>` give the wrong column count.
6. WORKS. Tables with `display: block` on the `<th>` announce each as a cell.
7. WORKS. Tables with `display: block` on the `<td>` and `<th>` do not support navigating within a column.
8. WORKS. Tables with `display: block` on the `<td>` and `<th>` do not announce column headers.
9. WORKS. Tables with `display: inline-block` on the `<td>` and `<th>` give the wrong column count.
10. WORKS. Tables with `display: inline-block` on the `<td>` and `<th>` announce the entirety of cells in a row as a single node.
11. WORKS. Tables with `display: inline-block` on the `<td>` and `<th>` do not support navigating within a column (because it is treated as one column).
12. WORKS. Tables with `display: inline-block` on the `<td>` and `<th>` do not announce column headers.
13. WORKS. Tables with `display: contents` on the `<td>` and `<th>` cannot be navigated into using table navigation (Ctrl + Opt + arrows).
14. WORKS. Tables with `display: contents` on the `<td>` and `<th>` are skipped when using read-all.
15. WORKS. Tables with `display: contents` on the `<td>` and `<th>` have each row read as a single string of text.

I found two new issues in Safari Technology Preview 174 on macOS 13.4.1:

16. Tables with `display: contents` on the `<td>` and `<th>` can be navigated into using table navigation (Ctrl + Opt + arrows), but VoiceOver announces each cell as "blank".
17. Tables with `display: contents` on the `<td>` and `<th>` do not announce cell contents when using read-all (Ctrl + Opt + A). It simply announces the column and row position.

Again, I *did not* test on iOS/iPadOS.

[Tyler Wilcock]

(In reply to Adrian Roselli from comment #10)
> I found two new issues in Safari Technology Preview 174 on macOS 13.4.1:
> 
> 16. Tables with `display: contents` on the `<td>` and `<th>` can be
> navigated into using table navigation (Ctrl + Opt + arrows), but VoiceOver
> announces each cell as "blank".
> 17. Tables with `display: contents` on the `<td>` and `<th>` do not announce
> cell contents when using read-all (Ctrl + Opt + A). It simply announces the
> column and row position.
> 
> Again, I *did not* test on iOS/iPadOS.
Thanks for testing! I was only able to reproduce this after cycling VoiceOver off and on, but I think the underlying bug (fixed by https://bugs.webkit.org/show_bug.cgi?id=259608, just landed in `main`) is timing dependent, so wouldn't be surprised if you didn't have to perform this to reproduce the bug.

I'll post back here when https://bugs.webkit.org/show_bug.cgi?id=259608 is in a Safari Technology Preview (but it should also be in release notes).

[Tyler Wilcock]

> I'll post back here when https://bugs.webkit.org/show_bug.cgi?id=259608 is
> in a Safari Technology Preview (but it should also be in release notes).
This fix was just released in STP 176: https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-176

Please let me know if you still experience any issues. Thank you!

[Adrian Roselli]

I *did not* test on iOS/iPadOS. The first list of 18 items is not being reviewed in this comment.

Tested again in Safari Technology Preview 176 on macOS 13.4.1 for *only* the two new issues I found (I am not testing for regressions):

16. WORKS. Tables with `display: contents` on the `<td>` and `<th>` can be navigated into using table navigation (Ctrl + Opt + arrows), but VoiceOver announces each cell as "blank".
17. WORKS. Tables with `display: contents` on the `<td>` and `<th>` do not announce cell contents when using read-all (Ctrl + Opt + A). It simply announces the column and row position.

Again, I *did not* test on iOS/iPadOS.

I am happy to see this progress.

[Tyler Wilcock]

Closing as this was fixed by:

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