[Bug]: Getting Accessibility error(AVT) for Radio button group without legendText.

[priyanka1304]

Package

carbon-components, carbon-components-react

Browser

Chrome

Package version

v7.50.0

React version

16.13.1

Description

1. Getting Accesibility error when radio button group is created with out legendText.

CodeSandbox example

https://codesandbox.io/s/sweet-moore-pydjy?file=/src/index.js

Steps to reproduce

To reproduce this error accessibility checker tool is required.
Screen shots are attached. Those can be refered.

Code of Conduct

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

[jnm2377]

Hi @priyanka1304 thanks for opening this. I can confirm I'm able to reproduce this AVT error even in our latest version. I think we have a few options:

1. make the prop legendText required
2. add a default value for legendText so that there's always a legend

@dakahn do you have any thoughts on this?

[priyanka1304]

Hi @priyanka1304 thanks for opening this. I can confirm I'm able to reproduce this AVT error even in our latest version. I think we have a few options:

1. make the prop legendText required
2. add a default value for legendText so that there's always a legend

@dakahn do you have any thoughts on this?

Thanks for reply. If I will give any value to legendText , then a "Radio button heading" will be shown in the UI. But we want to use the radio button group with out radio button heading. can you confirm it's possible or not?

[tw15egan]

We have a hideLabel prop for RadioButton that visually hides the label, but keeps it in the DOM for a11y purposes. We could probably add a similar hideLegend prop to RadioButtonGroup to resolve this issue.

[priyanka1304]

Thanks for the response. Can I know , is anyone working on this issue?

[tw15egan]

No one is currently working on this issue. @dakahn would this be a viable solution?

[TannerS]

hey Guys, found this issue and thought I would take a jab. i went off @tw15egan 's idea of the hideLegend prop idea. I mimiced other components on how they do this and tested and it appears to fix the a11y which I tested in the storybook. You just have to have a text in the legendText and pass the hideLegend prop.

Here is the PR: #10682

I am not sure if you guys wanna go this route or not, but let me know and I can change it up how ever you like

CC: @jnm2377

[priyanka1304]

Hi
I tried using hideLegend prop to hide the text in legendText, but it's not happening for me.
I used "carbon-components": "10.53.0",
"carbon-components-react": "7.53.0" versions.
Can you please tell me which version of carbon should be used for this. or any supporting library to be added.

[TannerS]

Hi I tried using hideLegend prop to hide the text in legendText, but it's not happening for me. I used "carbon-components": "10.53.0", "carbon-components-react": "7.53.0" versions. Can you please tell me which version of carbon should be used for this. or any supporting library to be added.

I think it's in that version, can you recreate it in a sandbox and I can take a look? If there's any bugs I can try a fix

[TannerS]

ah found it, @priyanka1304 it will be in the next version #10715

[tw15egan]

Thanks for fixing this @TannerS . As Tanner said, this will be included in the next release.