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

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

@@ -2,8 +2,10 @@
 
 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[`With Counter 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_2_"><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[`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[`With Loop 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_3_"><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 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 Pagination 1`] = `"<div class="mx-carousel" role="region" aria-roledescription="carousel" id="_r_1_"><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 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 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>"`;

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

@@ -14,24 +14,21 @@ exports[`Content Block 1`] = `
   
 <li><a href="#">
   
-  <span>Music</span>
-    
+  Music  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
 </li>
 <li><a href="#">
   
-  <span>Performances</span>
-    
+  Performances  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
 </li>
 <li><a href="#">
   
-  <span>Get involved</span>
-    
+  Get involved  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
@@ -41,8 +38,7 @@ exports[`Content Block 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -70,24 +66,21 @@ exports[`With Icon 1`] = `
   
 <li><a href="#">
   
-  <span>Music</span>
-    
+  Music  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
 </li>
 <li><a href="#">
   
-  <span>Performances</span>
-    
+  Performances  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
 </li>
 <li><a href="#">
   
-  <span>Get involved</span>
-    
+  Get involved  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
@@ -97,8 +90,7 @@ exports[`With Icon 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -127,24 +119,21 @@ exports[`With Image 1`] = `
   
 <li><a href="#">
   
-  <span>Music</span>
-    
+  Music  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
 </li>
 <li><a href="#">
   
-  <span>Performances</span>
-    
+  Performances  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
 </li>
 <li><a href="#">
   
-  <span>Get involved</span>
-    
+  Get involved  
 <span class="mx-icon mx-icon--chevron-right"></span>
 
 </a>
@@ -154,8 +143,7 @@ exports[`With Image 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>

package/src/Component/CookieConsent/cookie-consent.css

@@ -9,7 +9,7 @@
 }
 
 @layer design-system.components {
-  /* @public --cookie-consent-background --cookie-consent-foreground --cookie-consent-shadow --cookie-consent-z-index */
+  /* @public --cookie-consent-background --cookie-consent-foreground --cookie-consent-shadow --cookie-consent-z-index --cookie-consent-line-width --cookie-consent-line-colour */
   .mx-cookie-consent {
     position: fixed;
     inset-block-end: 0;
@@ -18,6 +18,8 @@
     background-color: var(--cookie-consent-background, var(--colour-background));
     color: var(--cookie-consent-foreground, var(--colour-foreground));
     box-shadow: var(--cookie-consent-shadow, var(--box-shadow));
+    border-block-start: var(--cookie-consent-line-width, 1px) solid
+      var(--cookie-consent-line-colour, transparent);
 
     &[inert] {
       display: none;

package/src/Component/Dialog/Dialog.stories.ts

@@ -5,6 +5,7 @@ import Component from "./dialog.twig"
 import "./dialog.css"
 import "./Elements/Dialog"
 import { ButtonModifiers, Dialog as DialogType, HeadingTypes } from "@pnx-mixtape/ids-shape"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 
 // Deps.
 import Heading from "../../Atom/Heading/heading.twig"
@@ -152,6 +153,38 @@ export const Dialog: Story = {
   },
 }
 
+/**
+ * Steps a virtual screen reader through the page with the dialog open, and asserts on what it announces.
+ */
+export const ScreenReaderAnnouncements: Story = {
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    const trigger = canvas.getByRole("link", { name: "Open dialog" })
+    const dialogEl = canvasElement.querySelector("dialog") as HTMLDialogElement
+
+    await userEvent.click(trigger)
+    await expect(dialogEl.open).toBe(true)
+
+    const log = await runScreenReaderWalkthrough()
+    await expect(log).toEqual([
+      "document",
+      "link, Open dialog, 1 control, expanded",
+      "dialog, Dialog heading",
+      "dialog, Dialog heading",
+      "button, Close dialog",
+      "heading, Dialog heading, level 2",
+      "paragraph",
+      "I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.",
+      "end of paragraph",
+      "button, Let's go",
+      "end of dialog, Dialog heading",
+      "end of document",
+    ])
+
+    await userEvent.keyboard("{Escape}")
+    await expect(dialogEl.open).toBe(false)
+  },
+}
+
 /**
  * Modals display in the top layer and cover all other content (with backdrop). See [showModal()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)
  */

package/src/Component/Dialog/Dialog.stories.tsx

@@ -8,6 +8,7 @@ import Text from "../../Atom/Text/Text"
 import "./dialog.css"
 import { HeadingTypes } from "@pnx-mixtape/ids-shape"
 import { Page } from "../../../.storybook-react/decorators"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
@@ -63,3 +64,27 @@ export const Dialog: StoryObj<typeof Component> = {
     })
   },
 }
