testimonials button a11Y

assets/js/vendors/carousel.js

@@ -21,7 +21,7 @@ class Carousel {
 
     init () {
         this.splide = new Splide(this.element).mount();
-        const toggleButton = this.splide.root.querySelector('.splide__autoplay'),
+        const toggleButton = this.splide.root.querySelector('.splide__toggle'),
             stepButtons = this.splide.root.querySelectorAll('.splide__pagination button'),
             elements = this.splide.root.querySelectorAll('.splide__pagination, .splide__slide'),
             autoplay = this.splide.Components.Autoplay;

assets/sass/_theme/blocks/testimonials.sass

@@ -38,25 +38,23 @@
     .splide
         display: flex
         flex-direction: column-reverse
-        &__autoplay
-            bottom: auto
+        &__toggle
+            @include button-reset
+            border: 1px solid $block-testimonials-pagination-background
+            border-radius: 50%
+            font-size: 0
+            height: 42px
+            padding: 0
+            position: absolute
+            right: 0
             top: 0
-            button
-                @include button-reset
-                font-size: px2rem(14)
-                line-height: 1
-                &::after
-                    border: 1px solid  $block-testimonials-pagination-background // TODO : variable
-                    border-radius: 50%
-                    content: ""
-                    height: 42px
-                    left: 50%
-                    position: absolute
-                    top: 50%
-                    transform: translate(-50%, -50%)
-                    width: 42px
+            width: 42px
+            font-size: 0
+            line-height: 1
+            span
+                color: $color-accent
                 &::before
-                    color: $color-accent
+                    font-size: 42px
             &:not(.is-active)
                 + .splide__pagination
                     .is-active i

assets/sass/_theme/dependencies/splide.sass

@@ -40,30 +40,19 @@
                 &::before
                     background-color: $link-color
 
-    &__autoplay
-        bottom: 0
-        position: absolute
-        right: 0
+    &__toggle
+        .splide__toggle__pause
+            @include icon-block(pause)
+            display: none
+        .splide__toggle__play
+            @include icon-block(play)
+            display: inline-block
         &.is-active
-            .splide__play
+            .splide__toggle__play
                 display: none
-            .splide__pause
+            .splide__toggle__pause
                 display: inline-block
 
-    &__pause,
-    &__play
-        height: 48px
-        padding: 0
-        width: 48px
-
-    &__play
-        @include icon-block(play)
-
-    &__pause
-        @include icon-block(pause)
-        display: none
-
-
     &[data-slides-length="1"]
         .splide
             &__autoplay, &__pagination, &__arrow

layouts/partials/blocks/templates/testimonials.html

@@ -73,10 +73,10 @@
               </div>
             </div>
 
-            <div class="splide__autoplay is-active">
-              <button class="splide__play"></button>
-              <button class="splide__pause"></button>
-            </div>
+            <button class="splide__toggle">
+              <span class="splide__toggle__play">Play</span>
+              <span class="splide__toggle__pause">Pause</span>
+            </button>
           </div>
           {{ end -}}