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

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

@@ -16,9 +16,44 @@ exports[`Generated Items 1`] = `
 "
 `;
 
+exports[`Identical Headings 1`] = `
+"<mx-in-page-navigation data-content=".js-content" data-levels="h2,h3" 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 class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#test-level-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Test level 3</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#identical-heading"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical heading</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#identical-subheading"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical subheading</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#identical-heading-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical heading</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#identical-subheading-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical subheading</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#identical-heading-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical heading</span></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>
+<h2 id="identical-heading">Identical heading</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="identical-subheading">Identical subheading</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>
+<h3 id="identical-heading-1">Identical heading</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>
+<h3 id="identical-subheading-1">Identical subheading</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="identical-heading-2">Identical heading</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>
+"
+`;
+
 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>
@@ -81,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

@@ -1,3 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+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/InPageNavigation/twig/content-example-duplicate-headings.twig

@@ -0,0 +1,20 @@
+<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>
+<h2>Identical heading</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>Identical subheading</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>
+<h3>Identical heading</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>
+<h3>Identical subheading</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>Identical heading</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/twig/in-page-navigation-story-duplicate-headings.twig

@@ -0,0 +1,2 @@
+{% include "../in-page-navigation.twig" with { title: title, levels: levels } %}
+{% include "./content-example-duplicate-headings.twig" %}

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>

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

@@ -8,8 +8,7 @@ exports[`Block Link 1`] = `
       
 <a href="#">
   
-  <span>List item title</span>
-    
+  List item title  
 </a>
 
     </div>
@@ -25,13 +24,12 @@ exports[`Image Reverse 1`] = `
 <article class="mx-card mx-list-item mx-card--collapse mx-card--reversed">
   <div class="mx-card__content mx-vertical-flow">
           <strong class="mx-text--s">Publication</strong>
-              <div class="mx-text--s">25 May 2025</div>
+              <div class="mx-text--meta">25 May 2025</div>
         <div class="mx-heading--l">
       
 <a href="#">
   
-  <span>List item title</span>
-    
+  List item title  
 </a>
 
     </div>
@@ -56,8 +54,7 @@ exports[`List Item 1`] = `
       
 <a href="#">
   
-  <span>List item title</span>
-    
+  List item title  
 </a>
 
     </div>
@@ -73,13 +70,12 @@ exports[`With Image 1`] = `
 <article class="mx-card mx-list-item mx-card--collapse">
   <div class="mx-card__content mx-vertical-flow">
           <strong class="mx-text--s">Publication</strong>
-              <div class="mx-text--s">25 May 2025</div>
+              <div class="mx-text--meta">25 May 2025</div>
         <div class="mx-heading--l">
       
 <a href="#">
   
-  <span>List item title</span>
-    
+  List item title  
 </a>
 
     </div>
@@ -101,13 +97,12 @@ exports[`With Info 1`] = `
 <article class="mx-card mx-list-item">
   <div class="mx-card__content mx-vertical-flow">
           <strong class="mx-text--s">Publication</strong>
-              <div class="mx-text--s">25 May 2025</div>
+              <div class="mx-text--meta">25 May 2025</div>
         <div class="mx-heading--l">
       
 <a href="#">
   
-  <span>List item title</span>
-    
+  List item title  
 </a>
 
     </div>
@@ -127,8 +122,7 @@ exports[`With Tags 1`] = `
       
 <a href="#">
   
-  <span>List item title</span>
-    
+  List item title  
 </a>
 
     </div>
