diff --git a/packages/mui-base/src/useSwitch/useSwitch.test.tsx b/packages/mui-base/src/useSwitch/useSwitch.test.tsx
index 0414f65ba3d0c2..49fef25599635a 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.test.tsx
+++ b/packages/mui-base/src/useSwitch/useSwitch.test.tsx
@@ -65,7 +65,7 @@ describe('useSwitch', () => {
render();
act(() => {
- screen.getByRole('checkbox').click();
+ screen.getByRole('switch').click();
});
expect(handleChange.callCount).to.equal(1);
@@ -85,11 +85,11 @@ describe('useSwitch', () => {
return ;
}
render();
- const checkbox = screen.getByRole('checkbox');
+ const switchElement = screen.getByRole('switch');
simulatePointerDevice();
act(() => {
- checkbox.focus();
+ switchElement.focus();
});
expect(handleBlur.callCount).to.equal(0);
@@ -99,7 +99,7 @@ describe('useSwitch', () => {
);
act(() => {
- checkbox.blur();
+ switchElement.blur();
});
expect(handleBlur.callCount).to.equal(1);
@@ -108,7 +108,7 @@ describe('useSwitch', () => {
programmaticFocusTriggersFocusVisible() ? 1 : 0,
);
- focusVisible(checkbox);
+ focusVisible(switchElement);
expect(handleBlur.callCount).to.equal(1);
expect(handleFocus.callCount).to.equal(2);
diff --git a/packages/mui-base/src/useSwitch/useSwitch.ts b/packages/mui-base/src/useSwitch/useSwitch.ts
index f6a0377a4a1e3a..58cb3b7d7d54d3 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.ts
+++ b/packages/mui-base/src/useSwitch/useSwitch.ts
@@ -110,6 +110,8 @@ export function useSwitch(props: UseSwitchParameters): UseSwitchReturnValue {
ref: handleInputRef,
required,
type: 'checkbox',
+ role: 'switch',
+ 'aria-checked': checkedProp,
...otherProps,
onChange: createHandleInputChange(otherProps),
onFocus: createHandleFocus(otherProps),
diff --git a/packages/mui-joy/src/Checkbox/Checkbox.tsx b/packages/mui-joy/src/Checkbox/Checkbox.tsx
index 82992ee77d3943..78f44f65f592e9 100644
--- a/packages/mui-joy/src/Checkbox/Checkbox.tsx
+++ b/packages/mui-joy/src/Checkbox/Checkbox.tsx
@@ -322,6 +322,7 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
name,
value,
readOnly,
+ role: undefined,
required: required ?? formControl?.required,
'aria-describedby': formControl?.['aria-describedby'],
...(indeterminate && {
diff --git a/packages/mui-joy/src/Radio/Radio.tsx b/packages/mui-joy/src/Radio/Radio.tsx
index 100b84c8edfeca..70207ef81727a6 100644
--- a/packages/mui-joy/src/Radio/Radio.tsx
+++ b/packages/mui-joy/src/Radio/Radio.tsx
@@ -369,6 +369,7 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
const [SlotInput, inputProps] = useSlot('input', {
additionalProps: {
type: 'radio',
+ role: undefined,
id,
name,
readOnly,
diff --git a/packages/mui-joy/src/Switch/Switch.test.tsx b/packages/mui-joy/src/Switch/Switch.test.tsx
index 7516d4b6fbe5e7..d5d316fc154de1 100644
--- a/packages/mui-joy/src/Switch/Switch.test.tsx
+++ b/packages/mui-joy/src/Switch/Switch.test.tsx
@@ -72,28 +72,28 @@ describe('', () => {
expect(switchComponent.childNodes[0]).to.have.class(classes.track);
});
- it('renders a `role="checkbox"` with the Unchecked state by default', () => {
+ it('renders a `role="switch"` with the Off state by default', () => {
const { getByRole } = render();
- expect(getByRole('checkbox')).to.have.property('checked', false);
+ expect(getByRole('switch')).to.have.property('checked', false);
});
- it('renders a checkbox with the Checked state when checked', () => {
+ it('renders a switch with the Checked state when On', () => {
const { getByRole } = render();
- expect(getByRole('checkbox')).to.have.property('checked', true);
+ expect(getByRole('switch')).to.have.property('checked', true);
});
it('the switch can be disabled', () => {
const { getByRole } = render();
- expect(getByRole('checkbox')).to.have.property('disabled', true);
+ expect(getByRole('switch')).to.have.property('disabled', true);
});
it('the switch can be readonly', () => {
const { getByRole } = render();
- expect(getByRole('checkbox')).to.have.property('readOnly', true);
+ expect(getByRole('switch')).to.have.property('readOnly', true);
});
it('the Checked state changes after change events', () => {
@@ -101,11 +101,11 @@ describe('', () => {
// how a user would trigger it
act(() => {
- getByRole('checkbox').click();
- fireEvent.change(getByRole('checkbox'), { target: { checked: '' } });
+ getByRole('switch').click();
+ fireEvent.change(getByRole('switch'), { target: { checked: '' } });
});
- expect(getByRole('checkbox')).to.have.property('checked', false);
+ expect(getByRole('switch')).to.have.property('checked', false);
});
describe('decorator', () => {
@@ -130,8 +130,8 @@ describe('', () => {
// how a user would trigger it
act(() => {
- getByRole('checkbox').click();
- fireEvent.change(getByRole('checkbox'), { target: { checked: '' } });
+ getByRole('switch').click();
+ fireEvent.change(getByRole('switch'), { target: { checked: '' } });
});
expect(getByText('On')).toBeVisible();
@@ -146,8 +146,8 @@ describe('', () => {
// how a user would trigger it
act(() => {
- getByRole('checkbox').click();
- fireEvent.change(getByRole('checkbox'), { target: { checked: '' } });
+ getByRole('switch').click();
+ fireEvent.change(getByRole('switch'), { target: { checked: '' } });
});
expect(getByText('On')).toBeVisible();