@pnx-mixtape/mxds 0.1.0-rc.5 → 0.1.0-rc.6

package/src/Component/SideNavigation/README.md

@@ -2,18 +2,26 @@
 
 A vertical, multi-level navigation rendered as a `<nav>` landmark with a parent page link at the top and a nested list of sibling/child pages below. Designed to live in the aside of content layouts to expose a section's local page tree. Extends the base `.mx-nav` styles from the Navigation component.
 
+By default every level is rendered open. Set `collapsible` to wrap the nav in `<mx-nav openActive>`, which turns each sub-list into a click-to-expand disclosure and opens the branch containing the current page.
+
 ## CSS Import
 
 ```css
 @import "@pnx-mixtape/mxds/src/Component/SideNavigation/side-navigation.css";
 ```
 
-Depends on the Navigation component's base styles (for `.mx-nav` and sub-list level classes):
+Depends on the Navigation component's base styles (for `.mx-nav`, sub-list level classes and, when collapsible, the `.mx-nav--collapsible` toggle/transition styles):
 
 ```css
 @import "@pnx-mixtape/mxds/src/Component/Navigation/navigation.css";
 ```
 
+## JS Import (collapsible only)
+
+```js
+import "@pnx-mixtape/mxds/src/Component/Navigation/Elements/Navigation"
+```
+
 ---
 
 ## Twig
@@ -24,6 +32,7 @@ Depends on the Navigation component's base styles (for `.mx-nav` and sub-list le
   title: 'Section navigation',
   parent: parent_link,
   items: menu_tree,
+  collapsible: true,
 } %}
 ```
 
@@ -31,13 +40,14 @@ Depends on the Navigation component's base styles (for `.mx-nav` and sub-list le
 
 **side-navigation.twig props** (`SideNavigation` type from `ids-shape`):
 
-| Prop         | Type         | Description                                                                                                                              |
-| ------------ | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`         | `string`     | Written to `.mx-side-nav__parent` and used as the `<nav>`'s `aria-labelledby` fallback when `title` is empty                             |
-| `title`      | `string`     | `aria-label` for the `<nav>` landmark. Provide a meaningful value so assistive tech can distinguish this nav from the site's primary nav |
-| `parent`     | `Link`       | Pre-rendered Link atom representing the current section's parent page, shown above the list                                              |
-| `items`      | `MenuTree[]` | Recursive menu tree — see shape below                                                                                                    |
-| `attributes` | `Attribute`  | Optional Drupal-style attributes object; the template merges `mx-nav mx-side-nav` onto its classes                                       |
+| Prop          | Type         | Description                                                                                                                                                                              |
+| ------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`          | `string`     | Written to `.mx-side-nav__parent` and used as the `<nav>`'s `aria-labelledby` fallback when `title` is empty                                                                             |
+| `title`       | `string`     | `aria-label` for the `<nav>` landmark. Provide a meaningful value so assistive tech can distinguish this nav from the site's primary nav                                                 |
+| `parent`      | `Link`       | Pre-rendered Link atom representing the current section's parent page, shown above the list                                                                                              |
+| `items`       | `MenuTree[]` | Recursive menu tree — see shape below                                                                                                                                                    |
+| `collapsible` | `boolean`    | Optional. Wraps the `<nav>` in `<mx-nav openActive>` and adds `mx-nav--collapsible` so sub-lists collapse behind their toggle buttons. Not part of the `ids-shape` `SideNavigation` type |
+| `attributes`  | `Attribute`  | Optional Drupal-style attributes object; the template merges `mx-nav mx-side-nav` onto its classes                                                                                       |
 
 **`MenuTree` shape** (from `@pnx-mixtape/ids-shape`):
 
@@ -98,13 +108,43 @@ Rules for the markup:
 - The top list is `mx-nav__level-1`, children are `mx-nav__level-2`, grandchildren are `mx-nav__level-3`. Each level adds more inline-start indent.
 - Any `<li>` that contains a nested `<ul>` must carry `mx-nav__has-subnav`.
 - The current page's `<a>` carries `aria-current="page"` — CSS uses this to bold the label and apply the active background.
-- Sub-lists are **not** collapsed or inert — unlike the dropdown/collapsible navigation, every level is rendered open.
+- Sub-lists are **not** collapsed or inert by default — every level is rendered open.
+
+### Collapsible
+
+```html
+<mx-nav openActive>
+  <nav class="mx-nav mx-side-nav mx-nav--collapsible" aria-label="Section navigation">
+    <div class="mx-side-nav__parent" id="section-nav">
+      <a href="/about">About</a>
+    </div>
+    <ul class="mx-nav__level-1">
+      <li class="mx-nav__has-subnav">
+        <a href="/about/what-we-do">What we do</a>
+        <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button">
+          Sub-navigation
+        </button>
+        <ul class="mx-nav__level-2">
+          <li>
+            <a href="/about/what-we-do/events" aria-current="page">Events</a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+</mx-nav>
+```
+
+- Sub-lists are rendered open in the markup (no `inert`), so the full tree is available without JS.
+- On connect, `<mx-nav>` wires each `.mx-nav__toggle` to its sibling `<ul>` (`aria-controls`, `aria-expanded`, `inert`), labels each sub-list by its parent link, then (because of `openActive`) re-opens any sub-list whose parent link or descendants carry `aria-current="page"` or `.is-active`.
+- Sub-lists not on the current page's trail start collapsed.
+- Toggles are hidden until `<mx-nav>` is defined (`mx-nav:not(:defined) .mx-nav__toggle`).
 
 ---
 
 ## React
 
-Uses a composition pattern — always use `SideNavigationTree` inside `SideNavigation`.
+Uses a composition pattern — always use `SideNavigationTree` inside `SideNavigation`. `SideNavigationTree` reads `collapsible` from `SideNavigation` via context, so it is only set once.
 
 ```tsx
 import { SideNavigation, SideNavigationTree, Link } from "@pnx-mixtape/mxds/react"
