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

package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap

@@ -78,28 +78,25 @@ exports[`Everything 1`] = `
   
   <nav class="mx-social-links" aria-label="Social media links">
   
-  
-<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>
 
@@ -112,14 +109,12 @@ exports[`Everything 1`] = `
       
 <a href="#">
   
-  <span>Accessibility</span>
-    
+  Accessibility  
 </a>
 
 <a href="#">
   
-  <span>Terms &amp; Conditions</span>
-    
+  Terms &amp; Conditions  
 </a>
 
     </nav>
@@ -169,14 +164,12 @@ exports[`Footer 1`] = `
       
 <a href="#">
   
-  <span>Accessibility</span>
-    
+  Accessibility  
 </a>
 
 <a href="#">
   
-  <span>Terms &amp; Conditions</span>
-    
+  Terms &amp; Conditions  
 </a>
 
     </nav>
@@ -226,14 +219,12 @@ exports[`Light 1`] = `
       
 <a href="#">
   
-  <span>Accessibility</span>
-    
+  Accessibility  
 </a>
 
 <a href="#">
   
-  <span>Terms &amp; Conditions</span>
-    
+  Terms &amp; Conditions  
 </a>
 
     </nav>
@@ -283,14 +274,12 @@ exports[`No Logo 1`] = `
       
 <a href="#">
   
-  <span>Accessibility</span>
-    
+  Accessibility  
 </a>
 
 <a href="#">
   
-  <span>Terms &amp; Conditions</span>
-    
+  Terms &amp; Conditions  
 </a>
 
     </nav>
@@ -313,14 +302,12 @@ exports[`No Menu 1`] = `
       
 <a href="#">
   
-  <span>Accessibility</span>
-    
+  Accessibility  
 </a>
 
 <a href="#">
   
-  <span>Terms &amp; Conditions</span>
-    
+  Terms &amp; Conditions  
 </a>
 
     </nav>
@@ -371,14 +358,12 @@ exports[`With Acknowledgment 1`] = `
       
 <a href="#">
   
-  <span>Accessibility</span>
-    
+  Accessibility  
 </a>
 
 <a href="#">
   
-  <span>Terms &amp; Conditions</span>
-    
+  Terms &amp; Conditions  
 </a>
 
     </nav>

package/src/Layout/Grid/grid.css

@@ -4,11 +4,11 @@
 
 @layer design-system.layouts {
   .mx-grid {
-    --grid-repeat: auto-fit;
-    --grid-min: 20ch;
-
     display: grid;
-    grid-template-columns: repeat(var(--grid-repeat), minmax(min(100%, var(--grid-min)), 1fr));
+    grid-template-columns: repeat(
+      var(--grid-repeat, auto-fit),
+      minmax(min(100%, var(--grid-min, 20ch)), 1fr)
+    );
     grid-template-rows: 1fr;
     gap: var(--grid-gap, var(--gap));
 

package/src/Layout/Header/Header.stories.ts

@@ -18,6 +18,7 @@ import "../../Component/Navigation/Elements/Navigation"
 // css.
 import "../../Component/Navigation/navigation.css"
 import { modes } from "../../../.storybook/modes"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 
 type MxHeaderType = Omit<HeaderType, "controls"> & {
   stacked: boolean
@@ -117,6 +118,38 @@ export const Header: 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",
+      "banner",
+      "image, Mixtape",
+      "navigation, Primary navigation",
+      "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, About us",
+      "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, Primary navigation",
+      "end of banner",
+      "end of document",
+    ])
+  },
+}
+
 export const WithTitle: Story = {
   args: {
     title: "Design System",

package/src/Layout/Header/Header.stories.tsx

@@ -4,6 +4,7 @@ import Component from "./Header"
 import { mixtapeLogo, navigationItems } from "../../../mockups/constants"
 import "./header.css"
 import { Page } from "../../../.storybook-react/decorators"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 
 const meta: Meta<typeof Component> = {
   decorators: [Page],
@@ -45,3 +46,33 @@ export const PrimaryHeader: 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",
+      "banner",
+      "image, Mixtape",
+      "navigation, Primary Navigation",
+      "list",
+      "listitem, level 1, position 1, set size 3",
+      "link, Home",
+      "button, Sub-navigation, not expanded",
+      "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, Primary Navigation",
+      "end of banner",
+      "end of document",
+    ])
+  },
+}

package/src/Layout/Header/__snapshots__/Header.stories.ts.snap

@@ -72,6 +72,56 @@ exports[`Header 1`] = `
               <div id="unique-0" class="mx-header__nav mx-header__collapse-toggle">
             
 
