Implement SIA R76

packages/alfa-rules/src/rules.ts

@@ -70,6 +70,7 @@ export { default as R72 } from "./sia-r72/rule";
 export { default as R73 } from "./sia-r73/rule";
 export { default as R74 } from "./sia-r74/rule";
 export { default as R75 } from "./sia-r75/rule";
+export { default as R76 } from "./sia-r75/rule";
 export { default as R78 } from "./sia-r78/rule";
 export { default as R80 } from "./sia-r80/rule";
 export { default as R81 } from "./sia-r81/rule";

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

@@ -8,9 +8,7 @@ import { Page } from "@siteimprove/alfa-web";
 
 import { expectation } from "../common/expectation";
 
-import { hasRole } from "../common/predicate/has-role";
-import { isIgnored } from "../common/predicate/is-ignored";
-import { isPerceivable } from "../common/predicate/is-perceivable";
+import { hasRole, isIgnored, isPerceivable } from "../common/predicate";
 
 const { isElement, hasName, hasNamespace } = Element;
 const { and, not } = Predicate;

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

@@ -0,0 +1,72 @@
+import { Diagnostic, Rule } from "@siteimprove/alfa-act";
+import { Element, Namespace, Node } from "@siteimprove/alfa-dom";
+import { Predicate } from "@siteimprove/alfa-predicate";
+import { Refinement } from "@siteimprove/alfa-refinement";
+import { Err, Ok } from "@siteimprove/alfa-result";
+import { Criterion } from "@siteimprove/alfa-wcag";
+import { Page } from "@siteimprove/alfa-web";
+
+import { expectation } from "../common/expectation";
+import { hasRole, isIgnored, isPerceivable } from "../common/predicate";
+
+const { isElement, hasName, hasNamespace } = Element;
+const { not } = Predicate;
+const { and, test } = Refinement;
+
+export default Rule.Atomic.of<Page, Element>({
+  uri: "https://alfa.siteimprove.com/rules/sia-r76",
+  requirements: [Criterion.of("1.3.1")],
+  evaluate({ device, document }) {
+    return {
+      applicability() {
+        return visit(document);
+
+        function* visit(
+          node: Node,
+          collect: boolean = false
+        ): Iterable<Element> {
+          if (test(and(isElement, hasNamespace(Namespace.HTML)), node)) {
+            if (test(hasName("table"), node)) {
+              // only collect cells of accessible tables
+              collect = test(not(isIgnored(device)), node);
+            }
+
+            if (
+              collect &&
+              test(and(hasName("th"), isPerceivable(device)), node)
+            ) {
+              yield node;
+            }
+          }
+
+          for (const child of node.children({
+            flattened: true,
+            nested: true,
+          })) {
+            yield* visit(child, collect);
+          }
+        }
+      },
+
+      expectations(target) {
+        return {
+          1: expectation(
+            test(hasRole(device, "columnheader", "rowheader"), target),
+            () => Outcomes.HasHeaderRole,
+            () => Outcomes.HasNoHeaderRole
+          ),
+        };
+      },
+    };
+  },
+});
+
+export namespace Outcomes {
+  export const HasHeaderRole = Ok.of(
+    Diagnostic.of(`The header element is a semantic header`)
+  );
+
+  export const HasNoHeaderRole = Err.of(
+    Diagnostic.of(`The header element is not a semantic header`)
+  );
+}

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

