FIX Add carousel accessibility requirements for WCAG 2.0

silverstripe · Jul 22, 2019 · e991612 · e991612
1 parent 9e53544
commit e991612
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 29 deletions.
diff --git a/dist/css/main.css b/dist/css/main.css
diff --git a/dist/js/main.js b/dist/js/main.js
diff --git a/src/js/components/carousel.js b/src/js/components/carousel.js
@@ -8,6 +8,7 @@ export default function () {
   const $carousel = $('.carousel');
   const $carouselPause = $('#carousel-pause');
   const $carouselPlay = $('#carousel-play');
+  const $carouselSlideTitle = $('#carousel-slide-title');
 
   $carousel.carousel({
     wrap: true,
@@ -25,4 +26,12 @@ export default function () {
     $carouselPlay.hide();
     $carouselPause.show().focus();
   });
+
+  const $carouselControlButtons = $('.carousel-controls button, .carousel-indicators button');
+
+  $carouselControlButtons.click(() => {
+    $carousel.one('slide.bs.carousel', (event) => {
+      $carouselSlideTitle.text($(event.relatedTarget).data('title'));
+    });
+  });
 }
diff --git a/src/scss/components/carousel.scss b/src/scss/components/carousel.scss
@@ -90,7 +90,7 @@
   // Increase distance between text and actions
   margin-bottom: $line-height-computed * 1.25;
   font-size: $font-size-base * 1.5;
-  font-weight: 300;
+  font-weight: $font-weight-light;
   line-height: 1.4;
 
   @include media-breakpoint-down(sm) {
@@ -128,9 +128,10 @@
 }
 
 .carousel-controls-inner-wrapper {
-  display: inline-block;
+  display: inline-flex;
   @include theme-color("nav", "background-color");
   border-radius: $border-radius-sm;
+  padding: 0 #{$spacer - $btn-padding-x-sm} 0 $spacer;
 }
 
 // Controls navigate left or right
@@ -146,7 +147,7 @@
     background-image: none;
 
     .fa {
-      font-size: $jumbotron-padding * 3.2;
+      font-size: 4rem;
     }
   }
 
@@ -163,37 +164,55 @@
 
 // Carousel slides indicators
 .carousel-indicators {
-  display: inline-block;
+  align-items: center;
+  display: flex;
+  justify-content: space-around;
+  margin-left: 0;
+  margin-right: $line-height-computed / 2;
   position: static;
-  width: auto;
-  margin: 0;
-  padding-left: 14px;
-
-  li,
-  li.active {
-    display: inline-block;
-    margin-right: 4px;
-    margin-left: 4px;
-    vertical-align: middle;
+
+  .active::before {
     @include theme-contrast-color("nav", "background-color");
+    opacity: 1;
+  }
+
+  .carousel-indicator-button {
+    display: flex;
+    align-items: center;
+    background-color: transparent;
+    border: 0;
+    border-radius: 0;
+    width: $carousel-indicator-width;
+    height: 100%;
+    padding: 0;
+    @include transition($carousel-indicator-transition);
+
+    &::before {
+      content: "";
+      @include theme-contrast-color("nav", "background-color");
+      opacity: $carousel-control-opacity;
+      width: 100%;
+      margin: 0 $carousel-indicator-spacer;
+      height: $carousel-indicator-height;
+    }
 
     &:hover {
-      opacity: .8;
+      &::before {
+        opacity: $carousel-control-hover-opacity;
+      }
     }
   }
 }
 
 // Play and pause button
 .carousel-play-controls {
-  display: inline-block;
   position: relative;
-  padding-right: 6px;
 
   .btn-link {
     @include theme-contrast-color("nav", "color");
 
     &:hover {
-      opacity: .8;
+      opacity: $carousel-control-hover-opacity;
     }
   }
 }

diff --git a/src/scss/variables.scss b/src/scss/variables.scss
@@ -1075,12 +1075,12 @@ $carousel-control-opacity:           .5 !default;
 $carousel-control-hover-opacity:     .9 !default;
 $carousel-control-transition:        opacity .15s ease !default;
 
-$carousel-indicator-width:           30px !default;
+$carousel-indicator-width:           36px !default;
 $carousel-indicator-height:          3px !default;
 $carousel-indicator-hit-area-height: 10px !default;
 $carousel-indicator-spacer:          3px !default;
 $carousel-indicator-active-bg:       $white !default;
-$carousel-indicator-transition:      opacity .6s ease !default;
+$carousel-indicator-transition:      background-color .6s ease !default;
 
 $carousel-caption-width:             70% !default;
 $carousel-caption-color:             $white !default;

diff --git a/templates/Includes/Carousel.ss b/templates/Includes/Carousel.ss
@@ -2,7 +2,7 @@
 
     <%-- Determine if a carousel or single item --%>
     <% if $CarouselItems.Count > 1 %>
-        <div id="carousel-slide" data-ride="carousel" class="carousel slide text-center">
+        <div id="carousel-slide" data-ride="carousel" class="carousel slide text-center" role="region" aria-label="Slideshow: $CarouselTitle">
     <% else %>
         <div class="carousel slide text-center carousel-static">
     <% end_if %>
@@ -16,11 +16,12 @@
 
               <%-- Indicators --%>
               <div class="carousel-controls-inner-wrapper">
-                  <ol class="carousel-indicators">
+                  <div class="carousel-indicators" aria-label="Slide controls">
                     <% loop $CarouselItems %>
-                      <li data-target="#carousel-slide" data-slide-to="$Pos(0)" <% if $Pos == 1 %>class="active"<% end_if %> name="carousel-item-{$Pos}"></li>
+                        <button data-target="#carousel-slide" data-slide-to="$Pos(0)" class="carousel-indicator-button<% if $Pos == 1 %> active<% end_if %>" name="carousel-item-{$Pos}" aria-label="Slide $Pos of $TotalItems">
+                        </button>
                     <% end_loop %>
-                  </ol>
+                  </div>
 
                   <%-- Play or Pause --%>
                   <div class="carousel-play-controls">
@@ -36,6 +37,7 @@
             </div>
 
             <%-- Controls --%>
+            <div aria-live="polite" id="carousel-slide-title" class="sr-only"></div>
             <div class="carousel-controls">
               <button class="carousel-item-left carousel-control-prev" href="#carousel-slide" data-slide="prev">
                 <i class="fa fa-angle-left" aria-hidden="true"></i>
@@ -56,7 +58,9 @@
               <div class="<% if First %>active <% end_if %>carousel-item <% if $Image %>carousel-has-image<% end_if %>"
                 <% if $Image %> style="background-image:url($Image.Fill(1920,1080).URL);"<% end_if %>
                 <% if $Title %> aria-labelledby="carousel-title-{$Pos}"<% end_if %>
-                <% if $Content %> aria-describedby="carousel-desc-{$Pos}"<% end_if %>>
+                <% if $Content %> aria-describedby="carousel-desc-{$Pos}"<% end_if %>
+                data-title="Slide $Pos of $TotalItems: $Title"
+              >
 
                 <div class="carousel-mask"></div>
 
@@ -92,7 +96,5 @@
               </div>
           <% end_loop %>
       </div>
-      <%-- Announce end of carousel for screen readers --%>
-      <div tabindex="0" class="sr-only"><%t CwpCarousel.ENDOFCAROUSEL "End of carousel." %></div>
     </div>
 <% end_if %>