[a11y]: RadioButtonGroup <fieldset> element does not have a <legend>

[curtispd]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

10.58.4

React version

16.14.0

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker, Latest Deployment, IBM Accessibility

Assistive technology

No response

Description

Accessibility findings

elements must have a single, non-empty as a label element does not have a

WCAG 2.1 Violation

1.3.1 Info and Relationships

Reproduction/example

https://carbondesignsystem.com/components/radio-button/usage/

Steps to reproduce

1. Open https://carbondesignsystem.com/components/radio-button/usage/
2. Run accessibility scan

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tw15egan]

This seems like it is isolated to the website example only, the storybook example does not throw this a11y violation: https://react.carbondesignsystem.com/iframe.html?args=&id=components-radiobutton--default&viewMode=story

[curtispd]

You're right. I don't see the inner fieldset on your link. I'm using Carbon 10 on my page and it shows the same issue as the website example.

[tw15egan]

The latest release of v10 does not seem to have this extra fieldset element...

Oh, I think I see the issue (on the website, at least). The RadioButtonGroup prop should be legendText not legend. It also has a redundant FormGroup wrapped around it. This could probably be removed.

[curtispd]

It seems the component I'm using (which uses RadioButtonGroup) was done following the website example so it has the legendText on the wrapping FormGroup but not on the RadioButtonGroup. So it's an issue in docs/usage rather than the component itself. Thanks !

[tw15egan]

Correct, @curtispd. I've put up a PR to fix this on the website if you want to check it out. Sorry for the confusion 😅