Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When hovering a heading, make the #-anchor fully opaque #1949

Merged
merged 1 commit into from
Aug 8, 2024

Conversation

gabalafou
Copy link
Collaborator

@gabalafou gabalafou commented Aug 8, 2024

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 Quansight-Labs/czi-scientific-python-mgmt#96.

Copy link

github-actions bot commented Aug 8, 2024

Coverage report

This PR does not seem to contain any modification to coverable code.

@drammock drammock merged commit c91e2f2 into pydata:main Aug 8, 2024
29 checks passed
@gabalafou gabalafou deleted the heading-anchor-contrast branch August 8, 2024 15:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants