chore(aria): properly calculate columnheader and rowheader #38160
Conversation
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
|
|
||
| Modified: | ||
| - `implicit-role.js` contains test cases extracted from `/test/commons/aria/implicit-role.js` | ||
| - `implicit-role-playwright.js` contains test cases custom to Playwright (not present in `axe-core`) |
There was a problem hiding this comment.
Let's just add test cases to role-utils.spec.ts instead.
| { | ||
| html: '<table><thead><tr><th id="A">A</th><td>B</td></thead><tbody><tr><td>1</td><td>2</td></tr></tbody></table>', | ||
| target: '#A', | ||
| role: 'cell', |
There was a problem hiding this comment.
This one says "rowheader" in Chrome/Firefox DevTools and "columnheader" in Web Inspector.
| { | ||
| html: '<table><thead><tr><th>A</th><th>B</th></thead><tbody><tr><th id="A">1</th><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table>', | ||
| target: '#A', | ||
| role: 'cell', |
There was a problem hiding this comment.
This one says "rowheader" in Chrome/Firefox/Safari.
| @@ -0,0 +1,32 @@ | |||
| module.exports = [ | |||
| { | |||
| html: '<table><thead><tr><th id="A">A</th><th>B</th></thead><tbody><tr><td>1</td><td>2</td></tr></tbody></table>', | |||
There was a problem hiding this comment.
Should we also add some tests with explicit table role=treegrid?
packages/injected/src/roleUtils.ts
Outdated
| return 'cell'; | ||
|
|
||
| const rows = [...table.rows]; | ||
| const position = getCellPosition(table.rows, e as HTMLTableCellElement); |
packages/injected/src/roleUtils.ts
Outdated
| return 'columnheader'; | ||
| } | ||
|
|
||
| const containingColumnCells = rows.map(row => row.cells[x]); |
There was a problem hiding this comment.
Could row.cells[x] be null/undefined when colspan or rowspan is present? Let's be defensive here.
Test results for "MCP"2640 passed, 116 skipped Merge workflow run. |
Test results for "tests 1"7 failed 4 flaky40207 passed, 787 skipped Merge workflow run. |
2 participants
Resolves #38091.
Assign
columnheaderandrowheaderroles automatically based on the state of surrounding nodes. If all elements in a row (tr) are a header (th), these are allcolumnheadernodes. If all elements in the same column are a header, these are allrowheadernodes.