From 0bc7854bfb21a4f1ed69ff5fd35ad1941b1833a4 Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Thu, 3 Jul 2025 18:43:30 +0530
Subject: [PATCH 1/3] Add role switch to Switch component

---
 packages/mui-material/src/Switch/Switch.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/mui-material/src/Switch/Switch.js b/packages/mui-material/src/Switch/Switch.js
index b882fbc50cb0f2..d7ad8b8790b043 100644
--- a/packages/mui-material/src/Switch/Switch.js
+++ b/packages/mui-material/src/Switch/Switch.js
@@ -300,6 +300,9 @@ const Switch = React.forwardRef(function Switch(inProps, ref) {
             input:
               typeof slotProps.input === 'function' ? slotProps.input(ownerState) : slotProps.input,
           }),
+          input: {
+            role: 'switch',
+          },
         }}
       />
       <TrackSlot {...trackSlotProps} />

From 4f42a8f3a73b366d550f9f354a70db184dff4de8 Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Thu, 3 Jul 2025 19:11:01 +0530
Subject: [PATCH 2/3] update docs

---
 docs/data/material/components/switches/switches.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/docs/data/material/components/switches/switches.md b/docs/data/material/components/switches/switches.md
index f64ca8f1aceeff..5a00651b17db63 100644
--- a/docs/data/material/components/switches/switches.md
+++ b/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.

From c2b4f83ff1966ddb2c6393d6a27cee27a4379729 Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Thu, 3 Jul 2025 20:07:44 +0530
Subject: [PATCH 3/3] make tests pass

---
 packages/mui-material/src/Switch/Switch.js    |  6 ++---
 .../mui-material/src/Switch/Switch.test.js    | 26 +++++++++----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/mui-material/src/Switch/Switch.js b/packages/mui-material/src/Switch/Switch.js
index d7ad8b8790b043..5a7847d1f13b6f 100644
--- a/packages/mui-material/src/Switch/Switch.js
+++ b/packages/mui-material/src/Switch/Switch.js
@@ -296,13 +296,13 @@ 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,
           }),
-          input: {
-            role: 'switch',
-          },
         }}
       />
       <TrackSlot {...trackSlotProps} />
diff --git a/packages/mui-material/src/Switch/Switch.test.js b/packages/mui-material/src/Switch/Switch.test.js
index aa41d4229862f6..cf89417312fe2a 100644
--- a/packages/mui-material/src/Switch/Switch.test.js
+++ b/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');
       });
     });
   });