fix: Ignore title in 2E (#893)

* fix: Ignore `title` in 2E * Type-safety * Lint * Ensure empty 2F text is ignored * Update .changeset/clever-masks-film.md
eps1lon · Jan 1, 2023 · d5af41d · d5af41d
1 parent 8088f6d
commit d5af41d
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 32 deletions.
diff --git a/.changeset/clever-masks-film.md b/.changeset/clever-masks-film.md
@@ -0,0 +1,8 @@
+---
+"dom-accessibility-api": patch
+---
+
+Don't consider `title` in 2E
+
+Effectively ensures that `title` will not have precedence over name from content.
+For example, the `option` in `<option title="Title">Content</option>` will now have `"Content"` has its accessible name instead of `"Title"`.
diff --git a/sources/__tests__/accessible-name.js b/sources/__tests__/accessible-name.js
@@ -108,6 +108,11 @@ describe("to upstream", () => {
 			`<select><optgroup data-test label="foo"><option value="1">baz</option></optgroup></select>`,
 			"foo",
 		],
+		[
+			"option",
+			`<select><option data-test title="Title">Content</option></select>`,
+			"Content",
+		],
 		[
 			"radio",
 			`<div data-test role="radio"><em>greek</em> kappa</div>`,
@@ -401,6 +406,7 @@ test.each([
 		`<img data-test alt="" aria-label="a logo" role="presentation" /> />`,
 		"a logo",
 	],
+	[` <input type="radio" data-test title="crazy"/>`, "crazy"],
 ])(`misc #%#`, (markup, expectedAccessibleName) => {
 	expect(markup).toRenderIntoDocumentAccessibleName(expectedAccessibleName);
 });

diff --git a/sources/accessible-name-and-description.ts b/sources/accessible-name-and-description.ts
@@ -207,14 +207,6 @@ function isDescendantOfNativeHostLanguageTextAlternativeElement(
 	return false;
 }
 
-/**
- * TODO https://github.com/eps1lon/dom-accessibility-api/issues/101
- */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars -- not implemented yet
-function computeTooltipAttributeValue(node: Node): string | null {
-	return null;
-}
-
 function getValueOfTextbox(element: Element): string {
 	if (isHTMLInputElement(element) || isHTMLTextAreaElement(element)) {
 		return element.value;
@@ -401,30 +393,38 @@ export function computeTextAlternative(
 		return accumulatedText.trim();
 	}
 
-	function computeElementTextAlternative(node: Node): string | null {
+	/**
+	 *
+	 * @param element
+	 * @param attributeName
+	 * @returns A string non-empty string or `null`
+	 */
+	function useAttribute(
+		element: Element,
+		attributeName: string
+	): string | null {
+		const attribute = element.getAttributeNode(attributeName);
+		if (
+			attribute !== null &&
+			!consultedNodes.has(attribute) &&
+			attribute.value.trim() !== ""
+		) {
+			consultedNodes.add(attribute);
+			return attribute.value;
+		}
+		return null;
+	}
+
+	function computeTooltipAttributeValue(node: Node): string | null {
 		if (!isElement(node)) {
 			return null;
 		}
 
-		/**
-		 *
-		 * @param element
-		 * @param attributeName
-		 * @returns A string non-empty string or `null`
-		 */
-		function useAttribute(
-			element: Element,
-			attributeName: string
-		): string | null {
-			const attribute = element.getAttributeNode(attributeName);
-			if (
-				attribute !== null &&
-				!consultedNodes.has(attribute) &&
-				attribute.value.trim() !== ""
-			) {
-				consultedNodes.add(attribute);
-				return attribute.value;
-			}
+		return useAttribute(node, "title");
+	}
+
+	function computeElementTextAlternative(node: Node): string | null {
+		if (!isElement(node)) {
 			return null;
 		}
 
@@ -547,10 +547,9 @@ export function computeTextAlternative(
 			if (nameFromSubTree !== "") {
 				return nameFromSubTree;
 			}
-			return useAttribute(node, "title");
 		}
 
-		return useAttribute(node, "title");
+		return null;
 	}
 
 	function computeTextAlternative(
@@ -673,11 +672,14 @@ export function computeTextAlternative(
 			isNativeHostLanguageTextAlternativeElement(current) ||
 			isDescendantOfNativeHostLanguageTextAlternativeElement(current)
 		) {
-			consultedNodes.add(current);
-			return computeMiscTextAlternative(current, {
+			const accumulatedText2F = computeMiscTextAlternative(current, {
 				isEmbeddedInLabel: context.isEmbeddedInLabel,
 				isReferenced: false,
 			});
+			if (accumulatedText2F !== "") {
+				consultedNodes.add(current);
+				return accumulatedText2F;
+			}
 		}
 
 		if (current.nodeType === current.TEXT_NODE) {