From 85aedd92ed9479610138fb8527bb0ba9a11b7ede Mon Sep 17 00:00:00 2001 From: KirankumarAmbati Date: Sat, 3 Feb 2024 19:02:46 +0530 Subject: [PATCH 1/9] [base-ui][Switch] Missing accessibility features --- packages/mui-base/src/useSwitch/useSwitch.ts | 2 ++ 1 file changed, 2 insertions(+) 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), From 354030ffab265b75b6905df431cccbb571c40a95 Mon Sep 17 00:00:00 2001 From: KirankumarAmbati Date: Sat, 3 Feb 2024 22:27:38 +0530 Subject: [PATCH 2/9] [base-ui][Switch] fixed failing test --- packages/mui-base/src/useSwitch/useSwitch.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-base/src/useSwitch/useSwitch.test.tsx b/packages/mui-base/src/useSwitch/useSwitch.test.tsx index 0414f65ba3d0c2..3f017089951e40 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,7 +85,7 @@ describe('useSwitch', () => { return ; } render(); - const checkbox = screen.getByRole('checkbox'); + const checkbox = screen.getByRole('switch'); simulatePointerDevice(); act(() => { From 563362673fa1c8c95db9643f09c0d91c347cb244 Mon Sep 17 00:00:00 2001 From: KirankumarAmbati Date: Sat, 3 Feb 2024 23:46:48 +0530 Subject: [PATCH 3/9] [base-ui][Switch] fixed failing tests --- packages/mui-base/src/Switch/Switch.tsx | 3 +++ packages/mui-base/src/useSwitch/useSwitch.ts | 1 - 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/mui-base/src/Switch/Switch.tsx b/packages/mui-base/src/Switch/Switch.tsx index 45997114e825d8..6ab2a6dce39125 100644 --- a/packages/mui-base/src/Switch/Switch.tsx +++ b/packages/mui-base/src/Switch/Switch.tsx @@ -103,6 +103,9 @@ const Switch = React.forwardRef(function Switch Date: Sun, 4 Feb 2024 00:00:41 +0530 Subject: [PATCH 4/9] [base-ui][Switch] undo test changes --- packages/mui-base/src/useSwitch/useSwitch.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-base/src/useSwitch/useSwitch.test.tsx b/packages/mui-base/src/useSwitch/useSwitch.test.tsx index 3f017089951e40..0414f65ba3d0c2 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('switch').click(); + screen.getByRole('checkbox').click(); }); expect(handleChange.callCount).to.equal(1); @@ -85,7 +85,7 @@ describe('useSwitch', () => { return ; } render(); - const checkbox = screen.getByRole('switch'); + const checkbox = screen.getByRole('checkbox'); simulatePointerDevice(); act(() => { From b6b08cf913be10595f2736f54988d54e70698d03 Mon Sep 17 00:00:00 2001 From: KirankumarAmbati Date: Thu, 8 Feb 2024 16:58:40 +0530 Subject: [PATCH 5/9] [base-ui][Switch] changes to return role from hook --- packages/mui-base/src/Switch/Switch.tsx | 3 --- packages/mui-base/src/useSwitch/useSwitch.ts | 1 + packages/mui-joy/src/Checkbox/Checkbox.tsx | 1 + packages/mui-joy/src/Radio/Radio.tsx | 1 + 4 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mui-base/src/Switch/Switch.tsx b/packages/mui-base/src/Switch/Switch.tsx index 6ab2a6dce39125..45997114e825d8 100644 --- a/packages/mui-base/src/Switch/Switch.tsx +++ b/packages/mui-base/src/Switch/Switch.tsx @@ -103,9 +103,6 @@ const Switch = React.forwardRef(function Switch Date: Thu, 8 Feb 2024 18:38:10 +0530 Subject: [PATCH 6/9] [base-ui][Switch] fixed tests --- .../mui-base/src/useSwitch/useSwitch.test.tsx | 10 +++---- packages/mui-joy/src/Switch/Switch.test.tsx | 26 +++++++++---------- 2 files changed, 18 insertions(+), 18 deletions(-) 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-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(); From 085f8e4f009f1e83d79e8e98680b3f225c70e6bd Mon Sep 17 00:00:00 2001 From: Kirankumar Ambati Date: Fri, 9 Feb 2024 19:04:47 +0530 Subject: [PATCH 7/9] Update packages/mui-joy/src/Checkbox/Checkbox.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michał Dudak Signed-off-by: Kirankumar Ambati --- packages/mui-joy/src/Checkbox/Checkbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-joy/src/Checkbox/Checkbox.tsx b/packages/mui-joy/src/Checkbox/Checkbox.tsx index eaabf698cdb8fd..78f44f65f592e9 100644 --- a/packages/mui-joy/src/Checkbox/Checkbox.tsx +++ b/packages/mui-joy/src/Checkbox/Checkbox.tsx @@ -322,7 +322,7 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) { name, value, readOnly, - role: 'checkbox', + role: undefined, required: required ?? formControl?.required, 'aria-describedby': formControl?.['aria-describedby'], ...(indeterminate && { From a54f2624184a744364952fe657a4dec88138fe49 Mon Sep 17 00:00:00 2001 From: Kirankumar Ambati Date: Fri, 9 Feb 2024 19:04:59 +0530 Subject: [PATCH 8/9] Update packages/mui-joy/src/Radio/Radio.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michał Dudak Signed-off-by: Kirankumar Ambati --- packages/mui-joy/src/Radio/Radio.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-joy/src/Radio/Radio.tsx b/packages/mui-joy/src/Radio/Radio.tsx index 68a9bae3d7715a..70207ef81727a6 100644 --- a/packages/mui-joy/src/Radio/Radio.tsx +++ b/packages/mui-joy/src/Radio/Radio.tsx @@ -369,7 +369,7 @@ const Radio = React.forwardRef(function Radio(inProps, ref) { const [SlotInput, inputProps] = useSlot('input', { additionalProps: { type: 'radio', - role: 'radio', + role: undefined, id, name, readOnly, From 8f4894c4f3a586cc721a477b79721c0f0d85b754 Mon Sep 17 00:00:00 2001 From: KirankumarAmbati Date: Sat, 10 Feb 2024 19:25:00 +0530 Subject: [PATCH 9/9] Trigger Build