add role="listbox" to .carousel-inner to improve accessibility of Carousels

Refs #13556.
Per https://github.com/paypal/bootstrap-accessibility-plugin/#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..e58107fbad04a3015542a8571ec35a99b16d9c8d 100644 (file)
--- a/docs/_includes/js/carousel.html
+++ b/docs/_includes/js/carousel.html
@@ -10,7 +10,7 @@
         <li data-target="#carousel-example-generic" data-slide-to="1"></li>
         <li data-target="#carousel-example-generic" data-slide-to="2"></li>
       </ol>
-      <div class="carousel-inner">
+      <div class="carousel-inner" role="listbox">
         <div class="item active">
           <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
         </div>
@@ -39,7 +39,7 @@
   </ol>
 
   <!-- Wrapper for slides -->
-  <div class="carousel-inner">
+  <div class="carousel-inner" role="listbox">
     <div class="item active">
       <img src="..." alt="...">
       <div class="carousel-caption">
@@ -79,7 +79,7 @@
         <li data-target="#carousel-example-captions" data-slide-to="1"></li>
         <li data-target="#carousel-example-captions" data-slide-to="2"></li>
       </ol>
-      <div class="carousel-inner">
+      <div class="carousel-inner" role="listbox">
         <div class="item active">
           <img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image">
           <div class="carousel-caption">

diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html
index efe2c97542c8754f00e831c25e95298986bf7a75..113a51d16316c013d1c697efd0e80b9f9b12d320 100644 (file)
--- a/docs/examples/carousel/index.html
+++ b/docs/examples/carousel/index.html
@@ -81,7 +81,7 @@
         <li data-target="#myCarousel" data-slide-to="1"></li>
         <li data-target="#myCarousel" data-slide-to="2"></li>
       </ol>
-      <div class="carousel-inner">
+      <div class="carousel-inner" role="listbox">
         <div class="item active">
           <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
           <div class="container">

diff --git a/docs/examples/theme/index.html b/docs/examples/theme/index.html
index 0f686c32e0724c8cfc6b6badd5aebf5d1448b52b..8a956e1e35617e6790c42c3d098399e3635b5f97 100644 (file)
--- a/docs/examples/theme/index.html
+++ b/docs/examples/theme/index.html
@@ -620,7 +620,7 @@
           <li data-target="#carousel-example-generic" data-slide-to="1"></li>
           <li data-target="#carousel-example-generic" data-slide-to="2"></li>
         </ol>
-        <div class="carousel-inner">
+        <div class="carousel-inner" role="listbox">
           <div class="item active">
             <img data-src="holder.js/1140x500/auto/#777:#555/text:First slide" alt="First slide">
           </div>