Merge pull request #14071 from twbs/carousel-inner-role-listbox

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

Merge pull request #14071 from twbs/carousel-inner-role-listbox
add role="listbox" to .carousel-inner to improve accessibility of Carousels
b83bf671 · Chris Rebert · 5d1abf8b · 94eff8c1 · b83bf671 · b83bf671
Commit b83bf671 authored 10 years ago by Chris Rebert
Hide whitespace changes
Inline Side-by-side

Showing

with 5 additions and 5 deletions
+5 -5
--- 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">

--- 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">

--- 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>