kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

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]
This commit is contained in:
Chris Rebert 2014-07-07 19:53:57 -07:00
parent 5d1abf8b38
commit 94eff8c159
3 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/_includes/js/carousel.html
View File

@ -10,7 +10,7 @@
<li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> </ol>
<div class="carousel-inner"> <div class="carousel-inner" role="listbox">
<div class="item active"> <div class="item active">
<img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide"> <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
</div> </div>
@ -39,7 +39,7 @@
</ol> </ol>
<!-- Wrapper for slides --> <!-- Wrapper for slides -->
<div class="carousel-inner"> <div class="carousel-inner" role="listbox">
<div class="item active"> <div class="item active">
<img src="..." alt="..."> <img src="..." alt="...">
<div class="carousel-caption"> <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="1"></li>
<li data-target="#carousel-example-captions" data-slide-to="2"></li> <li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol> </ol>
<div class="carousel-inner"> <div class="carousel-inner" role="listbox">
<div class="item active"> <div class="item active">
<img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image"> <img data-src="holder.js/900x500/auto/#777:#777" alt="First slide image">
<div class="carousel-caption"> <div class="carousel-caption">

2
docs/examples/carousel/index.html
View File

@ -81,7 +81,7 @@
<li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="2"></li>
</ol> </ol>
<div class="carousel-inner"> <div class="carousel-inner" role="listbox">
<div class="item active"> <div class="item active">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container"> <div class="container">

2
docs/examples/theme/index.html
View File

@ -620,7 +620,7 @@
<li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> </ol>
<div class="carousel-inner"> <div class="carousel-inner" role="listbox">
<div class="item active"> <div class="item active">
<img data-src="holder.js/1140x500/auto/#777:#555/text:First slide" alt="First slide"> <img data-src="holder.js/1140x500/auto/#777:#555/text:First slide" alt="First slide">
</div> </div>