fix: Fix test name_heading-combobox

README.md

@@ -28,12 +28,12 @@ cloning. See tests/README.md for more info about the test setup.
 
 ### browser (Chrome)
 
-135/144 of which 5 are due to missing whitespace.
+136/144 of which 5 are due to missing whitespace.
 
 ### jsdom
 
 <details>
-<summary>report 125/159 passing of which 16 are due `::before { content }`, 14 are accessible desc, 8 are pathological </summary>
+<summary>report 126/159 passing of which 16 are due `::before { content }`, 14 are accessible desc, 7 are pathological </summary>
 
 ```bash
   web-platform-tests
@@ -79,7 +79,7 @@ cloning. See tests/README.md for more info about the test setup.
       ✓ name_from_content_of_label-manual.html
       ✓ name_from_content_of_labelledby_element-manual.html
       ✓ name_from_content_of_labelledby_elements_one_of_which_is_hidden-manual.html
-      ✓ [expected fail] name_heading-combobox-focusable-alternative-manual.html
+      ✓ name_heading-combobox-focusable-alternative-manual.html
       ✓ name_image-title-manual.html
       ✓ name_link-mixed-content-manual.html
       ✓ name_link-with-label-manual.html

sources/__tests__/accessible-name.js

@@ -170,6 +170,19 @@ describe("to upstream", () => {
 <button data-test id="trigger" aria-labelledby="trigger role">Pick</button>
 `,
 			"Pick contributor"
+		],
+		// It seems like this is what wpt `name_heading-combobox-focusable-alternative`
+		// should actually test. I could not find specification for combobox falling
+		// back to the "value" attribute when computing the text alternative for the selected option
+		[
+			"embedded textbox",
+			`
+<h2 data-test>
+	Country of origin:
+	<input type="text" title="Choose your country." value="United States">
+</h2>
+`,
+			"Country of origin: United States"
 		]
 	])(`coverage for %s`, (_, markup, expectedAccessibleName) => {
 		return testMarkup(markup, expectedAccessibleName);

sources/accessible-name.ts

@@ -123,12 +123,14 @@ function queryChildNodes(node: Node): Node[] {
 }
 
 /**
- *
  * @param {Node} node -
- * @returns {boolean} -
+ * @returns {boolean} - As defined in step 2E of https://w3c.github.io/accname/#mapping_additional_nd_te
  */
-function isEmbeddedControl(node: Node): boolean {
-	return false;
+function isControl(node: Node): boolean {
+	return (
+		hasAnyConcreteRoles(node, ["button", "combobox", "listbox", "textbox"]) ||
+		hasAbstractRole(node, "range")
+	);
 }
 
 function hasAbstractRole(node: Node, role: string): node is Element {
@@ -414,46 +416,52 @@ export function computeAccessibleName(
 					computeTextAlternative(element, {
 						isEmbeddedInLabel: context.isEmbeddedInLabel,
 						isReferenced: true,
-						recursion: true
+						// thais isn't recursion as specified, otherwise we would skip
+						// `aria-label` in
+						// <input id="myself" aria-label="foo" aria-labelledby="myself"
+						recursion: false
 					})
 				)
 				.join(" ");
 		}
 
 		// 2C
-		const ariaLabel = (
-			(isElement(current) && current.getAttribute("aria-label")) ||
-			""
-		).trim();
-		if (ariaLabel !== "") {
-			consultedNodes.add(current);
-			if (context.recursion && isEmbeddedControl(current)) {
-				throw new Error("Not implemented");
-			}
-			return ariaLabel;
-		}
-
-		// 2D
-		if (!hasAnyConcreteRoles(current, ["none", "presentation"])) {
-			const elementTextAlternative = computeElementTextAlternative(current);
-			if (elementTextAlternative !== null) {
+		const skipToStep2E = context.recursion && isControl(current);
+		if (!skipToStep2E) {
+			const ariaLabel = (
+				(isElement(current) && current.getAttribute("aria-label")) ||
+				""
+			).trim();
+			if (ariaLabel !== "") {
 				consultedNodes.add(current);
-				return elementTextAlternative;
+				return ariaLabel;
 			}
-			const attributeTextAlternative = computeAttributeTextAlternative(current);
-			if (attributeTextAlternative !== null) {
-				consultedNodes.add(current);
-				return attributeTextAlternative;
+
+			// 2D
+			if (!hasAnyConcreteRoles(current, ["none", "presentation"])) {
+				const elementTextAlternative = computeElementTextAlternative(current);
+				if (elementTextAlternative !== null) {
+					consultedNodes.add(current);
+					return elementTextAlternative;
+				}
+				const attributeTextAlternative = computeAttributeTextAlternative(
+					current
+				);
+				if (attributeTextAlternative !== null) {
+					consultedNodes.add(current);
+					return attributeTextAlternative;
+				}
 			}
 		}
 
 		// 2E
-		if (context.isReferenced || context.isEmbeddedInLabel) {
+		if (skipToStep2E || context.isEmbeddedInLabel || context.isReferenced) {
 			if (hasAnyConcreteRoles(current, ["combobox", "listbox"])) {
 				consultedNodes.add(current);
 				const selectedOptions = querySelectedOptions(current);
 				if (selectedOptions.length === 0) {
-					return "";
+					// defined per test `name_heading_combobox`
+					return isHTMLInputElement(current) ? current.value : "";
 				}
 				return Array.from(selectedOptions)
 					.map(selectedOption => {

tests/cypress/integration/web-platform-test.js

@@ -34,7 +34,7 @@ context("wpt", () => {
 			"name_from_content_of_labelledby_elements_one_of_which_is_hidden-manual",
 			"pass"
 		],
-		["name_heading-combobox-focusable-alternative-manual", "fail"], // wrong text alternative, see mailing list
+		["name_heading-combobox-focusable-alternative-manual", "pass"],
 		["name_image-title-manual", "pass"],
 		["name_link-mixed-content-manual", "pass"],
 		["name_link-with-label-manual", "pass"],

tests/wpt-jsdom/to-run.yaml

@@ -5,8 +5,6 @@ name_file-label-inline-block-elements-manual.html:
   [fail, getComputedStyle display defaults not implemented]
 name_file-label-inline-block-styles-manual.html:
   [fail, getComputedStyle pseudo selector not implemented]
-name_heading-combobox-focusable-alternative-manual.html:
-  [fail, could not find spec for that]
 name_test_case_552-manual.html:
   [fail, getComputedStyle pseudo selector not implemented]
 name_test_case_553-manual.html: