fix: Prefer button subtree over title attribute (#811)

Author: eps1lon

.changeset/twelve-icons-dance.md

@@ -0,0 +1,16 @@
+---
+"dom-accessibility-api": patch
+---
+
+Prefer button subtree over `title` attribute.
+
+```diff
+ const name = computeAccessibleName(<button title="from-title">from-content</button>);
+-'from-title' === name
++'from-content' === name
+```
+
+`<button title="from-title">from-content</button>` would previously compute the accessible name "from-title".
+This is correct in ACCNAME 1.2 but is changed in the latest editors draft.
+The latest editors draft specifically refers to HTML-AAM which says that the subtree should take precedent over the `title` attribute.
+`computeAccessibleName` now calculates "from-content" as the accessible name.

sources/__tests__/accessible-name.js

@@ -387,6 +387,10 @@ test.each([
 	// https://www.w3.org/TR/svg-aam-1.0/
 	[`<svg data-test><title><em>greek</em> rho</title></svg>`, "greek rho"],
 	[`<button title="" data-test>click me</button>`, "click me"],
+	[
+		`<button title="You should really click this" data-test>click me</button>`,
+		"click me",
+	],
 	// https://w3c.github.io/html-aam/#input-type-button-input-type-submit-and-input-type-reset-accessible-name-computation
 	[`<input data-test value="Submit form" type="submit" />`, "Submit form"],
 	// https://w3c.github.io/html-aam/#input-type-image

sources/accessible-name-and-description.ts

@@ -398,7 +398,7 @@ export function computeTextAlternative(
 			accumulatedText = `${accumulatedText} ${afterContent}`;
 		}
 
-		return accumulatedText;
+		return accumulatedText.trim();
 	}
 
 	function computeElementTextAlternative(node: Node): string | null {
@@ -538,6 +538,18 @@ export function computeTextAlternative(
 			return "Submit Query";
 		}
 
+		if (hasAnyConcreteRoles(node, ["button"])) {
+			// https://www.w3.org/TR/html-aam-1.0/#button-element
+			const nameFromSubTree = computeMiscTextAlternative(node, {
+				isEmbeddedInLabel: false,
+				isReferenced: false,
+			});
+			if (nameFromSubTree !== "") {
+				return nameFromSubTree;
+			}
+			return useAttribute(node, "title");
+		}
+
 		return useAttribute(node, "title");
 	}