Skip to content
GitLab
Commit 2e3f1a23 authored by Chris Rebert's avatar Chris Rebert
Browse files

Merge pull request #14072 from twbs/carousel-gloss-buttons 

Add screenreader text to prev/next carousel buttons in examples to improve accessibility
parents b83bf671 849bf58a
Hide whitespace changes
Inline Side-by-side
Showing
with 16 additions and 2 deletions
+16 -2
docs/_includes/js/carousel.html
+ 6
- 0
View file @ 2e3f1a23
...@@ -23,9 +23,11 @@ ...@@ -23,9 +23,11 @@
</div> </div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span> <span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a> </a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span> <span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a> </a>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
...@@ -58,9 +60,11 @@ ...@@ -58,9 +60,11 @@
<!-- Controls --> <!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span> <span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a> </a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span> <span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a> </a>
</div> </div>
{% endhighlight %} {% endhighlight %}
...@@ -104,9 +108,11 @@ ...@@ -104,9 +108,11 @@
</div> </div>
<a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev"> <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span> <span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a> </a>
<a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next"> <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span> <span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a> </a>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
......
docs/examples/carousel/index.html
+ 8
- 2
View file @ 2e3f1a23
...@@ -113,8 +113,14 @@ ...@@ -113,8 +113,14 @@
</div> </div>
</div> </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="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> <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 --> </div><!-- /.carousel -->
......
docs/examples/theme/index.html
+ 2
- 0
View file @ 2e3f1a23
...@@ -633,9 +633,11 @@ ...@@ -633,9 +633,11 @@
</div> </div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span> <span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a> </a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span> <span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a> </a>
</div> </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