npm - @pnx-mixtape/mxds - Versions diffs - 0.0.30 → 0.1.0-rc.1 - Mend

@pnx-mixtape/mxds 0.0.30 → 0.1.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1489) hide show

package/src/Component/Carousel/__snapshots__/Carousel.stories.ts.snap CHANGED Viewed

@@ -2,20 +2,20 @@
 exports[`Carousel 1`] = `
 "
-<mx-carousel class="mx-carousel" role="group">
-  <div class="mx-carousel__buttons" data-buttons="">
+<mx-carousel class="mx-carousel" role="region" aria-roledescription="carousel">
+  <div class="mx-carousel__buttons" data-buttons="" role="group" aria-label="Quick page controls">
     <button class="mx-carousel__prev mx-button mx-button--icon-only" type="button" disabled="">
-      <span class="sr-only">previous</span>
+      <span class="sr-only">previous page</span>
       <span class="mx-icon mx-icon--chevron-left"></span>
     </button>
     <button class="mx-carousel__next mx-button mx-button--icon-only" type="button">
-      <span class="sr-only">next</span>
+      <span class="sr-only">next page</span>
       <span class="mx-icon mx-icon--chevron-right"></span>
     </button>
   </div>
-  <ul class="mx-carousel__scrollable overflowing" tabindex="0">
-          <li>
-<div class="mx-container">
+  <div class="mx-carousel__scrollable overflowing" data-track="" aria-live="off" tabindex="0">
+<div class="mx-container" data-index="0" aria-hidden="false">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -25,7 +25,7 @@ exports[`Carousel 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -34,9 +34,8 @@ exports[`Carousel 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li>
-<div class="mx-container">
+<div class="mx-container" data-index="1" aria-hidden="false">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -46,7 +45,7 @@ exports[`Carousel 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -55,9 +54,8 @@ exports[`Carousel 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li>
-<div class="mx-container">
+<div class="mx-container" data-index="2" aria-hidden="false">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -67,7 +65,7 @@ exports[`Carousel 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -76,9 +74,8 @@ exports[`Carousel 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li>
-<div class="mx-container">
+<div class="mx-container" data-index="3" aria-hidden="false">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -88,7 +85,7 @@ exports[`Carousel 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -97,9 +94,8 @@ exports[`Carousel 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="4" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -109,7 +105,7 @@ exports[`Carousel 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image but may have longer text and trigger height changes..</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -118,9 +114,8 @@ exports[`Carousel 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="5" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -130,7 +125,7 @@ exports[`Carousel 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -139,9 +134,8 @@ exports[`Carousel 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="6" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -151,7 +145,7 @@ exports[`Carousel 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -160,9 +154,8 @@ exports[`Carousel 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="7" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -172,7 +165,7 @@ exports[`Carousel 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -181,9 +174,8 @@ exports[`Carousel 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="8" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -193,7 +185,7 @@ exports[`Carousel 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -202,9 +194,8 @@ exports[`Carousel 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="9" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -214,7 +205,7 @@ exports[`Carousel 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -223,9 +214,8 @@ exports[`Carousel 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="10" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -235,7 +225,7 @@ exports[`Carousel 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -244,28 +234,28 @@ exports[`Carousel 1`] = `
   </div>
   </article>
 </div>
-</li>
-      </ul>
+  </div>
   </mx-carousel>
 "
 `;
 exports[`Counters 1`] = `
 "
-<mx-carousel class="mx-carousel" role="group">
-  <div class="mx-carousel__buttons" data-buttons="">
+<mx-carousel class="mx-carousel" role="region" aria-roledescription="carousel">
+  <div class="mx-carousel__buttons" data-buttons="" role="group" aria-label="Quick page controls">
     <button class="mx-carousel__prev mx-button mx-button--icon-only" type="button" disabled="">
-      <span class="sr-only">previous</span>
+      <span class="sr-only">previous page</span>
       <span class="mx-icon mx-icon--chevron-left"></span>
     </button>
     <button class="mx-carousel__next mx-button mx-button--icon-only" type="button">
-      <span class="sr-only">next</span>
+      <span class="sr-only">next page</span>
       <span class="mx-icon mx-icon--chevron-right"></span>
     </button>
   </div>
-  <ul class="mx-carousel__scrollable overflowing" tabindex="0">
-          <li>
-<div class="mx-container">
+  <div class="mx-carousel__scrollable overflowing" data-track="" aria-live="off" tabindex="0">
+<div class="mx-container" data-index="0" aria-hidden="false">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -275,7 +265,7 @@ exports[`Counters 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -284,9 +274,8 @@ exports[`Counters 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li>
-<div class="mx-container">
+<div class="mx-container" data-index="1" aria-hidden="false">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -296,7 +285,7 @@ exports[`Counters 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -305,9 +294,8 @@ exports[`Counters 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li>
-<div class="mx-container">
+<div class="mx-container" data-index="2" aria-hidden="false">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -317,7 +305,7 @@ exports[`Counters 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -326,9 +314,8 @@ exports[`Counters 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li>
-<div class="mx-container">
+<div class="mx-container" data-index="3" aria-hidden="false">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -338,7 +325,7 @@ exports[`Counters 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -347,9 +334,8 @@ exports[`Counters 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="4" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -359,7 +345,7 @@ exports[`Counters 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image but may have longer text and trigger height changes..</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -368,9 +354,8 @@ exports[`Counters 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="5" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -380,7 +365,7 @@ exports[`Counters 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -389,9 +374,8 @@ exports[`Counters 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="6" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -401,7 +385,7 @@ exports[`Counters 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -410,9 +394,8 @@ exports[`Counters 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="7" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -422,7 +405,7 @@ exports[`Counters 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -431,9 +414,8 @@ exports[`Counters 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="8" inert="" aria-hidden="true">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -443,7 +425,7 @@ exports[`Counters 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -452,9 +434,8 @@ exports[`Counters 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="9" inert="" aria-hidden="true">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -464,7 +445,7 @@ exports[`Counters 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -473,9 +454,8 @@ exports[`Counters 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="10" inert="" aria-hidden="true">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -485,7 +465,7 @@ exports[`Counters 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -494,29 +474,29 @@ exports[`Counters 1`] = `
   </div>
   </article>
 </div>
-</li>
-      </ul>
-          <ol class="mx-carousel__pagination" data-pagination="counter" hidden=""></ol>
+  </div>
+          <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><button type="button" data-index="2" aria-label="Page 3">3</button></div>
   </mx-carousel>
 "
 `;
 exports[`Loop 1`] = `
 "
-<mx-carousel class="mx-carousel" role="group" loop="">
-  <div class="mx-carousel__buttons" data-buttons="">
+<mx-carousel class="mx-carousel" role="region" aria-roledescription="carousel" loop="">
+  <div class="mx-carousel__buttons" data-buttons="" role="group" aria-label="Quick page controls">
     <button class="mx-carousel__prev mx-button mx-button--icon-only" type="button" disabled="">
-      <span class="sr-only">previous</span>
+      <span class="sr-only">previous page</span>
       <span class="mx-icon mx-icon--chevron-left"></span>
     </button>
     <button class="mx-carousel__next mx-button mx-button--icon-only" type="button">
-      <span class="sr-only">next</span>
+      <span class="sr-only">next page</span>
       <span class="mx-icon mx-icon--chevron-right"></span>
     </button>
   </div>
-  <ul class="mx-carousel__scrollable overflowing" tabindex="0">
-          <li>
-<div class="mx-container">
+  <div class="mx-carousel__scrollable overflowing" data-track="" aria-live="off" tabindex="0">
+<div class="mx-container" data-index="0" aria-hidden="false">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -526,7 +506,7 @@ exports[`Loop 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -535,9 +515,8 @@ exports[`Loop 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li>
-<div class="mx-container">
+<div class="mx-container" data-index="1" aria-hidden="false">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -547,7 +526,7 @@ exports[`Loop 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -556,9 +535,8 @@ exports[`Loop 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li>
-<div class="mx-container">
+<div class="mx-container" data-index="2" aria-hidden="false">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -568,7 +546,7 @@ exports[`Loop 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -577,9 +555,8 @@ exports[`Loop 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li>
-<div class="mx-container">
+<div class="mx-container" data-index="3" aria-hidden="false">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -589,7 +566,7 @@ exports[`Loop 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -598,9 +575,8 @@ exports[`Loop 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="4" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -610,7 +586,7 @@ exports[`Loop 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image but may have longer text and trigger height changes..</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -619,9 +595,8 @@ exports[`Loop 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="5" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -631,7 +606,7 @@ exports[`Loop 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -640,9 +615,8 @@ exports[`Loop 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="6" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -652,7 +626,7 @@ exports[`Loop 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -661,9 +635,8 @@ exports[`Loop 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="7" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -673,7 +646,7 @@ exports[`Loop 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -682,9 +655,8 @@ exports[`Loop 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="8" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -694,7 +666,7 @@ exports[`Loop 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -703,9 +675,8 @@ exports[`Loop 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="9" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -715,7 +686,7 @@ exports[`Loop 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -724,9 +695,8 @@ exports[`Loop 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="10" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -736,7 +706,7 @@ exports[`Loop 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -745,28 +715,28 @@ exports[`Loop 1`] = `
   </div>
   </article>
 </div>
-</li>
-      </ul>
+  </div>
   </mx-carousel>
 "
 `;
 exports[`Paginated 1`] = `
 "
-<mx-carousel class="mx-carousel" role="group">
-  <div class="mx-carousel__buttons" data-buttons="">
+<mx-carousel class="mx-carousel" role="region" aria-roledescription="carousel">
+  <div class="mx-carousel__buttons" data-buttons="" role="group" aria-label="Quick page controls">
     <button class="mx-carousel__prev mx-button mx-button--icon-only" type="button" disabled="">
-      <span class="sr-only">previous</span>
+      <span class="sr-only">previous page</span>
       <span class="mx-icon mx-icon--chevron-left"></span>
     </button>
     <button class="mx-carousel__next mx-button mx-button--icon-only" type="button">
-      <span class="sr-only">next</span>
+      <span class="sr-only">next page</span>
       <span class="mx-icon mx-icon--chevron-right"></span>
     </button>
   </div>
-  <ul class="mx-carousel__scrollable overflowing" tabindex="0">
-          <li>
-<div class="mx-container">
+  <div class="mx-carousel__scrollable overflowing" data-track="" aria-live="off" tabindex="0">
+<div class="mx-container" data-index="0" aria-hidden="false">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -776,7 +746,7 @@ exports[`Paginated 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -785,9 +755,8 @@ exports[`Paginated 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li>
-<div class="mx-container">
+<div class="mx-container" data-index="1" aria-hidden="false">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -797,7 +766,7 @@ exports[`Paginated 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -806,9 +775,8 @@ exports[`Paginated 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li>
-<div class="mx-container">
+<div class="mx-container" data-index="2" aria-hidden="false">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -818,7 +786,7 @@ exports[`Paginated 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -827,9 +795,8 @@ exports[`Paginated 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li>
-<div class="mx-container">
+<div class="mx-container" data-index="3" aria-hidden="false">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -839,7 +806,7 @@ exports[`Paginated 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -848,9 +815,8 @@ exports[`Paginated 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="4" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -860,7 +826,7 @@ exports[`Paginated 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image but may have longer text and trigger height changes..</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -869,9 +835,8 @@ exports[`Paginated 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="5" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -881,7 +846,7 @@ exports[`Paginated 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -890,9 +855,8 @@ exports[`Paginated 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="6" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -902,7 +866,7 @@ exports[`Paginated 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -911,9 +875,8 @@ exports[`Paginated 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="7" aria-hidden="true" inert="">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -923,7 +886,7 @@ exports[`Paginated 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -932,9 +895,8 @@ exports[`Paginated 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="8" inert="" aria-hidden="true">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -944,7 +906,7 @@ exports[`Paginated 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -953,9 +915,8 @@ exports[`Paginated 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="9" inert="" aria-hidden="true">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -965,7 +926,7 @@ exports[`Paginated 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -974,9 +935,8 @@ exports[`Paginated 1`] = `
   </div>
   </article>
 </div>
-</li>
-          <li inert="">
-<div class="mx-container">
+<div class="mx-container" data-index="10" inert="" aria-hidden="true">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
@@ -986,7 +946,7 @@ exports[`Paginated 1`] = `
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
-<a class="mx-link--more" href="#">
+<a href="#" class="mx-link--more">
   <span>Find out more</span>
@@ -995,9 +955,9 @@ exports[`Paginated 1`] = `
   </div>
   </article>
 </div>
-</li>
-      </ul>
-          <ol class="mx-carousel__pagination" data-pagination="pagination" hidden=""></ol>
+  </div>
+          <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><button type="button" data-index="2" aria-label="Page 3">3</button></div>
   </mx-carousel>
 "
 `;