@pnx-mixtape/mxds 0.1.0-rc.2 → 0.1.0-rc.4

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.
@@ -289,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.
  */

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",
+    ])
+  },
+}