fix: Ignore title in 2E

.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.

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);
 });

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) {