[Switch] Add role="switch" (#46482)

Author: ZeeshanTamboli

docs/data/material/components/switches/switches.md

@@ -71,10 +71,6 @@ You can change the placement of the label:
 
 ## Accessibility
 
-- It will render an element with the `checkbox` role not `switch` role since this
-  role isn't widely supported yet. Please test first if assistive technology of your
-  target audience supports this role properly. Then you can change the role with
-  `<Switch inputProps={{ role: 'switch' }}>`
 - All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the `<label>` element ([FormControlLabel](/material-ui/api/form-control-label/)).
 - When a label can't be used, it's necessary to add an attribute directly to the input component.
   In this case, you can apply the additional attribute (for example `aria-label`, `aria-labelledby`, `title`) via the `inputProps` prop.

packages/mui-material/src/Switch/Switch.js

@@ -296,6 +296,9 @@ const Switch = React.forwardRef(function Switch(inProps, ref) {
                 ? slotProps.switchBase(ownerState)
                 : slotProps.switchBase,
           }),
+          input: {
+            role: 'switch',
+          },
           ...(slotProps.input && {
             input:
               typeof slotProps.input === 'function' ? slotProps.input(ownerState) : slotProps.input,

packages/mui-material/src/Switch/Switch.test.js

@@ -74,28 +74,28 @@ describe('<Switch />', () => {
     expect(root.childNodes[1]).to.have.class(classes.track);
   });
 
-  it('renders a `role="checkbox"` with the Unchecked state by default', () => {
+  it('renders a `role="switch"` with the Unchecked state by default', () => {
     const { getByRole } = render(<Switch />);
 
-    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 checked', () => {
     const { getByRole } = render(<Switch defaultChecked />);
 
-    expect(getByRole('checkbox')).to.have.property('checked', true);
+    expect(getByRole('switch')).to.have.property('checked', true);
   });
 
   specify('the switch can be disabled', () => {
     const { getByRole } = render(<Switch disabled />);
 
-    expect(getByRole('checkbox')).to.have.property('disabled', true);
+    expect(getByRole('switch')).to.have.property('disabled', true);
   });
 
   specify('the switch can be readonly', () => {
     const { getByRole } = render(<Switch readOnly />);
 
-    expect(getByRole('checkbox')).to.have.property('readOnly', true);
+    expect(getByRole('switch')).to.have.property('readOnly', true);
   });
 
   specify('renders a custom icon when provided', () => {
@@ -117,11 +117,11 @@ describe('<Switch />', () => {
 
     // 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);
   });
 
   it('should not show warnings when custom `type` is provided', () => {
@@ -137,7 +137,7 @@ describe('<Switch />', () => {
           </FormControl>,
         );
 
-        expect(getByRole('checkbox')).not.to.have.attribute('disabled');
+        expect(getByRole('switch')).not.to.have.attribute('disabled');
       });
 
       it('should be overridden by props', () => {
@@ -147,7 +147,7 @@ describe('<Switch />', () => {
           </FormControl>,
         );
 
-        expect(getByRole('checkbox')).to.have.attribute('disabled');
+        expect(getByRole('switch')).to.have.attribute('disabled');
       });
     });
 
@@ -159,7 +159,7 @@ describe('<Switch />', () => {
           </FormControl>,
         );
 
-        expect(getByRole('checkbox')).to.have.attribute('disabled');
+        expect(getByRole('switch')).to.have.attribute('disabled');
       });
 
       it('should be overridden by props', () => {
@@ -169,7 +169,7 @@ describe('<Switch />', () => {
           </FormControl>,
         );
 
-        expect(getByRole('checkbox')).not.to.have.attribute('disabled');
+        expect(getByRole('switch')).not.to.have.attribute('disabled');
       });
     });
   });