Update pagination focus styles

- Drops the hover-focus mixin for standard :hover
- Adds explicit :focus styles to match button, input, etc with a box-shadow
- Adjusts z-index values to ensure the layers go initial, hover, active, focus

Fixes #24838.

2 files changed, 8 insertions, 1 deletions

diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 286febc9d..b0193d170 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -14,13 +14,18 @@
   background-color: $pagination-bg;
   border: $pagination-border-width solid $pagination-border-color;
 
-  @include hover-focus {
+  &:hover {
     color: $pagination-hover-color;
     text-decoration: none;
     background-color: $pagination-hover-bg;
     border-color: $pagination-hover-border-color;
   }
 
+  &:focus {
+    z-index: 2;
+    outline: 0;
+    box-shadow: $pagination-focus-box-shadow;
+  }
 
   // Opinionated: add "hand" cursor to non-disabled .page-link elements
   &:not([disabled]):not(.disabled) {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 62b4850a8..2438c115e 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -627,6 +627,8 @@ $pagination-bg:                     $white !default;
 $pagination-border-width:           $border-width !default;
 $pagination-border-color:           $gray-300 !default;
 
+$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
+
 $pagination-hover-color:            $link-hover-color !default;
 $pagination-hover-bg:               $gray-200 !default;
 $pagination-hover-border-color:     $gray-300 !default;