Accept title attribute for name of input type=image (#1003)

* Accept title attribute for name of input type=image
Siteimprove · Dec 7, 2021 · 009ce85 · 009ce85
1 parent 6459442
commit 009ce85
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/packages/alfa-aria/src/feature.ts b/packages/alfa-aria/src/feature.ts
@@ -459,34 +459,54 @@ const Features: Features = {
             element
           )
         ) {
+          /**
+           * {@link https://www.w3.org/TR/html-aam-1.0/#input-type-text-input-type-password-input-type-search-input-type-tel-input-type-url-and-textarea-element}
+           */
           return Name.fromSteps(
             () => nameFromLabel(element, device, state),
+            // The title attribute has poor and varying support, but
+            // the specs give it precedence over placeholder.
+            // This could be a browser-branched value.
             () => nameFromAttribute(element, "title", "placeholder")
           );
         }
 
         if (test(hasInputType("button"), element)) {
+          /**
+           * {@link https://www.w3.org/TR/html-aam-1.0/#input-type-button-input-type-submit-and-input-type-reset}
+           */
           return nameFromAttribute(element, "value");
         }
 
         if (test(hasInputType("submit"), element)) {
+          /**
+           * {@link https://www.w3.org/TR/html-aam-1.0/#input-type-button-input-type-submit-and-input-type-reset}
+           */
           return Name.fromSteps(
             () => nameFromAttribute(element, "value"),
             () => Option.of(Name.of("Submit"))
           );
         }
 
         if (test(hasInputType("reset"), element)) {
+          /**
+           * {@link https://www.w3.org/TR/html-aam-1.0/#input-type-button-input-type-submit-and-input-type-reset}
+           */
           return Name.fromSteps(
             () => nameFromAttribute(element, "value"),
             () => Option.of(Name.of("Reset"))
           );
         }
 
         if (test(hasInputType("image"), element)) {
+          /**
+           * {@link https://www.w3.org/TR/html-aam-1.0/#input-type-image}
+           */
           return Name.fromSteps(
-            () => nameFromAttribute(element, "alt"),
-            // https://www.w3.org/TR/html-aam-1.0/#input-type-image-accessible-name-computation
+            // The title attribute has poor and varying support, but the specs
+            // use it.
+            // This could be a browser-branched value.
+            () => nameFromAttribute(element, "alt", "title"),
             () => Option.of(Name.of("Submit Query"))
           );
         }

diff --git a/packages/alfa-aria/test/name.spec.tsx b/packages/alfa-aria/test/name.spec.tsx
@@ -1083,6 +1083,19 @@ test(`.from() determines the name of an <input> element with a placeholder
   });
 });
 
+test(`.from() determines the name of an \`<input type="image">\` with a
+      title attribute.`, (t) => {
+  const input = <input type="image" src="foo" title="Search" />;
+
+  t.deepEqual(Name.from(input, device).toJSON(), {
+    type: "some",
+    value: {
+      value: "Search",
+      sources: [{ type: "label", attribute: "/input[1]/@title" }],
+    },
+  });
+});
+
 test(`.from() determines the name of an <input type="button"> element with a
       value attribute`, (t) => {
   const input = <input type="button" value="Hello world" />;
@@ -1167,7 +1180,7 @@ test(`.from() determines the name of an <input type="image"> element`, (t) => {
   t.deepEqual(Name.from(input, device).toJSON(), {
     type: "some",
     value: {
-      value: "Submit",
+      value: "Submit Query",
       sources: [],
     },
   });