SIA-R8: add type="password" (and more) to applicability

.changeset/olive-seals-give.md

@@ -0,0 +1,5 @@
+---
+"@siteimprove/alfa-rules": minor
+---
+
+**Added:** R8: added type="password" to applicability. Also type="color", type="date", and more.

packages/alfa-rules/src/sia-r8/rule.ts

@@ -1,6 +1,6 @@
-import { Rule } from "@siteimprove/alfa-act";
+import { Diagnostic, Rule } from "@siteimprove/alfa-act";
 import type { Role } from "@siteimprove/alfa-aria";
-import { DOM } from "@siteimprove/alfa-aria";
+import * as aria from "@siteimprove/alfa-aria"
 import { Element, Namespace, Node, Query } from "@siteimprove/alfa-dom";
 import { Predicate } from "@siteimprove/alfa-predicate";
 import { Err, Ok } from "@siteimprove/alfa-result";
@@ -12,10 +12,9 @@
 import { Scope, Stability } from "../tags/index.js";
 import { WithRole } from "../common/diagnostic.js";
 
-const { hasNonEmptyAccessibleName, hasRole, isIncludedInTheAccessibilityTree } =
-  DOM;
-const { hasNamespace } = Element;
-const { and } = Predicate;
+const { hasNonEmptyAccessibleName, hasRole, isIncludedInTheAccessibilityTree } = aria.DOM;
+const { hasInputType, hasName, hasNamespace } = Element;
+const { and, or } = Predicate;
 const { getElementDescendants } = Query;
 
 export default Rule.Atomic.of<Page, Element>({
@@ -28,34 +27,49 @@
         return getElementDescendants(document, Node.fullTree).filter(
           and(
             hasNamespace(Namespace.HTML),
-            hasRole(
-              device,
-              "checkbox",
-              "combobox",
-              "listbox",
-              "menuitemcheckbox",
-              "menuitemradio",
-              "radio",
-              "searchbox",
-              "slider",
-              "spinbutton",
-              "switch",
-              "textbox",
+            or(
+              hasRole(
+                device,
+                "checkbox",
+                "combobox",
+                "listbox",
+                "menuitemcheckbox",
+                "menuitemradio",
+                "radio",
+                "searchbox",
+                "slider",
+                "spinbutton",
+                "switch",
+                "textbox",
+              ), 
+              hasInputType("password", "color", "date", "datetime-local", "file", "month", "time", "week"),
             ),
             isIncludedInTheAccessibilityTree(device),
           ),
         );
       },
 
       expectations(target) {
-        const role = WithRole.getRoleName(target, device);
-        return {
-          1: expectation(
-            hasNonEmptyAccessibleName(device)(target),
-            () => Outcomes.HasName(role),
-            () => Outcomes.HasNoName(role),
-          ),
-        };
+        const role = aria.Node.from(target, device).role;
+        if(role.isSome()) {
+          const roleName = role.get().name;
+          return {
+            1: expectation(
+              hasNonEmptyAccessibleName(device)(target),
+              () => Outcomes.FormFieldWithAriaRoleHasName(roleName),
+              () => Outcomes.FormFieldWithAriaRoleHasNoName(roleName),
+            ),
+          };
+        } else {
+          const type = target.attribute("type").map(attr => attr.value).getOr("");
+          return {
+            1: expectation(
+              hasNonEmptyAccessibleName(device)(target),
+              () => Outcomes.InputElementWithNoAriaRoleHasName(type),
+              () => Outcomes.InputElementWithNoAriaRoleHasNoName(type),
+            ),
+          };
+        }
       },
     };
   },
@@ -65,11 +79,17 @@
  * @public
  */
 export namespace Outcomes {
-  export const HasName = (role: Role.Name) =>
+  export const FormFieldWithAriaRoleHasName = (role: Role.Name) =>
     Ok.of(WithRole.of(`The form field has an accessible name`, role));
 
-  export const HasNoName = (role: Role.Name) =>
+  export const FormFieldWithAriaRoleHasNoName = (role: Role.Name) =>
     Err.of(
       WithRole.of(`The form field does not have an accessible name`, role),
     );
+
+  export const InputElementWithNoAriaRoleHasName = (typeAttribValue: string) =>
+    Ok.of(Diagnostic.of(`The type="${typeAttribValue}" form field has an accessible name`));
+
+  export const InputElementWithNoAriaRoleHasNoName = (typeAttribValue: string) =>
+    Err.of(Diagnostic.of(`The type="${typeAttribValue}" form field does not have an accessible name`));
 }

packages/alfa-rules/test/sia-r8/rule.spec.tsx

