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

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/Pagination/Pagination.stories.ts

@@ -136,35 +136,65 @@ export const Pagination: Story = {
 
 /**
  * Steps a virtual screen reader through the page and asserts on what it announces.
+ *
+ * Pagination's narrow/wide layouts are driven by a CSS container query (not
+ * `matchMedia`) that swaps the numbered link list for a "Page X of Y" label -
+ * see `pagination.css`. Chromatic exercises both `chromatic.modes` (mobile and
+ * desktop), so this branches on the container's own rendered state (which of
+ * the two is actually visible) rather than hardcoding one shape. Whichever
+ * mode a local run happens to render at, only one branch runs meaningfully for
+ * that run - the other is exercised by Chromatic's other mode in CI. See
+ * "Testing Mobile / matchMedia-Driven Behavior in Play Functions" in
+ * docs/Testing.md.
  */
 export const ScreenReaderAnnouncements: Story = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const label = canvasElement.querySelector(".mx-pagination__label")
+    const isNarrow = label !== null && getComputedStyle(label).display !== "none"
     const log = await runScreenReaderWalkthrough()
-    await expect(log).toEqual([
-      "document",
-      "navigation, Pagination",
-      "link, Previous",
-      "Previous",
-      "end of link, Previous",
-      "list",
-      "listitem, level 1, position 1, set size 4",
-      "link, 1",
-      "end of listitem, level 1, position 1, set size 4",
-      "listitem, level 1, position 2, set size 4",
-      "link, 2, current page",
-      "end of listitem, level 1, position 2, set size 4",
-      "listitem, level 1, position 3, set size 4",
-      "link, 3",
-      "end of listitem, level 1, position 3, set size 4",
-      "listitem, level 1, position 4, set size 4",
-      "link, 10",
-      "end of listitem, level 1, position 4, set size 4",
-      "end of list",
-      "link, Next",
-      "Next",
-      "end of link, Next",
-      "end of navigation, Pagination",
-      "end of document",
-    ])
+
+    if (isNarrow) {
+      await expect(log).toEqual([
+        "document",
+        "navigation, Pagination",
+        "link, Previous",
+        "Previous",
+        "end of link, Previous",
+        "Page 2 of 10",
+        "list",
+        "link, Next",
+        "Next",
+        "end of link, Next",
+        "end of navigation, Pagination",
+        "end of document",
+      ])
+    } else {
+      await expect(log).toEqual([
+        "document",
+        "navigation, Pagination",
+        "link, Previous",
+        "Previous",
+        "end of link, Previous",
+        "list",
+        "listitem, level 1, position 1, set size 4",
+        "link, 1",
+        "end of listitem, level 1, position 1, set size 4",
+        "listitem, level 1, position 2, set size 4",
+        "link, 2, current page",
+        "end of listitem, level 1, position 2, set size 4",
+        "listitem, level 1, position 3, set size 4",
+        "link, 3",
+        "end of listitem, level 1, position 3, set size 4",
+        "listitem, level 1, position 4, set size 4",
+        "link, 10",
+        "end of listitem, level 1, position 4, set size 4",
+        "end of list",
+        "link, Next",
+        "Next",
+        "end of link, Next",
+        "end of navigation, Pagination",
+        "end of document",
+      ])
+    }
   },
 }

package/src/Component/Pagination/pagination.css

@@ -2,8 +2,6 @@
  * Pagination
  */
 
