Add test cases

Siteimprove · Dec 4, 2024 · eb48d87 · eb48d87
1 parent 845136c
commit eb48d87
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 23 deletions.
diff --git a/packages/alfa-rules/src/sia-r116/rule.ts b/packages/alfa-rules/src/sia-r116/rule.ts
@@ -35,7 +35,7 @@ export default Rule.Atomic.of<Page, Element<"summary">>({
               // If the explicit role is none/presentation but the element is
               // nonetheless included in the accessibility tree, then the
               // conflict triggered, and we want to keep it as target.
-              not(hasExplicitRole(Role.hasName("none", "presentation"))),
+              not(hasExplicitRole(not(Role.hasName("none", "presentation")))),
             ),
           );
       },

diff --git a/packages/alfa-rules/test/sia-r116/rule.spec.tsx b/packages/alfa-rules/test/sia-r116/rule.spec.tsx
@@ -1,4 +1,3 @@
-/// <reference lib="dom" />
 import { Device } from "@siteimprove/alfa-device";
 import { type Element, h } from "@siteimprove/alfa-dom";
 import { Node } from "@siteimprove/alfa-aria";
@@ -9,7 +8,26 @@ import R116, { Outcomes } from "../../dist/sia-r116/rule.js";
 import { evaluate } from "../common/evaluate.js";
 import { failed, inapplicable, passed } from "../common/outcome.js";
 
-test("evaluate() passes summary elements with an accessible name", async (t) => {
+test("evaluate() passes summary elements with an accessible name from aria-label", async (t) => {
+  const target = (
+    <summary aria-label="hello">Opening times</summary>
+  ) as Element<"summary">;
+
+  const document = h.document([
+    <details>
+      {target}
+      <p>This is a website. We are available 24/7.</p>
+    </details>,
+  ]);
+
+  t.deepEqual(await evaluate(R116, { document }), [
+    passed(R116, target, {
+      1: Outcomes.HasAccessibleName,
+    }),
+  ]);
+});
+
+test("evaluate() passes summary elements with an accessible name from content", async (t) => {
   const target = (<summary>Opening times</summary>) as Element<"summary">;
 
   const document = h.document([
@@ -19,11 +37,22 @@ test("evaluate() passes summary elements with an accessible name", async (t) =>
     </details>,
   ]);
 
-  const ariaSummary = Node.from(target, Device.standard());
-  console.dir(ariaSummary.toJSON());
+  t.deepEqual(await evaluate(R116, { document }), [
+    passed(R116, target, {
+      1: Outcomes.HasAccessibleName,
+    }),
+  ]);
+});
 
-  const ariaDetails = Node.from(target.parent().getUnsafe(), Device.standard());
-  console.dir(ariaDetails.toJSON());
+test("evaluate() passes summary elements that are not the first children", async (t) => {
+  const target = (<summary>Opening times</summary>) as Element<"summary">;
+
+  const document = h.document([
+    <details>
+      <p>This is a website. We are available 24/7.</p>
+      {target}
+    </details>,
+  ]);
 
   t.deepEqual(await evaluate(R116, { document }), [
     passed(R116, target, {
@@ -32,19 +61,90 @@ test("evaluate() passes summary elements with an accessible name", async (t) =>
   ]);
 });
 
-// test("evaluate() passes summary elements that are not the first children", async (t) => {
-//   const target = (<summary>Opening times</summary>) as Element<"summary">;
-//
-//   const document = h.document([
-//     <details>
-//       <p>This is a website. We are available 24/7.</p>
-//       {target}
-//     </details>,
-//   ]);
-//
-//   t.deepEqual(await evaluate(R116, { document }), [
-//     passed(R116, target, {
-//       1: Outcomes.HasAccessibleName,
-//     }),
-//   ]);
-// });
+test("evaluate() is only applicable to the first summary element child", async (t) => {
+  const target = (<summary>Opening times</summary>) as Element<"summary">;
+
+  const document = h.document([
+    <details>
+      {target}
+      <summary>Hello</summary>
+      <p>This is a website. We are available 24/7.</p>
+    </details>,
+  ]);
+
+  t.deepEqual(await evaluate(R116, { document }), [
+    passed(R116, target, {
+      1: Outcomes.HasAccessibleName,
+    }),
+  ]);
+});
+
+test("evaluate() fails summary elements without an accessible name", async (t) => {
+  const target = (<summary></summary>) as Element<"summary">;
+
+  const document = h.document([
+    <details>
+      {target}
+      <p>This is a website. We are available 24/7.</p>
+    </details>,
+  ]);
+
+  t.deepEqual(await evaluate(R116, { document }), [
+    failed(R116, target, {
+      1: Outcomes.HasNoAccessibleName,
+    }),
+  ]);
+});
+
+test("evaluate() applies to element where the presentational conflict triggers", async (t) => {
+  const target = (<summary role="none"></summary>) as Element<"summary">;
+
+  const document = h.document([
+    <details>
+      {target}
+      <p>This is a website. We are available 24/7.</p>
+    </details>,
+  ]);
+
+  t.deepEqual(await evaluate(R116, { document }), [
+    failed(R116, target, {
+      1: Outcomes.HasNoAccessibleName,
+    }),
+  ]);
+});
+
+test("evaluate() is inapplicable to summary elements that are not summary for their parent details", async (t) => {
+  const document = h.document([
+    <summary>Isolated</summary>,
+    <details>
+      <div>
+        <summary>Nested</summary>
+      </div>
+      <p>This is a website. We are available 24/7.</p>
+    </details>,
+  ]);
+
+  t.deepEqual(await evaluate(R116, { document }), [inapplicable(R116)]);
+});
+
+test("evaluate() is inapplicable to summary elements that are not exposed", async (t) => {
+  const document = h.document([
+    <details style={{ display: "none" }}>
+      <summary>Opening times</summary>
+      <p>This is a website. We are available 24/7.</p>
+    </details>,
+  ]);
+
+  t.deepEqual(await evaluate(R116, { document }), [inapplicable(R116)]);
+});
+
+test("evaluate() is inapplicable to summary elements with an explicit role", async (t) => {
+  const document = h.document([
+    <details>
+      <summary role="button">Opening times</summary>
+      <p>This is a website. We are available 24/7.</p>
+    </details>,
+  ]);
+
+  t.deepEqual(await evaluate(R116, { document }), [inapplicable(R116)]);
+});