A11Y - Add visual indicator for tabs hover (#1884)

Carreau · web-flow · commit 09849cc5112a · 2024-06-15T13:38:36.000+01:00
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
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;
     }
   }
 

Original file line number	Diff line number	Diff line change
`@@ -207,6 +207,8 @@ html[data-theme="light"] {`
`207`	`207`	`&:not(:checked, :focus-visible) + label:hover {`
`208`	`208`	`border-color: transparent;`
`209`	`209`	`color: var(--pst-color-secondary);`
	`210`	`+ text-decoration-line: underline;`
	`211`	`+ text-decoration-thickness: $link-hover-decoration-thickness;`
`210`	`212`	`}`
`211`	`213`	`}`
`212`	`214`