+<mx-nav flyout="">
+    <nav class="mx-nav mx-nav--dropdown" aria-label="Primary navigation" id="header-story">
+        <ul class="mx-nav__level-1">
+          <li>
+                  <a href="#">
+            News
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            About us
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            Contact
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            Resources
+          </a>
+                      </li>
+      </ul>
+
+  </nav>
+  </mx-nav>
+
+        </div>
+                          
+          </div>
+  </div>
+</header>
+"
+`;
+
+exports[`Screen Reader Announcements 1`] = `
+"<header class="mx-header mx-page mx-section--s">
+  <div class="mx-header__inner">
+          <div class="mx-header__brand">
+        <img alt="Mixtape" src="./mixtape-logo.png" width="120" height="">
+
+              </div>
+            <div class="mx-header__toggles">
+                    <mx-global-toggle><button aria-controls="unique-0" class="mx-button mx-button--icon-only mx-icon mx-icon--menu">Open Menu</button></mx-global-toggle>
+          </div>
+        <div class="mx-header__main">
+              <div id="unique-0" class="mx-header__nav mx-header__collapse-toggle">
+            
+
 <mx-nav flyout="">
     <nav class="mx-nav mx-nav--dropdown" aria-label="Primary navigation" id="header-story">
         <ul class="mx-nav__level-1">

package/src/Layout/Header/__snapshots__/Header.stories.tsx.snap

@@ -1,3 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Primary Header 1`] = `"<header class="mx-page mx-header mx-section--s"><div class="mx-header__inner"><div class="mx-header__brand"><img alt="Mixtape" src="mixtape-logo.png"></div><div class="mx-header__main"><div id="_r_0_" class="mx-header__nav mx-header__collapse-toggle"><nav class="mx-nav mx-nav--dropdown" aria-label="Primary Navigation" id="_r_0_"><ul class="mx-nav__level-1"><li class="mx-nav__has-subnav"><a href="http://example.com/#1" class="">Home</a><button aria-controls="_r_1_" 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="http://example.com/#2" class="">About</a></li><li class=""><a href="http://example.com/#3" class="">Contact</a></li></ul></nav></div></div></div></header>"`;
+
+exports[`Screen Reader Announcements 1`] = `"<header class="mx-page mx-header mx-section--s"><div class="mx-header__inner"><div class="mx-header__brand"><img alt="Mixtape" src="mixtape-logo.png"></div><div class="mx-header__main"><div id="_r_7_" class="mx-header__nav mx-header__collapse-toggle"><nav class="mx-nav mx-nav--dropdown" aria-label="Primary Navigation" id="_r_7_"><ul class="mx-nav__level-1"><li class="mx-nav__has-subnav"><a href="http://example.com/#1" 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="http://example.com/#2" class="">About</a></li><li class=""><a href="http://example.com/#3" class="">Contact</a></li></ul></nav></div></div></div></header>"`;

package/src/Layout/Masthead/__snapshots__/Masthead.stories.ts.snap

@@ -5,14 +5,12 @@ exports[`Light 1`] = `
     
 <a href="#content">
   
-  <span>Skip to content</span>
-    
+  Skip to content  
 </a>
 
 <a href="#nav">
   
-  <span>Skip to navigation</span>
-    
+  Skip to navigation  
 </a>
 
   </nav>
@@ -29,14 +27,12 @@ exports[`Masthead 1`] = `
     
 <a href="#content">
   
-  <span>Skip to content</span>
-    
+  Skip to content  
 </a>
 
 <a href="#nav">
   
-  <span>Skip to navigation</span>
-    
+  Skip to navigation  
 </a>
 
   </nav>
@@ -53,14 +49,12 @@ exports[`With Links 1`] = `
     
 <a href="#content">
   
-  <span>Skip to content</span>
-    
+  Skip to content  
 </a>
 
 <a href="#nav">
   
-  <span>Skip to navigation</span>
-    
+  Skip to navigation  
 </a>
 
   </nav>
@@ -73,16 +67,14 @@ exports[`With Links 1`] = `
   
 <span class="mx-icon mx-icon--user"></span>
 
-  <span>Create account</span>
-    
+  Create account  
 </a>
 
 <a href="#">
   
 <span class="mx-icon mx-icon--login"></span>
 
-  <span>Log in</span>
-    
+  Log in  
 </a>
 
     </nav>

package/src/Layout/Section/__snapshots__/Background.stories.ts.snap

@@ -17,8 +17,7 @@ exports[`Background 1`] = `
           
 <a href="#" class="mx-link--more">
   
-  <span>See more content</span>
-    
+  See more content  
 <span class="mx-icon mx-icon--arrow-right"></span>
 
 </a>
@@ -47,8 +46,7 @@ exports[`Dark 1`] = `
           
 <a href="#" class="mx-link--more">
   
-  <span>See more content</span>
-    
+  See more content  
 <span class="mx-icon mx-icon--arrow-right"></span>
 
 </a>

package/src/Layout/Section/__snapshots__/Section.stories.ts.snap

