Skip to content

B
bootstrap
Commit 24bc1026 authored by Patrick H. Lauke's avatar Patrick H. Lauke
Browse files
Options

Use aria-label for pagination prev/next 

Cleaner alternative to using ``<span class="sr-only">``
parent eee27576
Hide whitespace changes
Inline Side-by-side
Showing with 13 additions and 18 deletions
docs/_includes/components/pagination.html
View file @ 24bc1026
......@@ -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>
......
Markdown is supported
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