@@ -0,0 +1,173 @@
+/// <reference lib="dom" />
+import { h } from "@siteimprove/alfa-dom";
+import { test } from "@siteimprove/alfa-test";
+
+import R76, { Outcomes } from "../../src/sia-r76/rule";
+
+import { evaluate } from "../common/evaluate";
+import { passed, failed, inapplicable } from "../common/outcome";
+
+test(`evaluate() passes implicit row headers`, async (t) => {
+  const target1 = <th>Mon-Fri</th>;
+  const target2 = <th>Sat-Sun</th>;
+
+  const document = h.document([
+    <table>
+      <caption>Opening hours</caption>
+      <tr>
+        {target1}
+        <td>8-17</td>
+      </tr>
+      <tr>
+        {target2}
+        <td>10-14</td>
+      </tr>
+    </table>,
+  ]);
+
+  t.deepEqual(await evaluate(R76, { document }), [
+    passed(R76, target1, {
+      1: Outcomes.HasHeaderRole,
+    }),
+    passed(R76, target2, {
+      1: Outcomes.HasHeaderRole,
+    }),
+  ]);
+});
+
+test(`evaluate() passes explicit headers`, async (t) => {
+  const target1 = <th scope="col">Morning</th>;
+  const target2 = <th scope="col">Afternoon</th>;
+  const target3 = <th scope="row">Mon-Fri</th>;
+  const target4 = <th scope="row">Sat-Sun</th>;
+
+  const document = h.document([
+    <table>
+      <caption>Opening hours</caption>
+      <tr>
+        <td>Foo</td>
+        {target1}
+        {target2}
+      </tr>
+      <tr>
+        {target3}
+        <td>8-12</td>
+        <td>13-17</td>
+      </tr>
+      <tr>
+        {target4}
+        <td>10-13</td>
+        <td>Closed</td>
+      </tr>
+    </table>,
+  ]);
+  t.deepEqual(await evaluate(R76, { document }), [
+    passed(R76, target1, {
+      1: Outcomes.HasHeaderRole,
+    }),
+    passed(R76, target2, {
+      1: Outcomes.HasHeaderRole,
+    }),
+    passed(R76, target3, {
+      1: Outcomes.HasHeaderRole,
+    }),
+    passed(R76, target4, {
+      1: Outcomes.HasHeaderRole,
+    }),
+  ]);
+});
+
+test(`evaluate() fails headers with neither scope nor role`, async (t) => {
+  const target1 = <th id="t1">Morning</th>;
+  const target2 = <th id="t2">Afternoon</th>;
+  const target3 = <th id="t3">Mon-Fri</th>;
+  const target4 = <th id="t4">Sat-Sun</th>;
+
+  const document = h.document([
+    <table>
+      <tr>
+        <td>Open</td>
+        {target1}
+        {target2}
+      </tr>
+      <tr>
+        {target3}
+        <td>8-12</td>
+        <td>13-17</td>
+      </tr>
+      <tr>
+        {target4}
+        <td>10-13</td>
+        <td>Closed</td>
+      </tr>
+    </table>,
+  ]);
+
+  t.deepEqual(await evaluate(R76, { document }), [
+    failed(R76, target1, {
+      1: Outcomes.HasNoHeaderRole,
+    }),
+    failed(R76, target2, {
+      1: Outcomes.HasNoHeaderRole,
+    }),
+    failed(R76, target3, {
+      1: Outcomes.HasNoHeaderRole,
+    }),
+    failed(R76, target4, {
+      1: Outcomes.HasNoHeaderRole,
+    }),
+  ]);
+});
+
+test(`evaluate() fails headers whose role has been changed`, async (t) => {
+  const target1 = <th role="tab">Mon-Fri</th>;
+  const target2 = <th role="tab">Sat-Sun</th>;
+
+  const document = h.document([
+    <table>
+      <caption>Opening hours</caption>
+      <tr>
+        {target1}
+        <td>8-17</td>
+      </tr>
+      <tr>
+        {target2}
+        <td>10-14</td>
+      </tr>
+    </table>,
+  ]);
+
+  t.deepEqual(await evaluate(R76, { document }), [
+    failed(R76, target1, {
+      1: Outcomes.HasNoHeaderRole,
+    }),
+    failed(R76, target2, {
+      1: Outcomes.HasNoHeaderRole,
+    }),
+  ]);
+});
+
+test(`evaluate() is inapplicable to headers in hidden tables`, async (t) => {
+  const document = h.document([
+    <table aria-hidden="true">
+      <caption>Opening hours</caption>
+      <tr>
+        <td></td>
+        <th>Morning</th>
+        <th>Afternoon</th>
+      </tr>
+      <tr>
+        <th>Mon-Fri</th>
+        <td>8-12</td>
+        <td>13-17</td>
+      </tr>
+      <tr>
+        <th>Sat-Sun</th>
+        <td>10-13</td>
+        <td>Closed</td>
+      </tr>
+    </table>,
+  ]);
+
+  t.deepEqual(await evaluate(R76, { document }), [inapplicable(R76)]);
+});

packages/alfa-rules/tsconfig.json

@@ -143,6 +143,7 @@
     "src/sia-r73/rule.ts",
     "src/sia-r74/rule.ts",
     "src/sia-r75/rule.ts",
+    "src/sia-r76/rule.ts",
     "src/sia-r78/rule.ts",
     "src/sia-r8/rule.ts",
     "src/sia-r80/rule.ts",
@@ -220,6 +221,7 @@
     "test/sia-r73/rule.spec.tsx",
     "test/sia-r74/rule.spec.tsx",
     "test/sia-r75/rule.spec.tsx",
+    "test/sia-r76/rule.spec.tsx",
     "test/sia-r78/rule.spec.tsx",
     "test/sia-r80/rule.spec.tsx",
     "test/sia-r81/rule.spec.tsx",