From c98e8b275cd8454281ea2490f8c1015ce2115638 Mon Sep 17 00:00:00 2001 From: Gabriel Fouasnon Date: Mon, 13 Nov 2023 16:03:21 -0600 Subject: [PATCH 1/4] Fix sidebar current notch --- .../assets/styles/abstracts/_links.scss | 17 +++++++++++++++-- .../assets/styles/base/_base.scss | 6 +++--- .../assets/styles/components/_toc-inpage.scss | 4 ---- .../styles/sections/_sidebar-primary.scss | 1 - 4 files changed, 18 insertions(+), 10 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..581c77241 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 { + border-radius: 0.125rem; // 2px at 100% zoom and 16px base font + box-shadow: $focus-ring-box-shadow; + outline: none; + } } // 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/_toc-inpage.scss b/src/pydata_sphinx_theme/assets/styles/components/_toc-inpage.scss index 026ba823f..01db3945c 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_toc-inpage.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_toc-inpage.scss @@ -48,8 +48,4 @@ nav.page-toc { } } } - - :focus-visible { - border-radius: 0.125rem; - } } 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..994450b0f 100644 --- a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss +++ b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss @@ -23,7 +23,6 @@ font-size: var(--pst-sidebar-font-size); } - // Focus styles :focus-visible { border-radius: 0.125rem; } From ad98d24d1de6acb4baf99430156788e7c013d9b1 Mon Sep 17 00:00:00 2001 From: Gabriel Fouasnon Date: Mon, 13 Nov 2023 17:18:43 -0600 Subject: [PATCH 2/4] focus-ring-radius --- src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss | 1 - .../assets/styles/components/_toc-inpage.scss | 4 ++++ .../assets/styles/sections/_sidebar-primary.scss | 2 +- src/pydata_sphinx_theme/assets/styles/variables/_layout.scss | 4 ++++ 4 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss index 581c77241..cd8378682 100644 --- a/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss +++ b/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss @@ -125,7 +125,6 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default; } &:focus-visible { - border-radius: 0.125rem; // 2px at 100% zoom and 16px base font box-shadow: $focus-ring-box-shadow; outline: none; } 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 01db3945c..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,5 +47,9 @@ nav.page-toc { color: var(--pst-color-link-hover); } } + + &:focus-visible { + border-radius: $focus-ring-radius; + } } } 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 994450b0f..6bae4e752 100644 --- a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss +++ b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss @@ -24,7 +24,7 @@ } :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. From c7f19dbe75a16a4bb31eae1a594f2d005a61b732 Mon Sep 17 00:00:00 2001 From: Gabriel Fouasnon Date: Mon, 13 Nov 2023 17:59:09 -0600 Subject: [PATCH 3/4] missed a spot 0.125rem --- src/pydata_sphinx_theme/assets/styles/sections/_header.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss index 3572c07d4..b44029878 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 From baac1c190308d665e376eaa894c011b8ace98c60 Mon Sep 17 00:00:00 2001 From: Gabriel Fouasnon Date: Mon, 13 Nov 2023 18:40:47 -0600 Subject: [PATCH 4/4] keep focus ring on top --- src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss | 1 + .../assets/styles/components/_switcher-version.scss | 3 +++ src/pydata_sphinx_theme/assets/styles/sections/_header.scss | 4 ++++ 3 files changed, 8 insertions(+) diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss index cd8378682..cc766abc3 100644 --- a/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss +++ b/src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss @@ -127,6 +127,7 @@ $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default; &: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) } } 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/sections/_header.scss b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss index b44029878..a04d04598 100644 --- a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss +++ b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss @@ -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