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

package/src/Component/Filters/__snapshots__/Filters.stories.tsx.snap

@@ -1,7 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Collapsible 1`] = `"<div class="mx-filters mx-filters--down"><details class="mx-accordion" open=""><summary class="mx-accordion__toggle mx-filters__title">Filters<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></summary><form class="mx-filters__form mx-vertical-flow" action="#"><div class="mx-accordion mx-filter-item" data-open="true"><button type="button" class="mx-accordion__toggle" id="filter-keywords-container" aria-expanded="true">Keywords<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></button><section aria-labelledby="filter-keywords-container" class="mx-accordion__content mx-rich-text mx-vertical-flow"><div class="mx-form-item mx-accordion__content" id="filter-keywords"><div id="help-filter-keywords" class="mx-description">Search by keywords</div><input class="mx-input__text" id="filter-keywords" aria-describedby="help-filter-keywords" aria-invalid="false" aria-label="Keywords" type="text" value="" name="keywords"></div></section></div><div class="mx-accordion mx-filter-item" data-open="true"><button type="button" class="mx-accordion__toggle" id="filter-categories-container" aria-expanded="true">Categories<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></button><section aria-labelledby="filter-categories-container" class="mx-accordion__content mx-rich-text mx-vertical-flow"><fieldset class="mx-form-item mx-fieldset mx-accordion__content" id="filter-categories"><div class="mx-checkbox"><input id="_r_b_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="news" name="categories"><label for="_r_b_">News</label></div><div class="mx-checkbox"><input id="_r_e_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="media-releases" name="categories"><label for="_r_e_">Media Releases</label></div><button class="mx-button mx-button--light" type="button">Show all (3)</button></fieldset></section></div><div class="mx-form-actions"><button type="submit" class="mx-button mx-button--dark">Apply filters</button><button type="reset" class="mx-button mx-button--light">Clear all filters</button></div></form></details></div>"`;
+exports[`Collapsible 1`] = `"<div class="mx-filters mx-filters--down"><details class="mx-accordion" open=""><summary class="mx-accordion__toggle mx-filters__title">Filters<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></summary><form class="mx-filters__form mx-vertical-flow" action="#" aria-busy="false"><div class="mx-accordion mx-filter-item" data-open="true"><button type="button" class="mx-accordion__toggle" id="filter-keywords-container" aria-expanded="true">Keywords<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></button><section aria-labelledby="filter-keywords-container" class="mx-accordion__content mx-rich-text mx-vertical-flow"><div class="mx-form-item mx-accordion__content" id="filter-keywords-item"><div id="help-filter-keywords" class="mx-description">Search by keywords</div><input class="mx-input__text" id="filter-keywords" aria-describedby="help-filter-keywords" aria-invalid="false" aria-label="Keywords" type="text" value="" name="keywords"></div></section></div><div class="mx-accordion mx-filter-item" data-open="true"><button type="button" class="mx-accordion__toggle" id="filter-categories-container" aria-expanded="true">Categories<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></button><section aria-labelledby="filter-categories-container" class="mx-accordion__content mx-rich-text mx-vertical-flow"><fieldset class="mx-form-item mx-fieldset mx-accordion__content" id="filter-categories-item"><div class="mx-checkbox"><input id="_r_b_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="news" name="categories"><label for="_r_b_">News</label></div><div class="mx-checkbox"><input id="_r_e_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="media-releases" name="categories"><label for="_r_e_">Media Releases</label></div><button class="mx-button mx-button--light" type="button">Show all (3)</button></fieldset></section></div><div class="mx-form-actions"><button type="submit" class="mx-button mx-button--dark" disabled="">Apply filters</button><button type="reset" class="mx-button mx-button--light" disabled="">Clear all</button></div></form></details></div>"`;
 
