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

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/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 %}

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

@@ -21,8 +21,7 @@ exports[`Bottom 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -52,8 +51,7 @@ exports[`Bottom End 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -83,8 +81,7 @@ exports[`Bottom Start 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -114,8 +111,7 @@ exports[`Left 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -145,8 +141,7 @@ exports[`Left End 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -176,8 +171,7 @@ exports[`Left Start 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -207,8 +201,7 @@ exports[`Popover 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -238,8 +231,7 @@ exports[`Right 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -269,8 +261,7 @@ exports[`Right End 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -300,8 +291,7 @@ exports[`Right Start 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -331,8 +321,7 @@ exports[`Top 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -362,8 +351,7 @@ exports[`Top End 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>
@@ -393,8 +381,7 @@ exports[`Top Start 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>Learn more</span>
-    
+  Learn more  
 </a>
 
     </div>

package/src/Component/Popover/popover.css

@@ -26,7 +26,7 @@
     padding: var(--popover-padding, var(--spacing-xs));
     background-color: var(--popover-background, var(--colour-background));
     color: var(--popover-foreground, var(--colour-foreground));
-    border: var(--popover-line-width, 0) solid var(--popover-line-colour, var(--colour-border));
+    border: var(--popover-line-width, 1px) solid var(--popover-line-colour, transparent);
     border-radius: var(--popover-radius, var(--border-radius));
     box-shadow: var(--popover-shadow, var(--box-shadow));
     max-inline-size: var(--popover-width, 30ch);

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

@@ -8,8 +8,7 @@ exports[`Side Navigation 1`] = `
     
 <a href="#">
   
-  <span>About</span>
-    
+  About  
 </a>
 
   </div>

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

@@ -5,28 +5,25 @@ exports[`Social Links 1`] = `
                     
 <h2 class="mx-heading--m">Follow us</h2>
 
-  
-<a href="#">
+        
+<a href="#" aria-label="Facebook">
   
 <span class="mx-icon mx-icon--facebook mx-icon--size-md"></span>
 
-  <span class="sr-only">Facebook</span>
     
 </a>
-
-<a href="#">
+      
+<a href="#" aria-label="Instagram">
   
 <span class="mx-icon mx-icon--instagram mx-icon--size-md"></span>
 
-  <span class="sr-only">Instagram</span>
     
 </a>
-
-<a href="#">
+      
+<a href="#" aria-label="LinkedIn">
   
 <span class="mx-icon mx-icon--linkedin mx-icon--size-md"></span>
 
-  <span class="sr-only">LinkedIn</span>
     
 </a>
 

package/src/Component/Steps/Steps.stories.ts

@@ -31,7 +31,7 @@ const meta: Meta<StepsType> = {
   },
   argTypes: {
     modifiers: {
-      description: "Change the colour of the line and marker.",
+      description: "Change the colour of the line and marker (only one applies).",
       options: Object.values(StepsModifier),
       control: "check",
       type: "string",