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

Reduce the prominence of the selected sidebar item #2662

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

illright
Copy link

@illright illright commented Dec 7, 2024

Description

Related to #1701. There has been a comment expressing a concern about the accessibility of this redesign, but I'm not sure what exactly was the problem. However, I did find it helpful to increase the thickness of the highlight to make it visually stand out more. I tested without colors and still found it pretty easy to tell which entry is selected. However, I do not have any visual impairments, so my word should not be the last here.

This PR removes the bright background of a selected item in the left sidebar and replaces it with an accent text color and an accent line on the left.

Screenshots

Before, desktop:

LightDarkDark without sidebar BG
Scherm­afbeelding 2024-12-07 om 22 53 06 Scherm­afbeelding 2024-12-07 om 22 53 22 Scherm­afbeelding 2024-12-07 om 22 53 31
Scherm­afbeelding 2024-12-07 om 22 53 39 Scherm­afbeelding 2024-12-07 om 22 54 09 Scherm­afbeelding 2024-12-07 om 22 53 58

After, desktop:

LightDarkDark without sidebar BG
Scherm­afbeelding 2024-12-07 om 22 50 13 Scherm­afbeelding 2024-12-07 om 22 50 25 Scherm­afbeelding 2024-12-07 om 22 50 55
Scherm­afbeelding 2024-12-07 om 22 51 13 Scherm­afbeelding 2024-12-07 om 22 51 34 Scherm­afbeelding 2024-12-07 om 22 51 42

Mobile (dark version is identical to desktop):

Scherm­afbeelding 2024-12-07 om 22 55 02 Scherm­afbeelding 2024-12-07 om 22 55 25

Copy link

changeset-bot bot commented Dec 7, 2024

🦋 Changeset detected

Latest commit: 3e909a9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@astrojs/starlight Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added the 🌟 core Changes to Starlight’s main package label Dec 7, 2024
Copy link

netlify bot commented Dec 7, 2024

Deploy Preview for astro-starlight ready!

Name Link
🔨 Latest commit 3e909a9
🔍 Latest deploy log https://app.netlify.com/sites/astro-starlight/deploys/6754cbccb6288800080c58c6
😎 Deploy Preview https://deploy-preview-2662--astro-starlight.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 100 (no change from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 100 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🌟 core Changes to Starlight’s main package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant