rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Use aria-label for pagination prev/next

Browse Source 
Cleaner alternative to using ``<span class="sr-only">``
This commit is contained in:
Patrick H. Lauke 2014-12-08 14:54:20 +00:00
parent eee275762f
commit 24bc102664
1 changed files with 13 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
docs/_includes/components/pagination.html
View File

@ -9,9 +9,8 @@
<nav>
<ul class="pagination">
<li>
<a href="#">
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li><a href="#">1</a></li>
@ -20,9 +19,8 @@
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#">
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
@ -32,9 +30,8 @@
<nav>
<ul class="pagination">
<li>
<a href="#">
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li><a href="#">1</a></li>
@ -43,9 +40,8 @@
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#">
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
@ -57,20 +53,20 @@
<div class="bs-example" data-example-id="disabled-active-pagination">
<nav>
<ul class="pagination">
<li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav>
<ul class="pagination">
<li class="disabled"><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
@ -83,7 +79,6 @@
<li class="disabled">
<span>
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</span>
</li>
<li class="active">
@ -100,35 +95,35 @@
<div class="bs-example" data-example-id="pagination-sizing">
<nav>
<ul class="pagination pagination-lg">
<li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul>
</nav>
<nav>
<ul class="pagination">
<li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm">
<li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li>
<li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul>
</nav>
</div>