A11Y - Add visual indicator for tabs hover

Only changing color is not visually distinctive enough, adding an underline with same size as link underline thickness. See Quansight-Labs/czi-scientific-python-mgmt#79
Carreau · Jun 14, 2024 · 27e4ea8 · 27e4ea8
1 parent 4be630f
commit 27e4ea8
Showing 1 changed file with 2 additions and 0 deletions.
diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss
@@ -207,6 +207,8 @@ html[data-theme="light"] {
     &:not(:checked, :focus-visible) + label:hover {
       border-color: transparent;
       color: var(--pst-color-secondary);
+      text-decoration-line: underline;
+      text-decoration-thickness: $link-hover-decoration-thickness;
     }
   }