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

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

@@ -0,0 +1,24 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Back To Top 1`] = `
+"
+    <div style="block-size: 100px; padding-block-start: 2rem;">
+      <p>Scroll down to reveal the "Back to top" trigger.</p>
+    </div>
+    <div id="main" tabindex="-1">
+      <h2>Main content</h2>
+      <p>This is the scroll destination.</p>
+    </div>
+    
+<mx-back-to-top class="mx-back-to-top is-enhanced" visibleafter="1vh">
+    
+    <a class="mx-back-to-top__trigger mx-button--small mx-button mx-button--light" href="#main">
+      
+<span class="mx-icon mx-icon--arrow-up"></span>
+
+    Back to top    
+  </a>
+</mx-back-to-top>
+
+  "
+`;

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

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Back To Top 1`] = `"<div style="block-size: 50vh; padding-block-start: 2rem;"><p>Scroll down to reveal the "Back to top" trigger.</p></div><div id="main" tabindex="-1"><h2>Main content</h2><p>This is the scroll destination.</p></div><div class="mx-back-to-top is-enhanced"><a href="#main" class="mx-button mx-back-to-top__trigger mx-button--small mx-button--light"><span class="mx-icon mx-icon--arrow-up"></span>Back to top</a></div>"`;

package/src/Component/BackToTop/back-to-top.css

@@ -0,0 +1,70 @@
+/**
+ * BackToTop
+ */
+
+@define-mixin back-to-top {
+  display: var(--back-to-top-display, none);
+  position: fixed;
+  inset-inline-end: var(--back-to-top-inline-end, var(--spacing-m));
+  inset-block-end: calc(
+    var(--back-to-top-gap, 64px) + var(--back-to-top-offset, var(--sticky-offset, 0px))
+  );
+  z-index: var(--back-to-top-z-index, 10);
+}
+
+@layer design-system.defaults {
+  mx-back-to-top {
+    display: block;
+  }
+}
+
+@layer design-system.components {
+  /* @public --back-to-top-gap --back-to-top-offset --back-to-top-inline-end --back-to-top-z-index */
+  .mx-back-to-top {
+    --back-to-top-display: block;
+
+    @add-mixin back-to-top;
+
+    @media print {
+      --back-to-top-display: none;
+    }
+  }
+
+  .mx-back-to-top--l {
+    @add-mixin back-to-top;
+
+    @media (--large-up) {
+      --back-to-top-display: block;
+    }
+
+    @media print {
+      --back-to-top-display: none;
+    }
+  }
+
+  /*
+   * Visibility is only gated behind scroll position once JS has confirmed it can drive it
+   * (`is-enhanced`, added by the Web Component/React on mount) — without JS the trigger stays
+   * visible and reachable at all times, rather than being permanently hidden by a script that
+   * failed to load.
+   */
+  :is(.mx-back-to-top, .mx-back-to-top--l).is-enhanced {
+    visibility: hidden;
+    opacity: 0;
+    transition:
+      visibility 0s linear 300ms,
+      opacity 300ms;
+
+    @media (--reduce-motion) {
+      transition: none;
+    }
+
+    &.is-visible {
+      visibility: visible;
+      opacity: 1;
+      transition:
+        visibility 0s linear 0s,
+        opacity 300ms;
+    }
+  }
+}

package/src/Component/BackToTop/back-to-top.entry.js

@@ -0,0 +1 @@
+import "./Elements/BackToTop"

package/src/Component/BackToTop/back-to-top.twig

