| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../resources/accessibility-helper.js"></script> |
| <script src="../../resources/js-test.js"></script> |
| <style> |
| div[role="grid"], div[role="row"], span[role="gridcell"] { |
| display: contents; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div id="grid" role="grid" aria-label="Space-themed books"> |
| <div role="rowgroup"> |
| <div role="row" id="r0"> |
| <span role="columnheader" id="r0c0">Author</span> |
| <span role="columnheader" id="r0c1">Year</span> |
| </div> |
| </div> |
| <div role="rowgroup"> |
| <div role="row" id="r1"> |
| <span role="gridcell" id="r1c0">Stephen Hawking</span> |
| <span role="gridcell" id="r1c1">1988</span> |
| </div> |
| <div role="row" id="r2"> |
| <span role="gridcell" id="r2c0">Carl Sagan</span> |
| <span role="gridcell" id="r2c1">1980</span> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| var output = "This test ensures that the headers associated with cells are exposed properly via accessibility APIs for role='row' elements with display:contents.\n\n"; |
| |
| if (window.accessibilityController) { |
| const grid = accessibilityController.accessibleElementById("grid"); |
| const columns = grid.columns(); |
| // The columns should have a non-empty AXHeader attribute (or else ATs like VoiceOver won't read column header labels when navigating their associated cells). |
| for (const column of columns) |
| output += `\nColumn had header with attributes: \n${column.attributesOfHeader()}\n`; |
| |
| const gridChildrenCount = grid.childrenCount; |
| for (let i = 0; i < gridChildrenCount; i++) { |
| const child = grid.childAtIndex(i); |
| // Grids should contain a table header container (mapped to a group). This table header container should contain |
| // the header cells for the table. If it doesn't, VoiceOver won't read column header labels when navigating their associated cells. |
| // In this testcase, the headers are "Author" and "Year", so we should expect to see them here. |
| if (child.role.toLowerCase().includes("group")) { |
| output += "\nFound table header container. Dumping its children.\n"; |
| output += `${dumpAccessibilityTree(child, null, 0)[1]}\n`; |
| } |
| } |
| debugEscaped(output); |
| } |
| </script> |
| </body> |
| </html> |
| |