@@ -126,6 +166,7 @@ const items: MenuTree[] = [
   id="section-nav"
   title="Section navigation"
   parent={<Link to="/about">About</Link>}
+  collapsible
 >
   <SideNavigationTree items={items} />
 </SideNavigation>
@@ -133,18 +174,20 @@ const items: MenuTree[] = [
 
 **`SideNavigation` Props:**
 
-| Prop        | Type        | Required | Description                                                                                                                  |
-| ----------- | ----------- | -------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| `parent`    | `ReactNode` | No       | Link/element shown above the list inside `.mx-side-nav__parent`                                                              |
-| `title`     | `string`    | No       | `aria-label` for the `<nav>` landmark. When omitted, falls back to `aria-labelledby` pointing at the parent wrapper          |
-| `id`        | `string`    | No       | `id` on `.mx-side-nav__parent`, also used as the `aria-labelledby` target when `title` is not set. Auto-generated if omitted |
-| `className` | `string`    | No       | Extra class on the `<nav>`                                                                                                   |
+| Prop          | Type        | Required | Description                                                                                                                                                                                                                         |
+| ------------- | ----------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `parent`      | `ReactNode` | No       | Link/element shown above the list inside `.mx-side-nav__parent`                                                                                                                                                                     |
+| `title`       | `string`    | No       | `aria-label` for the `<nav>` landmark. When omitted, falls back to `aria-labelledby` pointing at the parent wrapper                                                                                                                 |
+| `id`          | `string`    | No       | `id` on `.mx-side-nav__parent`, also used as the `aria-labelledby` target when `title` is not set. Auto-generated if omitted                                                                                                        |
+| `collapsible` | `boolean`   | No       | Adds `mx-nav--collapsible` and makes every nested `SideNavigationTree` sub-list a disclosure (`aria-expanded`/`aria-controls` on the toggle, `inert` when closed). Branches containing the current item start open. Default `false` |
+| `className`   | `string`    | No       | Extra class on the `<nav>`                                                                                                                                                                                                          |
 
 **`SideNavigationTree` Props:**
 
-| Prop    | Type         | Required | Description                                                                   |
-| ------- | ------------ | -------- | ----------------------------------------------------------------------------- |
-| `items` | `MenuTree[]` | Yes      | Recursive menu tree — rendered as nested `<ul class="mx-nav__level-N">` lists |
+| Prop       | Type            | Required | Description                                                                   |
+| ---------- | --------------- | -------- | ----------------------------------------------------------------------------- |
+| `items`    | `MenuTree[]`    | Yes      | Recursive menu tree — rendered as nested `<ul class="mx-nav__level-N">` lists |
+| `...props` | `ul` attributes | No       | Spread onto the `<ul>`                                                        |
 
 **`MenuTree` shape** (from `@pnx-mixtape/ids-shape`):
 
@@ -159,17 +202,18 @@ const items: MenuTree[] = [
 
 ## Modifiers
 
-SideNavigation uses the base `.mx-nav` class for list reset and the component-specific classes below. There are no variant modifiers — the single layout covers all cases.
+SideNavigation uses the base `.mx-nav` class for list reset and the component-specific classes below. The only variant is `mx-nav--collapsible`.
 
-| Class                                                     | Applied by                             | Visual intent                                                                                                                        |
-| --------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `mx-nav`                                                  | Always (shared with Navigation)        | Base list reset — no bullets, vertical layout                                                                                        |
-| `mx-side-nav`                                             | Always                                 | Side-nav specific styling: per-item dividers, indent ramp across levels, current-page background                                     |
-| `mx-side-nav__parent`                                     | Always                                 | Parent-page wrapper above the list — bold label, thicker bottom border                                                               |
-| `mx-nav__level-1` / `mx-nav__level-2` / `mx-nav__level-3` | Structural                             | Sub-list nesting level — each level increases `--indent`                                                                             |
-| `mx-nav__has-subnav`                                      | Structural                             | Applied to any `<li>` that contains a child `<ul>`                                                                                   |
-| `mx-nav__toggle`                                          | Structural (inherited from Navigation) | Hidden in side-nav (`display: none`) — the template emits it for markup parity with dropdown nav, but every level is always expanded |
-| `is-active`                                               | Authoring                              | Alternative to `aria-current="page"` for marking the current item — styled identically                                               |
+| Class                                                     | Applied by                             | Visual intent                                                                                                    |
+| --------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `mx-nav`                                                  | Always (shared with Navigation)        | Base list reset — no bullets, vertical layout                                                                    |
+| `mx-side-nav`                                             | Always                                 | Side-nav specific styling: per-item dividers, indent ramp across levels, current-page background                 |
+| `mx-side-nav__parent`                                     | Always                                 | Parent-page wrapper above the list — bold label, thicker bottom border                                           |
+| `mx-nav--collapsible`                                     | Twig `collapsible: true`               | Shows the sub-list toggles and applies the collapsible nav's `inert`/transition styles                           |
+| `mx-nav__level-1` / `mx-nav__level-2` / `mx-nav__level-3` | Structural                             | Sub-list nesting level — each level increases `--indent`                                                         |
+| `mx-nav__has-subnav`                                      | Structural                             | Applied to any `<li>` that contains a child `<ul>`                                                               |
+| `mx-nav__toggle`                                          | Structural (inherited from Navigation) | Hidden (`display: none`) unless the nav is `mx-nav--collapsible`, where it opens and closes its sibling sub-list |
+| `is-active`                                               | Authoring                              | Alternative to `aria-current="page"` for marking the current item — styled identically                           |
 
 ---
 
@@ -180,8 +224,10 @@ SideNavigation uses the base `.mx-nav` class for list reset and the component-sp
 - Uses semantic nested `<ul>` / `<li>` lists, so assistive tech announces list depth and item count at each level.
 - The current page is marked with `aria-current="page"` on the `<a>`. Style-only bolding is a visual reinforcement — the ARIA attribute is what assistive tech announces. Avoid relying on the background/weight alone.
 - Active-trail ancestors (parent items on the path to the current page) are not given `aria-current` — only the exact current page. Apply the `is-active` class if you want to visually mark ancestors with the same active styling.
-- Keyboard navigation: every item is a native `<a>`, so tab order follows source order and no custom key handling is needed. Sub-lists are always visible, so there is no expand/collapse interaction to manage.
-- The `.mx-nav__toggle` button is emitted in the Twig markup for structural parity with the dropdown nav but is hidden via CSS — do not rely on it for any interactive behaviour in this component at this time (future iterations may enable it).
+- Keyboard navigation: every item is a native `<a>`, so tab order follows source order. In the default variant sub-lists are always visible, so there is no expand/collapse interaction to manage.
+- The `.mx-nav__toggle` button is hidden via CSS in the default variant.
+- Collapsible (Twig and React): each toggle is a native `<button>` with `aria-expanded` and `aria-controls`; collapsed sub-lists are `inert`, so they drop out of the tab order and the accessibility tree. In Twig, `<mx-nav>` also adds the shared `Keyboard` arrow-key handling between links; React has no equivalent. `Escape` does not close sub-lists in either — that is only wired up for `flyout` navs.
+- Collapsible: every toggle's accessible name is "Sub-navigation". Screen-reader users get the context from the preceding link, but the name alone doesn't say which section it opens.
 
 ---
 
@@ -205,7 +251,7 @@ SideNavigation uses the base `.mx-nav` class for list reset and the component-sp
 }
 ```
 
-Level 2 and level 3 sub-lists override `--indent` to step the text further in — at narrow widths with `--spacing-s` / `--spacing-m`, and at the `--global-nav-up` breakpoint with `--spacing-m` / `--spacing-l`.
+Level 2 and level 3 sub-lists override `--indent` to step the text further in — at narrow widths with `--spacing-s` / `--spacing-m`, and at the `--sidebar-up` breakpoint with `--spacing-m` / `--spacing-l`.
 
 ---
 

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

@@ -1,11 +1,17 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
+import { expect } from "storybook/test"
 import Component from "./side-navigation.twig"
 import Link from "../../Atom/Link/link.twig"
 import "../Navigation/navigation.css"
 import "./side-navigation.css"
+import "../Navigation/Elements/Navigation"
 import { SideNavigation as NavigationType } from "@pnx-mixtape/ids-shape"
 
-const meta: Meta<NavigationType> = {
+type SideNavigationType = NavigationType & {
+  collapsible?: boolean
+}
+
+const meta: Meta<SideNavigationType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
   args: {
@@ -128,10 +134,43 @@ const meta: Meta<NavigationType> = {
         required: true,
       },
     },
+    collapsible: {
+      type: "boolean",
+    },
   },
 }
 
 export default meta
-type Story = StoryObj<NavigationType>
+type Story = StoryObj<SideNavigationType>
 
 export const SideNavigation: Story = {}
+
+export const Collapsible: Story = {
+  args: {
+    collapsible: true,
+  },
+  play: async ({ canvas, userEvent, step }) => {
+    const item = canvas.getByRole("link", { name: "What we do" }).closest("li")
+    const trigger = item.querySelector(":scope > .mx-nav__toggle")
+    const list = item.querySelector(":scope > ul")
+
+    await step("Opens the active trail", async () => {
+      await expect(trigger).toHaveAttribute("aria-expanded", "true")
+      await expect(trigger).toHaveAttribute("aria-controls", list.id)
+      await expect(list).not.toHaveAttribute("inert")
+    })
+
+    await step("Closes on click", async () => {
+      await userEvent.click(trigger)
+      await expect(trigger).toHaveAttribute("aria-expanded", "false")
+      await expect(list).toHaveAttribute("inert")
+    })
+
+    await step("Reopens on click", async () => {
+      await userEvent.click(trigger)
+      await expect(trigger).toHaveAttribute("aria-expanded", "true")
+      await expect(list).not.toHaveAttribute("inert")
+      ;(trigger as HTMLElement).blur()
+    })
+  },
+}

package/src/Component/SideNavigation/SideNavigation.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
+import { expect } from "storybook/test"
 import Component from "./SideNavigation"
 import SideNavigationTree from "./Components/SideNavigationTree"
 import "../Navigation/navigation.css"
@@ -66,3 +67,33 @@ const meta: Meta<typeof Component> = {
 export default meta
 
 export const SideNavigation: StoryObj<typeof meta> = {}
+
+export const Collapsible: StoryObj<typeof meta> = {
+  args: {
+    collapsible: true,
+  },
+  play: async ({ canvas, userEvent, step }) => {
+    const item = canvas.getByRole("link", { name: "What we do" }).closest("li")
+    const trigger = item.querySelector(":scope > .mx-nav__toggle")
+    const list = item.querySelector(":scope > ul")
+
+    await step("Opens the active trail", async () => {
+      await expect(trigger).toHaveAttribute("aria-expanded", "true")
+      await expect(trigger).toHaveAttribute("aria-controls", list.id)
+      await expect(list).not.toHaveAttribute("inert")
+    })
+
+    await step("Closes on click", async () => {
+      await userEvent.click(trigger)
+      await expect(trigger).toHaveAttribute("aria-expanded", "false")
+      await expect(list).toHaveAttribute("inert")
+    })
+
+    await step("Reopens on click", async () => {
+      await userEvent.click(trigger)
+      await expect(trigger).toHaveAttribute("aria-expanded", "true")
+      await expect(list).not.toHaveAttribute("inert")
+      ;(trigger as HTMLElement).blur()
+    })
+  },
+}

package/src/Component/SideNavigation/SideNavigation.tsx

@@ -1,18 +1,23 @@
-import { JSX, ReactNode, PropsWithChildren, useId } from "react"
+import { JSX, ReactNode, PropsWithChildren, createContext, useId } from "react"
 import classNames from "classnames"
 
 type SideNavigationProps = PropsWithChildren & {
   parent?: ReactNode
   title?: string
   id?: string
+  collapsible?: boolean
   className?: string
 }
 
+// Whether sub-lists in a nested SideNavigationTree can be collapsed.
+export const SideNavigationContext = createContext<boolean>(false)
+
 const SideNavigation = ({
   children,
   parent,
   title,
   id,
+  collapsible = false,
   className,
 }: SideNavigationProps): JSX.Element => {
   const autoId = useId()
@@ -20,13 +25,18 @@ const SideNavigation = ({
 
   return (
     <nav
-      className={classNames("mx-nav", "mx-side-nav", className)}
+      className={classNames(
+        "mx-nav",
+        "mx-side-nav",
+        { "mx-nav--collapsible": collapsible },
+        className,
+      )}
       {...(title ? { "aria-label": title } : { "aria-labelledby": navId })}
     >
       <div className="mx-side-nav__parent" id={navId}>
         {parent}
       </div>
-      {children}
+      <SideNavigationContext value={collapsible}>{children}</SideNavigationContext>
     </nav>
   )
 }

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

@@ -1,9 +1,93 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Collapsible 1`] = `
+"
+
+<mx-nav openactive="">
+<nav class="mx-nav mx-side-nav mx-nav--collapsible" aria-label="Sidebar nav">
+  <div class="mx-side-nav__parent" id="sidenav-story">
+    
+<a href="#">
+  
+  About  
+</a>
+
+  </div>
+      <ul class="mx-nav__level-1">
+          <li>
+                  <a href="#">
+            News
+          </a>
+                      </li>
+          <li class="mx-nav__has-subnav">
+                  <a href="#" id="unique-2">
+            What we do
+          </a>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="true" aria-controls="unique-0">Sub-navigation</button>
+              <ul class="mx-nav__level-2" id="unique-0" aria-labelledby="unique-1">
+          <li>
+                  <a href="#">
+            Events
+          </a>
+                      </li>
+          <li class="mx-nav__has-subnav">
+                  <a href="#" id="unique-3">
+            Who we are
+          </a>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="true" aria-controls="unique-2">Sub-navigation</button>
+              <ul class="mx-nav__level-3" id="unique-1" aria-labelledby="unique-3">
+          <li>
+                  <a href="#">
+            Our team
+          </a>
+                      </li>
+          <li>
+                  <a href="#" aria-current="page">
+            Our philosophy
+          </a>
+                      </li>
+          <li>
+                  <a href="#">
+            Why music?
+          </a>
+                      </li>
+      </ul>
+
+              </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>
+"
+`;
+
 exports[`Side Navigation 1`] = `
 "
 
-<nav class="mx-nav mx-side-nav" aria-label="Sidebar nav" "="">
+<nav class="mx-nav mx-side-nav" aria-label="Sidebar nav">
   <div class="mx-side-nav__parent" id="sidenav-story">
     
 <a href="#">
@@ -22,7 +106,7 @@ exports[`Side Navigation 1`] = `
                   <a href="#">
             What we do
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button">Sub-navigation</button>
               <ul class="mx-nav__level-2">
           <li>
                   <a href="#">
@@ -33,7 +117,7 @@ exports[`Side Navigation 1`] = `
                   <a href="#">
             Who we are
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button">Sub-navigation</button>
               <ul class="mx-nav__level-3">
           <li>
                   <a href="#">

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

@@ -1,3 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Collapsible 1`] = `"<nav class="mx-nav mx-side-nav mx-nav--collapsible" aria-label="Sidebar nav"><div class="mx-side-nav__parent" id="sidenav-story"><a class="mx-link" href="#">About</a></div><ul class="mx-nav__level-1"><li><a href="#" class="mx-link">News</a></li><li class="mx-nav__has-subnav"><a href="#" class="mx-link" id="_r_17_">What we do</a><button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="true" aria-controls="_r_16_">Sub-navigation</button><ul class="mx-nav__level-2" id="_r_16_" aria-labelledby="_r_17_"><li><a href="#" class="mx-link">Events</a></li><li class="mx-nav__has-subnav"><a href="#" class="mx-link" id="_r_1d_">Who we are</a><button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="true" aria-controls="_r_1c_">Sub-navigation</button><ul class="mx-nav__level-3" id="_r_1c_" aria-labelledby="_r_1d_"><li><a href="#" class="mx-link">Our team</a></li><li><a href="#" class="mx-link" aria-current="page">Our philosophy</a></li><li><a href="#" class="mx-link">Why music?</a></li></ul></li><li><a href="#" class="mx-link">Join us</a></li><li><a href="#" class="mx-link">Careers</a></li></ul></li><li><a href="#" class="mx-link">Contact</a></li><li><a href="#" class="mx-link">Resources</a></li></ul></nav>"`;
+
 exports[`Side Navigation 1`] = `"<nav class="mx-nav mx-side-nav" aria-label="Sidebar nav"><div class="mx-side-nav__parent" id="sidenav-story"><a class="mx-link" href="#">About</a></div><ul class="mx-nav__level-1"><li><a href="#" class="mx-link">News</a></li><li class="mx-nav__has-subnav"><a href="#" class="mx-link">What we do</a><button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button">Sub-navigation</button><ul class="mx-nav__level-2"><li><a href="#" class="mx-link">Events</a></li><li class="mx-nav__has-subnav"><a href="#" class="mx-link">Who we are</a><button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button">Sub-navigation</button><ul class="mx-nav__level-3"><li><a href="#" class="mx-link">Our team</a></li><li><a href="#" class="mx-link" aria-current="page">Our philosophy</a></li><li><a href="#" class="mx-link">Why music?</a></li></ul></li><li><a href="#" class="mx-link">Join us</a></li><li><a href="#" class="mx-link">Careers</a></li></ul></li><li><a href="#" class="mx-link">Contact</a></li><li><a href="#" class="mx-link">Resources</a></li></ul></nav>"`;

