fix: ♿ Corrige des oublis pour a11y

Author: laruiss

src/components/DsfrRadioButton/DsfrRadioButton.stories.js

@@ -33,13 +33,9 @@ export const RadioButton = (args, { argTypes }) => ({
   template: `
     <div :data-rf-theme="dark ? 'dark' : ''" style="background-color: var(--w); padding: 1rem;">
       <DsfrRadioButton
-        v-for="option in options"
-        :key="option.value"
-        :label="option.label"
-        :disabled="option.disabled"
+        v-for="option of options"
         :modelValue="modelValue"
-        :value="option.value"
-        :hint="option.hint"
+        v-bind="option"
         @update:modelValue="updateCheckedValue($event)"
       />
     </div>
@@ -62,16 +58,19 @@ RadioButton.args = {
       label: 'Valeur 1',
       value: '1',
       hint: 'Description 1',
+      name: 'Choix',
     },
     {
       label: 'Valeur 2',
       value: '2',
       disabled: true,
       hint: 'Description 2',
+      name: 'Choix',
     },
     {
       label: 'Valeur 3',
       value: '3',
+      name: 'Choix',
     },
   ],
 }

src/components/DsfrRadioButton/DsfrRadioButton.vue

@@ -3,8 +3,11 @@
     <input
       :id="id"
       type="radio"
+      role="radio"
+      :name="name"
       :value="value"
       :checked="modelValue === value"
+      :aria-checked="modelValue === value"
       :disabled="disabled"
       @click="$emit('update:modelValue', value)"
     >
@@ -37,6 +40,10 @@ export default defineComponent({
         return getRandomId('basic', 'checkbox')
       },
     },
+    name: {
+      type: String,
+      required: true,
+    },
     modelValue: {
       type: [String, Number],
       default: '',

src/components/DsfrRadioButton/DsfrRadioButtonSet.e2e.js

@@ -0,0 +1,50 @@
+import { mount } from '@cypress/vue'
+import DsfrRadioButtonSet from './DsfrRadioButtonSet.vue'
+import VIcon from '../../icons.js'
+
+import '../../main.css'
+
+describe('DsfrRadioButtonSet', () => {
+  it('should mount Tabs', () => {
+    mount(DsfrRadioButtonSet, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
+      props: {
+        legend: 'Légende des champs',
+        selectedValue: 1,
+        inline: false,
+        modelValue: '1',
+        name: 'radiobuttonset',
+        options: [
+          {
+            label: 'Valeur 1',
+            value: '1',
+            hint: 'Description 1',
+          },
+          {
+            label: 'Valeur 2',
+            value: '2',
+            disabled: true,
+            hint: 'Description 2',
+          },
+          {
+            label: 'Valeur 3',
+            value: '3',
+          },
+        ],
+      },
+    })
+
+    cy.tab()
+      .type(' ')
+      .get('.fr-radio-group:first-child input')
+      .should('have.focus')
+      // .click()
+      .type('{rightArrow}')
+      .get('.fr-radio-group:nth-child(3) input')
+      .should('have.focus')
+  })
+})

src/components/DsfrRadioButton/DsfrRadioButtonSet.spec.js

@@ -11,7 +11,7 @@ describe('DsfrRadioButtonSet', () => {
     const selectedValue = 1
 
     // When
-    const { getByText } = render(RadioButtonSet, {
+    const { getByText, getByRole } = render(RadioButtonSet, {
       global: {
         components: {
           VIcon,
@@ -23,6 +23,7 @@ describe('DsfrRadioButtonSet', () => {
       },
     })
 
+    getByRole('radiogroup')
     const legendEl = getByText(legend)
 
     // Then

src/components/DsfrRadioButton/DsfrRadioButtonSet.stories.js

@@ -50,6 +50,7 @@ export const RadioButtonSet = (args) => ({
     <DsfrRadioButtonSet
       :legend="legend"
       v-model="selectedValue"
+      name="radio-set"
       :options="options"
       :inline="inline"
       @update:model-value="onChange"
@@ -90,6 +91,7 @@ export const RadioButtonSetInError = (args) => ({
     <DsfrRadioButtonSet
       :legend="legend"
       v-model="selectedValue"
+      name="radio-errors"
       :options="options"
       :disabled="disabled"
       :error-message="error"
@@ -135,6 +137,7 @@ export const RadioButtonSetInSuccess = (args) => ({
     <DsfrRadioButtonSet
       :legend="legend"
       v-model="selectedValue"
+      name="radio-success"
       :options="options"
       :disabled="disabled"
       :valid-message="validMessage"
@@ -180,6 +183,7 @@ export const RadioButtonSetDisabled = (args) => ({
     <DsfrRadioButtonSet
       :legend="legend"
       v-model="selectedValue"
+      name="radio-disabled"
       :options="options"
       :disabled="disabled"
       :inline="inline"
@@ -222,6 +226,7 @@ export const RadioButtonSetInline = (args) => ({
     <DsfrRadioButtonSet
       :legend="legend"
       v-model="selectedValue"
+      name="radio-inline"
       :options="options"
       :disabled="disabled"
       :inline="inline"

src/components/DsfrRadioButton/DsfrRadioButtonSet.vue

@@ -17,10 +17,14 @@
         {{ legend }}
       </legend>
 
-      <div class="fr-fieldset__content">
+      <div
+        class="fr-fieldset__content"
+        role="radiogroup"
+      >
         <DsfrRadioButton
-          v-for="option in options"
+          v-for="option of options"
           :key="option.value"
+          :name="name"
           v-bind="option"
           @update:modelValue="onChange"
         />
@@ -50,6 +54,10 @@ export default {
   props: {
     disabled: Boolean,
     inline: Boolean,
+    name: {
+      type: String,
+      default: 'no-name',
+    },
     errorMessage: {
       type: String,
       default: '',