feat #1112 (carousel pause button): refactoring, add icons and fix ac…

…cessibility
Orange-OpenSource · Apr 19, 2022 · 763b839 · 763b839
1 parent ae4fc28
commit 763b839
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/js/src/carousel.js b/js/src/carousel.js
@@ -68,7 +68,6 @@ const SELECTOR_CONTROL_PREV = '.carousel-control-prev' // Boosted mod
 const SELECTOR_CONTROL_NEXT = '.carousel-control-next' // Boosted mod
 const SELECTOR_CONTROL_PAUSE = '[data-bs-control="play-button"]' // Boosted mod
 const SELECTOR_CAROUSEL_TO_PAUSE = 'data-bs-target' // Boosted mod
-// const SELECTOR_ICON_PAUSE = '.icon-pause' // Boosted mod
 
 const PREFIX_CUSTOM_PROPS = 'o-' // Boosted mod: should match `$boosted-prefix` in scss/_variables.scss
 
@@ -518,12 +517,14 @@ class Carousel extends BaseComponent {
       pauseButton.classList.toggle('play')
       pauseButton.setAttribute('title', 'Play Carousel')
       pauseButton.setAttribute('aria-label', 'Play Carousel')
+      pauseButton.querySelector('span.visually-hidden').innerHTML = 'Play'
     } else {
       carouselToPause.cycle()
       pauseButton.classList.toggle('pause')
       pauseButton.classList.toggle('play')
       pauseButton.setAttribute('title', 'Pause Carousel')
       pauseButton.setAttribute('aria-label', 'Pause Carousel')
+      pauseButton.querySelector('span.visually-hidden').innerHTML = 'Pause'
     }
   }
   // End mod

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
@@ -303,3 +303,14 @@
 }
 
 // Boosted mod: no dark carousel
+
+// Boosted mod: play/pause button
+.carousel-control-pause {
+  &.pause {
+    @include button-icon($carousel-control-pause-icon, $size: $carousel-control-pause-icon-width $carousel-control-pause-icon-height, $pseudo: "after");
+  }
+  &.play {
+    @include button-icon($carousel-control-play-icon, $size: $carousel-control-pause-icon-width $carousel-control-pause-icon-height, $pseudo: "after");
+  }
+}
+// End mod
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -365,6 +365,8 @@ $add-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
 $remove-icon:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 2'><path fill='currentColor' d='M0 0h14v2H0z'/></svg>") !default;
 $add-icon-sm:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M10 4H6V0H4v4H0v2h4v4h2V6h4V4z'/></svg>") !default;
 $remove-icon-sm:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 2'><path d='M0 0h10v2H0z'/></svg>") !default;
+$play-icon:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M12.138 16.8 3 21.6V2.4l9.138 4.8L21 12z' fill-rule='evenodd'/></svg>") !default;
+$pause-icon:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M10.2 21H3V3h7.2v18ZM21 21h-7.2V3H21v18Z' fill-rule='evenodd'/></svg>") !default;
 
 //// SVG used several times
 $svg-as-custom-props: (
@@ -1822,6 +1824,13 @@ $carousel-control-icon-bg:           var(--#{$boosted-prefix}chevron-icon) !defa
 $carousel-control-icon-active-bg:    $component-active-bg !default;
 // End mod
 
+// Boosted mod
+$carousel-control-pause-icon:         $pause-icon !default;
+$carousel-control-play-icon:          $play-icon !default;
+$carousel-control-pause-icon-width:   .875rem !default;
+$carousel-control-pause-icon-height:  .875rem !default;
+// End mod
+
 $carousel-transition-duration:       .6s !default;
 $carousel-transition:                transform $carousel-transition-duration $transition-timing !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
 

diff --git a/site/content/docs/5.1/components/carousel.md b/site/content/docs/5.1/components/carousel.md
@@ -125,8 +125,8 @@ Carousel progress indicator is paused under multiple conditions:
     <span class="visually-hidden">Next</span>
   </button>
 </div>
-<button data-bs-control="play-button" data-bs-target="#carouselExamplePause" type="button" class="carousel-control-pause btn btn-info btn-icon btn-xs mt-4 pause" aria-label="Pause Carousel" title="Pause Carousel">
-  <span class="icon-pause" aria-hidden="true"></span>
+<button type="button" class="btn btn-icon btn-secondary carousel-control-pause pause" data-bs-control="play-button" data-bs-target="#carouselExamplePause" aria-label="Pause Carousel" aria-describedby="carouselExamplePause" title="Pause Carousel">
+  <span class="visually-hidden">Pause</span>
 </button>
 {{< /example >}}