fix: improve language switcher contrast for WCAG AA in both light and dark mode#2441
Merged
Merged
Conversation
…ss 14 languages - Add explicit pill-style styling to .site-language-switcher a with padding, border-radius, and high-contrast colors (#1a1a1a light / #f0f0f0 dark) - Add proper hover/focus-visible states for header language links - Add dark-mode overrides for both header and footer language links - Use hardcoded color values instead of CSS variables to ensure contrast regardless of theme variable resolution - Support both prefers-color-scheme: dark and data-theme="dark" toggles Agent-Logs-Url: https://github.com/Hack23/riksdagsmonitor/sessions/289d0f92-d033-45df-a137-a0f0a2e6c8ed Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>
Copilot created this pull request from a session on behalf of
pethers
May 12, 2026 23:28
View session
github-actions
Bot
added
html-css
Contributor
🏷️ Automatic Labeling SummaryThis PR has been automatically labeled based on the files changed and PR metadata. Applied Labels: html-css,size-m Label Categories
For more information, see |
Contributor
🔍 Lighthouse Performance Audit
📥 Download full Lighthouse report Budget Compliance: Performance budgets enforced via |
Contributor
There was a problem hiding this comment.
Pull request overview
Improves WCAG AA contrast and interaction styling for the header language switcher links (and related footer language links) across both OS dark-mode (prefers-color-scheme) and the manual html[data-theme] theme toggle, applied uniformly to all static language variants.
Changes:
- Adds pill-style layout, spacing, and hover/focus-visible states for
.site-language-switcher awith explicit light/dark text colors. - Introduces/adjusts dark-mode overrides for footer language grid link colors and hover states.
- Updates active language link styling to use a yellow background with dark text across header and footer.
Comments suppressed due to low confidence (1)
styles.css:13739
- Same issue as the
prefers-color-scheme: darkblock: in the explicithtml[data-theme="dark"]theme, the later:hover/:focus-visiblerules override the.activestyling, so active language links can lose the yellow active background on hover/focus. Add.active:hover/.active:focus-visible(or reorder) to keep active styling dominant.
html[data-theme="dark"] .site-language-switcher a:hover,
html[data-theme="dark"] .site-language-switcher a:focus-visible {
background: var(--primary-color, #00cc66);
color: #001a1a;
border-color: var(--primary-color, #00cc66);
}
Comment on lines
+13707
to
+13712
| .site-language-switcher a:hover, | ||
| .site-language-switcher a:focus-visible { | ||
| background: var(--primary-color, #00cc66); | ||
| color: #001a1a; | ||
| border-color: var(--primary-color, #00cc66); | ||
| } |
Comment on lines
13693
to
13697
| .site-footer .language-grid a.active, | ||
| .site-language-switcher a.active { | ||
| color: var(--dark-bg, #0a0e27); | ||
| color: #0a0e27; | ||
| border-color: var(--primary-yellow, #ffbe0b); | ||
| background: var(--primary-yellow, #ffbe0b); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Language switcher links (
🇬🇧 EN, etc.) in the header failed WCAG contrast checks in both light and dark mode. The.site-language-switcher aselector only setcolorvia CSS variable without explicit fallbacks, padding, or interactive states — unlike the article-level.lang-linkstyling.Changes
.site-language-switcher a): Added pill-style styling with hardcoded high-contrast colors (#1a1a1alight /#f0f0f0dark), padding, border-radius, and hover/focus-visible states#f0f0f0text color for.site-footer .language-grid ain dark mode (was relying onvar(--text-color)which could fail to resolve)@media (prefers-color-scheme: dark)andhtml[data-theme="dark"]toggleContrast ratios: 15.3:1 (light), 14.1:1 (dark) — well above WCAG AA 4.5:1 minimum. Active state uses yellow
#ffbe0bbg with#0a0e27text in both modes.Applies automatically to all 14 language variants (markup generated by
normalize-static-html-chrome.ts).