+
+/**
+ * Steps a virtual screen reader through the page with the dialog open, and asserts on what it announces.
+ */
+export const ScreenReaderAnnouncements: StoryObj<typeof Component> = {
+  play: async () => {
+    const log = await runScreenReaderWalkthrough()
+    await expect(log).toEqual([
+      "document",
+      "dialog",
+      "dialog",
+      "heading, Thanks, you're almost done!, level 3",
+      "paragraph",
+      "To finish the process, you will need to upload a few more documents. Please have your confirmation email ready before starting. Are you ready?",
+      "end of paragraph",
+      "form",
+      "button, Let's get started",
+      "end of form",
+      "button, Close dialog",
+      "end of dialog",
+      "end of document",
+    ])
+  },
+}

package/src/Component/Dialog/Dialog.tsx

@@ -4,13 +4,13 @@ import {
   ComponentPropsWithoutRef,
   RefObject,
   useRef,
-  useEffect,
   useCallback,
   createContext,
   use,
   useMemo,
 } from "react"
 import classNames from "classnames"
+import useIsomorphicLayoutEffect from "../../Utility/Hooks/useIsomorphicLayoutEffect"
 
 type DialogContextValues = {
   handleClose: () => void
@@ -45,7 +45,7 @@ const Dialog = ({
     dialogRef.current?.close()
   }, [dialogRef])
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!dialogRef.current) return
     const isModal: boolean = modal || fullscreen
 

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

@@ -5,8 +5,7 @@ exports[`Dialog 1`] = `
     
 <a href="#example-dialog" aria-controls="unique-0" aria-expanded="false">
   
-  <span>Open dialog</span>
-    
+  Open dialog  
 </a>
 
       
@@ -98,3 +97,35 @@ exports[`Modal 1`] = `
 
   "
 `;
+
+exports[`Screen Reader Announcements 1`] = `
+"
+    
+<a href="#example-dialog" aria-controls="unique-0" aria-expanded="false">
+  
+  Open dialog  
+</a>
+
+      
+<mx-dialog id="unique-0">
+  <dialog class="mx-dialog" aria-labelledby="unique-1">
+    <button autofocus="" class="mx-button mx-button--icon-only mx-icon mx-icon--close" data-close="">Close dialog</button>
+    <div class="mx-dialog__content mx-vertical-flow">
+              <div id="unique-1">
+<h2>Dialog heading</h2>
+</div>
+            <p>I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.</p>
+      
+        
+  <button data-close="data-close" class="mx-button mx-button--dark" type="button">
+    
+    <span>Let's go</span>
+    
+  </button>
+
+    </div>
+  </dialog>
+</mx-dialog>
+
+  "
+`;

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

@@ -1,3 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Dialog 1`] = `"<dialog class="mx-dialog" open=""><div class="mx-dialog__content mx-vertical-flow"><h3 class="" id="thanks-youre-almost-">Thanks, you're almost done!</h3><p class="">To finish the process, you will need to upload a few more documents. Please have your confirmation email ready before starting. Are you ready?</p><form method="dialog"><div class="mx-form-actions"><button class="mx-button mx-button--primary" type="submit">Let's get started</button></div></form></div><button class="mx-button mx-button--icon-only mx-icon mx-icon--close" type="button">Close dialog</button></dialog>"`;
+
+exports[`Screen Reader Announcements 1`] = `"<dialog class="mx-dialog" open=""><div class="mx-dialog__content mx-vertical-flow"><h3 class="" id="thanks-youre-almost-">Thanks, you're almost done!</h3><p class="">To finish the process, you will need to upload a few more documents. Please have your confirmation email ready before starting. Are you ready?</p><form method="dialog"><div class="mx-form-actions"><button class="mx-button mx-button--primary" type="submit">Let's get started</button></div></form></div><button class="mx-button mx-button--icon-only mx-icon mx-icon--close" type="button">Close dialog</button></dialog>"`;

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

