CED-1815 Fix accessibility issue in v3 EsRadioButton

[tomleo]

🔗 Linked issue

• https://energysage.atlassian.net/browse/CED-1815

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

• Renamed EsRadioButton to EsRadioInput as there's no buttons involved with this component. The odd naming is an artifact of the radio component it's wrapping PrimeVue RadioButton
• Added a EsRadioInputGroup component to match how we've been using b-form-radio-group see JIRA for comtext
• Wrapped all EsRadioInput examples in EsRadioInputGroup components to ensure fieldset & legend are present (for a11y reasons)

🥼 Testing

• Manual

🧐 Feedback Requested / Focus Areas

• When going through implementation usage across downstream repos, we make heavy use of b-form-group as well. I started to implement a similar component, but that seemed out-of-scope for this. Something we may want to implement down the line though.
• I removed the area-labledby prop present in the bootstrap-vue's radio-input-group, based on a11y documentation https://www.w3.org/WAI/tutorials/forms/grouping/#radio-buttons I think the fieldset should be the proper way to handle this.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.
• I have documented testing approach

[ericdouglaspratt]

Radio button is a pretty standard name across the entire industry (Wikipedia) that has a specific etymology. It's also called that in the ESDS 2.0 Figma.

I'd recommend keeping the name, at least on the docs site and in the UI.

[tomleo]

Radio button is a pretty standard name across the entire industry (Wikipedia) that has a specific etymology. It's also called that in the ESDS 2.0 Figma.

I'd recommend keeping the name, at least on the docs site and in the UI.

Oh weird, bootstrap seems to follow the actual markup input type="radio" with their naming convention of b-form-radio, but aligning with Figma is probably most important. I'll revert back.

[hroth1994]

A few comments on the documentation

[hroth1994]

Seeing that the linting check is failing (maybe eslint and prettier are fighting?) but otherwise LGTM! 🌟