From 2ed2d29413410564049d3bb377b7dd2d8e81b0ff Mon Sep 17 00:00:00 2001
From: Dan Cormier <dcormier@stackoverflow.com>
Date: Thu, 25 Jan 2024 16:06:00 -0500
Subject: [PATCH 1/2] fix(pagination):improve focus style to meet WCAG 2.2 AA

Addresses [STACKS-544](https://stackoverflow.atlassian.net/browse/STACKS-544)
---
 lib/components/pagination/pagination.less | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/lib/components/pagination/pagination.less b/lib/components/pagination/pagination.less
index c71240ef8b..5261e3d98f 100644
--- a/lib/components/pagination/pagination.less
+++ b/lib/components/pagination/pagination.less
@@ -3,6 +3,8 @@
         --_pa-item-bg: transparent;
         --_pa-item-bc: var(--bc-darker);
         --_pa-item-fc: var(--fc-medium);
+        --_pa-item-bg-focus: var(--black-400);
+        --_pa-item-fc-focus: var(--white);
         --_pa-item-bg-hover: var(--black-225);
         --_pa-item-bc-hover: var(--bc-darker);
         --_pa-item-fc-hover: var(--fc-dark);
@@ -15,6 +17,7 @@
             --_pa-item-bg: var(--theme-primary);
             --_pa-item-bc: transparent;
             --_pa-item-fc: var(--white);
+            --_pa-item-bg-focus: var(--theme-primary-400);
         }
         &.s-pagination--item__clear {
             --_pa-item-bg: transparent;
@@ -36,6 +39,14 @@
             color: var(--_pa-item-fc-hover);
         }
 
+        &:focus-visible {
+            background-color: var(--_pa-item-bg-focus);
+            border-color: var(--theme-secondary-400) !important;
+            box-shadow: inset 0 0 0 var(--su-static2) var(--theme-secondary-400), inset 0 0 0 var(--su-static4) var(--black-050);
+            color: var(--_pa-item-fc-focus);
+            outline: var(--su-static2) solid transparent;
+        }
+
         background-color: var(--_pa-item-bg);
         border: 1px solid var(--_pa-item-bc);
         color: var(--_pa-item-fc);

From 5c9661f7a4cc616b32a85e23a187b2d777b8c638 Mon Sep 17 00:00:00 2001
From: Dan Cormier <dcormier@stackoverflow.com>
Date: Fri, 26 Jan 2024 11:51:44 -0500
Subject: [PATCH 2/2] docs(pagination): improve example accessibility

Addresses https://github.com/StackExchange/Stacks/pull/1612#pullrequestreview-1846037795
---
 docs/product/components/pagination.html | 70 ++++++++++++++++++++-----
 1 file changed, 56 insertions(+), 14 deletions(-)

diff --git a/docs/product/components/pagination.html b/docs/product/components/pagination.html
index b5b30a47aa..26f8f343eb 100644
--- a/docs/product/components/pagination.html
+++ b/docs/product/components/pagination.html
@@ -32,26 +32,68 @@
     <div class="stacks-preview">
 {% highlight html %}
 <div class="s-pagination">
-    <span class="s-pagination--item is-selected" aria-current="page">1</span>
-    <a class="s-pagination--item" href="…">2</a>
-    <a class="s-pagination--item" href="…">3</a>
-    <a class="s-pagination--item" href="…">4</a>
-    <a class="s-pagination--item" href="…">5</a>
+    <a class="s-pagination--item is-selected" href="…" aria-current="page">
+        <span class="v-visible-sr">page</span>
+        1
+    </a>
+    <a class="s-pagination--item" href="…">
+        <span class="v-visible-sr">page</span>
+        2
+    </a>
+    <a class="s-pagination--item" href="…">
+        <span class="v-visible-sr">page</span>
+        3
+    </a>
+    <a class="s-pagination--item" href="…">
+        <span class="v-visible-sr">page</span>
+        4
+    </a>
+    <a class="s-pagination--item" href="…">
+        <span class="v-visible-sr">page</span>
+        5
+    </a>
     <span class="s-pagination--item s-pagination--item__clear">…</span>
-    <a class="s-pagination--item" href="…">1096917</a>
-    <a class="s-pagination--item" href="…">Next</a>
+    <a class="s-pagination--item" href="…">
+        <span class="v-visible-sr">page</span>
+        122386
+    </a>
+    <a class="s-pagination--item" href="…">
+        Next
+        <span class="v-visible-sr">page</span>
+    </a>
 </div>
 {% endhighlight %}
         <div class="stacks-preview--example overflow-x-auto">
             <div class="s-pagination">
-                <span class="s-pagination--item is-selected" aria-current="page">1</span>
-                <a class="s-pagination--item" href="#">2</a>
-                <a class="s-pagination--item" href="#">3</a>
-                <a class="s-pagination--item" href="#">4</a>
-                <a class="s-pagination--item" href="#">5</a>
+                <a class="s-pagination--item is-selected" href="#" aria-current="page">
+                    <span class="v-visible-sr">page</span>
+                    1
+                </a>
+                <a class="s-pagination--item" href="#">
+                    <span class="v-visible-sr">page</span>
+                    2
+                </a>
+                <a class="s-pagination--item" href="#">
+                    <span class="v-visible-sr">page</span>
+                    3
+                </a>
+                <a class="s-pagination--item" href="#">
+                    <span class="v-visible-sr">page</span>
+                    4
+                </a>
+                <a class="s-pagination--item" href="#">
+                    <span class="v-visible-sr">page</span>
+                    5
+                </a>
                 <span class="s-pagination--item s-pagination--item__clear">…</span>
-                <a class="s-pagination--item" href="#">1096917</a>
-                <a class="s-pagination--item" href="#">Next</a>
+                <a class="s-pagination--item" href="#">
+                    <span class="v-visible-sr">page</span>
+                    122386
+                </a>
+                <a class="s-pagination--item" href="#">
+                    Next
+                    <span class="v-visible-sr">page</span>
+                </a>
             </div>
         </div>
     </div>