@@ -3,6 +3,7 @@ import { expect } from "storybook/test"
 import Component from "./drop-menu.twig"
 import "./drop-menu.css"
 import "./Elements/DropMenu"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 
 // Deps.
 import "../Popover/popover.css"
@@ -70,7 +71,7 @@ const meta: Meta<DropMenuType> = {
     role: {
       description:
         "An optional ARIA role attribute for the popover, for use when DropMenuItem is a list of buttons.",
-      control: "select",
+      control: "radio",
       options: ["menu", "tablist"],
       type: "string",
     },
@@ -143,3 +144,40 @@ export const Buttons: Story = {
     })
   },
 }
+
+/**
+ * Steps a virtual screen reader through the page with the menu open, and asserts on what it announces.
+ */
+export const ScreenReaderAnnouncements: Story = {
+  args: {
+    role: "menu",
+    items: [
+      { label: "News", id: "news" },
+      { label: "Events", id: "events" },
+      { label: "Stories", id: "stories" },
+    ],
+  },
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    const trigger = canvas.getByRole("button", { name: "Categories" })
+    const menu = canvas.getByRole("menu", { hidden: true })
+
+    await userEvent.click(trigger)
+    await expect(menu.matches(":popover-open")).toBe(true)
+
+    const log = await runScreenReaderWalkthrough()
+    await expect(log).toEqual([
+      "document",
+      "button, Categories",
+      "menu, Categories, 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 document",
+    ])
+
+    await userEvent.click(trigger)
+    await expect(menu.matches(":popover-open")).toBe(false)
+    await userEvent.click(canvasElement)
+  },
+}

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

@@ -5,6 +5,7 @@ import DropMenuContainer from "./DropMenu"
 import DropMenuItem from "./Components/DropMenuItem"
 import "./drop-menu.css"
 import { Page } from "../../../.storybook-react/decorators"
+import { runScreenReaderWalkthrough } from "../../../tools/test-utils/screen-reader"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
@@ -72,3 +73,31 @@ export const DropMenu: StoryObj<typeof Component> = {
     })
   },
 }
+
+/**
+ * Steps a virtual screen reader through the page with the menu open, and asserts on what it announces.
+ */
+export const ScreenReaderAnnouncements: StoryObj<typeof Component> = {
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("button", { name: "Categories" })
+    const menu = canvas.getByRole("menu", { hidden: true })
+
+    await userEvent.click(trigger)
+    await expect(menu.matches(":popover-open")).toBe(true)
+
+    const log = await runScreenReaderWalkthrough()
+    await expect(log).toEqual([
+      "document",
+      "button, Categories",
+      "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, Results will update when you make a selection. Press escape to close., orientated vertically",
+      "end of document",
+    ])
+
+    await userEvent.click(trigger)
+    await expect(menu.matches(":popover-open")).toBe(false)
+  },
+}

package/src/Component/DropMenu/DropMenu.tsx

@@ -69,7 +69,7 @@ const DropMenu = ({
         aria-describedby={descriptionId}
         role={role}
       >
-        <div id={descriptionId} className="sr-only">
+        <div id={descriptionId} className="sr-only" aria-hidden="true">
           {description}
         </div>
         <FocusScope>{children}</FocusScope>

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

@@ -27,3 +27,17 @@ exports[`Drop Menu 1`] = `
 </mx-dropmenu>
 "
 `;
+
+exports[`Screen Reader Announcements 1`] = `
+"<mx-dropmenu closeonclick="">
+<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">
+            <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>
+      </div>
+</mx-dropmenu>
+"
+`;

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

@@ -1,3 +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">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><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><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>"`;