[base-ui][Switch] Add missing role attribute #40907
Conversation
Netlify deploy previewhttps://deploy-preview-40907--material-ui.netlify.app/ Bundle size reportDetails of bundle changes (Toolpad) |
| @@ -103,6 +103,9 @@ const Switch = React.forwardRef(function Switch<RootComponentType extends React. | |||
| elementType: Input, | |||
| getSlotProps: getInputProps, | |||
| externalSlotProps: slotProps.input, | |||
| additionalProps: { | |||
| role: 'switch', // Switch component should have the role "switch" to meet a11y guidelines | |||
There was a problem hiding this comment.
This should be applied directly in the JSX component, no?
There was a problem hiding this comment.
I tried adding the prop into useSwitch.getInputProps but useSwitch is being used by Radio, CheckBox along with Switch component. So, added it in additionalProps
There was a problem hiding this comment.
This should be returned by the hook.
There was a problem hiding this comment.
useSwitch hook is being consumed by Radio and Checkbox components, along with the Switch component. Adding role = switch to the hook returned value breaks those components. To make the hook work, we might have send another parameter to useSwitch, which I felt isnt an ideal solution. We have additionalProps, which came handy for the fix.
But, I'm open for suggestions.
There was a problem hiding this comment.
useSwitch hook is being consumed by Radio and Checkbox components,
This is a bit unfortunate (and temporary). I'd make the hook return the correct set of props for the Switch and override them if needed in Checkbox and Radio button.
We are going to add Checkbox and Radio Button to Base UI in the next batch of components (likely late Q2 or Q3 this year), so it won't be an issue anymore.
There was a problem hiding this comment.
Got it, thanks for the update @michaldudak! Made changes as per the discussion
Co-authored-by: Michał Dudak <michal.dudak@gmail.com> Signed-off-by: Kirankumar Ambati <kiran.chinna12520@gmail.com>
Co-authored-by: Michał Dudak <michal.dudak@gmail.com> Signed-off-by: Kirankumar Ambati <kiran.chinna12520@gmail.com>
|
@michaldudak the build step |
|
@michaldudak Triggered an empty build and pipeline is green now :) |
danilo-leal
added
the
component: switch
Done @michaldudak 👍 |
michaldudak
changed the title
|
Thanks for your contribution! |
Related to #40615
Changes in this PR:
Added the missing accessibility features for the
Switchcomponent anduseSwitchhook:roleshould beswitcharia-checkedattribute