Skip to content

[switch] Add border to make it visible in high contrast mode #48180

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
silviuaavram merged 4 commits into from
Apr 6, 2026
+31 −0
Merged

[switch] Add border to make it visible in high contrast mode #48180

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1637e48
[switch] Add border to make it visible in high contrast mode
silviuaavram Apr 2, 2026
81c570a
add visual test
silviuaavram Apr 2, 2026
84aef8d
use AI suggestion
silviuaavram Apr 2, 2026
e942ea8
check the checked version too
silviuaavram Apr 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/mui-material/src/Switch/Switch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,8 @@ const SwitchTrack = styled('span', {
height: '100%',
width: '100%',
borderRadius: 14 / 2,
borderStyle: 'solid',
borderColor: 'transparent',
zIndex: -1,
Comment thread
silviuaavram marked this conversation as resolved.
transition: theme.transitions.create(['opacity', 'background-color'], {
duration: theme.transitions.duration.shortest,
Expand All @@ -213,6 +215,8 @@ const SwitchThumb = styled('span', {
memoTheme(({ theme }) => ({
boxShadow: (theme.vars || theme).shadows[1],
backgroundColor: 'currentColor',
borderStyle: 'solid',
borderColor: 'transparent',
Comment thread
silviuaavram marked this conversation as resolved.
Outdated
width: 20,
height: 20,
borderRadius: '50%',
Expand Down
7 changes: 7 additions & 0 deletions test/regressions/fixtures/Switch/SimpleSwitch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import Switch from '@mui/material/Switch';

const label = { slotProps: { input: { 'aria-label': 'Switch demo' } } };

export default function BasicSwitches() {
return <Switch {...label} />;
Copy link
Copy Markdown
Member

@mj12albert mj12albert Apr 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

<>
      <Switch {...label} />
      <Switch {...label} defaultChecked />
    </>

might as well screenshot both states ~

Copy link
Copy Markdown
Member

@siriwatknp siriwatknp Apr 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Member Author

@silviuaavram silviuaavram Apr 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Copy Markdown
Member

@siriwatknp siriwatknp Apr 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it, I did not know that the pattern exist. 👍

}
15 changes: 15 additions & 0 deletions test/regressions/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,21 @@ async function main() {
});
});

describe('Switch', () => {
it('should render standard variant correctly in forced-colors mode', async () => {
await page.emulateMedia({ forcedColors: 'active' });
try {
const testcase = await renderFixture('/regression-Switch/SimpleSwitch');
await takeScreenshot({
testcase,
route: '/regression-Switch/SimpleSwitchForcedColors',
});
} finally {
await page.emulateMedia({ forcedColors: 'none' });
}
});
});

describe('TextField', () => {
it('should render standard variant correctly in forced-colors mode', async () => {
await page.emulateMedia({ forcedColors: 'active' });
Expand Down
Loading