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