Fieldset et Checkbox / RadioButtonGroup

[Chanizo]

Bonjour,
Nous sommes en train de créer un formulaire de création de compte avec react-dsfr, et on se posait une question sur les fieldset.
En gros nous souhaitons grouper différents champs avec des fieldsets (par exemple un input pour les prénoms + une case à cocher si la personne n'a pas de prénom etc.). Sauf qu'en arrivant au niveau des checkbox et des RadioButtonGroup, on se rend compte que l'implémentation actuelle de ces composants du react-dsfr créent de base un fieldset à ce niveau là. Est-ce que cela ne pose pas un problème du point de vue accessibilité si l'on se retrouve à imbriquer différents niveaux de fieldset ? Avez-vous des alternatives à nous conseiller au niveau du dsfr ?
Merci d'avance et bonne journée !

[garronej]

Bonjour @Chanizo,

Nous essayons de porter le plus directement possible les snippets de code HTML du site officiel et d'en faire des composants React.

Cela étant dit, si vous avez des réserves sur la structure ou si vous vous sentez limité dans ce que vous pouvez faire avec ces composants, n'hésitez surtout pas à copier la source du composant dans votre codebase et à la modifier à votre guise.

Exemple avec fieldset :

On clique sur "See source code"

On voit que c'est un re-export de shared/Fieldset.tsx

Du coup, le fichier à copier dans votre codebase (par exemple à src/utils/react-dsfr/Fieldset.tsx) est :

https://github.com/codegouvfr/react-dsfr/blob/main/src/shared/Fieldset.tsx

Notez qu'il faut adapter les imports relatifs en imports absolus pour que ça marche :

-import { cx } from "../tools/cx";
+import { cx } from "@codegouvfr/react-dsfr/tools/cx";
-import { fr } from "../fr";
+import { fr } from "@codegouvfr/react-dsfr/fr";
-import { useAnalyticsId } from "../tools/useAnalyticsId";
+import { useAnalyticsId } from "@codegouvfr/react-dsfr/tools/useAnalyticsId";

(Assurez-vous d'avoir tsafe dans vos dependences aussi)

J'espère que ça vous aide.

[Chanizo]

Merci pour la réponse rapide et bien fournie !

On va essayer de contourner le problème, mais je retiens cette solution en cas de besoin