Commit 94eff8c1 authored by Chris Rebert's avatar Chris Rebert
Browse files

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]
parent 5d1abf8b
5 merge requests!28721Hot test,!14071add role="listbox" to .carousel-inner to improve accessibility of Carousels,!16605Test pull please ignore,!22103test,!25326Adjust examples
Showing with 5 additions and 5 deletions
+5 -5
......@@ -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">
......
......@@ -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">
......
......@@ -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>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment