@pnx-mixtape/mxds 0.1.0-rc.1 → 0.1.0-rc.3

package/src/Component/Carousel/Carousel.stories.ts

@@ -12,6 +12,7 @@ import Link from "../../Atom/Link/link.twig"
 import { BackgroundStyles } from "../../enums"
 import { modes } from "../../../.storybook/modes"
 import { expect, waitFor } from "storybook/test"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 
 /**
  * A carousel of GridItems (usually Cards), that natively scrolls.
@@ -236,6 +237,7 @@ type Story = StoryObj<CarouselType>
 
 export const Carousel: Story = {
   play: async ({ canvas, canvasElement, userEvent, step }) => {
+    const isMobile = matchMedia("(max-width: 767px)").matches
     const back = await canvas.findByRole("button", { name: "previous page" }, { timeout: 2000 })
     const next = await canvas.findByRole("button", { name: "next page" }, { timeout: 2000 })
     // The custom element's IntersectionObserver populates its internal item
@@ -259,18 +261,22 @@ export const Carousel: Story = {
         },
         { timeout: 2000 },
       )
-      await userEvent.click(next)
-      await waitFor(
-        () => {
-          expect(back).not.toHaveAttribute("disabled")
-          expect(next).toHaveAttribute("disabled")
-        },
-        { timeout: 2000 },
-      )
+      if (!isMobile) {
+        await userEvent.click(next)
+        await waitFor(
+          () => {
+            expect(back).not.toHaveAttribute("disabled")
+            expect(next).toHaveAttribute("disabled")
+          },
+          { timeout: 2000 },
+        )
+      }
     })
     await step("Navigates back", async () => {
       await userEvent.click(back)
-      await userEvent.click(back)
+      if (!isMobile) {
+        await userEvent.click(back)
+      }
       await waitFor(
         () => {
           expect(back).toHaveAttribute("disabled")
@@ -284,6 +290,60 @@ export const Carousel: Story = {
   },
 }
 
+/**
+ * Steps a virtual screen reader through the page and asserts on what it announces.
+ */
+export const ScreenReaderAnnouncements: Story = {
+  play: async ({ canvasElement }) => {
+    // The custom element's IntersectionObserver populates its internal item
+    // map asynchronously after mount - wait for its first pass (visible via
+    // the resulting `aria-hidden`) before walking the tree, or off-screen
+    // items may not yet be correctly hidden from it.
+    await waitFor(
+      () => expect(canvasElement.querySelector('[data-index="0"]')).toHaveAttribute("aria-hidden"),
+      { timeout: 2000 },
+    )
+
+    const log = await runScreenReaderWalkthrough()
+    await expect(log).toEqual([
+      "document",
+      "group, Quick page controls",
+      "button, previous page, disabled",
+      "button, next page",
+      "end of group, Quick page controls",
+      "article",
+      "heading, Tile 1, level 3",
+      "paragraph",
+      "Tiles are just block cards without an image.",
+      "end of paragraph",
+      "link, Find out more",
+      "end of article",
+      "article",
+      "heading, Tile 2, level 3",
+      "paragraph",
+      "Tiles are just block cards without an image.",
+      "end of paragraph",
+      "link, Find out more",
+      "end of article",
+      "article",
+      "heading, Tile 3, level 3",
+      "paragraph",
+      "Tiles are just block cards without an image.",
+      "end of paragraph",
+      "link, Find out more",
+      "end of article",
+      "article",
+      "heading, Tile 4, level 3",
+      "paragraph",
+      "Tiles are just block cards without an image.",
+      "end of paragraph",
+      "link, Find out more",
+      "end of article",
+      "end of document",
+    ])
+  },
+}
+
 /**
  * Display counter dot navigation.
  */
@@ -390,6 +450,7 @@ export const Loop: Story = {
     loop: true,
   },
   play: async ({ canvas, canvasElement, userEvent, step }) => {
+    const isMobile = matchMedia("(max-width: 767px)").matches
     const back = await canvas.findByRole("button", { name: "previous page" }, { timeout: 2000 })
     const next = await canvas.findByRole("button", { name: "next page" }, { timeout: 2000 })
     // The custom element's IntersectionObserver populates its internal item
@@ -421,22 +482,39 @@ export const Loop: Story = {
         },
         { timeout: 2000 },
       )
