Support custom legend id in fieldset for FormGroup and RadioButtonGroup React components

Summary

For both the FormGroup and RadioButtonGroup React components, we need a way to supply a custom id to the legend, and it must correspond to the aria-labelledby attribute of the fieldset.

Justification

We have use cases in IBM Cloud UI which need this support to fully support screen readers.

“Must have” functionality

We have use cases in IBM Cloud UI where a settings dropdown menu is used in an extended version of the Carbon DataTable component. The settings menu has sections of radio buttons, check boxes, and a button.

We have fieldsets inside the settings menu, which need explicit hook up for the fieldset’s legend as its label, in order for screen readers to work properly.

We do this in 2 parts:

• add an id to the legend
• add aria-labelledby=[the unique legend id]

Currently, we can supply arbitrary prop to FormGroup, which is populated to the fieldset, but there is no way to supply custom attributes to legend (hence we cannot specify an id for the legend). As for RadioButtonGroup, there is no way to supply any custom attributes to fieldset or legend at all.

We need a way to supply and id to the legend, and it must correspond to the aria-labelledby attribute of the fieldset, for example:

Specific timeline issues / requests

We need this ASAP to close a11y issues around screen readers support.

[holmansze]

@emyarod - so the lengendId, if provided, corresponds to the legend’s id and fieldset’s aria-labelledby, correct? If yes it is perfect.

My only concern around autogenerating the id (as opposed to providing custom ones) is ensuring uniqueness of ids when there are multiple fieldset/legend on the page. The component itself doesn’t have the knowledge of the existence of other instances on the same page. If we expose custom id via prop, it is consumer’s responsibility to ensure uniqueness, which is possible because the consumer knows the instances of fieldset/legend on the page and can provide unique ids accordingly.

[emyarod]

@joshblack @holmansze I can autogenerate the id by default but the question is around exposing a prop to modify that id or if it’s controlled by the aria-labelledby prop. I added the legendId prop since it felt intuitive compared to providing an aria-labelledby without also setting the object label (like providing for on an input with no corresponding label). I don’t have a preference either way but interested in hearing more