[HEIHEI-928] fix: infer columnheader/rowheader for th without scope

src/roleUtils.ts

@@ -241,23 +241,72 @@ const kImplicitRoleByTagName: {
   },
   TEXTAREA: () => 'textbox',
   TFOOT: () => 'rowgroup',
+  // ported from https://github.com/microsoft/playwright/blob/c2298adf81b9a0e566a559d2946d2ff20d929029/packages/injected/src/roleUtils.ts#L176-L212
+  // (introduced in https://github.com/microsoft/playwright/pull/38160)
   TH: (e: Element) => {
-    if (e.getAttribute('scope') === 'col') {
+    const scope = e.getAttribute('scope')
+    if (scope === 'col' || scope === 'colgroup') {
       return 'columnheader'
     }
-    if (e.getAttribute('scope') === 'row') {
+    if (scope === 'row' || scope === 'rowgroup') {
       return 'rowheader'
     }
-    const table = closestCrossShadow(e, 'table')
-    const role = table ? getExplicitAriaRole(table) : ''
-    return role === 'grid' || role === 'treegrid' ? 'gridcell' : 'cell'
+
+    const nextSibling = e.nextElementSibling
+    const prevSibling = e.previousElementSibling
+
+    const row =
+      !!e.parentElement && elementSafeTagName(e.parentElement) === 'TR'
+        ? e.parentElement
+        : undefined
+
+    // Chromium/Safari: A TH that is the only cell in a table is not labeling any content, thus it's technically not a header. Do not assign a role.
+    // Firefox: Follows the spec and assigns `columnheader`. We prioritize Chrome/Safari semantics.
+    if (!nextSibling && !prevSibling) {
+      if (row) {
+        const table = closestCrossShadow(row, 'table') as
+          | HTMLTableElement
+          | undefined
+        // If there's only one row in the table, this TH has no column to head
+        if (table && table.rows.length <= 1) {
+          return null
+        }
+      }
+      return 'columnheader'
+    }
+
+    // Tables are built up incrementally by iterating over them in a particular pattern. In order to emulate this,
+    // we check only immediate siblings and occasionally the parent row
+    // This doesn't seem to directly follow the spec, but matches Chromium behavior
+    // https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/modules/accessibility/ax_node_object.cc;l=1585-1623
+    if (isHeaderCell(nextSibling) && isHeaderCell(prevSibling)) {
+      return 'columnheader'
+    }
+
+    if (isNonEmptyDataCell(nextSibling) || isNonEmptyDataCell(prevSibling)) {
+      return 'rowheader'
+    }
+
+    // As long as we didn't exclude it above, it's still a TH, so default to columnheader
+    return 'columnheader'
   },
   THEAD: () => 'rowgroup',
   TIME: () => 'time',
   TR: () => 'row',
   UL: () => 'list',
 }
 
+function isHeaderCell(element: Element | null): boolean {
+  return !!element && elementSafeTagName(element) === 'TH'
+}
+
+function isNonEmptyDataCell(element: Element | null): boolean {
+  if (!element || elementSafeTagName(element) !== 'TD') {
+    return false
+  }
+  return !!(element.textContent?.trim() || element.children.length > 0)
+}
+
 const kPresentationInheritanceParents: { [tagName: string]: string[] } = {
   DD: ['DL', 'DIV'],
   DIV: ['DL'],

test/aria.test.ts

@@ -962,10 +962,13 @@ describe('basic', () => {
                           "visible": true,
                         },
                         "children": [],
+                        "disabled": undefined,
+                        "expanded": undefined,
                         "name": "H",
                         "props": {},
                         "receivesPointerEvents": true,
-                        "role": "cell",
+                        "role": "columnheader",
+                        "selected": false,
                       },
                     ],
                     "disabled": undefined,
@@ -1073,7 +1076,7 @@ describe('basic', () => {
       - table:
         - rowgroup:
           - row "H":
-            - cell "H"
+            - columnheader "H"
         - rowgroup:
           - row "D":
             - cell "D"

test/role.test.ts

@@ -0,0 +1,115 @@
+import { getByRoleSelector, Ivya } from '../src'
+import { getAriaRole } from '../src/roleUtils'
+import { afterEach, describe, expect, test } from 'vitest'
+
+function render(html: string) {
+  const container = document.createElement('div')
+  container.innerHTML = html
+  document.body.appendChild(container)
+  return container
+}
+
+function roleOf(html: string) {
+  const target = render(html).querySelector('#target')!
+  return getAriaRole(target)
+}
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+// Cases mirror Playwright's tests/assets/axe-core/implicit-role.js (microsoft/playwright#38160)
+describe('implicit role of th without scope', () => {
+  test('th in a header row is a columnheader', () => {
+    expect(
+      roleOf(
+        '<table><thead><tr><th id="target">A</th><th>B</th></tr></thead><tbody><tr><td>1</td><td>2</td></tr></tbody></table>'
+      )
+    ).toBe('columnheader')
+    expect(
+      roleOf(
+        '<table><thead><tr><th>A</th><th id="target">B</th></tr></thead><tbody><tr><td>1</td><td>2</td></tr></tbody></table>'
+      )
+    ).toBe('columnheader')
+  })
+
+  test('th in a header row without thead is a columnheader', () => {
+    expect(
+      roleOf(
+        '<table><tr><th>A</th><th id="target">B</th><th>C</th></tr><tr><td>1</td><td>2</td><td>3</td></tr></table>'
+      )
+    ).toBe('columnheader')
+  })
+
+  test('th first in a body row next to a data cell is a rowheader', () => {
+    expect(
+      roleOf(
+        '<table><thead><tr><th>A</th><th>B</th></tr></thead><tbody><tr><th id="target">1</th><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table>'
+      )
+    ).toBe('rowheader')
+  })
+
+  test('th next to an empty data cell is a columnheader', () => {
+    expect(
+      roleOf(
+        '<table><tr><th id="target">A</th><td></td></tr><tr><td>1</td><td>2</td></tr></table>'
+      )
+    ).toBe('columnheader')
+  })
+
+  test('the only th in a single-row table has no role', () => {
+    expect(roleOf('<table><tr><th id="target">A</th></tr></table>')).toBe(null)
+  })
+
+  test('the only th in its row of a multi-row table is a columnheader', () => {
+    expect(
+      roleOf(
+        '<table><thead><tr><th id="target">A</th></tr></thead><tbody><tr><td>1</td></tr></tbody></table>'
+      )
+    ).toBe('columnheader')
+  })
+})
+
+describe('explicit scope on th wins', () => {
+  test.each([
+    ['col', 'columnheader'],
+    ['colgroup', 'columnheader'],
+    ['row', 'rowheader'],
+    ['rowgroup', 'rowheader'],
+  ])('scope="%s" is a %s', (scope, role) => {
+    // a header-row position would imply columnheader, a data-cell sibling rowheader
+    expect(
+      roleOf(
+        `<table><thead><tr><th>A</th><th id="target" scope="${scope}">B</th><th>C</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td></tr></tbody></table>`
+      )
+    ).toBe(role)
+    expect(
+      roleOf(
+        `<table><tbody><tr><th id="target" scope="${scope}">1</th><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table>`
+      )
+    ).toBe(role)
+  })
+})
+
+// https://github.com/vitest-dev/vitest/issues/8054
+test('getByRole finds header cells without scope', () => {
+  const container = render(`
+    <table>
+      <thead><tr><th>Column 1</th><th>Column 2</th></tr></thead>
+      <tbody>
+        <tr><th>Row 1</th><td>Hello</td></tr>
+        <tr><th>Row 2</th><td>World</td></tr>
+      </tbody>
+    </table>
+  `)
+  const ivya = Ivya.create({ browser: 'chromium' })
+  const [column1, column2, row1, row2] = container.querySelectorAll('th')
+
+  expect(ivya.queryAllByRole('columnheader')).toEqual([column1, column2])
+  expect(ivya.queryAllByRole('rowheader')).toEqual([row1, row2])
+  expect(
+    ivya.queryLocatorSelector(
+      getByRoleSelector('columnheader', { name: 'Column 1' })
+    )
+  ).toBe(column1)
+})