Radios which share a model should have the same name

[matteason]

Version

@nuxt/ui: 2.8.1

Reproduction Link

https://ui.nuxt.com/forms/radio

Steps to reproduce

1. Go to the radios documentation
2. Open a screen reader (eg NVDA)
3. Tab to the radio buttons
4. Hear the screen reader say 'Email radio button, not checked, 1 of 1'

What is Expected?

The screen reader should know that this is radio button 1 of 3

What is actually happening?

The screen reader thinks that each radio button is in its own group.

This is because the radios have separate names. In plain HTML, the name controls which radios are considered a group (ie turn the others off when one is selected). In Vue, the model ends up controlling which is on and which is off, but the name is still important for accessibility as assistive technologies like screen readers use it to determine which radios are grouped together.

This can be fixed easily in the docs by giving the radios the same name (eg 'contactmethod') but ideally it would be enforced by a wrapper component (eg URadioGroup) that takes a name prop and applies it to all child URadios. In my library govuk-vue I've done this with provide/inject, eg (https://github.com/govuk-vue/govuk-vue/blob/main/src/components/govuk-vue/radios/GvRadios.vue#L175 for the parent and https://github.com/govuk-vue/govuk-vue/blob/main/src/components/govuk-vue/radios/GvRadio.vue#L69 for the child)

[thedamon]

@benjamincanac I don't see the name attribute on any of the examples here: https://ui.nuxt.com/forms/radio-group
so the docs maybe should be updated to set a name in the examples?
Might also be cool to autogenerate a uid for the name when it isn't provided or mark the name prop required, since removing it from RadioGroup will make the result inaccessible