@@ -0,0 +1,26 @@
+{% set baseClass = 'mx-back-to-top' %}
+{% set classes = [
+  baseClass,
+  breakpoint ? baseClass~"--"~breakpoint : null,
+] %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+{% set resolvedHref = href|default('#main') %}
+{% set resolvedTitle = title|default('Back to top') %}
+{% set arrowIcon %}
+  {% include '@mixtape/Atom/Icon/icon.twig' with { icon: 'arrow-up' } only %}
+{% endset %}
+
+<mx-back-to-top{{ attributes }}
+  {%- if target %} target="{{ target }}"{% endif -%}
+  {%- if visibleAfter %} visibleafter="{{ visibleAfter }}"{% endif -%}
+  {%- if offset %} style="--back-to-top-offset: {{ offset }}px"{% endif -%}
+>
+  {% include '@mixtape/Atom/Button/button.twig' with {
+    as: 'link',
+    href: resolvedHref,
+    title: resolvedTitle,
+    modifiers: ['light'],
+    iconStart: arrowIcon,
+    attributes: create_attribute().addClass(['mx-back-to-top__trigger', 'mx-button--small']),
+  } %}
+</mx-back-to-top>

package/src/Component/Card/Components/CardContent.tsx

@@ -2,7 +2,7 @@ import { JSX, PropsWithChildren } from "react"
 import classNames from "classnames"
 
 const CardContent = ({ children }: PropsWithChildren): JSX.Element => {
-  return <div className={classNames("mx-card__content", "mx-vertical-flow-flex")}>{children}</div>
+  return <div className={classNames("mx-card__content", "mx-vertical-flow")}>{children}</div>
 }
 
 export default CardContent

package/src/Component/Card/Components/CardMedia.tsx

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

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

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Block Link 1`] = `"<div class="mx-container"><article class="mx-card mx-card--block"><figure class="mx-card__media stack"><div class="mx-skeleton mx-skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow-flex"><h2 class="" id="key-feature-or-secti">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;
+exports[`Block Link 1`] = `"<div class="mx-container"><article class="mx-card mx-card--block"><figure class="mx-card__media stack"><div class="skeleton skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow"><h2 class="" id="key-feature-or-secti">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;
 
-exports[`Card 1`] = `"<div class="mx-container"><article class="mx-card"><figure class="mx-card__media stack"><div class="mx-skeleton mx-skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow-flex"><h2 class="" id="key-feature-or-secti">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;
+exports[`Card 1`] = `"<div class="mx-container"><article class="mx-card"><figure class="mx-card__media stack"><div class="skeleton skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow"><h2 class="" id="key-feature-or-secti">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;
 
-exports[`Reverse 1`] = `"<div class="mx-container"><article class="mx-card mx-card--reversed"><figure class="mx-card__media stack"><div class="mx-skeleton mx-skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow-flex"><h2 class="" id="key-feature-or-secti">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;
+exports[`Reverse 1`] = `"<div class="mx-container"><article class="mx-card mx-card--reversed"><figure class="mx-card__media stack"><div class="skeleton skeleton--bg"></div><img alt="" src="https://picsum.photos/id/56/558/418?grayscale"></figure><div class="mx-card__content mx-vertical-flow"><h2 class="" id="key-feature-or-secti">Key feature or Section Name</h2><p class="">A short description to help explain enough about the subject matter to encourage visitors to learn more.</p><a href="http://example.com" class="mx-link mx-link--more">Learn More</a></div></article></div>"`;

package/src/Component/Card/card.css

@@ -88,7 +88,7 @@
         }
       }
 
