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

theme/css/general.css: emphasize active sidebar item #809

Merged
merged 1 commit into from
Sep 18, 2024

Conversation

ethamck
Copy link
Contributor

@ethamck ethamck commented Aug 3, 2024

May (help) close #803, appends a bullet character (U+2022, •) to the end of a selected item in the sidebar for visibility.

For screen readers, this should render as "selected" instead.

Example

(I would've tried to color the background differently but I'm not a CSS wizard and this seemed more practical.)

@ethamck ethamck changed the title src/theme/general.css: append symbol to emphasize sidebar item src/theme/general.css: append symbol to emphasize sidebar items Aug 3, 2024
@ethamck ethamck changed the title src/theme/general.css: append symbol to emphasize sidebar items theme/css/general.css: append bullet to emphasize active sidebar item Aug 3, 2024
Copy link
Contributor Author

@ethamck ethamck left a comment

Choose a reason for hiding this comment

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

This is one way that changes background color rather than messing with ::afters (it doesn't go as wide as I would've liked but I'm fairly certain it's impossible without rewriting a lot more than this).

dark theme

Not sure if the CSS rule is on the right line now that the selector's changed (or if it matters).

On the light theme, it may be difficult to read the text atop it,

light theme

but the Void green on white theme background doesn't technically meet WCAG contrast guidelines even without darkening it (4.44 original background vs 3.38 after dimming out of 4.50).

Should the dimming color change depending on theme? It's also possible to just change the alpha from 25% to a more adequate value for both themes, something like 10%:

light theme 10% alpha grey

@ethamck ethamck changed the title theme/css/general.css: append bullet to emphasize active sidebar item theme/css/general.css: emphasize active sidebar item Aug 17, 2024
@classabbyamp
Copy link
Member

looks good generally, a few things:

  • maybe in the light theme, the background could be void green while the text is white or near-white? (kinda like inverse video)
  • has() is a little iffy support-wise but i think it's reasonable
  • I think we should still have this, it's probably a good thing for screen readers:
#sidebar a.active::after {
  content: "" / " selected";
}

Highlights the background of the selected sidebar link
@ethamck
Copy link
Contributor Author

ethamck commented Sep 15, 2024

I do prefer this approach, actually.

Light theme preview

Dark theme preview

It adheres to contrast guidelines when using color: var(--bg) and I rewrote it to not use :has() (rather styling the active a to take up the full width of li).

I also played with font weight and text color but concluded that this configuration is best.

(In the OP I mentioned that I couldn't figure out how to style the background differently, which referred to my one-track idea to color the background of the sidebar at that item as a full-width band rather than just the item, also removing the need for padding, but I believe that's practically impossible without redefining a bunch of list styles)

@classabbyamp classabbyamp merged commit 3b3a7fd into void-linux:master Sep 18, 2024
3 of 4 checks passed
@ethamck ethamck deleted the focus-bullet branch September 18, 2024 10:43
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.

Improve CSS highlighting of selected entry
2 participants