Uh oh!
There was an error while loading. Please reload this page.
Implement forced colors for progress bar - #6881
Conversation
🦋 Changeset detectedLatest commit: b4f0f7e The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
There was a problem hiding this comment.
Pull Request Overview
This PR implements forced colors mode support for the ProgressBar component to improve accessibility for users with high contrast display preferences. The changes ensure the progress bar remains visible and functional when Windows High Contrast mode or similar accessibility features are enabled.
- Adds CSS media query for forced-colors mode with appropriate color mappings
- Configures forced-color-adjust property to maintain custom styling in high contrast environments
| :root { | ||
| --progress-bg: LinkText; | ||
| --progressBar-track-bgColor: CanvasText; | ||
| } |
There was a problem hiding this comment.
The CSS custom property names are inconsistent. --progress-bg uses kebab-case while --progressBar-track-bgColor uses camelCase. Consider standardizing to kebab-case for consistency: --progress-bar-track-bg-color.
👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks! |
| @media (forced-colors: active) { | ||
| :root { | ||
| --progress-bg: LinkText; | ||
| --progressBar-track-bgColor: CanvasText; |
There was a problem hiding this comment.
I trust your judgment here but it looks like this might be problematic in the future if we start changing values
There was a problem hiding this comment.
Like change the CSS vars? That's a good point. I suppose if we changed the naming we would see these in the same file and update them.. I'll merge for now but we could always just move it to define the CSS instead!
Closeshttps://github.com/github/primer/issues/5820