-exports[`Default 1`] = `"<div class="mx-filters"><h2 class="mx-filters__title">Filters</h2><form class="mx-filters__form mx-vertical-flow" action="#"><div class="mx-form-item mx-filter-item" id="filter-keywords"><label class="mx-label" for="filter-keywords">Keywords</label><div id="help-filter-keywords" class="mx-description">Search by keywords</div><input class="mx-input__text" id="filter-keywords" aria-describedby="help-filter-keywords" aria-invalid="false" aria-label="Keywords" type="text" value="" name="keywords"></div><fieldset class="mx-form-item mx-fieldset mx-filter-item" id="filter-categories"><legend class="mx-legend">Categories</legend><div class="mx-checkbox"><input id="_r_0_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="news" name="categories"><label for="_r_0_">News</label></div><div class="mx-checkbox"><input id="_r_3_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="media-releases" name="categories"><label for="_r_3_">Media Releases</label></div><div class="mx-checkbox"><input id="_r_6_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="publications" name="categories"><label for="_r_6_">Publications</label></div></fieldset><div class="mx-form-actions"><button type="submit" class="mx-button mx-button--dark">Apply filters</button><button type="reset" class="mx-button mx-button--light">Clear all filters</button></div></form></div>"`;
+exports[`Collapsible Right 1`] = `"<div class="mx-filters mx-filters--right"><details class="mx-accordion" open=""><summary class="mx-accordion__toggle mx-filters__title">Filters<span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></summary><form class="mx-filters__form mx-vertical-flow" action="#" aria-busy="false"><span data-focus-scope-start="true" hidden=""></span><div class="mx-filters__title">Filters<button class="mx-button mx-button--icon-only mx-icon mx-icon--close" type="button">Close filters</button></div><div class="mx-accordion mx-filter-item" data-open="true"><button type="button" class="mx-accordion__toggle" id="filter-keywords-container" aria-expanded="true">Keywords<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></button><section aria-labelledby="filter-keywords-container" class="mx-accordion__content mx-rich-text mx-vertical-flow"><div class="mx-form-item mx-accordion__content" id="filter-keywords-item"><div id="help-filter-keywords" class="mx-description">Search by keywords</div><input class="mx-input__text" id="filter-keywords" aria-describedby="help-filter-keywords" aria-invalid="false" aria-label="Keywords" type="text" value="" name="keywords"></div></section></div><div class="mx-accordion mx-filter-item" data-open="true"><button type="button" class="mx-accordion__toggle" id="filter-categories-container" aria-expanded="true">Categories<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></button><section aria-labelledby="filter-categories-container" class="mx-accordion__content mx-rich-text mx-vertical-flow"><fieldset class="mx-form-item mx-fieldset mx-accordion__content" id="filter-categories-item"><div class="mx-checkbox"><input id="_r_j_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="news" name="categories"><label for="_r_j_">News</label></div><div class="mx-checkbox"><input id="_r_m_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="media-releases" name="categories"><label for="_r_m_">Media Releases</label></div><button class="mx-button mx-button--light" type="button">Show all (3)</button></fieldset></section></div><div class="mx-form-actions"><button type="submit" class="mx-button mx-button--dark" disabled="">Apply filters</button><button type="reset" class="mx-button mx-button--light" disabled="">Clear all</button></div><span data-focus-scope-end="true" hidden=""></span></form></details></div>"`;
 