-      & .mx-skeleton--bg {
+      & .skeleton--bg {
         grid-area: media;
       }
 

package/src/Component/Carousel/Carousel.stories.ts

@@ -292,6 +292,15 @@ export const Carousel: Story = {
 
 /**
  * Steps a virtual screen reader through the page and asserts on what it announces.
+ *
+ * How many tiles the IntersectionObserver marks visible (vs. `aria-hidden`)
+ * depends on the carousel's rendered width, which Chromatic varies via
+ * `chromatic.modes` (mobile and desktop). This branches on the real,
+ * observed visibility of the second tile 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 ({ canvasElement }) => {
@@ -304,43 +313,64 @@ export const ScreenReaderAnnouncements: Story = {
       { timeout: 2000 },
     )
 
+    const onlyFirstTileVisible =
+      canvasElement.querySelector('[data-index="1"]')?.getAttribute("aria-hidden") === "true"
     const log = await runScreenReaderWalkthrough()
-    await expect(log).toEqual([
-      "document",
-      "group, Quick page controls",
-      "button, previous page, disabled",
-      "button, next page",
-      "end of group, Quick page controls",
-      "article",
-      "heading, Tile 1, level 3",
-      "paragraph",
-      "Tiles are just block cards without an image.",
-      "end of paragraph",
-      "link, Find out more",
-      "end of article",
-      "article",
-      "heading, Tile 2, level 3",
-      "paragraph",
-      "Tiles are just block cards without an image.",
-      "end of paragraph",
-      "link, Find out more",
-      "end of article",
-      "article",
-      "heading, Tile 3, level 3",
-      "paragraph",
-      "Tiles are just block cards without an image.",
-      "end of paragraph",
-      "link, Find out more",
-      "end of article",
-      "article",
-      "heading, Tile 4, level 3",
-      "paragraph",
-      "Tiles are just block cards without an image.",
-      "end of paragraph",
-      "link, Find out more",
-      "end of article",
-      "end of document",
-    ])
+
+    if (onlyFirstTileVisible) {
+      await expect(log).toEqual([
+        "document",
+        "group, Quick page controls",
+        "button, previous page, disabled",
+        "button, next page",
+        "end of group, Quick page controls",
+        "article",
+        "heading, Tile 1, level 3",
+        "paragraph",
+        "Tiles are just block cards without an image.",
+        "end of paragraph",
+        "link, Find out more",
+        "end of article",
+        "end of document",
+      ])
+    } else {
+      await expect(log).toEqual([
+        "document",
+        "group, Quick page controls",
+        "button, previous page, disabled",
+        "button, next page",
+        "end of group, Quick page controls",
+        "article",
+        "heading, Tile 1, level 3",
+        "paragraph",
+        "Tiles are just block cards without an image.",
+        "end of paragraph",
+        "link, Find out more",
+        "end of article",
+        "article",
+        "heading, Tile 2, level 3",
+        "paragraph",
+        "Tiles are just block cards without an image.",
+        "end of paragraph",
+        "link, Find out more",
+        "end of article",
+        "article",
+        "heading, Tile 3, level 3",
+        "paragraph",
+        "Tiles are just block cards without an image.",
+        "end of paragraph",
+        "link, Find out more",
+        "end of article",
+        "article",
+        "heading, Tile 4, level 3",
+        "paragraph",
+        "Tiles are just block cards without an image.",
+        "end of paragraph",
+        "link, Find out more",
+        "end of article",
+        "end of document",
+      ])
+    }
   },
 }
 

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

@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Default 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_0_"><div class="mx-carousel__buttons" role="group" aria-label="Quick page controls"><button class="mx-button mx-button--icon-only mx-carousel__prev" type="button" disabled=""><span class="sr-only">previous page</span><span class="mx-icon mx-icon--chevron-left" aria-hidden="true"></span></button><button class="mx-button mx-button--icon-only mx-carousel__next" type="button"><span class="sr-only">next page</span><span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></button></div><ul class="mx-carousel__scrollable" aria-live="off" tabindex="0"><li data-index="0" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-1">Tile 1</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="1" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-2">Tile 2</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="2" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-3">Tile 3</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="3" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-4">Tile 4</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="4" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-5">Tile 5</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="5" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-6">Tile 6</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li></ul></div>"`;
+exports[`Default 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_0_"><div class="mx-carousel__buttons" role="group" aria-label="Quick page controls"><button class="mx-button mx-button--icon-only mx-carousel__prev" type="button" disabled=""><span class="sr-only">previous page</span><span class="mx-icon mx-icon--chevron-left" aria-hidden="true"></span></button><button class="mx-button mx-button--icon-only mx-carousel__next" type="button"><span class="sr-only">next page</span><span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></button></div><ul class="mx-carousel__scrollable" aria-live="off" tabindex="0"><li data-index="0" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-1">Tile 1</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="1" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-2">Tile 2</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="2" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-3">Tile 3</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="3" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-4">Tile 4</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="4" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-5">Tile 5</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="5" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-6">Tile 6</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li></ul></div>"`;
 
-exports[`Screen Reader Announcements 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_s_"><div class="mx-carousel__buttons" role="group" aria-label="Quick page controls"><button class="mx-button mx-button--icon-only mx-carousel__prev" type="button" disabled=""><span class="sr-only">previous page</span><span class="mx-icon mx-icon--chevron-left" aria-hidden="true"></span></button><button class="mx-button mx-button--icon-only mx-carousel__next" type="button"><span class="sr-only">next page</span><span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></button></div><ul class="mx-carousel__scrollable" aria-live="off" tabindex="0"><li data-index="0" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-1">Tile 1</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="1" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-2">Tile 2</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="2" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-3">Tile 3</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="3" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-4">Tile 4</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="4" inert="" aria-hidden="true"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-5">Tile 5</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="5" inert="" aria-hidden="true"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-6">Tile 6</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li></ul></div>"`;
+exports[`Screen Reader Announcements 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_s_"><div class="mx-carousel__buttons" role="group" aria-label="Quick page controls"><button class="mx-button mx-button--icon-only mx-carousel__prev" type="button" disabled=""><span class="sr-only">previous page</span><span class="mx-icon mx-icon--chevron-left" aria-hidden="true"></span></button><button class="mx-button mx-button--icon-only mx-carousel__next" type="button"><span class="sr-only">next page</span><span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></button></div><ul class="mx-carousel__scrollable" aria-live="off" tabindex="0"><li data-index="0" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-1">Tile 1</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="1" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-2">Tile 2</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="2" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-3">Tile 3</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="3" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-4">Tile 4</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="4" inert="" aria-hidden="true"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-5">Tile 5</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="5" inert="" aria-hidden="true"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-6">Tile 6</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li></ul></div>"`;
 
-exports[`With Counter 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_e_"><div class="mx-carousel__buttons" role="group" aria-label="Quick page controls"><button class="mx-button mx-button--icon-only mx-carousel__prev" type="button" disabled=""><span class="sr-only">previous page</span><span class="mx-icon mx-icon--chevron-left" aria-hidden="true"></span></button><button class="mx-button mx-button--icon-only mx-carousel__next" type="button"><span class="sr-only">next page</span><span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></button></div><ul class="mx-carousel__scrollable" aria-live="off" tabindex="0"><li data-index="0" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-1">Tile 1</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="1" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-2">Tile 2</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="2" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-3">Tile 3</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="3" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-4">Tile 4</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="4" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-5">Tile 5</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="5" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-6">Tile 6</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li></ul><div class="mx-carousel__pagination" data-pagination="counter" role="group" aria-label="Page controls"><button type="button" data-index="0" aria-label="Page 1" disabled="" aria-current="page">1</button><button type="button" data-index="1" aria-label="Page 2">2</button></div></div>"`;
+exports[`With Counter 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_e_"><div class="mx-carousel__buttons" role="group" aria-label="Quick page controls"><button class="mx-button mx-button--icon-only mx-carousel__prev" type="button" disabled=""><span class="sr-only">previous page</span><span class="mx-icon mx-icon--chevron-left" aria-hidden="true"></span></button><button class="mx-button mx-button--icon-only mx-carousel__next" type="button"><span class="sr-only">next page</span><span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></button></div><ul class="mx-carousel__scrollable" aria-live="off" tabindex="0"><li data-index="0" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-1">Tile 1</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="1" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-2">Tile 2</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="2" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-3">Tile 3</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="3" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-4">Tile 4</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="4" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-5">Tile 5</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="5" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-6">Tile 6</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li></ul><div class="mx-carousel__pagination" data-pagination="counter" role="group" aria-label="Page controls"><button type="button" data-index="0" aria-label="Page 1" disabled="" aria-current="page">1</button><button type="button" data-index="1" aria-label="Page 2">2</button></div></div>"`;
 
-exports[`With Loop 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_l_"><div class="mx-carousel__buttons" role="group" aria-label="Quick page controls"><button class="mx-button mx-button--icon-only mx-carousel__prev" type="button" disabled=""><span class="sr-only">previous page</span><span class="mx-icon mx-icon--chevron-left" aria-hidden="true"></span></button><button class="mx-button mx-button--icon-only mx-carousel__next" type="button"><span class="sr-only">next page</span><span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></button></div><ul class="mx-carousel__scrollable" aria-live="off" tabindex="0"><li data-index="0" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-1">Tile 1</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="1" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-2">Tile 2</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="2" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-3">Tile 3</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="3" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-4">Tile 4</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="4" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-5">Tile 5</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="5" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-6">Tile 6</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li></ul></div>"`;
+exports[`With Loop 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_l_"><div class="mx-carousel__buttons" role="group" aria-label="Quick page controls"><button class="mx-button mx-button--icon-only mx-carousel__prev" type="button" disabled=""><span class="sr-only">previous page</span><span class="mx-icon mx-icon--chevron-left" aria-hidden="true"></span></button><button class="mx-button mx-button--icon-only mx-carousel__next" type="button"><span class="sr-only">next page</span><span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></button></div><ul class="mx-carousel__scrollable" aria-live="off" tabindex="0"><li data-index="0" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-1">Tile 1</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="1" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-2">Tile 2</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="2" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-3">Tile 3</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="3" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-4">Tile 4</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="4" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-5">Tile 5</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="5" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-6">Tile 6</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li></ul></div>"`;
 
-exports[`With Pagination 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_7_"><div class="mx-carousel__buttons" role="group" aria-label="Quick page controls"><button class="mx-button mx-button--icon-only mx-carousel__prev" type="button" disabled=""><span class="sr-only">previous page</span><span class="mx-icon mx-icon--chevron-left" aria-hidden="true"></span></button><button class="mx-button mx-button--icon-only mx-carousel__next" type="button"><span class="sr-only">next page</span><span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></button></div><ul class="mx-carousel__scrollable" aria-live="off" tabindex="0"><li data-index="0" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-1">Tile 1</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="1" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-2">Tile 2</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="2" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-3">Tile 3</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="3" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-4">Tile 4</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="4" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-5">Tile 5</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="5" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow-flex"><h3 class="" id="tile-6">Tile 6</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li></ul><div class="mx-carousel__pagination" data-pagination="pagination" role="group" aria-label="Page controls"><button type="button" data-index="0" aria-label="Page 1" disabled="" aria-current="page">1</button><button type="button" data-index="1" aria-label="Page 2">2</button></div></div>"`;
+exports[`With Pagination 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_7_"><div class="mx-carousel__buttons" role="group" aria-label="Quick page controls"><button class="mx-button mx-button--icon-only mx-carousel__prev" type="button" disabled=""><span class="sr-only">previous page</span><span class="mx-icon mx-icon--chevron-left" aria-hidden="true"></span></button><button class="mx-button mx-button--icon-only mx-carousel__next" type="button"><span class="sr-only">next page</span><span class="mx-icon mx-icon--chevron-right" aria-hidden="true"></span></button></div><ul class="mx-carousel__scrollable" aria-live="off" tabindex="0"><li data-index="0" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-1">Tile 1</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="1" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-2">Tile 2</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="2" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-3">Tile 3</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="3" aria-hidden="false"><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-4">Tile 4</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="4" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-5">Tile 5</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li><li data-index="5" aria-hidden="true" inert=""><div class="mx-container"><article class="mx-card mx-card--block mx-background--box"><div class="mx-card__content mx-vertical-flow"><h3 class="" id="tile-6">Tile 6</h3><p class="mx-text--lede">Tiles are just block cards without an image.</p><a href="#" class="mx-link mx-link--more">Find out more</a></div></article></div></li></ul><div class="mx-carousel__pagination" data-pagination="pagination" role="group" aria-label="Page controls"><button type="button" data-index="0" aria-label="Page 1" disabled="" aria-current="page">1</button><button type="button" data-index="1" aria-label="Page 2">2</button></div></div>"`;

package/src/Component/ContentBlock/Components/ContentBlockMedia.tsx

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

package/src/Component/ContentBlock/content-block.css

@@ -25,7 +25,7 @@
       display: block;
     }
 
-    & .mx-skeleton--bg {
+    & .skeleton--bg {
       aspect-ratio: var(--ratio);
     }
   }

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