Add screenreader text to prev/next carousel buttons in examples to improve accessibility

Refs #13556.
Per https://github.com/paypal/bootstrap-accessibility-plugin/blob/master/README.md#carousel
Credit: https://github.com/paypal/bootstrap-accessibility-plugin

[skip sauce]

diff --git a/docs/_includes/js/carousel.html b/docs/_includes/js/carousel.html
index 222caf333c0a343fba525dabad315730e7b0abde..dd697ae4fdfc7fc3615d05d23d98fb4b04b720b3 100644 (file)
--- a/docs/_includes/js/carousel.html
+++ b/docs/_includes/js/carousel.html
@@ -23,9 +23,11 @@
       </div>
       <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
         <span class="glyphicon glyphicon-chevron-left"></span>
+        <span class="sr-only">Previous</span>
       </a>
       <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
         <span class="glyphicon glyphicon-chevron-right"></span>
+        <span class="sr-only">Next</span>
       </a>
     </div>
   </div><!-- /example -->
@@ -58,9 +60,11 @@
   <!-- Controls -->
   <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-left"></span>
+    <span class="sr-only">Previous</span>
   </a>
   <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right"></span>
+    <span class="sr-only">Next</span>
   </a>
 </div>
 {% endhighlight %}
@@ -104,9 +108,11 @@
       </div>
       <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
         <span class="glyphicon glyphicon-chevron-left"></span>
+        <span class="sr-only">Previous</span>
       </a>
       <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
         <span class="glyphicon glyphicon-chevron-right"></span>
+        <span class="sr-only">Next</span>
       </a>
     </div>
   </div><!-- /example -->

diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html
index efe2c97542c8754f00e831c25e95298986bf7a75..999f1f12115a3da31d0c8603bbcbfc4b10ff9ae1 100644 (file)
--- a/docs/examples/carousel/index.html
+++ b/docs/examples/carousel/index.html
@@ -113,8 +113,14 @@
           </div>
         </div>
       </div>
-      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
-      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
+      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
+        <span class="glyphicon glyphicon-chevron-left"></span>
+        <span class="sr-only">Previous</span>
+      </a>
+      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
+        <span class="glyphicon glyphicon-chevron-right"></span>
+        <span class="sr-only">Next</span>
+      </a>
     </div><!-- /.carousel -->
 
 

diff --git a/docs/examples/theme/index.html b/docs/examples/theme/index.html
index 0f686c32e0724c8cfc6b6badd5aebf5d1448b52b..c7736a2d4cc8130a255fd2691b374afcd5a4c2ef 100644 (file)
--- a/docs/examples/theme/index.html
+++ b/docs/examples/theme/index.html
@@ -633,9 +633,11 @@
         </div>
         <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
           <span class="glyphicon glyphicon-chevron-left"></span>
+          <span class="sr-only">Previous</span>
         </a>
         <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
           <span class="glyphicon glyphicon-chevron-right"></span>
+          <span class="sr-only">Next</span>
         </a>
       </div>