fix: Consider <label /> when computing the accessible name of `<out…

…put />` (#666)

.changeset/breezy-garlics-trade.md

@@ -0,0 +1,15 @@
+---
+"dom-accessibility-api": patch
+---
+
+Consider `<label />` when computing the accessible name of `<output />`
+
+Given
+
+```html
+<label for="outputid">Output Label</label> <output id="outputid"></output>
+```
+
+Previously the accessible name of the `<output />` would ignore the `<label />`.
+However, an [`<output />` is labelable](https://html.spec.whatwg.org/#the-output-element) and therefore the accessible name is now computed using `<label />` elements if they exists.
+In this example the accessible name is `"Output Label"`.

sources/__tests__/accessible-name.js

@@ -141,6 +141,16 @@ describe("to upstream", () => {
 		testMarkup(markup, expectedAccessibleName)
 	);
 
+	test("output is labelable", () => {
+		const container = renderIntoDocument(`
+			<label for="outputid">Output Label</label>
+			<output id="outputid" data-test></output>
+		`);
+
+		const output = container.querySelector("output");
+		expect(output).toHaveAccessibleName("Output Label");
+	});
+
 	test.each([
 		[
 			// TODO

sources/accessible-name-and-description.ts

@@ -298,6 +298,7 @@ function getLabels(element: Element): HTMLLabelElement[] | null {
 		return ArrayFrom(labelsProperty);
 	}
 
+	// polyfill
 	if (!isLabelableElement(element)) {
 		return null;
 	}
@@ -492,29 +493,21 @@ export function computeTextAlternative(
 			}
 		}
 
-		if (
-			isHTMLInputElement(node) ||
-			isHTMLSelectElement(node) ||
-			isHTMLTextAreaElement(node)
-		) {
-			const input = node;
-
-			const labels = getLabels(input);
-			if (labels !== null && labels.length !== 0) {
-				consultedNodes.add(input);
-				return ArrayFrom(labels)
-					.map((element) => {
-						return computeTextAlternative(element, {
-							isEmbeddedInLabel: true,
-							isReferenced: false,
-							recursion: true,
-						});
-					})
-					.filter((label) => {
-						return label.length > 0;
-					})
-					.join(" ");
-			}
+		const labels = getLabels(node);
+		if (labels !== null && labels.length !== 0) {
+			consultedNodes.add(node);
+			return ArrayFrom(labels)
+				.map((element) => {
+					return computeTextAlternative(element, {
+						isEmbeddedInLabel: true,
+						isReferenced: false,
+						recursion: true,
+					});
+				})
+				.filter((label) => {
+					return label.length > 0;
+				})
+				.join(" ");
 		}
 
 		// https://w3c.github.io/html-aam/#input-type-image-accessible-name-computation