@@ -20,7 +20,7 @@ test("evaluate() passes an input element with implicit label", async (t) => {
 
   t.deepEqual(await evaluate(R8, { document }), [
     passed(R8, target, {
-      1: Outcomes.HasName("textbox"),
+      1: Outcomes.FormFieldWithAriaRoleHasName("textbox"),
     }),
   ]);
 });
@@ -32,7 +32,7 @@ test("evaluate() passes an input element with aria-label", async (t) => {
 
   t.deepEqual(await evaluate(R8, { document }), [
     passed(R8, target, {
-      1: Outcomes.HasName("textbox"),
+      1: Outcomes.FormFieldWithAriaRoleHasName("textbox"),
     }),
   ]);
 });
@@ -53,7 +53,7 @@ test("evaluate() passes a select element with explicit label", async (t) => {
 
   t.deepEqual(await evaluate(R8, { document }), [
     passed(R8, target, {
-      1: Outcomes.HasName("listbox"),
+      1: Outcomes.FormFieldWithAriaRoleHasName("listbox"),
     }),
   ]);
 });
@@ -67,7 +67,7 @@ test("evaluate() passes a textarea element with aria-labelledby", async (t) => {
 
   t.deepEqual(await evaluate(R8, { document }), [
     passed(R8, target, {
-      1: Outcomes.HasName("textbox"),
+      1: Outcomes.FormFieldWithAriaRoleHasName("textbox"),
     }),
   ]);
 });
@@ -81,7 +81,7 @@ test("evaluate() passes a input element with placeholder attribute", async (t) =
 
   t.deepEqual(await evaluate(R8, { document }), [
     passed(R8, target, {
-      1: Outcomes.HasName("textbox"),
+      1: Outcomes.FormFieldWithAriaRoleHasName("textbox"),
     }),
   ]);
 });
@@ -100,7 +100,7 @@ test(`evaluate() passes a div element with explicit combobox role and an
 
   t.deepEqual(await evaluate(R8, { document }), [
     passed(R8, target, {
-      1: Outcomes.HasName(role),
+      1: Outcomes.FormFieldWithAriaRoleHasName(role),
     }),
   ]);
 });
@@ -112,7 +112,7 @@ test("evaluate() fails a input element without accessible name", async (t) => {
 
   t.deepEqual(await evaluate(R8, { document }), [
     failed(R8, target, {
-      1: Outcomes.HasNoName("textbox"),
+      1: Outcomes.FormFieldWithAriaRoleHasNoName("textbox"),
     }),
   ]);
 });
@@ -124,7 +124,7 @@ test("evaluate() fails a input element with empty aria-label", async (t) => {
 
   t.deepEqual(await evaluate(R8, { document }), [
     failed(R8, target, {
-      1: Outcomes.HasNoName("textbox"),
+      1: Outcomes.FormFieldWithAriaRoleHasNoName("textbox"),
     }),
   ]);
 });
@@ -143,7 +143,7 @@ test(`evaluate() fails a select element with aria-labelledby pointing to an
 
   t.deepEqual(await evaluate(R8, { document }), [
     failed(R8, target, {
-      1: Outcomes.HasNoName("listbox"),
+      1: Outcomes.FormFieldWithAriaRoleHasNoName("listbox"),
     }),
   ]);
 });
@@ -163,7 +163,7 @@ test("evaluate() fails a textbox with no accessible name", async (t) => {
 
   t.deepEqual(await evaluate(R8, { document }), [
     failed(R8, target, {
-      1: Outcomes.HasNoName(role),
+      1: Outcomes.FormFieldWithAriaRoleHasNoName(role),
     }),
   ]);
 });
@@ -197,3 +197,156 @@ test("evaluate() is inapplicable for an element which is not displayed", async (
 
   t.deepEqual(await evaluate(R8, { document }), [inapplicable(R8)]);
 });
