Safari Table Support - CSS Display Properties Break Tables.

[aardrian]

What type of issue is this?

Incorrect support data (example: Chrome says "86" but support was added in "40")

What information was incorrect, unhelpful, or incomplete?

My intent was to edit the data in here, but I don't understand it:
https://github.com/mdn/browser-compat-data/blob/main/html/elements/table.json

Safari 14 through 16, and probably earlier versions, has a series of bugs where display properties on cells can cause problems with column and row count, header associations, and navigation.

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.

What browsers does this problem apply to, if applicable?

Safari

What did you expect to see?

The chart should represent that tables are no longer exposed correctly when paired with many CSS display properties.

Did you test this? If so, how?

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

Attached video demonstrates bugs:
https://github.com/mdn/browser-compat-data/assets/1376607/0163a1db-0fc0-4e29-93bb-f430d954ea1f

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

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

I have also been tracking this since 2020:
https://adrianroselli.com/2022/07/its-mid-2022-and-browsers-mostly-safari-still-break-accessibility-via-display-properties.html

Do you have anything more you want to share?

Related existing issue: css.properties.display - Safari (thru 16) flex, grid, contents problems #17776

MDN URL

No response

MDN metadata

No response

[aardrian]

I updated Bug 257458 – AX: Tables with display properties are skipped, report wrong col/row counts to include results of testing with Safari 16.5 and VoiceOver on macOS 12.6.6:

19. Tables with display: flex on the <tr> cannot be navigated into using table navigation.
20. Tables with display: flex on the <tr> are skipped when using read-all.
21. Tables with display: flex on the <tr> cannot be navigated into using swipe gestures.
22. Tables with display: flex on the <tr> are skipped when using read-all.
23. Tables with display: block on the <td> and <th> give the wrong column count.
24. Tables with display: block on the <th> announce each as a cell.
25. Tables with display: block on the <td> and <th> do not support navigating within a column.
26. Tables with display: block on the <td> and <th> do not announce column headers.
27. Tables with display: inline-block on the <td> and <th> give the wrong column count.
28. Tables with display: inline-block on the <td> and <th> announce the entirety of cells in a row as a single node.
29. Tables with display: inline-block on the <td> and <th> do not support navigating within a column (because it is treated as one column).
30. Tables with display: inline-block on the <td> and <th> do not announce column headers.
31. Tables with display: contents on the <td> and <th> cannot be navigated into using table navigation.
32. Tables with display: contents on the <td> and <th> are skipped when using read-all.
33. Tables with display: contents on the <td> and <th> have each row read as a single string of text.

So far I have seen no signals about this from Apple’s WWDC Safari and CSS talk, despite demonstrating some of these properties.

The Safari 17 beta announcement suggests some fixes for display: contents, but not for the issues I cite here.