-@import "../../Utility/_mixins.css";
-
 @layer design-system.components {
   .mx-pagination {
     margin-inline: 0;
@@ -102,11 +100,22 @@
     & :is(.mx-pagination__previous, .mx-pagination__next) {
       text-transform: capitalize;
 
-      & span:where(:not(.mx-icon)) {
-        @add-mixin sr-only;
-
-        @container pagination (min-width: 25ch) {
-          @add-mixin sr-undo;
+      & :is(a, button) {
+        @container pagination (max-width: 32ch) {
+          inline-size: var(--button-min-height, var(--spacing-xl));
+          block-size: var(--button-min-height, var(--spacing-xl));
+          flex-wrap: wrap;
+          position: relative;
+          padding: 0;
+          overflow: hidden;
+
+          & .mx-icon {
+            inline-size: var(--button-min-height, var(--spacing-xl));
+            block-size: var(--button-min-height, var(--spacing-xl));
+            place-content: center;
+            display: flex;
+            order: -1;
+          }
         }
       }
     }

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

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Content Only 1`] = `"<button class="mx-button mx-icon--end" type="button" id="story-popover-minimal-trigger" popovertarget="story-popover-minimal" style="anchor-name: --story-popover-minimal;">Popover trigger<span class="mx-icon mx-icon--question"></span></button><div class="mx-popover" id="story-popover-minimal" aria-describedby="story-popover-minimal-trigger" data-placement="bottom" popover="" style="position-anchor: --story-popover-minimal;"><div class="mx-rich-text mx-vertical-flow"><p>A simple hint with no heading or action link.</p></div></div>"`;
+exports[`Content Only 1`] = `"<button class="mx-button mx-icon--end" type="button" id="story-popover-minimal-trigger" popovertarget="story-popover-minimal" style="anchor-name: --story-popover-minimal;"><span>Popover trigger</span><span class="mx-icon mx-icon--question"></span></button><div class="mx-popover" id="story-popover-minimal" aria-describedby="story-popover-minimal-trigger" data-placement="bottom" popover="" style="position-anchor: --story-popover-minimal;"><div class="mx-rich-text mx-vertical-flow"><p>A simple hint with no heading or action link.</p></div></div>"`;
 
-exports[`Default 1`] = `"<button class="mx-button mx-icon--end" type="button" id="story-popover-trigger" popovertarget="story-popover" style="anchor-name: --story-popover;">Popover trigger<span class="mx-icon mx-icon--question"></span></button><div class="mx-popover" id="story-popover" aria-describedby="story-popover-trigger" data-placement="bottom" popover="" style="position-anchor: --story-popover;"><div class="mx-rich-text mx-vertical-flow"><h2>Popover heading</h2><p>Short supplementary content. Use Popover for non-interactive hints; for menus use DropMenu, for modal content use Dialog.</p><a href="#" class="mx-link mx-link--more">Learn more</a></div></div>"`;
+exports[`Default 1`] = `"<button class="mx-button mx-icon--end" type="button" id="story-popover-trigger" popovertarget="story-popover" style="anchor-name: --story-popover;"><span>Popover trigger</span><span class="mx-icon mx-icon--question"></span></button><div class="mx-popover" id="story-popover" aria-describedby="story-popover-trigger" data-placement="bottom" popover="" style="position-anchor: --story-popover;"><div class="mx-rich-text mx-vertical-flow"><h2>Popover heading</h2><p>Short supplementary content. Use Popover for non-interactive hints; for menus use DropMenu, for modal content use Dialog.</p><a href="#" class="mx-link mx-link--more">Learn more</a></div></div>"`;
 
-exports[`Placement 1`] = `"<button class="mx-button mx-icon--end" type="button" id="story-popover-placement-trigger" popovertarget="story-popover-placement" style="anchor-name: --story-popover-placement;">Popover trigger<span class="mx-icon mx-icon--question"></span></button><div class="mx-popover" id="story-popover-placement" aria-describedby="story-popover-placement-trigger" data-placement="top" popover="" style="position-anchor: --story-popover-placement;"><div class="mx-rich-text mx-vertical-flow"><h2>Popover heading</h2><p>Short supplementary content. Use Popover for non-interactive hints; for menus use DropMenu, for modal content use Dialog.</p><a href="#" class="mx-link mx-link--more">Learn more</a></div></div>"`;
+exports[`Placement 1`] = `"<button class="mx-button mx-icon--end" type="button" id="story-popover-placement-trigger" popovertarget="story-popover-placement" style="anchor-name: --story-popover-placement;"><span>Popover trigger</span><span class="mx-icon mx-icon--question"></span></button><div class="mx-popover" id="story-popover-placement" aria-describedby="story-popover-placement-trigger" data-placement="top" popover="" style="position-anchor: --story-popover-placement;"><div class="mx-rich-text mx-vertical-flow"><h2>Popover heading</h2><p>Short supplementary content. Use Popover for non-interactive hints; for menus use DropMenu, for modal content use Dialog.</p><a href="#" class="mx-link mx-link--more">Learn more</a></div></div>"`;

package/src/Component/Tabs/Components/TabDropMenu.tsx

@@ -5,7 +5,13 @@ import { useTabContext } from "../Tabs"
 const TabDropMenu = ({ children }: PropsWithChildren): JSX.Element => {
   const { activeTabLabel } = useTabContext()
   return (
-    <DropMenu label={activeTabLabel} className="mobile-only" role="tablist">
+    <DropMenu
+      label={activeTabLabel}
+      className="mobile-only"
+      role="tablist"
+      description="Selecting a tab updates the content below. Press escape to close."
+      triggerDescription="Select a tab"
+    >
       {children}
     </DropMenu>
   )

package/src/Component/Tabs/Elements/Tabs.ts

@@ -150,8 +150,10 @@ export default class Tabs extends HTMLElement {
     this.dropTriggerClasses =
       this.getAttribute("dropTriggerClasses") ||
       "mx-button mx-icon mx-icon--chevron-down mx-icon--end"
-    this.dropMenuId = this.id || makeAnchor("tab-drop-menu")
+    this.dropMenuId = this.id ? `${this.id}-drop-menu` : makeAnchor("tab-drop-menu")
     const name = `${this.dropMenuId}-target`
+    const triggerDescriptionId = `${name}-description`
+    const menuDescriptionId = `${this.dropMenuId}-description`
     const tabDropMenu = new DropMenu()
     tabDropMenu.setAttribute("closeOnClick", "true")
     const trigger = createElement(`<button
@@ -159,20 +161,28 @@ export default class Tabs extends HTMLElement {
                   class="mx-popover__trigger ${this.dropTriggerClasses}"
                   popovertarget="${this.dropMenuId}"
                   style="anchor-name: --${this.dropMenuId}"
+                  aria-describedby="${triggerDescriptionId}"
                   hidden
               ></button>`)
+    const triggerDescription = createElement(
+      `<span id="${triggerDescriptionId}" class="sr-only" aria-hidden="true">Select a tab</span>`,
+    )
+    const menuDescription = createElement(
+      `<span id="${menuDescriptionId}" class="sr-only" aria-hidden="true">Selecting a tab updates the content below. Press escape to close.</span>`,
+    )
     const menu = createElement(
       `<div
                   class="mx-popover mx-drop-menu"
                   id="${this.dropMenuId}"
-                  aria-describedby="${name}"
+                  aria-labelledby="${name}"
+                  aria-describedby="${menuDescriptionId}"
                   style="position-anchor: --${this.dropMenuId}"
                   data-placement="${PopoverPlacementModifier.BOTTOM_START}"
                   popover
                   role="tablist"
               ></div>`,
     )
-    tabDropMenu.append(trigger, menu)
+    tabDropMenu.append(trigger, triggerDescription, menuDescription, menu)
     this.prepend(tabDropMenu)
     return tabDropMenu
   }

package/src/Component/Tabs/Tabs.stories.ts

@@ -180,22 +180,43 @@ export const Tabs: Story = {
 
 /**
  * Steps a virtual screen reader through the tab list and asserts on what it announces.
+ *
+ * Below `Elements/Tabs.ts`'s breakpoint (`mq`, default `(max-width: 720px)`)
+ * the tab list collapses into a `DropMenu` popover trigger - see the component
+ * doc comment above. This branches on the real `matchMedia(...).matches`,
+ * same as the `Tabs` interaction story above, and is paired with
+ * `chromatic.modes` on `meta` so both shapes get exercised in CI. See
+ * "Testing Mobile / matchMedia-Driven Behavior in Play Functions" in
+ * docs/Testing.md.
  */
 export const ScreenReaderAnnouncements: Story = {
   play: async () => {
+    const isMobile = matchMedia("(max-width: 767px)").matches
     const log = await runScreenReaderWalkthrough()
-    await expect(log).toEqual([
-      "document",
-      "tablist, orientated horizontally",
-      "tab, Funk, selected, 1 control, position 1, set size 3",
-      "tab, Soul, not selected, 1 control, position 2, set size 3",
-      "tab, Motown, not selected, 1 control, position 3, set size 3",
-      "end of tablist, orientated horizontally",
-      "tabpanel, Funk",
-      "Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.",
-      "end of tabpanel, Funk",
-      "end of document",
-    ])
+
+    if (isMobile) {
+      await expect(log).toEqual([
+        "document",
+        "button, Funk, Select a tab",
+        "tabpanel, Funk",
+        "Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.",
+        "end of tabpanel, Funk",
+        "end of document",
+      ])
+    } else {
+      await expect(log).toEqual([
+        "document",
+        "tablist, orientated horizontally",
+        "tab, Funk, selected, 1 control, position 1, set size 3",
+        "tab, Soul, not selected, 1 control, position 2, set size 3",
+        "tab, Motown, not selected, 1 control, position 3, set size 3",
+        "end of tablist, orientated horizontally",
+        "tabpanel, Funk",
+        "Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.",
+        "end of tabpanel, Funk",
+        "end of document",
+      ])
+    }
   },
 }
 

package/src/Component/Tabs/Tabs.stories.tsx

@@ -121,20 +121,34 @@ export const Default: StoryObj<typeof meta> = {
  */
 export const ScreenReaderAnnouncements: StoryObj<typeof meta> = {
   play: async () => {
+    const isMobile = matchMedia("(max-width: 767px)").matches
     const log = await runScreenReaderWalkthrough()
-    await expect(log).toEqual([
-      "document",
-      "tablist, orientated horizontally",
-      "tab, Tab 1, selected, 1 control, position 1, set size 3",
-      "tab, Tab 2, not selected, 1 control, position 2, set size 3",
-      "tab, Tab 3, not selected, 1 control, position 3, set size 3",
-      "end of tablist, orientated horizontally",
-      "tabpanel, Tab 1",
-      "paragraph",
-      "This is tab 1",
-      "end of paragraph",
-      "end of tabpanel, Tab 1",
-      "end of document",
-    ])
+    if (isMobile) {
+      await expect(log).toEqual([
+        "document",
+        "button, Tab 1, Select a tab",
+        "tabpanel, Tab 1",
+        "paragraph",
+        "This is tab 1",
+        "end of paragraph",
+        "end of tabpanel, Tab 1",
+        "end of document",
+      ])
+    } else {
+      await expect(log).toEqual([
+        "document",
+        "tablist, orientated horizontally",
+        "tab, Tab 1, selected, 1 control, position 1, set size 3",
+        "tab, Tab 2, not selected, 1 control, position 2, set size 3",
+        "tab, Tab 3, not selected, 1 control, position 3, set size 3",
+        "end of tablist, orientated horizontally",
+        "tabpanel, Tab 1",
+        "paragraph",
+        "This is tab 1",
+        "end of paragraph",
+        "end of tabpanel, Tab 1",
+        "end of document",
+      ])
+    }
   },
 }

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

@@ -3,7 +3,7 @@
 exports[`Screen Reader Announcements 1`] = `
 "
 
-<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="unique-0" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-1" aria-selected="true">Funk</button><button type="button" role="tab" aria-controls="unique-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-4" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-5" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Motown</button></div>
+<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example-drop-menu" style="anchor-name: --tab-example-drop-menu" aria-describedby="unique-0" hidden="">Funk</button><span id="unique-4" class="sr-only" aria-hidden="true">Select a tab</span><span id="unique-5" class="sr-only" aria-hidden="true">Selecting a tab updates the content below. Press escape to close.</span><div class="mx-popover mx-drop-menu" id="tab-example-drop-menu" aria-labelledby="unique-1" aria-describedby="unique-1" style="position-anchor: --tab-example-drop-menu" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-2" aria-selected="true">Funk</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-4" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-5" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-7" aria-selected="false" tabindex="-1">Motown</button></div>
   <div class="mx-tabs__panel mx-vertical-flow mx-container" id="unique-0" data-tab="Funk" role="tabpanel" tabindex="-1" aria-label="Funk">
   Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
 </div>
@@ -21,7 +21,7 @@ exports[`Screen Reader Announcements 1`] = `
 exports[`Tabs 1`] = `
 "
 
-<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="unique-0" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-1" aria-selected="true">Funk</button><button type="button" role="tab" aria-controls="unique-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-4" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-5" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Motown</button></div>
+<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example-drop-menu" style="anchor-name: --tab-example-drop-menu" aria-describedby="unique-0" hidden="">Funk</button><span id="unique-4" class="sr-only" aria-hidden="true">Select a tab</span><span id="unique-5" class="sr-only" aria-hidden="true">Selecting a tab updates the content below. Press escape to close.</span><div class="mx-popover mx-drop-menu" id="tab-example-drop-menu" aria-labelledby="unique-1" aria-describedby="unique-1" style="position-anchor: --tab-example-drop-menu" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-2" aria-selected="true">Funk</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-4" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-5" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-7" aria-selected="false" tabindex="-1">Motown</button></div>
   <div class="mx-tabs__panel mx-vertical-flow mx-container" id="unique-0" data-tab="Funk" role="tabpanel" tabindex="-1" aria-label="Funk">
   Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
 </div>
@@ -41,7 +41,7 @@ exports[`With Heading 1`] = `
 
 <h2>Tabs heading</h2>
 
-<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example" style="anchor-name: --tab-example" hidden="">Funk</button><div class="mx-popover mx-drop-menu" id="tab-example" aria-describedby="unique-0" style="position-anchor: --tab-example" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-1" aria-selected="true">Funk</button><button type="button" role="tab" aria-controls="unique-2" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-4" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-5" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Motown</button></div>
+<mx-tabs class="mx-tabs mx-tabs--lined" id="tab-example"><mx-dropmenu closeonclick="true"><button id="unique-3" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="tab-example-drop-menu" style="anchor-name: --tab-example-drop-menu" aria-describedby="unique-0" hidden="">Funk</button><span id="unique-4" class="sr-only" aria-hidden="true">Select a tab</span><span id="unique-5" class="sr-only" aria-hidden="true">Selecting a tab updates the content below. Press escape to close.</span><div class="mx-popover mx-drop-menu" id="tab-example-drop-menu" aria-labelledby="unique-1" aria-describedby="unique-1" style="position-anchor: --tab-example-drop-menu" data-placement="bottom-start" popover="" role="tablist"><button type="button" role="tab" aria-controls="unique-2" aria-selected="true">Funk</button><button type="button" role="tab" aria-controls="unique-3" aria-selected="false">Soul</button><button type="button" role="tab" aria-controls="unique-4" aria-selected="false">Motown</button></div></mx-dropmenu><div class="mx-tabs__list" role="tablist"><button type="button" role="tab" aria-controls="unique-5" aria-selected="true" tabindex="0">Funk</button><button type="button" role="tab" aria-controls="unique-6" aria-selected="false" tabindex="-1">Soul</button><button type="button" role="tab" aria-controls="unique-7" aria-selected="false" tabindex="-1">Motown</button></div>
   <div class="mx-tabs__panel mx-vertical-flow mx-container" id="unique-0" data-tab="Funk" role="tabpanel" tabindex="-1" aria-label="Funk">
   Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
 </div>

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

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Default 1`] = `"<div class="mx-tabs"><div class="mobile-only"><button id="tabs-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-popover__trigger" popovertarget="tabs-storybook" style="anchor-name: --drop-menu-tabs-storybook;">Tab 1</button><div id="tabs-storybook" class="mx-popover mx-drop-menu" popover="" aria-labelledby="tabs-storybook-target" aria-describedby="tabs-storybook-description" role="tablist" style="position-anchor: --drop-menu-tabs-storybook;"><div id="tabs-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="tab-1" aria-checked="true" role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</button><button type="button" data-id="tab-2" aria-checked="false" role="tab" aria-controls="tab-2" aria-selected="false">Tab 2</button><button type="button" data-id="tab-3" aria-checked="false" role="tab" aria-controls="tab-3" aria-selected="false">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div></div><div class="mx-tabs__list desktop-only" role="tablist"><span data-focus-scope-start="true" hidden=""></span><button id="tab-1-button" aria-controls="tab-1" role="tab" aria-selected="true" tabindex="0" type="button">Tab 1</button><button id="tab-2-button" aria-controls="tab-2" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 2</button><button id="tab-3-button" aria-controls="tab-3" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div><div id="tab-1" class="mx-tabs__panel mx-vertical-flow mx-section--l" aria-labelledby="tab-1-button" role="tabpanel" tabindex="0"><p>This is tab 1</p></div><div id="tab-2" class="mx-tabs__panel mx-vertical-flow mx-section--l" aria-labelledby="tab-2-button" role="tabpanel" tabindex="0" inert=""><p>This is tab 2</p></div><div id="tab-3" class="mx-tabs__panel mx-vertical-flow mx-section--l" inert="" aria-labelledby="tab-3-button" role="tabpanel" tabindex="0"><p>This is tab 3</p></div></div>"`;
+exports[`Default 1`] = `"<div class="mx-tabs"><div class="mobile-only"><button id="tabs-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-popover__trigger" popovertarget="tabs-storybook" aria-describedby="tabs-storybook-target-desc" style="anchor-name: --drop-menu-tabs-storybook;">Tab 1</button><span id="tabs-storybook-target-desc" class="sr-only" aria-hidden="true">Select a tab</span><span id="tabs-storybook-description" class="sr-only" aria-hidden="true">Selecting a tab updates the content below. Press escape to close.</span><div id="tabs-storybook" class="mx-popover mx-drop-menu" popover="" aria-labelledby="tabs-storybook-target" aria-describedby="tabs-storybook-description" role="tablist" style="position-anchor: --drop-menu-tabs-storybook;"><span data-focus-scope-start="true" hidden=""></span><button type="button" data-id="tab-1" aria-checked="true" role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</button><button type="button" data-id="tab-2" aria-checked="false" role="tab" aria-controls="tab-2" aria-selected="false">Tab 2</button><button type="button" data-id="tab-3" aria-checked="false" role="tab" aria-controls="tab-3" aria-selected="false">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div></div><div class="mx-tabs__list desktop-only" role="tablist"><span data-focus-scope-start="true" hidden=""></span><button id="tab-1-button" aria-controls="tab-1" role="tab" aria-selected="true" tabindex="0" type="button">Tab 1</button><button id="tab-2-button" aria-controls="tab-2" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 2</button><button id="tab-3-button" aria-controls="tab-3" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div><div id="tab-1" class="mx-tabs__panel mx-vertical-flow mx-section--l" aria-labelledby="tab-1-button" role="tabpanel" tabindex="0"><p>This is tab 1</p></div><div id="tab-2" class="mx-tabs__panel mx-vertical-flow mx-section--l" aria-labelledby="tab-2-button" role="tabpanel" tabindex="0" inert=""><p>This is tab 2</p></div><div id="tab-3" class="mx-tabs__panel mx-vertical-flow mx-section--l" inert="" aria-labelledby="tab-3-button" role="tabpanel" tabindex="0"><p>This is tab 3</p></div></div>"`;
 
-exports[`Screen Reader Announcements 1`] = `"<div class="mx-tabs"><div class="mobile-only"><button id="tabs-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-popover__trigger" popovertarget="tabs-storybook" style="anchor-name: --drop-menu-tabs-storybook;">Tab 1</button><div id="tabs-storybook" class="mx-popover mx-drop-menu" popover="" aria-labelledby="tabs-storybook-target" aria-describedby="tabs-storybook-description" role="tablist" style="position-anchor: --drop-menu-tabs-storybook;"><div id="tabs-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="tab-1" aria-checked="true" role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</button><button type="button" data-id="tab-2" aria-checked="false" role="tab" aria-controls="tab-2" aria-selected="false">Tab 2</button><button type="button" data-id="tab-3" aria-checked="false" role="tab" aria-controls="tab-3" aria-selected="false">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div></div><div class="mx-tabs__list desktop-only" role="tablist"><span data-focus-scope-start="true" hidden=""></span><button id="tab-1-button" aria-controls="tab-1" role="tab" aria-selected="true" tabindex="0" type="button">Tab 1</button><button id="tab-2-button" aria-controls="tab-2" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 2</button><button id="tab-3-button" aria-controls="tab-3" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div><div id="tab-1" class="mx-tabs__panel mx-vertical-flow mx-section--l" aria-labelledby="tab-1-button" role="tabpanel" tabindex="0"><p>This is tab 1</p></div><div id="tab-2" class="mx-tabs__panel mx-vertical-flow mx-section--l" inert="" aria-labelledby="tab-2-button" role="tabpanel" tabindex="0"><p>This is tab 2</p></div><div id="tab-3" class="mx-tabs__panel mx-vertical-flow mx-section--l" inert="" aria-labelledby="tab-3-button" role="tabpanel" tabindex="0"><p>This is tab 3</p></div></div>"`;
+exports[`Screen Reader Announcements 1`] = `"<div class="mx-tabs"><div class="mobile-only"><button id="tabs-storybook-target" type="button" class="mx-button mx-icon mx-icon--chevron-down mx-icon--end mx-popover__trigger" popovertarget="tabs-storybook" aria-describedby="tabs-storybook-target-desc" style="anchor-name: --drop-menu-tabs-storybook;">Tab 1</button><span id="tabs-storybook-target-desc" class="sr-only" aria-hidden="true">Select a tab</span><span id="tabs-storybook-description" class="sr-only" aria-hidden="true">Selecting a tab updates the content below. Press escape to close.</span><div id="tabs-storybook" class="mx-popover mx-drop-menu" popover="" aria-labelledby="tabs-storybook-target" aria-describedby="tabs-storybook-description" role="tablist" style="position-anchor: --drop-menu-tabs-storybook;"><span data-focus-scope-start="true" hidden=""></span><button type="button" data-id="tab-1" aria-checked="true" role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</button><button type="button" data-id="tab-2" aria-checked="false" role="tab" aria-controls="tab-2" aria-selected="false">Tab 2</button><button type="button" data-id="tab-3" aria-checked="false" role="tab" aria-controls="tab-3" aria-selected="false">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div></div><div class="mx-tabs__list desktop-only" role="tablist"><span data-focus-scope-start="true" hidden=""></span><button id="tab-1-button" aria-controls="tab-1" role="tab" aria-selected="true" tabindex="0" type="button">Tab 1</button><button id="tab-2-button" aria-controls="tab-2" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 2</button><button id="tab-3-button" aria-controls="tab-3" role="tab" aria-selected="false" tabindex="-1" type="button">Tab 3</button><span data-focus-scope-end="true" hidden=""></span></div><div id="tab-1" class="mx-tabs__panel mx-vertical-flow mx-section--l" aria-labelledby="tab-1-button" role="tabpanel" tabindex="0"><p>This is tab 1</p></div><div id="tab-2" class="mx-tabs__panel mx-vertical-flow mx-section--l" inert="" aria-labelledby="tab-2-button" role="tabpanel" tabindex="0"><p>This is tab 2</p></div><div id="tab-3" class="mx-tabs__panel mx-vertical-flow mx-section--l" inert="" aria-labelledby="tab-3-button" role="tabpanel" tabindex="0"><p>This is tab 3</p></div></div>"`;