Resolve current sidebar link notch and focus ring (#1561)

* Fix sidebar current notch * focus-ring-radius * missed a spot 0.125rem * keep focus ring on top
pydata · Dec 8, 2023 · 78c91c0 · 78c91c0
1 parent 8495ba4
commit 78c91c0
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 11 deletions.
diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss
@@ -123,6 +123,12 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
   &:active {
     color: var(--pst-color-link-hover);
   }
+
+  &:focus-visible {
+    box-shadow: $focus-ring-box-shadow;
+    outline: none;
+    z-index: 10; // keep focus ring on top (prevent the link-sidebar-current notch from lying on top of the ring)
+  }
 }
 
 // Sidebar current page link styles
@@ -135,9 +141,16 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
   font-weight: 600;
   color: var(--pst-color-primary);
   @if $link-hover-decoration-thickness {
-    border-left: $link-hover-decoration-thickness
-      solid
+    $notch-shadow: inset
+      $link-hover-decoration-thickness
+      0px
+      0px
       var(--pst-color-primary);
+    box-shadow: $notch-shadow;
+    &:focus-visible {
+      box-shadow: $notch-shadow, $focus-ring-box-shadow;
+      outline: none;
+    }
   }
 }
 

diff --git a/src/pydata_sphinx_theme/assets/styles/base/_base.scss b/src/pydata_sphinx_theme/assets/styles/base/_base.scss
@@ -182,9 +182,9 @@ pre {
 
 // Focus ring
 //
-// Note: The Bootstrap stylesheet provides the focus ring (customized via Sass
-// variables in _bootstrap.scss) in some cases. This rules covers all other
-// cases.
+// Note: The Bootstrap stylesheet provides the focus ring (customized by this
+// theme via Sass variables in _bootstrap.scss) in some cases. This rule covers
+// all other cases.
 :focus-visible {
   outline: $focus-ring-outline;
   box-shadow: none; // override Bootstrap

diff --git a/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss b/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss
@@ -45,6 +45,9 @@ button.btn.version-switcher__button {
         top: 0;
       }
     }
+    &:focus-visible {
+      z-index: 10; // keep focus ring on top (prevent the hover background of the next dropdown item from covering the ring)
+    }
   }
 }
 

diff --git a/src/pydata_sphinx_theme/assets/styles/components/_toc-inpage.scss b/src/pydata_sphinx_theme/assets/styles/components/_toc-inpage.scss
@@ -47,9 +47,9 @@ nav.page-toc {
         color: var(--pst-color-link-hover);
       }
     }
-  }
 
-  :focus-visible {
-    border-radius: 0.125rem;
+    &:focus-visible {
+      border-radius: $focus-ring-radius;
+    }
   }
 }
diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
@@ -29,7 +29,7 @@
   }
 
   :focus-visible {
-    border-radius: 0.125rem;
+    border-radius: $focus-ring-radius;
   }
 
   // These items will define the height of the header
@@ -123,6 +123,10 @@
           &:focus:not(:hover):not(:active) {
             background-color: inherit;
           }
+
+          &:focus-visible {
+            z-index: 10; // keep focus ring on top (prevent the hover background of the next dropdown item from covering the ring)
+          }
         }
 
         // Hide the menu unless show has been clicked

diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss
@@ -23,9 +23,8 @@
     font-size: var(--pst-sidebar-font-size);
   }
 
-  // Focus styles
   :focus-visible {
-    border-radius: 0.125rem;
+    border-radius: $focus-ring-radius;
   }
 
   // override bootstrap when navlink are displayed in the sidebar

diff --git a/src/pydata_sphinx_theme/assets/styles/variables/_layout.scss b/src/pydata_sphinx_theme/assets/styles/variables/_layout.scss
@@ -31,3 +31,7 @@ $animation-time: 200ms;
 * UI shaping and padding
 */
 $admonition-border-radius: 0.25rem;
+
+// In this theme, some focus rings have rounded corners while others do not.
+// This variable sets the border radius for the rounded focus rings.
+$focus-ring-radius: 0.125rem; // 2px at 100% zoom and 16px base font.