Missing doc in radiobutton can lead to accessibility problems

[carmacleod]

1. Go to the doc for RadioButtonGroup: https://react.carbondesignsystem.com/?path=/docs/radiobuttongroup--default
2. Look for the "legend" prop - it's not there
   • authors need to either provide a legend for the fieldset, or use aria-labelledby to point to the id of a labelling element. (or, if they really want an invisible label, they could use aria-label). Any of those 3 methods will give the fieldset an accessible name, which is required for fieldset.
   • also, https://www.carbondesignsystem.com/components/radio-button/accessibility#accessibility-considerations should mention legend
   • Edit: Or maybe there isn't a legend prop for RadioButtonGroup (?), so it should be deleted from the sample code? See Missing doc in radiobutton can lead to accessibility problems #6829 (comment) below.
3. Go back to https://react.carbondesignsystem.com/?path=/docs/radiobuttongroup--default
4. Click on the RadioButton docs tab to see what props it supports - there aren't any: "No props found for this component"
   • it's important to mention value here
   • might also want to mention that id will be generated if not provided (might want to mention that in a lot of places, or point to a common place in the doc where this is described) (id is important for accessibility here, because it hooks up the for attribute of the label so that it is programmatically associated with the radio).
5. Go to https://www.carbondesignsystem.com/components/radio-button/code
6. Open a code sandbox
7. Remove the <FormGroup> and </FormGroup> so that you are just left with the <RadioButtonGroup>
   • run the AccessibilityChecker and note the violations for "Radio input and others with the name "radio-button-group" are not grouped together"
   • now look at the generated DOM, and notice that there's no fieldset generated? Also, no legend? (even though there's a legend prop on the RadioButtonGroup?)
   • if this "FormGroup" is a required parent in order for a RadioButtonGroup to work accessibly, then the documentation needs to say so (i.e. not just having it in the example code). Authors could easily decide to delete the FormGroup, thinking that the RadioButtonGroup alone will generate the fieldset and legend. It is not clear why this parent is needed.

[carmacleod]

After playing with the sandbox a bit more, it seems that only the FormGroup legend is used? The legend prop on the RadioButtonGroup is not used? Why is it in the sample code?

Bottom line is this: All doc related to RadioButtons, RadioButtonGroups and FormGroups needs to be fixed up in all the places, and have more detail added about what parts are needed for this whole construct to be accessible.

[Edit: The API designers should probably take a good hard look at why RadioButtonGroup doesn't generate a fieldset and set the fieldset's legend... i.e. maybe instead of deleting the RadioButtonGroup's legend from the sample code, Carbon should support it on RadioButtonGroup, not require a FormGroup parent for a stand-alone RadioButtonGroup, and generate the fieldset with the RadioButtonGroup legend. If an author has a FormGroup parent with only a single RadioButtonGroup child, then you don't need to generate 2 nested fieldsets... so either need to collapse them into one fieldset using one of the legends, or document that authors shouldn't do that. DM me if this needs clarification.]