Skip to content

fix: improve right sidebar ToC hover contrast#960

Open
kavyakapoor420 wants to merge 1 commit intolayer5io:masterfrom
kavyakapoor420:fix/improve-right-sidebar-toc-hover-contrast
Open

fix: improve right sidebar ToC hover contrast#960
kavyakapoor420 wants to merge 1 commit intolayer5io:masterfrom
kavyakapoor420:fix/improve-right-sidebar-toc-hover-contrast

Conversation

@kavyakapoor420
Copy link
Copy Markdown
Contributor

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

  • Updated right sidebar ToC link styles in assets/scss/_styles_project.scss
  • Added explicit hover and focus-visible background/text colors
  • Added block-level padding and border radius for a clearer hover target

Screenshots after testing confirming improved accessibility contrast

Screenshot 2026-04-24 at 8 35 38 PM

Signed commits

  • Yes, I signed my commits.

Signed-off-by: kavyakapoor420 <kavyakapoor412@gmail.com>
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment on lines +382 to +384
padding: 0.25rem 0.5rem;
border-radius: 4px;
transition: background-color 0.2s ease;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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);
      }

@github-actions
Copy link
Copy Markdown

🚀 Preview deployment: https://layer5io.github.io/docs/pr-preview/pr-960/

Note: Preview may take a moment (GitHub Pages deployment in progress). Please wait and refresh. Track deployment here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Right sidebar text becomes unreadable on hover

1 participant