fix: Consider caption element of table (#248)

.changeset/strange-hotels-build.md

@@ -0,0 +1,16 @@
+---
+"dom-accessibility-api": patch
+---
+
+Consider `<caption>` for the name of its `<table>` element.
+
+```html
+<table>
+	<caption>
+		<em>my</em>
+		table
+	</caption>
+</table>
+```
+
+Computing the name for this table would've returned an empty string previously. It now correctly computes `my table` following the [accessible name computation for `table` elements](https://w3c.github.io/html-aam/#table-element)

sources/__tests__/accessible-name.js

@@ -291,6 +291,15 @@ test.each([
 		`<fieldset data-test aria-owns="legend"></fieldset><legend id="legend"><em>greek</em> rho</legend>`,
 		"",
 	],
+	// https://w3c.github.io/html-aam/#table-element
+	[
+		`<table data-test><caption><em>greek</em> rho</caption></caption>`,
+		"greek rho",
+	],
+	[
+		`<table data-test aria-owns="caption"></table><caption id="caption"><em>greek</em> rho</caption>`,
+		"",
+	],
 ])(`test #%#`, testMarkup);
 
 describe("prohibited naming", () => {

sources/accessible-name.ts

@@ -6,12 +6,14 @@ import SetLike from "./polyfills/SetLike";
 import getRole from "./getRole";
 import {
 	isElement,
+	isHTMLTableCaptionElement,
 	isHTMLInputElement,
 	isHTMLSelectElement,
 	isHTMLTextAreaElement,
 	safeWindow,
 	isHTMLFieldSetElement,
 	isHTMLLegendElement,
+	isHTMLTableElement,
 } from "./util";
 
 /**
@@ -208,13 +210,19 @@ function isMarkedPresentational(node: Node): node is Element {
 }
 
 /**
- * TODO https://github.com/eps1lon/dom-accessibility-api/issues/99
+ * Elements specifically listed in html-aam
+ *
+ * We don't need this for `label` or `legend` elements.
+ * Their implicit roles already allow "naming from content".
+ *
+ * sources:
+ *
+ * - https://w3c.github.io/html-aam/#table-element
  */
 function isNativeHostLanguageTextAlternativeElement(
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars -- not implemented yet
 	node: Node
 ): node is Element {
-	return false;
+	return isHTMLTableCaptionElement(node);
 }
 
 /**
@@ -381,6 +389,23 @@ export function computeAccessibleName(
 			return null;
 		}
 
+		// https://w3c.github.io/html-aam/#table-element
+		if (isHTMLTableElement(node)) {
+			consultedNodes.add(node);
+			const children = ArrayFrom(node.childNodes);
+			for (let i = 0; i < children.length; i += 1) {
+				const child = children[i];
+				if (isHTMLTableCaptionElement(child)) {
+					return computeTextAlternative(child, {
+						isEmbeddedInLabel: false,
+						isReferenced: false,
+						recursion: false,
+					});
+				}
+			}
+			return null;
+		}
+
 		if (
 			!(
 				isHTMLInputElement(node) ||

sources/util.ts

@@ -2,6 +2,12 @@ export function isElement(node: Node | null): node is Element {
 	return node !== null && node.nodeType === node.ELEMENT_NODE;
 }
 
+export function isHTMLTableCaptionElement(
+	node: Node | null
+): node is HTMLTableCaptionElement {
+	return isElement(node) && node.tagName === "CAPTION";
+}
+
 export function isHTMLInputElement(
 	node: Node | null
 ): node is HTMLInputElement {
@@ -14,6 +20,12 @@ export function isHTMLSelectElement(
 	return isElement(node) && node.tagName === "SELECT";
 }
 
+export function isHTMLTableElement(
+	node: Node | null
+): node is HTMLTableElement {
+	return isElement(node) && node.tagName === "TABLE";
+}
+
 export function isHTMLTextAreaElement(
 	node: Node | null
 ): node is HTMLTextAreaElement {