diff options
| -rw-r--r-- | site/docs/4.1/components/pagination.md | 28 |
1 files changed, 16 insertions, 12 deletions
diff --git a/site/docs/4.1/components/pagination.md b/site/docs/4.1/components/pagination.md index b20b0624d..b1f8e58a2 100644 --- a/site/docs/4.1/components/pagination.md +++ b/site/docs/4.1/components/pagination.md @@ -27,7 +27,7 @@ In addition, as pages likely have more than one such navigation section, it's ad ## Working with icons -Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with `aria` attributes and the `.sr-only` utility. +Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with `aria` attributes. {% capture example %} <nav aria-label="Page navigation example"> @@ -35,7 +35,6 @@ Looking to use an icon or symbol in place of text for some pagination links? Be <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> - <span class="sr-only">Previous</span> </a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> @@ -44,7 +43,6 @@ Looking to use an icon or symbol in place of text for some pagination links? Be <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> - <span class="sr-only">Next</span> </a> </li> </ul> @@ -62,10 +60,10 @@ While the `.disabled` class uses `pointer-events: none` to _try_ to disable the <nav aria-label="..."> <ul class="pagination"> <li class="page-item disabled"> - <a class="page-link" href="#" tabindex="-1">Previous</a> + <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> - <li class="page-item active"> + <li class="page-item active" aria-current="page"> <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> @@ -86,7 +84,7 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the <span class="page-link">Previous</span> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> - <li class="page-item active"> + <li class="page-item active" aria-current="page"> <span class="page-link"> 2 <span class="sr-only">(current)</span> @@ -108,8 +106,11 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for {% capture example %} <nav aria-label="..."> <ul class="pagination pagination-lg"> - <li class="page-item disabled"> - <a class="page-link" href="#" tabindex="-1">1</a> + <li class="page-item active" aria-current="page"> + <span class="page-link"> + 1 + <span class="sr-only">(current)</span> + </span> </li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> @@ -121,8 +122,11 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for {% capture example %} <nav aria-label="..."> <ul class="pagination pagination-sm"> - <li class="page-item disabled"> - <a class="page-link" href="#" tabindex="-1">1</a> + <li class="page-item active" aria-current="page"> + <span class="page-link"> + 1 + <span class="sr-only">(current)</span> + </span> </li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> @@ -139,7 +143,7 @@ Change the alignment of pagination components with [flexbox utilities]({{ site.b <nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item disabled"> - <a class="page-link" href="#" tabindex="-1">Previous</a> + <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> @@ -156,7 +160,7 @@ Change the alignment of pagination components with [flexbox utilities]({{ site.b <nav aria-label="Page navigation example"> <ul class="pagination justify-content-end"> <li class="page-item disabled"> - <a class="page-link" href="#" tabindex="-1">Previous</a> + <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> |