From 26ee73de9ad6fce27cde0d5ec53a2bc4a12bd879 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Wed, 2 Jun 2021 13:51:40 +0200
Subject: [PATCH] fix: Consider `<label />` when computing the accessible name
 of `<output />` (#666)

---
 .changeset/breezy-garlics-trade.md         | 15 +++++++++
 sources/__tests__/accessible-name.js       | 10 ++++++
 sources/accessible-name-and-description.ts | 39 +++++++++-------------
 3 files changed, 41 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/breezy-garlics-trade.md

diff --git a/.changeset/breezy-garlics-trade.md b/.changeset/breezy-garlics-trade.md
new file mode 100644
index 00000000..a514b0a7
--- /dev/null
+++ b/.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"`.
diff --git a/sources/__tests__/accessible-name.js b/sources/__tests__/accessible-name.js
index 4ad9f405..1ac4f7c0 100644
--- a/sources/__tests__/accessible-name.js
+++ b/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
diff --git a/sources/accessible-name-and-description.ts b/sources/accessible-name-and-description.ts
index 6cb1c3ef..0b15e045 100644
--- a/sources/accessible-name-and-description.ts
+++ b/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