Improve pagination's documentation accessibility.

- Remove `.sr-only` span for previous/next page, there is already`aria-label`
- Add `aria-disabled="true"` and `aria-current="page"`

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">&laquo;</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">&raquo;</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>