Merge pull request #886 from dnum-mi/develop

Develop

Author: laruiss

demo-app/views/AppForm.vue

@@ -38,7 +38,7 @@ const radioTest = ref('')
     <div>
       <DsfrRadioButtonSet
         v-model="radioTest"
-        legend="Légende des boutons radio"
+        legend="Légende des boutons radio dans la prop"
         name="radio-123aui"
         :options="[
           {
@@ -52,6 +52,25 @@ const radioTest = ref('')
           },
         ]"
       />
+      <DsfrRadioButtonSet
+        v-model="radioTest"
+        name="radio-123aui"
+        :options="[
+          {
+            label: 'label 1',
+            value: 1,
+            required: true,
+          },
+          {
+            label: 'label 2',
+            value: 2,
+          },
+        ]"
+      >
+        <template #legend>
+          Légende des boutons radio dans le slot
+        </template>
+      </DsfrRadioButtonSet>
     </div>
     <DsfrButton
       type="submit"

src/components/DsfrRadioButton/DsfrRadioButtonSet.vue

@@ -27,6 +27,8 @@ const onChange = ($event: string) => {
   }
   emit('update:modelValue', $event)
 }
+
+const ariaLabelledby = computed(() => message.value ? `${props.titleId} messages-${props.titleId}` : props.titleId)
 </script>
 
 <template>
@@ -38,11 +40,11 @@ const onChange = ($event: string) => {
         'fr-fieldset--valid': validMessage,
       }"
       :disabled="disabled"
-      :aria-labelledby="`${titleId} messages-${titleId}`"
+      :aria-labelledby="ariaLabelledby"
       :role="(errorMessage || validMessage) ? 'group' : undefined"
     >
       <legend
-        v-if="legend"
+        v-if="legend || $slots.legend"
         :id="titleId"
         class="fr-fieldset__legend fr-fieldset__legend--regular"
       >