fix(a11y): associate group label with radio buttons #1784
Conversation
- Replaced the `div` with a `fieldset` element to semantically group radio buttons. - Added a `legend` element containing the `groupLabel` to serve as the group label. - Ensured that the `groupLabel` is properly associated with its group of radio buttons for improved accessibility compliance. - Updated the component's props to include `groupLabel` for specifying the group label. - Applied necessary styling to ensure the `fieldset` and `legend` elements integrate seamlessly with existing styles. Closes: #4498
|
This pull request is automatically being deployed by Amplify Hosting (learn more). |
There was a problem hiding this comment.
What change is this referencing? This is introducing a breaking change with the introduction of a required prop and is not documented as such. Any breaking changes must go through a RFC (request for comments) and have a minimum period of 2 months before we can introduce the change.
The documented pattern for RadioGroup shows the current expected pattern for this component to be used:
<div className="Field__label" id="pizza-label">Do you like pizza?</div>
<RadioGroup
aria-labelledby="pizza-label"
defaultValue="tuesday"
name="pizza"
radios={[ ...items ]}
/>…r aria-labelledby • Updated RadioGroup component to display groupLabel within the <legend> element. • If groupLabel is omitted, the component now requires either aria-label or aria-labelledby to ensure the radio group is properly labeled for accessibility. • Updated the MDX documentation to reflect these changes and provide clear usage examples. Closes: #4498
|
@andresdeque I hid your comment because it contains proprietary information that shouldn't be made public. Please note, Cauldron is a public repo so we must take care we're not distributing internal information. As per your comment, this is not a change we can currently make in Cauldron. The change must be made in the product utilizing the existing documentation provided in Cauldron. As such, I'm closing this PR. |
divwith afieldsetelement to semantically group radio buttons.legendelement containing thegroupLabelto serve as the group label.groupLabelis properly associated with its group of radio buttons for improved accessibility compliance.groupLabelfor specifying the group label.fieldsetandlegendelements integrate seamlessly with existing styles.Closes: #4498