@@ -11,8 +11,7 @@ exports[`Background 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>See more content</span>
-    
+  See more content  
 <span class="mx-icon mx-icon--arrow-right"></span>
 
 </a>
@@ -35,8 +34,7 @@ exports[`Box 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>See more content</span>
-    
+  See more content  
 <span class="mx-icon mx-icon--arrow-right"></span>
 
 </a>
@@ -69,8 +67,7 @@ exports[`Modifiers 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>See more content</span>
-    
+  See more content  
 <span class="mx-icon mx-icon--arrow-right"></span>
 
 </a>
@@ -93,8 +90,7 @@ exports[`Section 1`] = `
         
 <a href="#" class="mx-link--more">
   
-  <span>See more content</span>
-    
+  See more content  
 <span class="mx-icon mx-icon--arrow-right"></span>
 
 </a>

package/src/Layout/Sidebar/__snapshots__/Sidebar.stories.ts.snap

@@ -4,7 +4,7 @@ exports[`No Sidebar 1`] = `
 "
 
 <div class="mx-grid--sidebar">
-    <section class="js-content mx-vertical-flow-grid">
+    <section class="js-content mx-vertical-flow-grid gap--xl">
     Main content
   </section>
   </div>
@@ -15,7 +15,7 @@ exports[`Reverse Large 1`] = `
 "
   
 <div class="mx-grid--sidebar mx-grid--sidebar-rev-lg">
-    <section class="js-content mx-vertical-flow-grid">
+    <section class="js-content mx-vertical-flow-grid gap--xl">
     Main content
   </section>
           <aside class="mx-vertical-flow-grid">
@@ -30,7 +30,7 @@ exports[`Revserse Medium 1`] = `
 "
   
 <div class="mx-grid--sidebar mx-grid--sidebar-rev">
-    <section class="js-content mx-vertical-flow-grid">
+    <section class="js-content mx-vertical-flow-grid gap--xl">
     Main content
   </section>
           <aside class="mx-vertical-flow-grid">
@@ -45,7 +45,7 @@ exports[`Sidebar 1`] = `
 "
   
 <div class="mx-grid--sidebar">
-    <section class="js-content mx-vertical-flow-grid">
+    <section class="js-content mx-vertical-flow-grid gap--xl">
     Main content
   </section>
           <aside class="mx-vertical-flow-grid">
@@ -64,7 +64,7 @@ exports[`Sidebar First 1`] = `
       Sidebar content
     </aside>
   
-    <section class="js-content mx-vertical-flow-grid">
+    <section class="js-content mx-vertical-flow-grid gap--xl">
     Main content
   </section>
   </div>

package/src/Layout/Sidebar/sidebar.css

@@ -20,6 +20,7 @@
 
       & > aside {
         flex-grow: 1;
+        align-content: start;
 
         @media (--medium-up) {
           max-inline-size: var(--sidebar-width, 24ch);

package/src/Layout/Sidebar/sidebar.twig

@@ -8,7 +8,7 @@
 {% endfor %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 {% set sidebarAttributes = (sidebarAttributes ?? create_attribute()).addClass('mx-vertical-flow-grid') %}
-{% set contentAttributes = (contentAttributes ?? create_attribute()).addClass('js-content', 'mx-vertical-flow-grid') %}
+{% set contentAttributes = (contentAttributes ?? create_attribute()).addClass('js-content', 'mx-vertical-flow-grid', 'gap--xl') %}
 
 {% if sidebarContent is not empty %}
   {% set sidebar %}

package/src/Utility/Hooks/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,8 @@
+import { useEffect, useLayoutEffect } from "react"
+
+// useLayoutEffect warns when it actually runs during server rendering (it's
+// a no-op there) - fall back to useEffect outside the browser so
+// server-rendered/hydrated consumers never see that warning.
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect
+
+export default useIsomorphicLayoutEffect

package/src/Utility/_layout-utils.css

@@ -12,6 +12,14 @@
     display: flex;
   }
 
+  .grid {
+    display: grid;
+  }
+
+  .spacer {
+    flex: 1;
+  }
+
   .place--center {
     place-content: center;
   }

package/src/Utility/_mixins.css

@@ -8,6 +8,30 @@
   white-space: nowrap;
 }
 
+/**
+ * Pseudo-elements that draw something — a masked icon, a radio dot — paint it
+ * with background-color, which forced-colors mode flattens to Canvas: the
+ * shape disappears. Opt the pseudo out and name a real system colour instead.
+ *
+ * currentcolor won't do: it inherits the parent's *computed* colour, and
+ * forcing happens later at used-value time — an opted-out pseudo would paint
+ * the brand colour and still vanish against a dark high-contrast background.
+ *
+ * --forced-colour carries the right system colour down from context; see the
+ * overrides on .mx-button, a[href] and :disabled.
+ *
+ * Add to any rule that paints a glyph via background-color.
+ */
+/* stylelint-disable no-invalid-position-declaration -- the mixin body is
+   always inlined into a rule, so the declarations do have a parent. */
+@define-mixin forced-colors-paint {
+  @media (--forced-colors) {
+    forced-color-adjust: none;
+    background-color: var(--forced-colour, CanvasText);
+  }
+}
+/* stylelint-enable no-invalid-position-declaration */
+
 @define-mixin sr-undo {
   clip-path: none;
   position: revert !important;