-      // With `loop`, `next` is never `disabled` at the end - the custom
-      // element instead marks it `data-restart` once its debounced scroll
-      // handler has confirmed the end was reached. Wait for that marker
-      // before the "Loops back" step's click, or it can race the debounce
-      // and request an out-of-range page.
-      await waitFor(() => expect(next).toHaveAttribute("data-restart"), { timeout: 2000 })
+      if (!isMobile) {
+        // With `loop`, `next` is never `disabled` at the end - the custom
+        // element instead marks it `data-restart` once its debounced scroll
+        // handler has confirmed the end was reached. Wait for that marker
+        // before the "Loops back" step's click, or it can race the debounce
+        // and request an out-of-range page.
+        await waitFor(() => expect(next).toHaveAttribute("data-restart"), { timeout: 2000 })
+      }
     })
     await step("Loops back", async () => {
-      await userEvent.click(next)
-      await waitFor(
-        () => {
-          expect(back).toHaveAttribute("disabled")
-          expect(next).not.toHaveAttribute("disabled")
-        },
-        { timeout: 2000 },
-      )
+      if (!isMobile) {
+        await userEvent.click(next)
+        await waitFor(
+          () => {
+            expect(back).toHaveAttribute("disabled")
+            expect(next).not.toHaveAttribute("disabled")
+          },
+          { timeout: 2000 },
+        )
+      } else {
+        // On mobile there's too many pages to click through to so we just
+        // click back instead to restore the initial state. The desktop
+        // test covers the loop functionality and the behaviour is the same.
+        await userEvent.click(back)
+        await userEvent.click(back)
+        await waitFor(
+          () => {
+            expect(back).toHaveAttribute("disabled")
+            expect(next).not.toHaveAttribute("disabled")
+          },
+          { timeout: 2000 },
+        )
+      }
       // Remove focus
       await userEvent.click(canvasElement)
     })

package/src/Component/Carousel/Carousel.stories.tsx

@@ -11,6 +11,7 @@ import "./carousel.css"
 import "../Card/card.css"
 import { Page } from "../../../.storybook-react/decorators"
 import { expect, waitFor } from "storybook/test"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 
 const makeCard = (n: number) => (
   <Card background={BackgroundStyles.BOX} block>
@@ -212,3 +213,76 @@ export const WithLoop: StoryObj<typeof meta> = {
     })
   },
 }
+
+/**
+ * Steps a virtual screen reader through the page and asserts on what it announces.
+ *
+ * Kept as the last story in this file - inserting new stories earlier shifts
+ * React's auto-generated `id="_r_N_"` counters, breaking the DOM snapshots
+ * of every story that renders after it.
+ */
+export const ScreenReaderAnnouncements: StoryObj<typeof meta> = {
+  play: async ({ canvas }) => {
+    await canvas.findByRole("button", { name: "next page" }, { timeout: 2000 })
+
+    const log = await runScreenReaderWalkthrough()
+    await expect(log).toEqual([
+      "document",
+      "group, Quick page controls",
+      "button, previous page, disabled",
+      "button, next page",
+      "end of group, Quick page controls",
+      "list",
+      "listitem, level 1, position 1, set size 4",
+      "article",
+      "heading, Tile 1, level 3",
+      "Tile",
+      "1",
+      "end of heading, Tile 1, level 3",
+      "paragraph",
+      "Tiles are just block cards without an image.",
+      "end of paragraph",
+      "link, Find out more",
+      "end of article",
+      "end of listitem, level 1, position 1, set size 4",
+      "listitem, level 1, position 2, set size 4",
+      "article",
+      "heading, Tile 2, level 3",
+      "Tile",
+      "2",
+      "end of heading, Tile 2, level 3",
+      "paragraph",
+      "Tiles are just block cards without an image.",
+      "end of paragraph",
+      "link, Find out more",
+      "end of article",
+      "end of listitem, level 1, position 2, set size 4",
+      "listitem, level 1, position 3, set size 4",
+      "article",
+      "heading, Tile 3, level 3",
+      "Tile",
+      "3",
+      "end of heading, Tile 3, level 3",
+      "paragraph",
+      "Tiles are just block cards without an image.",
+      "end of paragraph",
+      "link, Find out more",
+      "end of article",
+      "end of listitem, level 1, position 3, set size 4",
+      "listitem, level 1, position 4, set size 4",
+      "article",
+      "heading, Tile 4, level 3",
+      "Tile",
+      "4",
+      "end of heading, Tile 4, level 3",
+      "paragraph",
+      "Tiles are just block cards without an image.",
+      "end of paragraph",
+      "link, Find out more",
+      "end of article",
+      "end of listitem, level 1, position 4, set size 4",
+      "end of list",
+      "end of document",
+    ])
+  },
+}