-exports[`With Counter 1`] = `"<div class="mx-filters mx-filters--down"><details class="mx-accordion" open=""><summary class="mx-accordion__toggle mx-filters__title">Filters<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></summary><form class="mx-filters__form mx-vertical-flow" action="#"><div class="mx-accordion mx-filter-item" data-open="true"><button type="button" class="mx-accordion__toggle" id="filter-keywords-container" aria-expanded="true">Keywords<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></button><section aria-labelledby="filter-keywords-container" class="mx-accordion__content mx-rich-text mx-vertical-flow"><div class="mx-form-item mx-accordion__content" id="filter-keywords"><div id="help-filter-keywords" class="mx-description">Search by keywords</div><input class="mx-input__text" id="filter-keywords" aria-describedby="help-filter-keywords" aria-invalid="false" aria-label="Keywords" type="text" value="" name="keywords"></div></section></div><div class="mx-accordion mx-filter-item" data-open="true"><button type="button" class="mx-accordion__toggle" id="filter-categories-container" aria-expanded="true">Categories<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></button><section aria-labelledby="filter-categories-container" class="mx-accordion__content mx-rich-text mx-vertical-flow"><fieldset class="mx-form-item mx-fieldset mx-accordion__content" id="filter-categories"><div class="mx-checkbox"><input id="_r_j_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="news" name="categories"><label for="_r_j_">News</label></div><div class="mx-checkbox"><input id="_r_m_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="media-releases" name="categories"><label for="_r_m_">Media Releases</label></div><button class="mx-button mx-button--light" type="button">Show all (3)</button></fieldset></section></div><div class="mx-form-actions"><button type="submit" class="mx-button mx-button--dark">Apply filters</button><button type="reset" class="mx-button mx-button--light">Clear all filters</button></div></form></details></div>"`;
+exports[`Default 1`] = `"<div class="mx-filters mx-filters--down"><h2 class="mx-filters__title">Filters</h2><form class="mx-filters__form mx-vertical-flow" action="#" aria-busy="false"><div class="mx-form-item mx-filter-item" id="filter-keywords-item"><label class="mx-label" for="filter-keywords">Keywords</label><div id="help-filter-keywords" class="mx-description">Search by keywords</div><input class="mx-input__text" id="filter-keywords" aria-describedby="help-filter-keywords" aria-invalid="false" aria-label="Keywords" type="text" value="" name="keywords"></div><fieldset class="mx-form-item mx-fieldset mx-filter-item" id="filter-categories-item"><legend class="mx-legend">Categories</legend><div class="mx-checkbox"><input id="_r_0_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="news" name="categories"><label for="_r_0_">News</label></div><div class="mx-checkbox"><input id="_r_3_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="media-releases" name="categories"><label for="_r_3_">Media Releases</label></div><div class="mx-checkbox"><input id="_r_6_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="publications" name="categories"><label for="_r_6_">Publications</label></div></fieldset><div class="mx-form-actions"><button type="submit" class="mx-button mx-button--dark" disabled="">Apply filters</button><button type="reset" class="mx-button mx-button--light" disabled="">Clear all</button></div></form></div>"`;
+
+exports[`Instant 1`] = `"<div class="mx-filters mx-filters--down mx-filters--auto"><h2 class="mx-filters__title">Filters</h2><form class="mx-filters__form mx-vertical-flow" action="#" aria-busy="false"><div class="mx-form-item mx-filter-item" id="filter-keywords-item"><label class="mx-label" for="filter-keywords">Keywords</label><div id="help-filter-keywords" class="mx-description">Search by keywords</div><input class="mx-input__text" id="filter-keywords" aria-describedby="help-filter-keywords" aria-invalid="false" aria-label="Keywords" type="text" value="" name="keywords"></div><fieldset class="mx-form-item mx-fieldset mx-filter-item" id="filter-categories-item"><legend class="mx-legend">Categories</legend><div class="mx-checkbox"><input id="_r_11_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="news" name="categories"><label for="_r_11_">News</label></div><div class="mx-checkbox"><input id="_r_14_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="media-releases" name="categories"><label for="_r_14_">Media Releases</label></div><div class="mx-checkbox"><input id="_r_17_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="publications" name="categories"><label for="_r_17_">Publications</label></div></fieldset><div class="mx-form-actions"><button type="reset" class="mx-button mx-button--light" disabled="">Clear all</button></div></form></div>"`;
+
+exports[`Pending 1`] = `"<div class="mx-filters mx-filters--down"><h2 class="mx-filters__title">Filters</h2><form class="mx-filters__form mx-vertical-flow" action="#" aria-busy="false"><div class="mx-form-item mx-filter-item" id="filter-keywords-item"><label class="mx-label" for="filter-keywords">Keywords</label><div id="help-filter-keywords" class="mx-description">Search by keywords</div><input class="mx-input__text" id="filter-keywords" aria-describedby="help-filter-keywords" aria-invalid="false" aria-label="Keywords" type="text" value="" name="keywords"></div><fieldset class="mx-form-item mx-fieldset mx-filter-item" id="filter-categories-item"><legend class="mx-legend">Categories</legend><div class="mx-checkbox"><input id="_r_1a_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="news" name="categories"><label for="_r_1a_">News</label></div><div class="mx-checkbox"><input id="_r_1d_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="media-releases" name="categories"><label for="_r_1d_">Media Releases</label></div><div class="mx-checkbox"><input id="_r_1g_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="publications" name="categories"><label for="_r_1g_">Publications</label></div></fieldset><div class="mx-form-actions"><button type="submit" class="mx-button mx-button--dark">Apply filters</button><button type="reset" class="mx-button mx-button--light">Clear all</button></div></form></div>"`;
+
+exports[`With Counter 1`] = `"<div class="mx-filters mx-filters--down"><h2 class="mx-filters__title">Filters</h2><form class="mx-filters__form mx-vertical-flow" action="#" aria-busy="false"><div class="mx-accordion mx-filter-item" data-open="true"><button type="button" class="mx-accordion__toggle" id="filter-keywords-container" aria-expanded="true">Keywords<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></button><section aria-labelledby="filter-keywords-container" class="mx-accordion__content mx-rich-text mx-vertical-flow"><div class="mx-form-item mx-accordion__content" id="filter-keywords-item"><div id="help-filter-keywords" class="mx-description">Search by keywords</div><input class="mx-input__text" id="filter-keywords" aria-describedby="help-filter-keywords" aria-invalid="false" aria-label="Keywords" type="text" value="" name="keywords"></div></section></div><div class="mx-accordion mx-filter-item" data-open="true"><button type="button" class="mx-accordion__toggle" id="filter-categories-container" aria-expanded="true">Categories<span class="mx-icon mx-icon--chevron-down" aria-hidden="true"></span></button><section aria-labelledby="filter-categories-container" class="mx-accordion__content mx-rich-text mx-vertical-flow"><fieldset class="mx-form-item mx-fieldset mx-accordion__content" id="filter-categories-item"><div class="mx-checkbox"><input id="_r_r_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="news" name="categories"><label for="_r_r_">News</label></div><div class="mx-checkbox"><input id="_r_u_" data-react-aria-pressable="true" tabindex="0" type="checkbox" value="media-releases" name="categories"><label for="_r_u_">Media Releases</label></div><button class="mx-button mx-button--light" type="button">Show all (3)</button></fieldset></section></div><div class="mx-form-actions"><button type="submit" class="mx-button mx-button--dark" disabled="">Apply filters</button><button type="reset" class="mx-button mx-button--light" disabled="">Clear all</button></div></form></div>"`;