package/src/Component/SideNavigation/side-navigation.css

@@ -41,7 +41,7 @@
     & .mx-nav__level-2 > li > a {
       --indent: var(--spacing-s);
 
-      @media (--global-nav-up) {
+      @media (--sidebar-up) {
         --indent: var(--spacing-m);
       }
     }
@@ -49,7 +49,7 @@
     & .mx-nav__level-3 > li > a {
       --indent: var(--spacing-m);
 
-      @media (--global-nav-up) {
+      @media (--sidebar-up) {
         --indent: var(--spacing-l);
       }
     }
@@ -62,7 +62,7 @@
       color: var(--nav-active-foreground, inherit);
     }
 
-    & .mx-nav__toggle {
+    &:not(.mx-nav--collapsible) .mx-nav__toggle {
       display: none;
     }
   }

package/src/Component/SideNavigation/side-navigation.twig

@@ -2,7 +2,8 @@
 {% set baseClass = 'mx-nav' %}
 {% set classes = [
   baseClass,
-  'mx-side-nav'
+  'mx-side-nav',
+  collapsible ? 'mx-nav--collapsible' : null,
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
@@ -19,7 +20,7 @@
           {{ item.link.title }}
         {% endif %}
         {% if item.items is not empty %}
-          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">Sub-navigation</button>
+          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button">Sub-navigation</button>
           {{ nav.menutree(item.items, level + 1, setInert, baseClass) }}
         {% endif %}
       </li>
@@ -27,9 +28,15 @@
   </ul>
 {% endmacro %}
 
-<nav{{ attributes }}{% if title is not empty %} aria-label="{{ title }}"{% else %} aria-labelledby="{{ id }}{% endif %}">
+{% if collapsible %}
+<mx-nav openActive>
+{% endif %}
+<nav{{ attributes }}{% if title is not empty %} aria-label="{{ title }}"{% else %} aria-labelledby="{{ id }}"{% endif %}>
   <div class="mx-side-nav__parent" id="{{ id }}">
     {{ parent }}
   </div>
   {{ nav.menutree(items, 0, false, baseClass) }}
 </nav>
+{% if collapsible %}
+</mx-nav>
+{% endif %}

package/src/Component/Translate/README.md

@@ -81,7 +81,7 @@ import "@pnx-mixtape/mxds/src/Component/Translate/Elements/Translate"
     popovertarget="translate"
     style="anchor-name: --translate"
     data-label="Language"
-    aria-label="Language"
+    aria-label="Language, EN"
   >
     <span class="mx-icon mx-icon--globe"></span>
     <span class="mx-translate__code">EN</span>
@@ -230,8 +230,10 @@ No BEM modifier classes.
 ## Accessibility
 
 - By default, the trigger's accessible name (`aria-label`) updates to reflect the active language
-  (e.g. `"Language: Français"`) rather than staying static — pass `updateTriggerLabel={false}` to
+  (e.g. `"Language: Français, FR"`) rather than staying static — pass `updateTriggerLabel={false}` to
   keep it static instead, which some sites prefer.
+- The accessible name always includes the visible language code (e.g. `EN`) so it satisfies WCAG
+  2.5.3 Label in Name — speech-input users can activate the trigger by saying what they see.
 - Each language link gets `lang`/`hreflang` set to its own code, so screen readers pronounce each
   language name using that language's own phonetics.
 - The active language gets `aria-current="true"`, cleared from the previously active one.

package/src/Component/Translate/Translate.stories.ts

@@ -44,7 +44,7 @@ export const Translate: Story = {
     // (and a fresh view of the story) always starts from the real default state.
     window.localStorage.removeItem("googtrans")
 
-    const trigger = canvas.getByRole("button", { name: "Language" })
+    const trigger = canvas.getByRole("button", { name: /^Language\b/ })
     const menu = canvasElement.querySelector("#translate") as HTMLElement
     const french = await canvas.findByRole("menuitem", { name: "Français", hidden: true })
     // The notice is created via JS on first use (not pre-rendered) and inserted at the
@@ -71,7 +71,7 @@ export const Translate: Story = {
       async () => {
         await userEvent.click(french)
         await waitFor(() => expect(french).toHaveAttribute("aria-current", "true"))
-        await expect(trigger).toHaveAttribute("aria-label", "Language: Français")
+        await expect(trigger).toHaveAttribute("aria-label", "Language: Français, FR")
         await waitFor(() => expect(findNotice()).not.toHaveAttribute("hidden"))
       },
     )

package/src/Component/Translate/Translate.stories.tsx

@@ -35,7 +35,7 @@ export const Translate: StoryObj<typeof meta> = {
     // (and a fresh view of the story) always starts from the real default state.
     window.localStorage.removeItem("googtrans")
 
-    const trigger = canvas.getByRole("button", { name: "Language" })
+    const trigger = canvas.getByRole("button", { name: /^Language\b/ })
     const menu = canvasElement.querySelector("#translate") as HTMLElement
     const french = await canvas.findByRole("menuitem", { name: "Français", hidden: true })
     // The notice is created via JS on first use (not pre-rendered) and inserted at the
@@ -62,7 +62,7 @@ export const Translate: StoryObj<typeof meta> = {
       async () => {
         await userEvent.click(french)
         await waitFor(() => expect(french).toHaveAttribute("aria-current", "true"))
-        await expect(trigger).toHaveAttribute("aria-label", "Language: Français")
+        await expect(trigger).toHaveAttribute("aria-label", "Language: Français, FR")
         await waitFor(() => expect(findNotice()).not.toHaveAttribute("hidden"))
       },
     )

package/src/Component/Translate/Translate.tsx

@@ -186,7 +186,7 @@ const Translate = ({
         popoverTarget={rootId}
         style={triggerStyle}
         data-label={label}
-        aria-label={label}
+        aria-label={`${label}, ${defaultLanguage.toUpperCase()}`}
       >
         <Icon icon={Icons.GLOBE} />
         <span className="mx-translate__code">{defaultLanguage.toUpperCase()}</span>

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

@@ -3,7 +3,7 @@
 exports[`Translate 1`] = `
 "
 <mx-translate class="mx-translate" closeonclick="" data-default-language="en" data-update-trigger-label="true" data-notice-content="Our website uses an automatic service to translate content. These translations should be used as a guide only.">
-  <button id="unique-0" type="button" class="mx-button mx-button--light mx-button--small mx-translate__trigger mx-popover__trigger notranslate" popovertarget="translate" style="anchor-name: --translate" data-label="Language" aria-label="Language: English">
+  <button id="unique-0" type="button" class="mx-button mx-button--light mx-button--small mx-translate__trigger mx-popover__trigger notranslate" popovertarget="translate" style="anchor-name: --translate" data-label="Language" aria-label="Language: English, EN">
     
 <span class="mx-icon mx-icon--globe"></span>
     <span class="mx-translate__code">EN</span>

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

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Translate 1`] = `"<div class="mx-translate"><button type="button" id="translate-target" class="mx-translate__trigger mx-popover__trigger notranslate" popovertarget="translate" data-label="Language" aria-label="Language: English" style="anchor-name: --translate;"><span class="mx-icon mx-icon--globe"></span><span class="mx-translate__code">EN</span></button><div id="translate" class="mx-popover mx-translate__menu notranslate" aria-describedby="translate-target" aria-labelledby="translate-target" data-placement="bottom-start" popover="" role="menu" style="position-anchor: --translate;"><span data-focus-scope-start="true" hidden=""></span><a class="mx-translate__item" href="?hl=en" lang="en" hreflang="en" role="menuitem" data-language="en" aria-current="true">English</a><a class="mx-translate__item" href="?hl=fr" lang="fr" hreflang="fr" role="menuitem" data-language="fr">Français</a><a class="mx-translate__item" href="?hl=es" lang="es" hreflang="es" role="menuitem" data-language="es">Español</a><span data-focus-scope-end="true" hidden=""></span></div></div>"`;
+exports[`Translate 1`] = `"<div class="mx-translate"><button type="button" id="translate-target" class="mx-translate__trigger mx-popover__trigger notranslate" popovertarget="translate" data-label="Language" aria-label="Language: English, EN" style="anchor-name: --translate;"><span class="mx-icon mx-icon--globe"></span><span class="mx-translate__code">EN</span></button><div id="translate" class="mx-popover mx-translate__menu notranslate" aria-describedby="translate-target" aria-labelledby="translate-target" data-placement="bottom-start" popover="" role="menu" style="position-anchor: --translate;"><span data-focus-scope-start="true" hidden=""></span><a class="mx-translate__item" href="?hl=en" lang="en" hreflang="en" role="menuitem" data-language="en" aria-current="true">English</a><a class="mx-translate__item" href="?hl=fr" lang="fr" hreflang="fr" role="menuitem" data-language="fr">Français</a><a class="mx-translate__item" href="?hl=es" lang="es" hreflang="es" role="menuitem" data-language="es">Español</a><span data-focus-scope-end="true" hidden=""></span></div></div>"`;