[switch] Add border to make it visible in high contrast mode#48180
[switch] Add border to make it visible in high contrast mode#48180silviuaavram merged 4 commits intomui:masterfrom
Conversation
Netlify deploy previewhttps://deploy-preview-48180--material-ui.netlify.app/ Bundle size report
|
There was a problem hiding this comment.
Pull request overview
Improves Switch visibility in Windows/forced-colors (high contrast) mode by ensuring the control has a border that can be picked up by forced-colors rendering, and adds a visual regression check to guard the behavior.
Changes:
- Add transparent borders to
Switchtrack and thumb styling. - Add a Switch regression fixture for screenshot testing.
- Add a Playwright visual regression screenshot in
forced-colors: activemode.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| test/regressions/index.test.js | Adds a forced-colors visual regression screenshot for Switch. |
| test/regressions/fixtures/Switch/SimpleSwitch.js | Adds a minimal Switch fixture used by the regression runner. |
| packages/mui-material/src/Switch/Switch.js | Adds border styling intended to make Switch visible in forced-colors/high contrast. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
mj12albert
left a comment
There was a problem hiding this comment.
Looks good ~ left one comment
| const label = { slotProps: { input: { 'aria-label': 'Switch demo' } } }; | ||
|
|
||
| export default function BasicSwitches() { | ||
| return <Switch {...label} />; |
There was a problem hiding this comment.
<>
<Switch {...label} />
<Switch {...label} defaultChecked />
</>
might as well screenshot both states ~
There was a problem hiding this comment.
I am not sure if this test is useful. Is it testing the high contrast specifically? If not, it should be removed because we already have a lot of switch demos as visual regression
There was a problem hiding this comment.
It is used by the test below to test the high contrast mode. I did the same for StandardTextField previously, to test high contrast for that variant. Is there another way?
There was a problem hiding this comment.
Got it, I did not know that the pattern exist. 👍
|
Cherry-pick PRs will be created targeting branches: v7.x |
Fixes #43479
Add transparent border to track and thumb.
Preview: https://deploy-preview-48180--material-ui.netlify.app/material-ui/react-switch/
Make sure to turn on HighContrast mode from Windows, or emulate it in Chrome.