package/src/Component/Filters/filters.css

@@ -73,6 +73,7 @@
       display: flex;
       gap: var(--spacing-s);
       align-items: center;
+      min-block-size: var(--spacing-m);
 
       & .mx-icon {
         margin-inline-start: auto;
@@ -82,6 +83,16 @@
     & :is(.mx-input__text, .mx-input__select, .mx-input__textarea) {
       inline-size: 100%;
     }
+
+    &[aria-busy="true"] {
+      position: relative;
+
+      &::after {
+        position: absolute;
+        inset-block-end: var(--spinner-size, var(--spacing-xs));
+        inset-inline-end: 0;
+      }
+    }
   }
 
   .mx-filter-item .mx-accordion__content {

package/src/Component/Gallery/Gallery.tsx

@@ -6,13 +6,13 @@ import {
   createContext,
   use,
   useCallback,
-  useEffect,
   useId,
   useMemo,
   useRef,
   useState,
 } from "react"
 import classNames from "classnames"
+import useIsomorphicLayoutEffect from "../../Utility/Hooks/useIsomorphicLayoutEffect"
 import Dialog from "../Dialog/Dialog"
 import DialogContent from "../Dialog/Components/DialogContent"
 import DialogCloseButton from "../Dialog/Components/DialogCloseButton"
@@ -55,7 +55,7 @@ const Gallery = ({
   // Runs after Dialog's own effect has already called showModal() (child
   // effects flush before the parent's), so the carousel is laid out and
   // scrollIntoView measures correctly.
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!open) return
     const slide = findActiveSlide(contentRef.current, activeIndex)
     if (!slide) return

package/src/Component/GlobalAlert/global-alert.css

@@ -1,6 +1,7 @@
 /**
  * Messages
  */
+@import "../../Utility/_mixins.css";
 
 @layer design-system.defaults {
   mx-closable-alert {
@@ -11,6 +12,8 @@
 @layer design-system.components {
   /* @public --alert-background --alert-foreground --alert-scheme */
   .mx-global-alert {
+    @add-mixin transition;
+
     background-color: var(--alert-background, var(--colour-primary-light));
     color: var(--alert-foreground, var(--colour-foreground));
     color-scheme: var(--alert-scheme, light);

package/src/Component/HeroBanner/HeroBanner.stories.ts

@@ -39,7 +39,7 @@ const meta: Meta<HeroBannerType> = {
   },
   argTypes: {
     modifiers: {
-      description: "Controls the background colour",
+      description: "Controls the background colour (only one applies)",
       options: Object.values(HeroBannerModifier),
       control: "check",
       table: {

package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.ts.snap

@@ -36,8 +36,7 @@ exports[`Highlight 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
     </div>
@@ -73,24 +72,21 @@ exports[`With Link List 1`] = `
   
 <li><a href="#">
   
-  <span>Link one</span>
-    
+  Link one  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
 </li>
 <li><a href="#">
   
-  <span>Link two</span>
-    
+  Link two  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
 </li>
 <li><a href="#">
   
-  <span>Link three</span>
-    
+  Link three  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>

package/src/Component/HeroSearch/__snapshots__/HeroSearch.stories.ts.snap

@@ -82,40 +82,35 @@ exports[`With Link List 1`] = `
   
 <li><a href="#">
   
-  <span>Link one</span>
-    
+  Link one  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
 </li>
 <li><a href="#">
   
-  <span>Link two</span>
-    
+  Link two  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
 </li>
 <li><a href="#">
   
-  <span>Link three</span>
-    
+  Link three  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
 </li>
 <li><a href="#">
   
-  <span>Link four</span>
-    
+  Link four  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
 </li>
 <li><a href="#">
   
-  <span>Link five</span>
-    
+  Link five  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>

package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.ts.snap

@@ -9,8 +9,7 @@ exports[`Error 1`] = `
     
 <a href="#">
   
-  <span>Click here</span>
-    
+  Click here  
 </a>
 
   </div>
@@ -27,8 +26,7 @@ exports[`In Page Alert 1`] = `
     
 <a href="#">
   
-  <span>Click here</span>
-    
+  Click here  
 </a>
 
   </div>
@@ -45,8 +43,7 @@ exports[`Info 1`] = `
     
 <a href="#">
   
-  <span>Click here</span>
-    
+  Click here  
 </a>
 
   </div>
@@ -63,8 +60,7 @@ exports[`Success 1`] = `
     
 <a href="#">
   
-  <span>Click here</span>
-    
+  Click here  
 </a>
 
   </div>
@@ -81,8 +77,7 @@ exports[`Warning 1`] = `
     
 <a href="#">
   
-  <span>Click here</span>
-    
+  Click here  
 </a>
 
   </div>
@@ -101,8 +96,7 @@ exports[`With Heading 1`] = `
     
 <a href="#">
   
-  <span>Click here</span>
-    
+  Click here  
 </a>
 
   </div>

package/src/Component/InPageNavigation/InPageNavigation.stories.ts

@@ -12,6 +12,7 @@ import Heading from "../../Atom/Heading/heading.twig"
 import Link from "../../Atom/Link/link.twig"
 import Icon from "../../Atom/Icon/icon.twig"
 import { Icons } from "../../enums"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 
 /**
  * A table of contents with anchor links to the headings.
@@ -92,6 +93,55 @@ type Story = StoryObj<InPageNavigationType>
 
 export const InPageNavigation: Story = {}
 
+/**
+ * Steps a virtual screen reader through the page and asserts on what it announces.
+ */
+export const ScreenReaderAnnouncements: Story = {
+  play: async () => {
+    const log = await runScreenReaderWalkthrough()
+    await expect(log).toEqual([
+      "document",
+      "navigation",
+      "heading, On this page, level 2",
+      "list",
+      "listitem, level 1, position 1, set size 3",
+      "link, Section 1",
+      "Section 1",
+      "end of link, Section 1",
+      "end of listitem, level 1, position 1, set size 3",
+      "listitem, level 1, position 2, set size 3",
+      "link, Section 2",
+      "Section 2",
+      "end of link, Section 2",
+      "end of listitem, level 1, position 2, set size 3",
+      "listitem, level 1, position 3, set size 3",
+      "link, Section 3",
+      "Section 3",
+      "end of link, Section 3",
+      "end of listitem, level 1, position 3, set size 3",
+      "end of list",
+      "end of navigation",
+      "heading, Section 1, level 2",
+      "paragraph",
+      "In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.",
+      "end of paragraph",
+      "heading, Section 2, level 2",
+      "paragraph",
+      "In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.",
+      "end of paragraph",
+      "heading, Test level 3, level 3",
+      "paragraph",
+      "In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.",
+      "end of paragraph",
+      "heading, Section 3, level 2",
+      "paragraph",
+      "In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.",
+      "end of paragraph",
+      "end of document",
+    ])
+  },
+}
+
 /**
  * When the `items` are empty, the Javascript builds the list and heading.
  */

package/src/Component/InPageNavigation/InPageNavigation.stories.tsx

@@ -6,6 +6,7 @@ import Component from "./InPageNavigation"
 import "./in-page-navigation.css"
 import { Page } from "../../../.storybook-react/decorators"
 import { expect } from "storybook/test"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
@@ -128,3 +129,80 @@ export const IdenticalHeadings: StoryObj<typeof Component> = {
     })
   },
 }
+
+/**
+ * Steps a virtual screen reader through the page and asserts on what it announces.
+ *
+ * Kept as the last story in this file - see the note on ordering in
+ * `docs/Testing.md`'s Automated Screen Reader Testing section.
+ */
+export const ScreenReaderAnnouncements: StoryObj<typeof Component> = {
+  play: async () => {
+    const log = await runScreenReaderWalkthrough()
+    await expect(log).toEqual([
+      "document",
+      "navigation",
+      "heading, On this page, level 2",
+      "list",
+      "listitem, level 1, position 1, set size 8",
+      "link, Section 1",
+      "end of listitem, level 1, position 1, set size 8",
+      "listitem, level 1, position 2, set size 8",
+      "link, Section 2",
+      "end of listitem, level 1, position 2, set size 8",
+      "listitem, level 1, position 3, set size 8",
+      "link, Test level 3",
+      "end of listitem, level 1, position 3, set size 8",
+      "listitem, level 1, position 4, set size 8",
+      "link, Section 3",
+      "end of listitem, level 1, position 4, set size 8",
+      "listitem, level 1, position 5, set size 8",
+      "link, Section 4",
+      "end of listitem, level 1, position 5, set size 8",
+      "listitem, level 1, position 6, set size 8",
+      "link, Section 5",
+      "end of listitem, level 1, position 6, set size 8",
+      "listitem, level 1, position 7, set size 8",
+      "link, Test level 6",
+      "end of listitem, level 1, position 7, set size 8",
+      "listitem, level 1, position 8, set size 8",
+      "link, Section 7",
+      "end of listitem, level 1, position 8, set size 8",
+      "end of list",
+      "end of navigation",
+      "heading, Section 1, level 2",
+      "paragraph",
+      "In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.",
+      "end of paragraph",
+      "heading, Section 2, level 2",
+      "paragraph",
+      "In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.",
+      "end of paragraph",
+      "heading, Test level 3, level 3",
+      "paragraph",
+      "In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.",
+      "end of paragraph",
+      "heading, Section 3, level 2",
+      "paragraph",
+      "In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.",
+      "end of paragraph",
+      "heading, Section 4, level 2",
+      "paragraph",
+      "In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.",
+      "end of paragraph",
+      "heading, Section 5, level 2",
+      "paragraph",
+      "In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.",
+      "end of paragraph",
+      "heading, Test level 6, level 3",
+      "paragraph",
+      "In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.",
+      "end of paragraph",
+      "heading, Section 7, level 2",
+      "paragraph",
+      "In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.",
+      "end of paragraph",
+      "end of document",
+    ])
+  },
+}

package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.ts.snap

@@ -44,7 +44,16 @@ exports[`Identical Headings 1`] = `
 
 exports[`In Page Navigation 1`] = `
 "<mx-in-page-navigation data-content=".js-content" data-levels="" data-title="On this page">
-  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li></ul></nav></mx-in-page-navigation>
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span>
+
+  Section 1  
+</a></li><li><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span>
+
+  Section 2  
+</a></li><li><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span>
+
+  Section 3  
+</a></li></ul></nav></mx-in-page-navigation>
 <div class="js-content mx-rich-text mx-vertical-flow">
 <h2 id="section-1">Section 1</h2>
 <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
@@ -107,3 +116,28 @@ exports[`Other Container 1`] = `
 </div>
 "
 `;
+
+exports[`Screen Reader Announcements 1`] = `
+"<mx-in-page-navigation data-content=".js-content" data-levels="" data-title="On this page">
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span>
+
+  Section 1  
+</a></li><li><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span>
+
+  Section 2  
+</a></li><li><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span>
+
+  Section 3  
+</a></li></ul></nav></mx-in-page-navigation>
+<div class="js-content mx-rich-text mx-vertical-flow">
+<h2 id="section-1">Section 1</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2 id="section-2">Section 2</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h3 id="test-level-3">Test level 3</h3>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2 id="section-3">Section 3</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+</div>
+"
+`;

package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.tsx.snap

@@ -3,3 +3,5 @@
 exports[`Identical Headings 1`] = `"<div class="mx-vertical-flow"><nav class="mx-in-page-navigation mx-nav mx-nav--list mx-vertical-flow"><h2 class="mx-heading--m" id="on-this-page">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#identical-heading" class="mx-icon mx-icon--chevron-right">Identical heading</a></li><li class="mx-in-page-navigation__level--h2"><a href="#identical-heading-1" class="mx-icon mx-icon--chevron-right">Identical heading</a></li><li class="mx-in-page-navigation__level--h2"><a href="#identical-heading-2" class="mx-icon mx-icon--chevron-right">Identical heading</a></li></ul></nav><section class="mx-vertical-flow mx-rich-text"><h2 class="" id="identical-heading">Identical heading</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" id="identical-heading-1">Identical heading</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" id="identical-heading-2">Identical heading</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p></section></div>"`;
 
 exports[`In Page Navigation 1`] = `"<div class="mx-vertical-flow"><nav class="mx-in-page-navigation mx-nav mx-nav--list mx-vertical-flow"><h2 class="mx-heading--m" id="on-this-page">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1" class="mx-icon mx-icon--chevron-right">Section 1</a></li><li class="mx-in-page-navigation__level--h2"><a href="#anchor-test" class="mx-icon mx-icon--chevron-right">Section 2</a></li><li class="mx-in-page-navigation__level--h3"><a href="#test-level-3" class="mx-icon mx-icon--chevron-right">Test level 3</a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3" class="mx-icon mx-icon--chevron-right">Section 3</a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-4" class="mx-icon mx-icon--chevron-right">Section 4</a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-5" class="mx-icon mx-icon--chevron-right">Section 5</a></li><li class="mx-in-page-navigation__level--h3"><a href="#test-level-6" class="mx-icon mx-icon--chevron-right">Test level 6</a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-7" class="mx-icon mx-icon--chevron-right">Section 7</a></li></ul></nav><section class="mx-vertical-flow mx-rich-text"><h2 class="" id="section-1">Section 1</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" id="anchor-test">Section 2</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h3 class="" id="test-level-3">Test level 3</h3><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" id="section-3">Section 3</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" id="section-4">Section 4</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" id="section-5">Section 5</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h3 class="" id="test-level-6">Test level 6</h3><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" id="section-7">Section 7</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p></section></div>"`;
+
+exports[`Screen Reader Announcements 1`] = `"<div class="mx-vertical-flow"><nav class="mx-in-page-navigation mx-nav mx-nav--list mx-vertical-flow"><h2 class="mx-heading--m" id="on-this-page">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1" class="mx-icon mx-icon--chevron-right">Section 1</a></li><li class="mx-in-page-navigation__level--h2"><a href="#anchor-test" class="mx-icon mx-icon--chevron-right">Section 2</a></li><li class="mx-in-page-navigation__level--h3"><a href="#test-level-3" class="mx-icon mx-icon--chevron-right">Test level 3</a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3" class="mx-icon mx-icon--chevron-right">Section 3</a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-4" class="mx-icon mx-icon--chevron-right">Section 4</a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-5" class="mx-icon mx-icon--chevron-right">Section 5</a></li><li class="mx-in-page-navigation__level--h3"><a href="#test-level-6" class="mx-icon mx-icon--chevron-right">Test level 6</a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-7" class="mx-icon mx-icon--chevron-right">Section 7</a></li></ul></nav><section class="mx-vertical-flow mx-rich-text"><h2 class="" id="section-1">Section 1</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" id="anchor-test">Section 2</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h3 class="" id="test-level-3">Test level 3</h3><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" id="section-3">Section 3</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" id="section-4">Section 4</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" id="section-5">Section 5</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h3 class="" id="test-level-6">Test level 6</h3><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" id="section-7">Section 7</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p></section></div>"`;

package/src/Component/LinkList/__snapshots__/LinkList.stories.ts.snap

@@ -7,24 +7,21 @@ exports[`Link List 1`] = `
   
 <li><a href="#">
   
-  <span>Music</span>
-    
+  Music  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
 </li>
 <li><a href="#">
   
-  <span>Performances</span>
-    
+  Performances  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
 </li>
 <li><a href="#">
   
-  <span>Get involved</span>
-    
+  Get involved  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
@@ -42,24 +39,21 @@ exports[`With Title 1`] = `
   
 <li><a href="#">
   
-  <span>Music</span>
-    
+  Music  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
 </li>
 <li><a href="#">
   
-  <span>Performances</span>
-    
+  Performances  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
 </li>
 <li><a href="#">
   
-  <span>Get involved</span>
-    
+  Get involved  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>