From 78c91c005f2769e4a2af3f14a5f916a7b5408cc4 Mon Sep 17 00:00:00 2001
From: gabalafou <gabriel@fouasnon.com>
Date: Thu, 16 Nov 2023 08:58:06 +0200
Subject: [PATCH] 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
---
 .../assets/styles/abstracts/_links.scss         | 17 +++++++++++++++--
 .../assets/styles/base/_base.scss               |  6 +++---
 .../styles/components/_switcher-version.scss    |  3 +++
 .../assets/styles/components/_toc-inpage.scss   |  6 +++---
 .../assets/styles/sections/_header.scss         |  6 +++++-
 .../styles/sections/_sidebar-primary.scss       |  3 +--
 .../assets/styles/variables/_layout.scss        |  4 ++++
 7 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss
index eb8b6a963..cc766abc3 100644
--- 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
index 7eb0d7ce5..a75166bbf 100644
--- 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
index 2ed0baa66..7d1f5f957 100644
--- 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
index 026ba823f..7abd37916 100644
--- 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
index 3572c07d4..a04d04598 100644
--- 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
index 08d8e78d6..6bae4e752 100644
--- 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
index 54e63cabd..1fbd63d8b 100644
--- 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.