From c91e2f21e520ed99f69076f2f58148fd0fc6b562 Mon Sep 17 00:00:00 2001 From: gabalafou Date: Thu, 8 Aug 2024 10:58:16 -0400 Subject: [PATCH] When hovering a heading, make the #-anchor fully opaque (#1949) Previously, when the heading was hovered but not the actual hash-anchor itself, the anchor would be 70% opaque. Hovering the anchor itself would bring it to 100% opacity. However, at 70% opacity, the contrast between the #-anchor and the background did not meet accessibility contrast requirements (for normal text, WCAG AA requires 4.5:1 contrast ratio). This PR makes it so that it's always 100% opaque, whether you hover the heading or the actual anchor itself. This means that the anchor itself does not have a perceivable hover state, but I'm not sure it needs one. If we decide that it does need a hover state, we can add one later. At any rate, the previous 30% change in opacity to mark the hover state (hovering the heading to hovering the #-anchor) was too subtle to meet accessibility requirements. Fixes external issue https://github.com/Quansight-Labs/czi-scientific-python-mgmt/issues/96. --- src/pydata_sphinx_theme/assets/styles/base/_base.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/styles/base/_base.scss b/src/pydata_sphinx_theme/assets/styles/base/_base.scss index c50dc32d0..f48bc20bc 100644 --- a/src/pydata_sphinx_theme/assets/styles/base/_base.scss +++ b/src/pydata_sphinx_theme/assets/styles/base/_base.scss @@ -39,17 +39,11 @@ a { // The # anchor that appears on hover over headings &.headerlink { color: var(--pst-color-secondary); - opacity: 0.7; font-size: 0.8em; padding: 0 4px; margin-left: 0.2em; text-decoration: none; - transition: all 0.2s ease-out; user-select: none; - - &:hover { - opacity: 1; - } } // set up a icon next to the shorten links from github and gitlab