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();