@@ -161,12 +155,11 @@ exports[`With Url 1`] = `
       
 <a href="#">
   
-  <span>List item title</span>
-    
+  List item title  
 </a>
 
     </div>
-          <div class="mx-text--s">https://example.com/some-thing</div>
+          <div class="mx-text--meta">https://example.com/some-thing</div>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     
   </div>

package/src/Component/ListItem/list-item.css

@@ -29,7 +29,7 @@
     & .mx-card__content {
       --flow-gap: var(--gap-s);
 
-      & > .mx-text--s {
+      & > :is(.mx-text--s, .mx-text--meta) {
         --flow-gap: 0;
       }
     }

package/src/Component/ListItem/list-item.twig

@@ -15,13 +15,13 @@
       <strong class="mx-text--s">{{ label }}</strong>
     {% endif %}
     {% if info is not empty and infoBefore %}
-      <div class="mx-text--s">{{ info }}</div>
+      <div class="mx-text--meta">{{ info }}</div>
     {% endif %}
     <div class="mx-heading--l">
       {{ link }}
     </div>
     {% if info is not empty and not infoBefore %}
-      <div class="mx-text--s">{{ info }}</div>
+      <div class="mx-text--meta">{{ info }}</div>
     {% endif %}
     {{ content }}
     {{ tags }}

package/src/Component/Navigation/Dropdown.stories.tsx

@@ -3,6 +3,7 @@ import { expect } from "storybook/test"
 import Component from "./Dropdown"
 import "./navigation.css"
 import { Page } from "../../../.storybook-react/decorators"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
@@ -72,3 +73,48 @@ export const Dropdown: Story = {
     })
   },
 }
+
+/**
+ * Steps a virtual screen reader through the page with the submenu open, and asserts on what it announces.
+ */
+export const ScreenReaderAnnouncements: Story = {
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    const trigger = canvas.getByRole("button", { name: "Sub-navigation" })
+
+    trigger.focus()
+    await userEvent.keyboard("{ArrowDown}")
+    await expect(trigger).toHaveAttribute("aria-expanded", "true")
+
+    const log = await runScreenReaderWalkthrough()
+    await expect(log).toEqual([
+      "document",
+      "navigation, Menu",
+      "list",
+      "listitem, level 1, position 1, set size 3",
+      "link, Home",
+      "button, Sub-navigation, 1 control, expanded",
+      "list",
+      "listitem, level 2, position 1, set size 2",
+      "link, Child link 1",
+      "end of listitem, level 2, position 1, set size 2",
+      "listitem, level 2, position 2, set size 2",
+      "link, Child link 2",
+      "end of listitem, level 2, position 2, set size 2",
+      "end of list",
+      "end of listitem, level 1, position 1, set size 3",
+      "listitem, level 1, position 2, set size 3",
+      "link, About",
+      "end of listitem, level 1, position 2, set size 3",
+      "listitem, level 1, position 3, set size 3",
+      "link, Contact",
+      "end of listitem, level 1, position 3, set size 3",
+      "end of list",
+      "end of navigation, Menu",
+      "end of document",
+    ])
+
+    await userEvent.keyboard("{Escape}")
+    await expect(trigger).toHaveAttribute("aria-expanded", "false")
+    await userEvent.click(canvasElement)
+  },
+}

package/src/Component/Navigation/Navigation.stories.ts

@@ -4,6 +4,7 @@ import Component from "./navigation.twig"
 import "./navigation.css"
 import "./Elements/Navigation"
 import { Navigation as NavigationType } from "@pnx-mixtape/ids-shape"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 
 type MxNavigationType = NavigationType & {
   type?: "collapsible" | "dropdown" | "mega" | "footer"
@@ -253,6 +254,61 @@ export const Dropdown: Story = {
   },
 }
 
+/**
+ * Steps a virtual screen reader through the page with the submenu open, and asserts on what it announces.
+ */
+export const ScreenReaderAnnouncements: Story = {
+  args: Dropdown.args,
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    const trigger = canvas.getByRole("button", { name: "Sub-navigation" })
+
+    trigger.focus()
+    await userEvent.keyboard("{ArrowDown}")
+    await expect(trigger).toHaveAttribute("aria-expanded", "true")
+
+    const log = await runScreenReaderWalkthrough()
+    await expect(log).toEqual([
+      "document",
+      "navigation, Links",
+      "list",
+      "listitem, level 1, position 1, set size 4",
+      "link, News",
+      "end of listitem, level 1, position 1, set size 4",
+      "listitem, level 1, position 2, set size 4",
+      "link, What we do",
+      "button, Sub-navigation, 1 control, expanded",
+      "list, What we do",
+      "listitem, level 2, position 1, set size 4",
+      "link, Events",
+      "end of listitem, level 2, position 1, set size 4",
+      "listitem, level 2, position 2, set size 4",
+      "link, Who we are",
+      "end of listitem, level 2, position 2, set size 4",
+      "listitem, level 2, position 3, set size 4",
+      "link, Join us",
+      "end of listitem, level 2, position 3, set size 4",
+      "listitem, level 2, position 4, set size 4",
+      "link, Careers",
+      "end of listitem, level 2, position 4, set size 4",
+      "end of list, What we do",
+      "end of listitem, level 1, position 2, set size 4",
+      "listitem, level 1, position 3, set size 4",
+      "link, Contact",
+      "end of listitem, level 1, position 3, set size 4",
+      "listitem, level 1, position 4, set size 4",
+      "link, Resources",
+      "end of listitem, level 1, position 4, set size 4",
+      "end of list",
+      "end of navigation, Links",
+      "end of document",
+    ])
+
+    await userEvent.keyboard("{Escape}")
+    await expect(trigger).toHaveAttribute("aria-expanded", "false")
+    await userEvent.click(canvasElement)
+  },
+}
+
 /**
  * Mega is horizontal on desktop requires click to access submenu, best for more than 2 levels of links.
  */

package/src/Component/Navigation/__snapshots__/Dropdown.stories.tsx.snap

@@ -1,3 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Dropdown 1`] = `"<nav class="mx-nav mx-nav--dropdown" aria-label="Menu" id="navigation"><ul class="mx-nav__level-1"><li class="mx-nav__has-subnav"><a href="#" class="">Home</a><button aria-controls="_r_0_" aria-expanded="false" class="mx-nav__toggle mx-icon mx-icon--only mx-icon--chevron-down" type="button">Sub-navigation</button></li><li class=""><a href="#" class="">About</a></li><li class=""><a href="#" class="">Contact</a></li></ul></nav>"`;
+
+exports[`Screen Reader Announcements 1`] = `"<nav class="mx-nav mx-nav--dropdown" aria-label="Menu" id="navigation"><ul class="mx-nav__level-1"><li class="mx-nav__has-subnav"><a href="#" class="">Home</a><button aria-controls="_r_8_" aria-expanded="false" class="mx-nav__toggle mx-icon mx-icon--only mx-icon--chevron-down" type="button">Sub-navigation</button></li><li class=""><a href="#" class="">About</a></li><li class=""><a href="#" class="">Contact</a></li></ul></nav>"`;

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

