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

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>
@@ -30,8 +29,7 @@ exports[`Image Reverse 1`] = `
       
 <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>
@@ -78,8 +75,7 @@ exports[`With Image 1`] = `
       
 <a href="#">
   
-  <span>List item title</span>
-    
+  List item title  
 </a>
 
     </div>
@@ -106,8 +102,7 @@ exports[`With Info 1`] = `
       
 <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,8 +155,7 @@ exports[`With Url 1`] = `
       
 <a href="#">
   
-  <span>List item title</span>
-    
+  List item title  
 </a>
 
     </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/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-collapsible.css

@@ -1,6 +1,7 @@
 /**
  * Collapsible Navigation
  */
+@import "../../Utility/_mixins.css";
 
 @layer design-system.components {
   .mx-nav--collapsible {
@@ -55,7 +56,8 @@
     }
 
     & li > ul {
-      opacity: 1;
+      @add-mixin transition;
+
       display: grid;
 
       @starting-style {

package/src/Component/Navigation/_navigation-dropdown.css

@@ -1,6 +1,7 @@
 /**
  * Dropdown Navigation
  */
+@import "../../Utility/_mixins.css";
 
 @layer design-system.components {
   .mx-nav--dropdown {
@@ -44,8 +45,9 @@
     }
 
     & li > ul {
+      @add-mixin transition;
+
       display: grid;
-      opacity: 1;
 
       @starting-style {
         opacity: 0;

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
@@ -132,3 +133,38 @@ export const Pagination: 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, 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",
+    ])
+  },
+}

package/src/Component/Pagination/Pagination.stories.tsx

@@ -5,6 +5,7 @@ import Component from "./Components/PaginationContext"
 import PaginationComponent from "./Pagination"
 import "./pagination.css"
 import { Page } from "../../../.storybook-react/decorators"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
@@ -81,3 +82,33 @@ export const Pagination: StoryObj<typeof meta> = {
     })
   },
 }
+
+/**
+ * Steps a virtual screen reader through the page and asserts on what it announces.
+ */
+export const ScreenReaderAnnouncements: StoryObj<typeof meta> = {
+  play: async () => {
+    const log = await runScreenReaderWalkthrough()
+    await expect(log).toEqual([
+      "document",
+      "navigation, Pagination",
+      "list",
+      "listitem, level 1, current page, position 1, set size 4",
+      "1",
+      "end of listitem, level 1, current page, position 1, set size 4",
+      "listitem, level 1, position 2, set size 4",
+      "button, 2",
+      "end of listitem, level 1, position 2, set size 4",
+      "listitem, level 1, position 3, set size 4",
+      "button, 3",
+      "end of listitem, level 1, position 3, set size 4",
+      "listitem, level 1, position 4, set size 4",
+      "button, 10",
+      "end of listitem, level 1, position 4, set size 4",
+      "end of list",
+      "button, next",
+      "end of navigation, Pagination",
+      "end of document",
+    ])
+  },
+}

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

@@ -8,8 +8,7 @@ exports[`Pagination 1`] = `
   
 <span class="mx-icon mx-icon--arrow-left"></span>
 
-  <span>Previous</span>
-    
+  Previous  
 </a>
 
     </div>
@@ -19,8 +18,7 @@ exports[`Pagination 1`] = `
   
 <a href="#">
   
-  <span>1</span>
-    
+  1  
 </a>
 
 </li>
@@ -28,8 +26,7 @@ exports[`Pagination 1`] = `
     
 <a href="#" aria-current="page">
   
-  <span>2</span>
-    
+  2  
 </a>
 
 </li>
@@ -37,18 +34,16 @@ exports[`Pagination 1`] = `
   
 <a href="#">
   
-  <span>3</span>
-    
+  3  
 </a>
 
 </li>
-  <li class="mx-pagination__ellipsis">…</li>
+  <li class="mx-pagination__ellipsis" aria-hidden="true">…</li>
 <li class="mx-pagination__item">
   
 <a href="#">
   
-  <span>10</span>
-    
+  10  
 </a>
 
 </li>
