为什么剧作家认为 <th> 标签的 ARIA 角色是“cell”？

Question

Playwright 强调使用“面向用户的属性和显式契约，例如

page.getByRole()

”来定位页面上的项目。我想在我的页面上找到

th

标签。 Chrome 的 DevTools 有一个“辅助功能”选项卡，显示我页面上的

th

是一个

columnheader

角色，而 MDN 的

th

标签技术摘要表示它应该是

columnheader

角色，所以我希望

getByRole('columnheader')

找到我的

th

。

事实证明，当我使用

columnheader

时，Playwright找不到它。相反，它建议我使用

cell

角色。这确实有效。但 Playwright 似乎在这里错了，因为这与 MDN 和 Chrome 不一致。为什么 Playwright 认为

th

标签的 ARIA 角色是

cell

？

如果您想一起玩，可以使用以下一些简单的标记：

<table>
  <thead><tr><th>Header</th></tr></thead>
  <tbody><tr><td>Value</td></tr></tbody>
</table>

或者这里有一张表格，展示了

columnheader

的

th

角色：

标题
价值

Answer 1

th

标签需要

scope='col'

才能按行

'columnheader'

定位。这是有道理的，因为

th

可能是

'rowheader'

或

'columnheader'

。

HTML规范th（不是列标题、行标题、列组标题或行组标题，并且祖先表元素具有表角色） [wai-aria-1.2]：细胞角色