Why does playwright think the ARIA role for a <th> tag is `cell`?

Question

Playwright emphasizes using "user-facing attributes and explicit contracts such as page.getByRole()" to locate items on a page. I want to locate a th tag on my page. Chrome's DevTools has an Accessibility tab that says the th on my page is a columnheader role, and MDN's technical summary for the th tag says it should be a columnheader role, so I would expect getByRole('columnheader') to find my th.

It turns out that Playwright can't find it when I use columnheader. Instead it suggests I use the cell role. And indeed that works. But it seems that Playwright is just wrong here, as that doesn't agree with MDN and Chrome. Why does Playwright think the ARIA role for a th tag is cell?

If you want to play along, here's some simple markup you can use:

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

Or here's a table that demonstrates a columnheader role for the th:

Header
Value

Answer 1

Looking at the source code, the th tag need scope='col' to be located by role 'columnheader'. It makes sense since th could potentially be either 'rowheader' or 'columnheader'.

It also complies with the W3C's Accessibility API Mappings specifications:

HTML Specification th (is not a column header, row header, column group header or row group header, and ancestor table element has table role) [wai-aria-1.2]: cell role