+
+test(`evaluate() fails an input element with type=password which is disabled 
+    and without accessible name`, async (t) => {
+  const target = <input type="password" disabled/>;
+
+  const document = h.document([target]);
+
+  t.deepEqual(await evaluate(R8, { document }), [
+    failed(R8, target, {
+      1: Outcomes.InputElementWithNoAriaRoleHasNoName("password"),
+    }),
+  ]);
+});
+
+test("evaluate() passes an input element with type=password and implicit label", async (t) => {
+  const target = <input  type="password"/>;
+
+  const label = (
+    <label>
+      password
+      {target}
+    </label>
+  );
+
+  const document = h.document([label]);
+
+  t.deepEqual(await evaluate(R8, { document }), [
+    passed(R8, target, {
+      1: Outcomes.InputElementWithNoAriaRoleHasName("password"),
+    }),
+  ]);
+});
+
+test("evaluate() passes an input element with type=password and aria-label", async (t) => {
+  const target = <input type="password" aria-label="password" disabled />;
+
+  const document = h.document([target]);
+
+  t.deepEqual(await evaluate(R8, { document }), [
+    passed(R8, target, {
+      1: Outcomes.InputElementWithNoAriaRoleHasName("password"),
+    }),
+  ]);
+});
+
+test("evaluate() passes an input element with type=password and explicit label", async (t) => {
+  const target = <input type="password" id="country" />;
+
+  const label = <label for="country">Country</label>;
+
+  const document = h.document([label, target]);
+
+  t.deepEqual(await evaluate(R8, { document }), [
+    passed(R8, target, {
+      1: Outcomes.InputElementWithNoAriaRoleHasName("password"),
+    }),
+  ]);
+});
+
+test("evaluate() passes an input element with type=password and aria-labelledby", async (t) => {
+  const target = <input type="password" aria-labelledby="pwd" />;
+
+  const label = <div id="pwd">Password</div>;
+
+  const document = h.document([label, target]);
+
+  t.deepEqual(await evaluate(R8, { document }), [
+    passed(R8, target, {
+      1: Outcomes.InputElementWithNoAriaRoleHasName("password"),
+    }),
+  ]);
+});
+
+test("evaluate() passes an input element with type=password and placeholder attribute", async (t) => {
+  const target = <input type="password" placeholder="Enter your password" />;
+
+  const document = h.document([target]);
+
+  t.deepEqual(await evaluate(R8, { document }), [
+    passed(R8, target, {
+      1: Outcomes.InputElementWithNoAriaRoleHasName("password"),
+    }),
+  ]);
+});
+
+test("evaluate() fails an input element with type=password and empty aria-label", async (t) => {
+  const target = <input type="password" aria-label=" " />;
+
+  const document = h.document([target]);
+
+  t.deepEqual(await evaluate(R8, { document }), [
+    failed(R8, target, {
+      1: Outcomes.InputElementWithNoAriaRoleHasNoName("password"),
+    }),
+  ]);
+});
+
+test(`evaluate() fails an input element with type=password and aria-labelledby pointing to an
+     empty element`, async (t) => {
+  const target = <input type="password" aria-labelledby="country" />;
+
+  const label = <div id="country"></div>;
+
+  const document = h.document([label, target]);
+
+  t.deepEqual(await evaluate(R8, { document }), [
+    failed(R8, target, {
+      1: Outcomes.InputElementWithNoAriaRoleHasNoName("password"),
+    }),
+  ]);
+});
+
+test(`evaluate() is inapplicable for an input element with type=password 
+    and aria-hidden`, async (t) => {
+  const target = <input type="password" aria-hidden="true" aria-label="password" />;
+
+  const document = h.document([target]);
+
+  t.deepEqual(await evaluate(R8, { document }), [inapplicable(R8)]);
+});
+
+test(`evaluate() is inapplicable for an element with type=password and which 
+    is not displayed`, async (t) => {
+  const target = <input type="password" aria-label="password" style={{ display: "none" }} />;
+
+  const document = h.document([target]);
+
+  t.deepEqual(await evaluate(R8, { document }), [inapplicable(R8)]);
+});
+
+test(`evaluate() fails for input elements with various types which give it no ARIA 
+    role and which have no accessible name`, async (t) => {
+  for (const type of ["color", "date", "datetime-local", "file", "month", "time", "week"]) {
+    const target = <input type={type}/>;
+    const document = h.document([target])
+    t.deepEqual(await evaluate(R8, { document }), 
+      [failed(R8, target, {1: Outcomes.InputElementWithNoAriaRoleHasNoName(type)})]);
+  }
+});
+
+test(`evaluate() passes for input elements with various types which give it no ARIA 
+    role and which have an aria-label`, async (t) => {
+  const targets = [<input type="color" aria-label="x"/>, <input type="date" aria-label="x"/>, 
+    <input type="datetime-local" aria-label="x"/>, <input type="file" aria-label="x"/>, 
+    <input type="month" aria-label="x"/>, <input type="time" aria-label="x"/>, 
+    <input type="week" aria-label="x"/>];
+  const document = h.document(targets)
+  t.deepEqual(await evaluate(R8, { document }), 
+    targets.map(target => passed(R8, target, { 
+      1: Outcomes.InputElementWithNoAriaRoleHasName(target.attribute("type")
+        .map(attr => attr.value).getOr("")) })), 
+  );
+});