[accessibility] Make Slider and some docs examples visible in HighContrast Mode by silviuaavram · Pull Request #48320 · mui/material-ui (original) (raw)
Copilot AI review requested due to automatic review settings
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
Improves high-contrast/forced-colors accessibility by ensuring key UI affordances (notably Slider parts and certain docs examples) remain visually perceivable when user agent colors are enforced.
Changes:
- Add transparent borders (and
boxSizing) to Slider rail/thumb to allow high-contrast rendering to surface an outline/border. - Update a Rating demo to read the disabled color from
(theme.vars || theme)for CSS variables theme compatibility. - Improve radio button demos for accessibility/forced-colors (forced-colors styling for customized radios; helper text reset behavior in error radios).
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/mui-material/src/Slider/Slider.js | Adds transparent borders / border-box sizing on rail and thumb to support High Contrast visibility. |
| docs/data/material/components/rating/RadioGroupRating.tsx | Uses `(theme.vars |
| docs/data/material/components/rating/RadioGroupRating.js | Same as TS version for the JS demo. |
| docs/data/material/components/radio-buttons/ErrorRadios.tsx | Simplifies change handler and resets helper text to a meaningful string. |
| docs/data/material/components/radio-buttons/ErrorRadios.js | Mirrors TS change handler behavior in JS demo. |
| docs/data/material/components/radio-buttons/CustomizedRadios.tsx | Adds forced-colors: active styling to ensure custom radio visuals remain visible. |
| docs/data/material/components/radio-buttons/CustomizedRadios.js | Mirrors forced-colors styling changes in JS demo. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
[accessibility] Make Slider visible in HighContrast Mode [accessibility] Make Slider and some docs examples visible in HighContrast Mode
There should be no changes in argos, what do I missed?
@siriwatknp It's the transparent border, which apparently it's not as transparent. Not sure why this happens.
Edit: only adding border on HCM to remove that diff
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💪
Comment on lines +133 to +134
| opacity: 0.38, |
|---|
| border: '1px solid transparent', |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
From Codex review:
The new border is still dimmed by existing opacity, so forced-colors does not get the full user-selected system color. In Chrome’s emulated dark forced-colors palette this measures around
rgb(97,97,97), which is above 3:1, but only narrowly. Consider resettingopacityinforced-colorsif the goal is to preserve the system color exactly. Recommended fix: in@media (forced-colors: active), make the bordered slot paint at full opacity and use system colors for state differences instead of alpha.
Though I'm not sure how accurate this is, it initially claimed the contrast was 2.68:1 because of the opacity but I measured it myself (the real HCM color under Chrome emulation) and it was wrong
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
guarding the style with HCM, for consistency with the other changes.
the contrast is going to be the same as before, we're only adding this border to make it visible in HCM
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
[ Show hidden characters]({{ revealButtonHref }})