@@ -243,3 +243,60 @@ exports[`Navigation 1`] = `
   </nav>
   "
 `;
+
+exports[`Screen Reader Announcements 1`] = `
+"  
+
+<mx-nav flyout="">
+    <nav class="mx-nav mx-nav--dropdown" aria-label="Links" id="links-story">
+        <ul class="mx-nav__level-1">
+          <li>
+                  <a href="#">
+            News
+          </a>
+                      </li>
+          <li class="mx-nav__has-subnav">
+                  <a href="#" id="unique-1">
+            What we do
+          </a>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-0">Sub-navigation</button>
+              <ul class="mx-nav__level-2" id="unique-0" aria-labelledby="unique-1" inert="">
+          <li>
+                  <a href="#">
+            Events
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            Who we are
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            Join us
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            Careers
+          </a>
+                      </li>
+      </ul>
+
+              </li>
+          <li>
+                  <a href="#">
+            Contact
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            Resources
+          </a>
+                      </li>
+      </ul>
+
+  </nav>
+  </mx-nav>
+"
+`;

package/src/Component/Navigation/_navigation.css

@@ -4,7 +4,7 @@
 
 @layer design-system.atoms {
   .mx-nav {
-    --colour-link: var(--link-colour, currentcolor);
+    --link-colour: currentcolor;
 
     &:where(:not(:has(ul))),
     ul {

package/src/Component/Pagination/Components/PaginationContext.tsx

@@ -10,6 +10,7 @@ import {
   useEffect,
 } from "react"
 import useUrlParams from "../../../Utility/Hooks/useUrlParams"
+import useIsomorphicLayoutEffect from "../../../Utility/Hooks/useIsomorphicLayoutEffect"
 import { validators } from "../../../Utility/utilities"
 
 type PaginationContextValues = {
@@ -111,7 +112,7 @@ const PaginationProvider = ({
   const { searchParams, pathname, history } = useUrlParams()
 
   // Onload, go to page from URL ?page=x
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (onLoad.current) return
     // check url for page query.
     const pageParam = searchParams?.get("page") ?? "1"

package/src/Component/Pagination/Components/PaginationItem.tsx

@@ -20,7 +20,7 @@ const PaginationItem = ({
     <Tag
       className={classNames(`mx-pagination__${as}`)}
       aria-current={active ? "page" : null}
-      aria-hidden={disabled ? "true" : null}
+      aria-hidden={as === "ellipsis" || disabled ? "true" : null}
     >
       {as === "ellipsis" && <>...</>}
       {as === "item" && (

package/src/Component/Pagination/Pagination.stories.ts

@@ -8,6 +8,7 @@ import "./pagination.css"
 import { Pagination as IdsPagination } from "@pnx-mixtape/ids-shape"
 import { Icons } from "../../enums"
 import { modes } from "../../../.storybook/modes"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 
 // local widening until `label` lands in @pnx-mixtape/ids-shape, and `pages` is
 // a concatenated string of pre-rendered PaginationItem markup rather than an array
@@ -117,14 +118,53 @@ type Story = StoryObj<PaginationType>
 // click/keyboard interaction to test here, just the ARIA structure.
 export const Pagination: Story = {
   play: async ({ canvas, step }) => {
+    const prev = canvas.getByRole("link", { name: /Previous/ })
+    const next = canvas.getByRole("link", { name: /Next/ })
+    const link1 = canvas.getByRole("link", { name: "1", hidden: true })
+    const link2 = canvas.getByRole("link", { name: "2", hidden: true })
     await step("Current page is marked with aria-current", async () => {
-      await expect(canvas.getByRole("link", { name: "2" })).toHaveAttribute("aria-current", "page")
-      await expect(canvas.getByRole("link", { name: "1" })).not.toHaveAttribute("aria-current")
+      await expect(link2).toHaveAttribute("aria-current", "page")
+      await expect(link1).not.toHaveAttribute("aria-current")
     })
 
     await step("Previous/next links are present", async () => {
-      await expect(canvas.getByRole("link", { name: /Previous/ })).toBeInTheDocument()
-      await expect(canvas.getByRole("link", { name: /Next/ })).toBeInTheDocument()
+      await expect(prev).toBeInTheDocument()
+      await expect(next).toBeInTheDocument()
     })
   },
 }
+
+/**
+ * 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, Pagination",
+      "link, Previous",
+      "Previous",
+      "end of link, Previous",
+      "list",
+      "listitem, level 1, position 1, set size 4",
+      "link, 1",
+      "end of listitem, level 1, position 1, set size 4",
+      "listitem, level 1, position 2, set size 4",
+      "link, 2, current page",
+      "end of listitem, level 1, position 2, set size 4",
+      "listitem, level 1, position 3, set size 4",
+      "link, 3",
+      "end of listitem, level 1, position 3, set size 4",
+      "listitem, level 1, position 4, set size 4",
+      "link, 10",
+      "end of listitem, level 1, position 4, set size 4",
+      "end of list",
+      "link, Next",
+      "Next",
+      "end of link, Next",
+      "end of navigation, Pagination",
+      "end of document",
+    ])
+  },
+}