Merge pull request #456 from ambroisemaupate/fix/radio-checkbox-set

fix(DsfrRadioButtonSet|DsfrCheckboxSet): Wrong fr-fieldset__content class leading to bad items margins

Author: laruiss

src/components/DsfrCheckbox/DsfrCheckbox.e2e.js

@@ -143,7 +143,7 @@ describe('DsfrCheckboxSet', () => {
       .should('be.visible')
       .should('contain', legend)
       .get('.fr-fieldset')
-      .find('.fr-fieldset__element')
+      .find('.fr-fieldset__content')
       .should('be.visible')
       .get('.fr-fieldset')
       .find('fr-message--info')
@@ -238,7 +238,7 @@ describe('DsfrCheckboxSet', () => {
       .should('be.visible')
       .should('contain', legend)
       .get('.fr-fieldset')
-      .find('.fr-fieldset__element')
+      .find('.fr-fieldset__content')
       .should('be.visible')
       .get('.fr-fieldset')
       .find('.fr-message--info')
@@ -334,7 +334,7 @@ describe('DsfrCheckboxSet', () => {
       .should('be.visible')
       .should('contain', legend)
       .get('.fr-fieldset')
-      .find('.fr-fieldset__element')
+      .find('.fr-fieldset__content')
       .should('be.visible')
       .get('.fr-fieldset')
       .find('.fr-message--info')

src/components/DsfrCheckbox/DsfrCheckboxSet.spec.js

@@ -128,7 +128,7 @@ describe('DsfrCheckboxSet', () => {
       props: {
       },
     })
-    const checkboxes = container.querySelector('.fr-fieldset__element')
+    const checkboxes = container.querySelector('.fr-fieldset__content')
 
     // Then
     expect(checkboxes.firstElementChild).toBe(null)

src/components/DsfrCheckbox/DsfrCheckboxSet.vue

@@ -93,7 +93,7 @@ export default defineComponent({
         </slot>
       </legend>
       <div
-        class="fr-fieldset__element"
+        class="fr-fieldset__content"
         role="group"
         :aria-labelledby="titleId"
       >

src/components/DsfrRadioButton/DsfrRadioButtonSet.vue

@@ -3,6 +3,7 @@
 import { defineComponent } from 'vue'
 
 import DsfrRadioButton from './DsfrRadioButton.vue'
+import { getRandomId } from '../../utils/random-utils.js'
 
 export default defineComponent({
   name: 'DsfrRadioButtonSet',
@@ -12,6 +13,12 @@ export default defineComponent({
   },
 
   props: {
+    titleId: {
+      type: String,
+      default () {
+        return getRandomId('radio-button', 'group')
+      },
+    },
     disabled: Boolean,
     inline: Boolean,
     required: Boolean,
@@ -79,8 +86,8 @@ export default defineComponent({
     >
       <legend
         v-if="legend"
-        id="radio-legend"
-        class="fr-fieldset__legend"
+        :id="titleId"
+        class="fr-fieldset__legend fr-text--regular"
       >
         <!-- @slot Slot pour personnaliser tout le contenu de la balise <legend> cf. [DsfrInput](/?path=/story/composants-champ-de-saisie-champ-simple-dsfrinput--champ-avec-label-personnalise). Une **props porte le même nom pour une légende simple** (texte sans mise en forme) -->
         <slot name="legend">
@@ -96,7 +103,7 @@ export default defineComponent({
       </legend>
 
       <div
-        class="fr-fieldset__element"
+        class="fr-fieldset__content"
         role="radiogroup"
       >
         <DsfrRadioButton