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

package/src/Component/DropMenu/DropMenu.stories.ts

@@ -21,6 +21,8 @@ type DropMenuType = {
   id?: string
   role?: "menu" | "tablist"
   placement?: PopoverPlacementModifier
+  description?: string
+  ariaLabel?: string
 }
 
 /**
@@ -38,6 +40,7 @@ const meta: Meta<DropMenuType> = {
       { label: "Stories", href: "#stories" },
     ],
     placement: PopoverPlacementModifier.BOTTOM_START,
+    description: "Results will update when you make a selection. Press escape to close.",
   },
   argTypes: {
     placement: {
@@ -75,6 +78,22 @@ const meta: Meta<DropMenuType> = {
       options: ["menu", "tablist"],
       type: "string",
     },
+    description: {
+      description:
+        "Screen-reader-only text describing the popover, announced via `aria-describedby` when it opens.",
+      control: "text",
+      table: {
+        type: { summary: "string" },
+      },
+    },
+    ariaLabel: {
+      description:
+        "Overrides the popover's accessible name. Defaults to the trigger button's `label` via `aria-labelledby`.",
+      control: "text",
+      table: {
+        type: { summary: "string" },
+      },
+    },
   },
 }
 
@@ -168,11 +187,11 @@ export const ScreenReaderAnnouncements: Story = {
     await expect(log).toEqual([
       "document",
       "button, Categories",
-      "menu, Categories, orientated vertically",
+      "menu, Categories, Results will update when you make a selection. Press escape to close., orientated vertically",
       "menuitemradio, News, not checked, position 1, set size 3",
       "menuitemradio, Events, not checked, position 2, set size 3",
       "menuitemradio, Stories, not checked, position 3, set size 3",
-      "end of menu, Categories, orientated vertically",
+      "end of menu, Categories, Results will update when you make a selection. Press escape to close., orientated vertically",
       "end of document",
     ])
 

package/src/Component/DropMenu/DropMenu.tsx

@@ -19,6 +19,7 @@ type DropMenuProps = PropsWithChildren & {
   popoverClassName?: string
   role?: "menu" | "tablist"
   ariaLabel?: string
+  triggerDescription?: string
   description?: string
 }
 
@@ -37,6 +38,7 @@ const DropMenu = ({
   popoverClassName,
   role = "menu",
   ariaLabel,
+  triggerDescription,
   description = "Results will update when you make a selection. Press escape to close.",
 }: DropMenuProps): JSX.Element => {
   const { dropMenuId, triggerId, descriptionId, popoverRef } = useDropMenuContext()
@@ -55,9 +57,20 @@ const DropMenu = ({
         className={classNames([...triggerClassNames, "mx-popover__trigger"])}
         popoverTarget={dropMenuId}
         style={triggerStyle}
+        aria-describedby={triggerDescription ? `${triggerId}-desc` : null}
       >
         {label}
       </button>
+      {triggerDescription && (
+        <span id={`${triggerId}-desc`} className="sr-only" aria-hidden="true">
+          {triggerDescription}
+        </span>
+      )}
+      {description && (
+        <span id={descriptionId} className="sr-only" aria-hidden="true">
+          {description}
+        </span>
+      )}
       <div
         id={dropMenuId}
         className={classNames("mx-popover mx-drop-menu", popoverClassName)}
@@ -66,12 +79,9 @@ const DropMenu = ({
         ref={popoverRef}
         aria-labelledby={ariaLabel ? null : triggerId}
         aria-label={ariaLabel}
-        aria-describedby={descriptionId}
+        aria-describedby={descriptionId ? descriptionId : null}
         role={role}
       >
-        <div id={descriptionId} className="sr-only" aria-hidden="true">
-          {description}
-        </div>
         <FocusScope>{children}</FocusScope>
       </div>
     </Container>

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

@@ -5,7 +5,7 @@ exports[`Buttons 1`] = `
 <button id="unique-0" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="dropdown-menu" style="anchor-name: --dropdown-menu">
   Categories
 </button>
-<div class="mx-popover mx-drop-menu" id="dropdown-menu" aria-describedby="unique-0" style="position-anchor: --dropdown-menu" data-placement="bottom-start" popover="" role="menu">
+<span id="unique-1" class="sr-only" aria-hidden="true">Results will update when you make a selection. Press escape to close.</span><div class="mx-popover mx-drop-menu" id="dropdown-menu" aria-labelledby="unique-0" aria-describedby="unique-0" style="position-anchor: --dropdown-menu" data-placement="bottom-start" popover="" role="menu">
             <button type="button" data-id="news" role="menuitemradio" aria-checked="false">News</button>
                 <button type="button" data-id="events" role="menuitemradio" aria-checked="true">Events</button>
                 <button type="button" data-id="stories" role="menuitemradio" aria-checked="false">Stories</button>
@@ -19,7 +19,7 @@ exports[`Drop Menu 1`] = `
 <button id="unique-0" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="dropdown-menu" style="anchor-name: --dropdown-menu">
   Categories
 </button>
-<div class="mx-popover mx-drop-menu" id="dropdown-menu" aria-describedby="unique-0" style="position-anchor: --dropdown-menu" data-placement="bottom-start" popover="">
+<span id="unique-1" class="sr-only" aria-hidden="true">Results will update when you make a selection. Press escape to close.</span><div class="mx-popover mx-drop-menu" id="dropdown-menu" aria-labelledby="unique-0" aria-describedby="unique-0" style="position-anchor: --dropdown-menu" data-placement="bottom-start" popover="">
             <a href="#news">News</a>
                 <a href="#events">Events</a>
                 <a href="#stories">Stories</a>
@@ -33,7 +33,7 @@ exports[`Screen Reader Announcements 1`] = `
 <button id="unique-0" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="dropdown-menu" style="anchor-name: --dropdown-menu">
   Categories
 </button>
-<div class="mx-popover mx-drop-menu" id="dropdown-menu" aria-describedby="unique-0" style="position-anchor: --dropdown-menu" data-placement="bottom-start" popover="" role="menu">
+<span id="unique-1" class="sr-only" aria-hidden="true">Results will update when you make a selection. Press escape to close.</span><div class="mx-popover mx-drop-menu" id="dropdown-menu" aria-labelledby="unique-0" aria-describedby="unique-0" style="position-anchor: --dropdown-menu" data-placement="bottom-start" popover="" role="menu">
             <button type="button" data-id="news" role="menuitemradio" aria-checked="false">News</button>
                 <button type="button" data-id="events" role="menuitemradio" aria-checked="false">Events</button>
                 <button type="button" data-id="stories" role="menuitemradio" aria-checked="false">Stories</button>

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

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Drop Menu 1`] = `"<button id="drop-menu-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-popover__trigger" popovertarget="drop-menu-storybook" style="anchor-name: --drop-menu-drop-menu-storybook;">Categories</button><div id="drop-menu-storybook" class="mx-popover mx-drop-menu" popover="" aria-labelledby="drop-menu-storybook-target" aria-describedby="drop-menu-storybook-description" role="menu" style="position-anchor: --drop-menu-drop-menu-storybook;"><div id="drop-menu-storybook-description" class="sr-only" aria-hidden="true">Results will update when you make a selection. Press escape to close.</div><span data-focus-scope-start="true" hidden=""></span><button type="button" data-id="news" aria-checked="false" role="menuitemradio">News</button><button type="button" data-id="events" aria-checked="false" role="menuitemradio">Events</button><button type="button" data-id="stories" aria-checked="false" role="menuitemradio">Stories</button><span data-focus-scope-end="true" hidden=""></span></div>"`;
+exports[`Drop Menu 1`] = `"<button id="drop-menu-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-popover__trigger" popovertarget="drop-menu-storybook" style="anchor-name: --drop-menu-drop-menu-storybook;">Categories</button><span id="drop-menu-storybook-description" class="sr-only" aria-hidden="true">Results will update when you make a selection. Press escape to close.</span><div id="drop-menu-storybook" class="mx-popover mx-drop-menu" popover="" aria-labelledby="drop-menu-storybook-target" aria-describedby="drop-menu-storybook-description" role="menu" style="position-anchor: --drop-menu-drop-menu-storybook;"><span data-focus-scope-start="true" hidden=""></span><button type="button" data-id="news" aria-checked="false" role="menuitemradio">News</button><button type="button" data-id="events" aria-checked="false" role="menuitemradio">Events</button><button type="button" data-id="stories" aria-checked="false" role="menuitemradio">Stories</button><span data-focus-scope-end="true" hidden=""></span></div>"`;
 
-exports[`Screen Reader Announcements 1`] = `"<button id="drop-menu-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-popover__trigger" popovertarget="drop-menu-storybook" style="anchor-name: --drop-menu-drop-menu-storybook;">Categories</button><div id="drop-menu-storybook" class="mx-popover mx-drop-menu" popover="" aria-labelledby="drop-menu-storybook-target" aria-describedby="drop-menu-storybook-description" role="menu" style="position-anchor: --drop-menu-drop-menu-storybook;"><div id="drop-menu-storybook-description" class="sr-only" aria-hidden="true">Results will update when you make a selection. Press escape to close.</div><span data-focus-scope-start="true" hidden=""></span><button type="button" data-id="news" aria-checked="false" role="menuitemradio">News</button><button type="button" data-id="events" aria-checked="false" role="menuitemradio">Events</button><button type="button" data-id="stories" aria-checked="false" role="menuitemradio">Stories</button><span data-focus-scope-end="true" hidden=""></span></div>"`;
+exports[`Screen Reader Announcements 1`] = `"<button id="drop-menu-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-popover__trigger" popovertarget="drop-menu-storybook" style="anchor-name: --drop-menu-drop-menu-storybook;">Categories</button><span id="drop-menu-storybook-description" class="sr-only" aria-hidden="true">Results will update when you make a selection. Press escape to close.</span><div id="drop-menu-storybook" class="mx-popover mx-drop-menu" popover="" aria-labelledby="drop-menu-storybook-target" aria-describedby="drop-menu-storybook-description" role="menu" style="position-anchor: --drop-menu-drop-menu-storybook;"><span data-focus-scope-start="true" hidden=""></span><button type="button" data-id="news" aria-checked="false" role="menuitemradio">News</button><button type="button" data-id="events" aria-checked="false" role="menuitemradio">Events</button><button type="button" data-id="stories" aria-checked="false" role="menuitemradio">Stories</button><span data-focus-scope-end="true" hidden=""></span></div>"`;

package/src/Component/DropMenu/drop-menu.twig

@@ -1,18 +1,24 @@
 <mx-dropmenu closeonclick>
 {% set id = id|default('dropdown-menu') %}
 {% set name = id ~ '-target' %}
+{% set triggerDescriptionId = name ~ '-descr' %}
+{% set descriptionId = name ~ '-description' %}
 <button
     id="{{ name }}"
     class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end"
     popovertarget="{{ id }}"
     style="anchor-name: --{{ id }}"
+    {% if triggerDescription %}aria-describedby="{{ triggerDescriptionId }}"{% endif %}
 >
   {{ label }}
 </button>
+{% if triggerDescription %}<span id="{{ triggerDescriptionId }}" class="sr-only" aria-hidden="true">{{ triggerDescription }}</span>{% endif %}
+{% if description %}<span id="{{ descriptionId }}" class="sr-only" aria-hidden="true">{{ description }}</span>{% endif %}
 <div
     class="mx-popover mx-drop-menu"
     id="{{ id }}"
-    aria-describedby="{{ name }}"
+    {% if ariaLabel %}aria-label="{{ ariaLabel }}"{% else %}aria-labelledby="{{ name }}"{% endif %}
+    {% if description %}aria-describedby="{{ descriptionId }}"{% endif %}
     style="position-anchor: --{{ id }}"
     data-placement="{{ placement|default('bottom-start') }}"
     popover

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

@@ -2,6 +2,6 @@
 
 exports[`Hero Banner 1`] = `"<div class="mx-page mx-hero-banner"><div class="mx-hero-banner__inner"><div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl"><h1 class="" id="always-put-your-best">Always put your best foot forward.</h1><p class="mx-text--lede">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p></div></div></div>"`;
 
-exports[`Highlight 1`] = `"<div class="mx-page mx-hero-banner mx-background--primary mx-hero-banner--hero"><div class="mx-hero-banner__inner"><div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl"><h1 class="mx-headline" id="always-put-your-best">Always put your best foot forward.</h1><p class="mx-text--lede">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p><button class="mx-button mx-button--dark" type="button">Button</button></div><div class="mx-hero-banner__aside mx-section--xl"><img alt="Blurry bubbles" src="https://picsum.photos/id/56/558/418?grayscale"></div></div></div>"`;
+exports[`Highlight 1`] = `"<div class="mx-page mx-hero-banner mx-background--primary mx-hero-banner--hero"><div class="mx-hero-banner__inner"><div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl"><h1 class="mx-headline" id="always-put-your-best">Always put your best foot forward.</h1><p class="mx-text--lede">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p><button class="mx-button mx-button--dark" type="button"><span>Button</span></button></div><div class="mx-hero-banner__aside mx-section--xl"><img alt="Blurry bubbles" src="https://picsum.photos/id/56/558/418?grayscale"></div></div></div>"`;
 
 exports[`With Link List 1`] = `"<div class="mx-page mx-hero-banner"><div class="mx-hero-banner__inner"><div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl"><h1 class="" id="always-put-your-best">Always put your best foot forward.</h1><p class="mx-text--lede">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p></div><div class="mx-hero-banner__aside mx-section--xl"><h2 class="mx-heading--m" id="popular-links">Popular links</h2><ul class="mx-link-list"><li><a href="#1" class="mx-link">Page link #1<span class="mx-icon mx-icon--chevron-right"></span></a></li><li><a href="#2" class="mx-link">Page link #2<span class="mx-icon mx-icon--chevron-right"></span></a></li><li><a href="#3" class="mx-link">Page link #3<span class="mx-icon mx-icon--chevron-right"></span></a></li></ul></div></div></div>"`;

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

@@ -2,7 +2,8 @@
 
 exports[`Generated Items 1`] = `
 "<mx-in-page-navigation data-content=".js-content" data-levels="" data-title="On this page">
-  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li></ul></nav></mx-in-page-navigation>
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li></ul></nav>
+</mx-in-page-navigation>
 <div class="js-content mx-rich-text mx-vertical-flow">
 <h2 id="section-1">Section 1</h2>
 <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
@@ -18,7 +19,8 @@ exports[`Generated Items 1`] = `
 
 exports[`Identical Headings 1`] = `
 "<mx-in-page-navigation data-content=".js-content" data-levels="h2,h3" data-title="On this page">
-  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#test-level-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Test level 3</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#identical-heading"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical heading</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#identical-subheading"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical subheading</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#identical-heading-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical heading</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#identical-subheading-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical subheading</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#identical-heading-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical heading</span></a></li></ul></nav></mx-in-page-navigation>
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#test-level-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Test level 3</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#identical-heading"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical heading</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#identical-subheading"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical subheading</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#identical-heading-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical heading</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#identical-subheading-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical subheading</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#identical-heading-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Identical heading</span></a></li></ul></nav>
+</mx-in-page-navigation>
 <div class="js-content mx-rich-text mx-vertical-flow">
 <h2 id="section-1">Section 1</h2>
 <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
@@ -44,16 +46,31 @@ exports[`Identical Headings 1`] = `
 
 exports[`In Page Navigation 1`] = `
 "<mx-in-page-navigation data-content=".js-content" data-levels="" data-title="On this page">
-  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span>
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">                  
+<h2 class="is-excluded mx-heading--m">On this page</h2>
+<ul>
+<li><a href="#section-1">
+  
+<span class="mx-icon mx-icon--chevron-right"></span>
 
   Section 1  
-</a></li><li><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span>
+</a>
+</li>
+<li><a href="#section-2">
+  
+<span class="mx-icon mx-icon--chevron-right"></span>
 
   Section 2  
-</a></li><li><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span>
+</a>
+</li>
+<li><a href="#section-3">
+  
+<span class="mx-icon mx-icon--chevron-right"></span>
 
   Section 3  
-</a></li></ul></nav></mx-in-page-navigation>
+</a>
+</li></ul></nav>
+</mx-in-page-navigation>
 <div class="js-content mx-rich-text mx-vertical-flow">
 <h2 id="section-1">Section 1</h2>
 <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
@@ -69,7 +86,8 @@ exports[`In Page Navigation 1`] = `
 
 exports[`Nested 1`] = `
 "<mx-in-page-navigation data-content=".js-content" data-levels="h2,h3" data-title="On this page">
-  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#test-level-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Test level 3</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li></ul></nav></mx-in-page-navigation>
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#test-level-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Test level 3</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li></ul></nav>
+</mx-in-page-navigation>
 <div class="js-content mx-rich-text mx-vertical-flow">
 <h2 id="section-1">Section 1</h2>
 <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
@@ -85,7 +103,8 @@ exports[`Nested 1`] = `
 
 exports[`No Headings 1`] = `
 "<mx-in-page-navigation data-content=".js-content" data-levels="h4" data-title="On this page">
-  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"></nav></mx-in-page-navigation>
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"></nav>
+</mx-in-page-navigation>
 <div class="js-content mx-rich-text mx-vertical-flow">
 <h2 id="section-1">Section 1</h2>
 <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
@@ -102,7 +121,8 @@ exports[`No Headings 1`] = `
 exports[`Other Container 1`] = `
 "<div class="mx-background--box mx-section--m mx-margin--bottom-m">
   <mx-in-page-navigation data-content=".js-content" data-levels="" data-title="On this page">
-  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li></ul></nav></mx-in-page-navigation>
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li></ul></nav>
+</mx-in-page-navigation>
 </div>
 <div class="js-content mx-rich-text mx-vertical-flow">
 <h2 id="section-1">Section 1</h2>
@@ -119,16 +139,31 @@ exports[`Other Container 1`] = `
 
 exports[`Screen Reader Announcements 1`] = `
 "<mx-in-page-navigation data-content=".js-content" data-levels="" data-title="On this page">
-  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow"><h2 class="is-excluded mx-heading--m">On this page</h2><ul><li><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span>
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">                  
+<h2 class="is-excluded mx-heading--m">On this page</h2>
+<ul>
+<li><a href="#section-1">
+  
+<span class="mx-icon mx-icon--chevron-right"></span>
 
   Section 1  
-</a></li><li><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span>
+</a>
+</li>
+<li><a href="#section-2">
+  
+<span class="mx-icon mx-icon--chevron-right"></span>
 
   Section 2  
-</a></li><li><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span>
+</a>
+</li>
+<li><a href="#section-3">
+  
+<span class="mx-icon mx-icon--chevron-right"></span>
 
   Section 3  
-</a></li></ul></nav></mx-in-page-navigation>
+</a>
+</li></ul></nav>
+</mx-in-page-navigation>
 <div class="js-content mx-rich-text mx-vertical-flow">
 <h2 id="section-1">Section 1</h2>
 <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>

package/src/Component/InPageNavigation/in-page-navigation.twig

@@ -6,14 +6,12 @@
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 <mx-in-page-navigation data-content="{{ contentSelector|default('.js-content') }}" data-levels="{{ levels|join(",") }}" data-title="{{ title|striptags|trim }}">
-  {% apply spaceless %}
   <nav{{ attributes }}>
-    {% if items %}
-      {{ title }}
+    {%- if items -%}
+      {{- title -}}
       <ul>
-        {{ items }}
+        {{- items -}}
       </ul>
-    {% endif %}
+    {%- endif -%}
   </nav>
-  {% endapply %}
 </mx-in-page-navigation>

package/src/Component/ListItem/Components/ListItemMedia.tsx

@@ -8,7 +8,7 @@ type CardProps = PropsWithChildren & {
 const ListItemMedia = ({ children, skeleton = false }: CardProps): JSX.Element => {
   return (
     <figure className={classNames("mx-list-item__media", "stack")}>
-      {skeleton && <div className="mx-skeleton mx-skeleton--bg"></div>}
+      {skeleton && <div className="skeleton skeleton--bg"></div>}
       {children}
     </figure>
   )

package/src/Component/Navigation/Elements/Navigation.ts

@@ -25,18 +25,18 @@ export default class Navigation extends HTMLElement {
   keyboard: Keyboard
   subNavs?: Map<string, SubNavType>
   flyout?: boolean
-  edgeCheck!: boolean
+  openActive!: boolean
   mq!: string
-  iO?: IntersectionObserver
 
   constructor() {
     super()
     this.internals_ = this.attachInternals()
     this.controller = new AbortController()
-    this.flyout = this.hasAttribute("flyout")
   }
 
   connectedCallback(): void {
+    this.flyout = this.hasAttribute("flyout")
+    this.openActive = this.hasAttribute("openActive")
     const { signal }: AbortController = this.controller
 
     // Add keyboard navigation events.
@@ -69,21 +69,21 @@ export default class Navigation extends HTMLElement {
       }
     })
 
-    this.addEventListener("disclosure-toggle", this.handleDisclosure)
+    if (this.openActive && this.subNavs.size > 0) this.handleOpenActive()
 
-    if (!this.flyout) return
-    this.edgeCheck = this.hasAttribute("edgeCheck")
-    this.mq = this.getAttribute("mq") || "(min-width: 720px)"
-    this.handleBreakpoint(this.breakpoint)
-    this.breakpoint.addEventListener("change", this.handleBreakpoint, {
-      signal,
-    })
+    if (this.flyout) {
+      this.mq = this.getAttribute("mq") || "(min-width: 720px)"
+      this.handleBreakpoint(this.breakpoint)
+      this.breakpoint.addEventListener("change", this.handleBreakpoint, {
+        signal,
+      })
+      this.addEventListener("disclosure-toggle", this.handleDisclosure)
+    }
   }
 
   disconnectedCallback(): void {
     this.controller.abort()
     this.subNavs?.forEach((subNav: SubNavType): void => subNav.widget.detach())
-    this.iO?.disconnect()
   }
 
   handleDisclosure = ({ detail }: CustomEvent<DisclosureWidgetEvent>): void => {
@@ -104,6 +104,18 @@ export default class Navigation extends HTMLElement {
     })
   }
 
+  handleOpenActive = (): void => {
+    this.subNavs?.forEach(({ widget, list, link }: SubNavType): void => {
+      if (!widget || widget.isOpen) return
+      if (
+        !link.hasAttribute("aria-current") &&
+        !list.querySelector("[aria-current=page], .is-active")
+      )
+        return
+      widget.handleToggle()
+    })
+  }
+
   handleFlyout = (event: MouseEvent): void => {
     const target = event.target as HTMLElement
     const parent: HTMLLIElement = target.closest("li")
@@ -122,32 +134,16 @@ export default class Navigation extends HTMLElement {
     if (matches) {
       this.addEventListener("mouseover", this.handleFlyout, { signal })
       this.addEventListener("mouseleave", this.handleCloseAny, { signal })
-      if (this.edgeCheck) this.handleEdgeCheck()
     } else {
       this.removeEventListener("mouseover", this.handleFlyout)
       this.removeEventListener("mouseleave", this.handleCloseAny)
     }
   }
 
-  handleEdgeCheck() {
-    const windowInnerWidth: number = window.innerWidth
-    this.iO = new IntersectionObserver((entries, obs) => {
-      entries.forEach(({ boundingClientRect, target }) => {
-        if (windowInnerWidth < boundingClientRect.right) target.classList.add("mx-nav--reverse")
-        obs.unobserve(target)
-      })
-    })
-    this.subNavs?.forEach(({ list }: SubNavType): void => {
-      this.iO.observe(list)
-      const nestedLists: NodeListOf<HTMLUListElement> = list.querySelectorAll("ul")
-      nestedLists?.forEach(nestedList => this.iO.observe(nestedList))
-    })
-  }
-
   get links(): NodeListOf<HTMLAnchorElement> | null {
     const links: NodeListOf<HTMLAnchorElement> | null = this.querySelectorAll("a")
     if (!links.length) {
-      throw new Error(`${this.localName} must links`)
+      throw new Error(`${this.localName} must contain links`)
     }
     return links
   }

package/src/Component/Navigation/README.md

@@ -170,15 +170,17 @@ Behind the scenes, each top-level item with children is rendered by `DropdownLev
 </mx-nav>
 ```
 
-The `<mx-nav>` Web Component wires up keyboard navigation, hover flyouts (when the `flyout` attribute is set), edge detection (when `edgeCheck` is set), and `inert`/`aria-expanded` toggling on sub-menus.
+The `<mx-nav>` Web Component wires up keyboard navigation, hover flyouts (when the `flyout` attribute is set) and `inert`/`aria-expanded` toggling on sub-menus.
 
 **`<mx-nav>` attributes:**
 
-| Attribute   | Description                                                          |
-| ----------- | -------------------------------------------------------------------- |
-| `flyout`    | Opens sub-menus on hover at or above `mq`                            |
-| `edgeCheck` | Adds `mx-nav--reverse` to sub-menus that would overflow the viewport |
-| `mq`        | Media query for hover behaviour (default: `"(min-width: 720px)"`)    |
+| Attribute    | Description                                                                                       |
+| ------------ | ------------------------------------------------------------------------------------------------- |
+| `flyout`     | Opens sub-menus on hover at or above `mq`                                                         |
+| `openActive` | Opens sub-menus whose parent link or descendants are `aria-current="page"` / `.is-active` on load |
+| `mq`         | Media query for hover behaviour (default: `"(min-width: 720px)"`)                                 |
+
+**Sub-menu positioning:** at `--global-nav-up`, dropdown and mega sub-menus use CSS anchor positioning — no JS. Each `li` with a sub-menu is its own anchor (`anchor-name` + `anchor-scope: --mx-nav-item`), and the sub-menu is `position: fixed` with `position-try-fallbacks: flip-inline`, so it flips to the other side when it would overflow the viewport. Level-2 chevrons always point inline-end, even when the sub-menu has flipped — `@container anchored(fallback: flip-inline)` could fix that, but Lightning CSS can't parse it yet.
 
 ---
 
@@ -210,7 +212,7 @@ Two templates are provided. `navigation.twig` is a thin wrapper that sets modifi
 | ------------- | ----------------------------------- | --------------------- | ------------------------- |
 | `collapsible` | `mx-nav--collapsible`               | yes                   | —                         |
 | `dropdown`    | `mx-nav--dropdown`                  | yes                   | `flyout`                  |
-| `mega`        | `mx-nav--dropdown mx-nav--mega-nav` | yes                   | `edgeCheck`               |
+| `mega`        | `mx-nav--dropdown mx-nav--mega-nav` | yes                   | —                         |
 | `footer`      | `mx-nav--footer`                    | no                    | sub-lists are not `inert` |
 
 **`MenuItem` shape** (consumed by `menu.twig`):
@@ -234,8 +236,7 @@ Two templates are provided. `navigation.twig` is a thin wrapper that sets modifi
 | `mx-nav--dropdown`                            | React `Dropdown` / Twig `type: 'dropdown'` | Horizontal top level, absolute-positioned level-2 panels                                                     |
 | `mx-nav--mega-nav`                            | Twig `type: 'mega'`                        | Extends `--dropdown` for a third level positioned to the side of level 2                                     |
 | `mx-nav--footer`                              | Twig `type: 'footer'`                      | Used by Footer layout; sub-lists stay visible (not `inert`)                                                  |
-| `mx-nav--reverse`                             | `<mx-nav edgeCheck>` JS                    | Flips sub-menu alignment when it would overflow the viewport                                                 |
-| `mx-nav--open`                                | `<mx-nav>` JS                              | Added to `<li>` while its sub-menu is open                                                                   |
+| `mx-nav--open`                                | `<mx-nav flyout>` JS                       | Added to `<li>` while its sub-menu is open (flyout navs only — chevron rotation keys off `aria-expanded`)    |
 | `mx-nav__level-1` / `__level-2` / `__level-3` | Structural                                 | Sub-list nesting level                                                                                       |
 | `mx-nav__has-subnav`                          | Structural                                 | Applied to any `<li>` that contains a child `<ul>`                                                           |
 | `mx-nav__toggle`                              | Structural                                 | The chevron button that opens a sub-menu                                                                     |
@@ -248,7 +249,7 @@ Two templates are provided. `navigation.twig` is a thin wrapper that sets modifi
 - The outer `<nav>` receives an `aria-label` from the `title` prop — always provide a meaningful label so screen-reader users can distinguish multiple navs on a page (e.g. "Primary navigation", "Footer links").
 - Sub-menu toggle buttons expose `aria-expanded` (true/false) and `aria-controls` pointing to the `id` of their `<ul>`.
 - Sub-lists that are closed use the `inert` attribute — removing them from the tab order and from assistive tech — so no additional ARIA is needed on the list itself.
-- The `<mx-nav>` Web Component attaches keyboard handling via the shared `Keyboard` utility: arrow keys move between links, `Escape` closes open sub-menus.
+- The `<mx-nav>` Web Component attaches keyboard handling via the shared `Keyboard` utility: arrow keys move between links. `Escape` closes open sub-menus only on `flyout` navs (dropdown) — collapsible and mega navs close via their toggle button.
 - `DropdownLevel` (React) handles these keys on the toggle button itself: `Escape`/`ArrowUp` close; `ArrowDown`/`Enter`/`Space` open.
 - The chevron button uses `mx-icon--only` — its accessible name comes from the text "Sub-navigation" inside the button. Never rely on the chevron rotation alone to convey state.
 - Current-page items should carry `aria-current="page"`; collapsible navigation styles this with a bold weight and an accent background.

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

@@ -15,7 +15,7 @@ exports[`Collapsible 1`] = `
                   <a href="#" id="unique-2">
             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>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="false" aria-controls="unique-0">Sub-navigation</button>
               <ul class="mx-nav__level-2" inert="" id="unique-0" aria-labelledby="unique-1">
           <li>
                   <a href="#">
@@ -26,7 +26,7 @@ exports[`Collapsible 1`] = `
                   <a href="#" id="unique-3">
             Who we are
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-2">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="false" aria-controls="unique-2">Sub-navigation</button>
               <ul class="mx-nav__level-3" inert="" id="unique-1" aria-labelledby="unique-3">
           <li>
                   <a href="#">
@@ -91,7 +91,7 @@ exports[`Dropdown 1`] = `
                   <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>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" 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="#">
@@ -136,7 +136,7 @@ exports[`Dropdown 1`] = `
 exports[`Mega 1`] = `
 "    
 
-<mx-nav edgecheck="">
+<mx-nav>
     <nav class="mx-nav mx-nav--dropdown mx-nav--mega-nav" aria-label="Links" id="links-story">
         <ul class="mx-nav__level-1">
           <li>
@@ -148,13 +148,13 @@ exports[`Mega 1`] = `
                   <a href="#" id="unique-3">
             About
           </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>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="false" aria-controls="unique-0">Sub-navigation</button>
               <ul class="mx-nav__level-2" inert="" id="unique-0" aria-labelledby="unique-1">
           <li class="mx-nav__has-subnav">
                   <a href="#" aria-current="page" id="unique-4">
             Who
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-2">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="false" aria-controls="unique-2">Sub-navigation</button>
               <ul class="mx-nav__level-3" inert="" id="unique-1" aria-labelledby="unique-3">
           <li>
                   <a href="#" aria-current="page">
@@ -191,7 +191,7 @@ exports[`Mega 1`] = `
                   <a href="#" id="unique-5">
             Contact
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-4">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="false" aria-controls="unique-4">Sub-navigation</button>
               <ul class="mx-nav__level-2" inert="" id="unique-2" aria-labelledby="unique-5">
           <li>
                   <a href="#" aria-current="page">
@@ -259,7 +259,7 @@ exports[`Screen Reader Announcements 1`] = `
                   <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>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" 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="#">