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

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/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/InPageAlert/in-page-alert.css

@@ -14,11 +14,12 @@
     gap: var(--gap-s);
     padding-block: var(--spacing-xxs);
     padding-inline: var(--spacing-s);
-    border: 1px solid;
+    border: var(--line-width, 1px) solid;
     background-color: var(--background, var(--colour-background-alt));
     color: var(--foreground, var(--colour-foreground));
     color-scheme: var(--alert-scheme, light);
     border-radius: var(--border-radius);
+    align-items: start;
 
     &:has(.mx-icon--close) {
       grid-template-columns: auto min-content;

package/src/Component/InPageNavigation/Elements/InPageNavigation.ts

@@ -32,9 +32,10 @@ export default class InPageNavigation extends HTMLElement {
       ) as HTMLHeadingElement
       this.nav.insertBefore(headingElement, this.menu)
       // Build links if not provided.
+      const counts: Record<string, number> = {}
       this.headings.forEach((heading: HTMLHeadingElement) => {
         const listItem: HTMLLIElement = this.generateListItem(heading)
-        const link: HTMLAnchorElement = this.generateAnchor(heading)
+        const link: HTMLAnchorElement = this.generateAnchor(heading, counts)
         this.items.push({ link, heading })
         listItem.appendChild(link)
         this.menu?.appendChild(listItem)
@@ -119,16 +120,20 @@ export default class InPageNavigation extends HTMLElement {
     return this.menu?.querySelectorAll("a")
   }
 
-  generatedId(heading: HTMLHeadingElement): string {
+  generatedId(heading: HTMLHeadingElement, counts: Record<string, number>): string {
     const string: string | undefined = heading?.textContent?.trim()
-    return !string ? "" : makeAnchor(string)
+    if (!string) return ""
+    const base: string = makeAnchor(string)
+    const index: number = counts[base] ?? 0
+    counts[base] = index + 1
+    return index > 0 ? `${base}-${index}` : base
   }
 
-  generateAnchor(heading: HTMLHeadingElement): HTMLAnchorElement {
+  generateAnchor(heading: HTMLHeadingElement, counts: Record<string, number>): HTMLAnchorElement {
     const { textContent, id } = heading
     const linkText: string | null =
       heading.getAttribute("data-in-page-navigation-title") || textContent
-    const targetID: string = id || this.generatedId(heading)
+    const targetID: string = id || this.generatedId(heading, counts)
     if (!id) heading.id = targetID
     const item: Element = createElement(
       `<a href="#${targetID}"><span class="mx-icon mx-icon--chevron-right"></span><span>${linkText}</span></a>`,

package/src/Component/InPageNavigation/Hooks/useInPageNavigation.ts

@@ -23,17 +23,22 @@ const useInPageNavigation = ({
     const context = ref?.current || document.querySelector("section")
     const headingElements: Element[] = [...context.querySelectorAll(levels)]
 
+    const counts: Record<string, number> = {}
     const values: HeadingType[] = headingElements.map(
-      ({ textContent: text, id, localName }: Element) =>
-        ({
-          id: id || makeAnchor(text),
+      ({ textContent: text, id, localName }: Element) => {
+        const base: string = makeAnchor(text)
+        const index: number = counts[base] ?? 0
+        counts[base] = index + 1
+        return {
+          id: id || (index > 0 ? `${base}-${index}` : base),
           text: text,
           level: localName,
-        }) as HeadingType,
+        } as HeadingType
+      },
     )
     setHeadings([...new Set(values)])
     headingElements.forEach((heading: HTMLHeadingElement, index: number): void => {
-      if (!heading.id) heading.id = values[index].id
+      heading.id = values[index].id
     })
   }, [ref, levels])
 

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

@@ -1,5 +1,7 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
+import { expect } from "storybook/test"
 import Component from "./twig/in-page-navigation-story.twig"
+import Default from "./twig/in-page-navigation-story-duplicate-headings.twig"
 import Other from "./twig/in-page-navigation-selector.twig"
 import "./in-page-navigation.css"
 import "./Elements/InPageNavigation"
@@ -10,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.
@@ -90,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.
  */
@@ -119,6 +171,37 @@ export const NoHeadings: Story = {
   },
 }
 
+/**
+ * Duplicate heading text: the javascript ensures generated ids stay unique.
+ */
+export const IdenticalHeadings: Story = {
+  args: {
+    items: "",
+    levels: [HeadingTypes.TWO, HeadingTypes.THREE],
+  },
+  render: args => Default(args),
+  play: async ({ canvasElement, step }) => {
+    const links: HTMLAnchorElement[] = [
+      ...canvasElement.querySelectorAll<HTMLAnchorElement>(".mx-in-page-navigation a"),
+    ]
+    const ids: string[] = links.map(({ hash }: HTMLAnchorElement) => hash.slice(1))
+
+    await step("Repeated heading text is suffixed, the first stays unsuffixed", async () => {
+      await expect(ids.filter((id: string) => id.startsWith("identical-heading"))).toEqual([
+        "identical-heading",
+        "identical-heading-1",
+        "identical-heading-2",
+      ])
+    })
+
+    await step("Every link targets a heading that exists", async () => {
+      const missing: string[] = ids.filter((id: string) => !canvasElement.querySelector(`#${id}`))
+      await expect(missing).toEqual([])
+      await expect(new Set(ids).size).toBe(ids.length)
+    })
+  },
+}
+
 /**
  * Generated items from anywhere in the page: page content contains headings, but not within the container element.
  */

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

@@ -5,6 +5,8 @@ import Text from "../../Atom/Text/Text"
 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"],
@@ -76,3 +78,131 @@ const meta: Meta<typeof Component> = {
 }
 export default meta
 export const InPageNavigation: StoryObj<typeof Component> = {}
+
+export const IdenticalHeadings: StoryObj<typeof Component> = {
+  render: () => (
+    <div className="mx-vertical-flow">
+      <Component />
+      <section className="mx-vertical-flow mx-rich-text">
+        <Heading>Identical heading</Heading>
+        <Text>
+          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.
+        </Text>
+        <Heading>Identical heading</Heading>
+        <Text>
+          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.
+        </Text>
+        <Heading>Identical heading</Heading>
+        <Text>
+          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.
+        </Text>
+      </section>
+    </div>
+  ),
+  play: async ({ canvasElement, step }) => {
+    const links: HTMLAnchorElement[] = [
+      ...canvasElement.querySelectorAll<HTMLAnchorElement>(".mx-in-page-navigation a"),
+    ]
+    const ids: string[] = links.map(({ hash }: HTMLAnchorElement) => hash.slice(1))
+
+    await step("Repeated heading text is suffixed, the first stays unsuffixed", async () => {
+      await expect(ids.filter((id: string) => id.startsWith("identical-heading"))).toEqual([
+        "identical-heading",
+        "identical-heading-1",
+        "identical-heading-2",
+      ])
+    })
+
+    await step("Every link targets a heading that exists", async () => {
+      const missing: string[] = ids.filter((id: string) => !canvasElement.querySelector(`#${id}`))
+      await expect(missing).toEqual([])
+      await expect(new Set(ids).size).toBe(ids.length)
+    })
+  },
+}
+
+/**
+ * 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",
+    ])
+  },
+}