[base-ui][Switch] Add missing role attribute (#40907)

Signed-off-by: Kirankumar Ambati <kiran.chinna12520@gmail.com> Co-authored-by: Michał Dudak <michal@mui.com>
mui · Feb 14, 2024 · fb3dfb0 · fb3dfb0
1 parent a8563ea
commit fb3dfb0
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 18 deletions.
diff --git 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(<Switch />);
 
       act(() => {
-        screen.getByRole('checkbox').click();
+        screen.getByRole('switch').click();
       });
 
       expect(handleChange.callCount).to.equal(1);
@@ -85,11 +85,11 @@ describe('useSwitch', () => {
         return <input {...getInputProps()} />;
       }
       render(<Switch />);
-      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
@@ -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
@@ -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
@@ -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
@@ -72,40 +72,40 @@ describe('<Switch />', () => {
     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(<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 On', () => {
     const { getByRole } = render(<Switch defaultChecked />);
 
-    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(<Switch disabled />);
 
-    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(<Switch readOnly />);
 
-    expect(getByRole('checkbox')).to.have.property('readOnly', true);
+    expect(getByRole('switch')).to.have.property('readOnly', true);
   });
 
   it('the Checked state changes after change events', () => {
     const { getByRole } = render(<Switch defaultChecked />);
 
     // 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('<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(getByText('On')).toBeVisible();
@@ -146,8 +146,8 @@ 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(getByText('On')).toBeVisible();