fix(a11y): topbar logo and dark-mode toggle visible in HCM - #10847
Merged
robert-hebel-sb merged 2 commits intoAug 10, 2026
Conversation
In Windows High Contrast Mode the standalone topbar Swagger logo and the dark-mode toggle's lightbulb icon both become invisible or near- invisible against the HCM-substituted Canvas. The logo's wordmark paths use literal fill #fff which preserves under Chromium's default forced-color-adjust: preserve-parent-color for SVG and disappears in HCM light. The dark-mode toggle's SVG fill #e4e6e6 likewise preserves and renders at low contrast in any HCM theme; the parent .dark-mode- toggle also has opacity: 0.8, which composites multiplicatively and dims the icon further. A new @media (forced-colors: active) block in _topbar.scss pins the logo wordmark paths to CanvasText and the dark-mode toggle SVG to ButtonText with forced-color-adjust: none, and resets the parent opacity to 1 so the system-color contrast guarantee isn't dimmed. ButtonText/CanvasText are the system colors paired with ButtonFace/ Canvas and guarantee contrast in any user HCM theme. Refs swagger-api#7350
Contributor
|
LGTM 💅 thanks for the contribution @bmatar 🥇 ; I will merge this PR as soon CI checks passess |
robert-hebel-sb
approved these changes
Aug 10, 2026
swagger-bot
pushed a commit
that referenced
this pull request
Aug 11, 2026
## [5.32.13](v5.32.12...v5.32.13) (2026-08-11) ### Bug Fixes * **a11y:** add aria-labels to copy-to-clipboard buttons ([#10842](#10842)) ([e6ce7d8](e6ce7d8)) * **a11y:** add skip-to-operations link, banner and main landmarks ([#10849](#10849)) ([92669ea](92669ea)) * **a11y:** close Authorization popup with Escape key and backdrop click ([#10987](#10987)) ([311b0d2](311b0d2)) * **a11y:** name and state for dark-mode toggle button ([#10848](#10848)) ([13a90fa](13a90fa)) * **a11y:** restore icon visibility in Windows High Contrast Mode ([#10846](#10846)) ([edec467](edec467)) * **a11y:** topbar logo and dark-mode toggle visible in HCM ([#10847](#10847)) ([6beaebd](6beaebd)) * **a11y:** use <strong> for model titles to convey emphasis semantically ([#10876](#10876)) ([b4501b6](b4501b6)) * **ci:** bump cycjimmy/semantic-release-action to v6.0.0 ([#11001](#11001)) ([9b3eacb](9b3eacb)) * **ci:** fix Trivy security scan and add dependency vulnerability scan ([#10996](#10996)) ([ff221a8](ff221a8)) * **style:** reduce padding on inline code blocks in markdown ([#7569](#7569)) ([#10789](#10789)) ([a1a6cdc](a1a6cdc))
Contributor
|
🎉 This PR is included in version 5.32.13 🎉 The release is available on: Your semantic-release bot 📦🚀 |
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
3 participants
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.
Description
In Windows High Contrast Mode (Edge / Chromium with
forced-colors: active), the standalone topbar's Swagger logo wordmark and the dark-mode toggle's lightbulb icon both become invisible or near-invisible against the HCM-substituted Canvas. The logo wordmark paths use literalfill="#fff", and the dark-mode toggle SVG usesfill: #e4e6e6— both preserved by Chromium's spec-correct defaultforced-color-adjust: preserve-parent-colorfor SVG. The dark-mode toggle wrapper also hasopacity: 0.8, which composites multiplicatively and dims the icon further regardless of the path fill.In HCM-light, the white logo wordmark is invisible on Canvas-white. In HCM-dark, the gray lightbulb sits at low contrast. The toggle button is operable (it has a focusable
<button>) but sighted HCM users have no visible cue.A new
@media (forced-colors: active)block in_topbar.scsspins the logo wordmark paths toCanvasTextand the dark-mode toggle SVG toButtonText, both withforced-color-adjust: none, and resets the wrapper opacity to 1 so the system-color contrast guarantee isn't dimmed.Motivation and Context
Part of the HCM accessibility backlog tracked in #7350; this PR fixes the standalone topbar surface specifically. Detected by Tactual. WCAG 1.4.11 Non-text Contrast.
How Has This Been Tested?
npm run test:unit— all suites pass (829 tests)npm run build— cleanhtml.dark-modeandforced-colors: activeat capture time. Topbar elements show diffs only in HCM scenarios; non-HCM scenarios are byte-identicalScreenshots
Same swagger-ui commit on both ports, only this patch differing. The
html.dark-modeclass is irrelevant to the topbar surface in HCM (the OS substitutes Canvas/CanvasText regardless), so only the HCM scheme axis has distinct visual states.HCM light:
HCM dark:
Out of scope
<select>chevron in HCM (HTTPS dropdown in_topbar.scssand the dark-mode select arrow in_dark-mode.scss):<select>is a replaced element with no usable pseudo-element; themask-imageapproach used in fix(a11y): restore icon visibility in Windows High Contrast Mode #10846 can't apply without wrapping the<select>in a markup change. Followup PR.Checklist
My PR contains...
src/is unmodified: changes to documentation, CI, metadata, etc.)package.json)My changes...
Documentation
Automated tests