fix: th role in context (#33)

Author: jlp-craigmorten

.changeset/fresh-forks-hunt.md

@@ -0,0 +1,5 @@
+---
+"html-aria": patch
+---
+
+Fix role for th element in context

src/lib/util.ts

@@ -78,7 +78,7 @@ export function calculateAccessibleName(element: VirtualElement): string | undef
 }
 
 /** Is an ancestor list provided and is it empty? */
-export function isEmptyAncestorList(ancestors?: AncestorList): boolean {
+export function isEmptyAncestorList(ancestors?: AncestorList): ancestors is [] {
   return Array.isArray(ancestors) && ancestors.length === 0;
 }
 
@@ -120,6 +120,19 @@ export function hasLandmarkParent(ancestors: AncestorList) {
   );
 }
 
+/** Logic shared by <td> and <th> when determining role */
+export function hasGridParent(ancestors: AncestorList) {
+  const gridParent = firstMatchingAncestor(
+    [
+      { tagName: 'table', attributes: { role: 'grid' } },
+      { tagName: 'table', attributes: { role: 'treegrid' } },
+    ],
+    ancestors,
+  );
+
+  return gridParent?.attributes?.role === 'grid' || gridParent?.attributes?.role === 'treegrid';
+}
+
 export interface RemoveProhibitedOptions<P extends ARIAAttribute[]> {
   nameProhibited?: boolean;
   prohibited?: P;

src/tags/td.ts

@@ -1,5 +1,5 @@
-import { tags } from '../lib/html.js';
-import { firstMatchingAncestor, isEmptyAncestorList } from '../lib/util.js';
+import { NO_CORRESPONDING_ROLE, tags } from '../lib/html.js';
+import { hasGridParent, isEmptyAncestorList } from '../lib/util.js';
 import type { AncestorList } from '../types.js';
 
 /** Special behavior for <td> element */
@@ -13,20 +13,12 @@ export function getTDRole({ ancestors }: { ancestors?: AncestorList } = {}) {
   // default, it would likely cause bad results because most users would
   // likely skip this optional setup).
   if (isEmptyAncestorList(ancestors)) {
-    return undefined;
+    return NO_CORRESPONDING_ROLE;
   }
 
-  const hasGridParent = firstMatchingAncestor(
-    [
-      // Note: most of the time, the tagName
-      { tagName: 'table', attributes: { role: 'table' } },
-      { tagName: 'table', attributes: { role: 'grid' } },
-      { tagName: 'table', attributes: { role: 'treegrid' } },
-    ],
-    ancestors,
-  );
-  if (hasGridParent?.attributes?.role === 'grid' || hasGridParent?.attributes?.role === 'treegrid') {
+  if (hasGridParent(ancestors)) {
     return 'gridcell';
   }
+
   return tags.td.defaultRole;
 }

src/tags/th.ts

@@ -1,4 +1,5 @@
-import { isEmptyAncestorList } from '../lib/util.js';
+import { NO_CORRESPONDING_ROLE, tags } from '../lib/html.js';
+import { firstMatchingAncestor, hasGridParent, isEmptyAncestorList } from '../lib/util.js';
 import type { AncestorList, VirtualElement } from '../types.js';
 
 /** Special behavior for <th> element */
@@ -11,8 +12,49 @@ export function getTHRole({
   // default, it would likely cause bad results because most users would
   // likely skip this optional setup).
   if (isEmptyAncestorList(ancestors)) {
-    return undefined;
+    return NO_CORRESPONDING_ROLE;
   }
 
-  return attributes?.scope === 'row' ? 'rowheader' : 'columnheader';
+  // Currently deviates from specification as doesn't handle the `auto`
+  // behaviour as that would require access to the DOM context.
+  switch (attributes?.scope) {
+    /**
+     * @see https://www.w3.org/TR/html-aam-1.0/#el-th-columnheader
+     */
+    case 'col':
+    case 'colgroup': {
+      return 'columnheader';
+    }
+    /**
+     * @see https://www.w3.org/TR/html-aam-1.0/#el-th-rowheader
+     */
+    case 'row':
+    case 'rowgroup': {
+      return 'rowheader';
+    }
+  }
+
+  // See previous comment r.e. special behaviour.
+  if (!ancestors) {
+    return tags.th.defaultRole;
+  }
+
+  /**
+   * @see https://www.w3.org/TR/html-aam-1.0/#el-th-gridcell
+   */
+  if (hasGridParent(ancestors)) {
+    return 'gridcell';
+  }
+
+  /**
+   * @see https://www.w3.org/TR/html-aam-1.0/#el-th
+   */
+  const hasTableParent = !!firstMatchingAncestor([{ tagName: 'table', attributes: { role: 'table' } }], ancestors);
+
+  if (hasTableParent) {
+    return 'cell';
+  }
+
+  // See previous comment r.e. special behaviour.
+  return tags.th.defaultRole;
 }

test/get-role.test.ts

@@ -337,7 +337,24 @@ describe('getRole', () => {
     ['th', { given: [{ tagName: 'th' }], want: 'columnheader' }],
     ['th (no ancestors)', { given: [{ tagName: 'th' }, { ancestors: [] }], want: undefined }],
     ['th[scope=col]', { given: [{ tagName: 'th', attributes: { scope: 'col' } }], want: 'columnheader' }],
+    ['th[scope=colgroup]', { given: [{ tagName: 'th', attributes: { scope: 'colgroup' } }], want: 'columnheader' }],
     ['th[scope=row]', { given: [{ tagName: 'th', attributes: { scope: 'row' } }], want: 'rowheader' }],
+    ['th[scope=rowgroup]', { given: [{ tagName: 'th', attributes: { scope: 'rowgroup' } }], want: 'rowheader' }],
+    ['th (table)', { given: [{ tagName: 'th' }, { ancestors: [{ tagName: 'table' }] }], want: 'cell' }],
+    [
+      'th (grid)',
+      {
+        given: [{ tagName: 'th' }, { ancestors: [{ tagName: 'table', attributes: { role: 'grid' } }] }],
+        want: 'gridcell',
+      },
+    ],
+    [
+      'th (treegrid)',
+      {
+        given: [{ tagName: 'th' }, { ancestors: [{ tagName: 'table', attributes: { role: 'treegrid' } }] }],
+        want: 'gridcell',
+      },
+    ],
     ['time', { given: [{ tagName: 'time' }], want: 'time' }],
     ['title', { given: [{ tagName: 'title' }], want: undefined }],
     ['tr', { given: [{ tagName: 'tr' }], want: 'row' }],