@@ -58,8 +53,70 @@ exports[`Pagination 1`] = `
       
 <a href="#">
   
-  <span>Next</span>
+  Next  
+<span class="mx-icon mx-icon--arrow-right"></span>
+
+</a>
+
+    </div>
+  </nav>
+"
+`;
+
+exports[`Screen Reader Announcements 1`] = `
+"<nav class="mx-pagination" aria-label="Pagination">
+      <div class="mx-pagination__previous">
+      
+<a href="#">
+  
+<span class="mx-icon mx-icon--arrow-left"></span>
+
+  Previous  
+</a>
+
+    </div>
+        <div class="mx-pagination__label">Page 2 of 10</div>
+    <ul class="mx-pagination__items">
+    <li class="mx-pagination__item">
+  
+<a href="#">
+  
+  1  
+</a>
+
+</li>
+<li class="mx-pagination__item">
     
+<a href="#" aria-current="page">
+  
+  2  
+</a>
+
+</li>
+<li class="mx-pagination__item">
+  
+<a href="#">
+  
+  3  
+</a>
+
+</li>
+  <li class="mx-pagination__ellipsis" aria-hidden="true">…</li>
+<li class="mx-pagination__item">
+  
+<a href="#">
+  
+  10  
+</a>
+
+</li>
+
+  </ul>
+      <div class="mx-pagination__next">
+      
+<a href="#">
+  
+  Next  
 <span class="mx-icon mx-icon--arrow-right"></span>
 
 </a>

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

@@ -1,3 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Pagination 1`] = `"<nav class="mx-pagination" aria-label="Pagination"><div class="mx-pagination__previous" aria-hidden="true"><button type="button" disabled=""><span class="mx-icon mx-icon--arrow-left"></span><span>previous</span></button></div><div class="mx-pagination__label">Page 1 of 10</div><ul class="mx-pagination__items"><li class="mx-pagination__item" aria-current="page">1</li><li class="mx-pagination__item"><button type="button" data-page="2">2</button></li><li class="mx-pagination__item"><button type="button" data-page="3">3</button></li><li class="mx-pagination__ellipsis">...</li><li class="mx-pagination__item"><button type="button" data-page="10">10</button></li></ul><div class="mx-pagination__next"><button type="button" data-page="2"><span>next</span><span class="mx-icon mx-icon--arrow-right"></span></button></div></nav>"`;
+exports[`Pagination 1`] = `"<nav class="mx-pagination" aria-label="Pagination"><div class="mx-pagination__previous" aria-hidden="true"><button type="button" disabled=""><span class="mx-icon mx-icon--arrow-left"></span><span>previous</span></button></div><div class="mx-pagination__label">Page 1 of 10</div><ul class="mx-pagination__items"><li class="mx-pagination__item" aria-current="page">1</li><li class="mx-pagination__item"><button type="button" data-page="2">2</button></li><li class="mx-pagination__item"><button type="button" data-page="3">3</button></li><li class="mx-pagination__ellipsis" aria-hidden="true">...</li><li class="mx-pagination__item"><button type="button" data-page="10">10</button></li></ul><div class="mx-pagination__next"><button type="button" data-page="2"><span>next</span><span class="mx-icon mx-icon--arrow-right"></span></button></div></nav>"`;
+
+exports[`Screen Reader Announcements 1`] = `"<nav class="mx-pagination" aria-label="Pagination"><div class="mx-pagination__previous" aria-hidden="true"><button type="button" disabled=""><span class="mx-icon mx-icon--arrow-left"></span><span>previous</span></button></div><div class="mx-pagination__label">Page 1 of 10</div><ul class="mx-pagination__items"><li class="mx-pagination__item" aria-current="page">1</li><li class="mx-pagination__item"><button type="button" data-page="2">2</button></li><li class="mx-pagination__item"><button type="button" data-page="3">3</button></li><li class="mx-pagination__ellipsis" aria-hidden="true">...</li><li class="mx-pagination__item"><button type="button" data-page="10">10</button></li></ul><div class="mx-pagination__next"><button type="button" data-page="2"><span>next</span><span class="mx-icon mx-icon--arrow-right"></span></button></div></nav>"`;

package/src/Component/Pagination/pagination-item.twig

@@ -3,5 +3,5 @@
   {{ link }}
 </li>
 {% else %}
-  <li class="mx-pagination__ellipsis">&hellip;</li>
+  <li class="mx-pagination__ellipsis" aria-hidden="true">&hellip;</li>
 {% endif %}