fix: Legend element as accessible name for Fielset element (#234)

eps1lon · May 16, 2020 · 737dfae · 737dfae
1 parent 1bed102
commit 737dfae
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 2 deletions.
diff --git a/.changeset/pink-lizards-push.md b/.changeset/pink-lizards-push.md
@@ -0,0 +1,13 @@
+---
+"dom-accessibility-api": patch
+---
+
+Consider <legend> for the name of its <fieldset> element.
+
+```html
+<fieldset>
+	<legend><em>my</em> fieldset</legend>
+</fieldset>
+```
+
+Computing the name for this fieldset would've returned an emptry string previously. It now correctly computes `my fieldset` following the [accessible name computation for `fieldset` elements](https://w3c.github.io/html-aam/#fieldset-and-legend-elements)
diff --git a/sources/__tests__/accessible-name.js b/sources/__tests__/accessible-name.js
@@ -48,8 +48,8 @@ function testMarkup(markup, accessibleName) {
 }
 
 describe("to upstream", () => {
+	// name from content
 	test.each([
-		// name from content
 		[
 			"cell",
 			`<div data-test role="cell"><em>greek</em> alpha</div>`,
@@ -121,7 +121,7 @@ describe("to upstream", () => {
 			`<li data-test role="treeitem"><em>greek</em> pi</li>`,
 			"greek pi",
 		],
-	])(`role %s`, (_, markup, expectedAccessibleName) =>
+	])(`role %s has name from content`, (_, markup, expectedAccessibleName) =>
 		testMarkup(markup, expectedAccessibleName)
 	);
 
@@ -189,6 +189,7 @@ describe("to upstream", () => {
 	});
 });
 
+// misc tests
 test.each([
 	[
 		`
@@ -281,6 +282,15 @@ test.each([
 		`<label for="textarea">A TextArea</label><textarea data-test id="textarea" />`,
 		"A TextArea",
 	],
+	// https://w3c.github.io/html-aam/#fieldset-and-legend-elements
+	[
+		`<fieldset data-test><legend><em>greek</em> rho</legend></fieldset>`,
+		"greek rho",
+	],
+	[
+		`<fieldset data-test aria-owns="legend"></fieldset><legend id="legend"><em>greek</em> rho</legend>`,
+		"",
+	],
 ])(`test #%#`, testMarkup);
 
 describe("prohibited naming", () => {

diff --git a/sources/accessible-name.ts b/sources/accessible-name.ts
@@ -10,6 +10,8 @@ import {
 	isHTMLSelectElement,
 	isHTMLTextAreaElement,
 	safeWindow,
+	isHTMLFieldSetElement,
+	isHTMLLegendElement,
 } from "./util";
 
 /**
@@ -362,6 +364,21 @@ export function computeAccessibleName(
 	}
 
 	function computeElementTextAlternative(node: Node): string | null {
+		// https://w3c.github.io/html-aam/#fieldset-and-legend-elements
+		if (isHTMLFieldSetElement(node)) {
+			consultedNodes.add(node);
+			for (const child of ArrayFrom(node.childNodes)) {
+				if (isHTMLLegendElement(child)) {
+					return computeTextAlternative(child, {
+						isEmbeddedInLabel: false,
+						isReferenced: false,
+						recursion: false,
+					});
+				}
+			}
+			return null;
+		}
+
 		if (
 			!(
 				isHTMLInputElement(node) ||

diff --git a/sources/util.ts b/sources/util.ts
@@ -44,3 +44,23 @@ export function safeWindow(node: Node): Window {
 	}
 	return defaultView;
 }
+
+export function isHTMLFieldSetElement(
+	node: Node | null
+): node is HTMLFieldSetElement {
+	return (
+		isElement(node) &&
+		// @ts-ignore
+		node instanceof node.ownerDocument.defaultView.HTMLFieldSetElement
+	);
+}
+
+export function isHTMLLegendElement(
+	node: Node | null
+): node is HTMLLegendElement {
+	return (
+		isElement(node) &&
+		// @ts-ignore
+		node instanceof node.ownerDocument.defaultView.HTMLLegendElement
+	);
+}