fix: improve right sidebar ToC hover contrast#960
fix: improve right sidebar ToC hover contrast#960kavyakapoor420 wants to merge 1 commit intolayer5io:masterfrom
Conversation
Signed-off-by: kavyakapoor420 <kavyakapoor412@gmail.com>
There was a problem hiding this comment.
Code Review
This pull request enhances the styling of the Table of Contents links by adding padding, border-radius, and a background-color transition on hover. The review feedback recommends setting the links to block display for a consistent hit area, expanding the transition property to include color, and adding focus-visible styles to ensure accessibility for keyboard users as originally intended.
| padding: 0.25rem 0.5rem; | ||
| border-radius: 4px; | ||
| transition: background-color 0.2s ease; |
There was a problem hiding this comment.
To ensure the padding and background color are applied correctly and provide a consistent hit area, the anchor tags should be set to display: block. Additionally, the transition should include the color property to match the background transition. Finally, although the PR description mentions adding focus-visible styles, they are missing from the implementation; adding them here ensures accessibility for keyboard users.
display: block;
padding: 0.25rem 0.5rem;
border-radius: 4px;
transition: all 0.2s ease;
&:focus-visible {
color: $white;
text-decoration: none;
background-color: rgba($primary, 0.15);
}|
🚀 Preview deployment: https://layer5io.github.io/docs/pr-preview/pr-960/
|
This PR fixes #954
Summary
This PR fixes the right sidebar table-of-contents hover state in the docs site.
Previously, hovered ToC items could become hard to read because the hover background was too light relative to the text color. This update adds explicit hover and focus styles for ToC links so the text remains readable and accessible.
Changes
assets/scss/_styles_project.scssScreenshots after testing confirming improved accessibility contrast
Signed commits