Gérer la validation html pour dsfr

[Viczei]

Description Le code du layout et de certains composants react-dsfr ne passe pas les validations html

Reproduction Passer une page dsfr sous w3c

Comportement attendu Aucune erreur sur w3c https://validator.w3.org/nu/?doc=https%3A%2F%2Fcode.travail.gouv.fr%2Fmentions-legales

Screenshots

[maxgfr]

Analyse

Les erreurs semblent similaires sur l'ensemble des pages passées en DSFR :

• https://validator.w3.org/nu/?doc=https%3A%2F%2Fcode-du-travail-numerique-preprod.ovh.fabrique.social.gouv.fr%2Fmentions-legales
• https://validator.w3.org/nu/?doc=https%3A%2F%2Fcode-du-travail-numerique-preprod.ovh.fabrique.social.gouv.fr%2Fplan-du-site
• https://validator.w3.org/nu/?doc=https%3A%2F%2Fcode-du-travail-numerique-preprod.ovh.fabrique.social.gouv.fr%2Fpolitique-confidentialite
• https://validator.w3.org/nu/?doc=https%3A%2F%2Fcode-du-travail-numerique-preprod.ovh.fabrique.social.gouv.fr%2Fstats
• https://validator.w3.org/nu/?doc=https%3A%2F%2Fcode-du-travail-numerique-preprod.ovh.fabrique.social.gouv.fr%2Fcode-du-travail%2Fl1224-1
• https://validator.w3.org/nu/?doc=https%3A%2F%2Fcode-du-travail-numerique-preprod.ovh.fabrique.social.gouv.fr%2Ffiche-ministere-travail%2Fles-jours-feries-et-les-ponts

Il y a 9 erreurs majeurs qui sont les suivantes :

1. Erreur: Bad value dialog for attribute role on element

Le soucis semble venir de la lib react-dsfr : https://github.com/codegouvfr/react-dsfr/blob/main/src/Modal/Modal.tsx#L65

2. Erreur: Duplicate ID fr-header-search-button

Le soucis semble venir de la lib react-dsfr : https://github.com/codegouvfr/react-dsfr/blob/1d8935171ded36cbae26e2d907e2beabbb7e5a97/src/Header/Header.tsx#L293 qui est identique à
https://github.com/codegouvfr/react-dsfr/blob/1d8935171ded36cbae26e2d907e2beabbb7e5a97/src/Header/Header.tsx#L378

3. Erreur: Bad value combobox for attribute role on element

L'erreur vient de l'implémentation de la librairie combox chez nous avec la partie implicite de recherche sur le header sur l'input

<input
        {...getInputProps({
          className: props.className,
          id: props.id,
          placeholder: props.placeholder,
          type: props.type,
        })}
        data-testid="search-input"
      />

A voir si on peut leur faire une PR ici : https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/index.js#L483

4. Erreur: Bad value for attribute aria-activedescendant on element

L'erreur vient de l'implémentation de la librairie combox chez nous avec la partie implicite de recherche sur le header sur l'input

<input
        {...getInputProps({
          className: props.className,
          id: props.id,
          placeholder: props.placeholder,
          type: props.type,
        })}
        data-testid="search-input"
      />

A voir ici si on peut régler ça en leur faisant une PR : https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/index.js#L470

5. Erreur: Attribute aria-expanded not allowed on element

L'erreur vient de l'implémentation de la librairie combox chez nous avec la partie implicite de recherche sur le header sur l'input

<input
        {...getInputProps({
          className: props.className,
          id: props.id,
          placeholder: props.placeholder,
          type: props.type,
        })}
        data-testid="search-input"
      />

A voir si on peut régler le soucis là : https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/index.js#L476

6. Bad value dialog for attribute role on element dialog

Le probleme provient de la lib react-dsfr au niveau de cette ligne : https://github.com/codegouvfr/react-dsfr/blob/1d8935171ded36cbae26e2d907e2beabbb7e5a97/src/Modal/Modal.tsx#L65

7. The aria-labelledby attribute must point to an element in the same document

L'erreur vient de l'implémentation de la librairie combox chez nous avec la partie implicite de recherche sur le header sur l'input

<input
        {...getInputProps({
          className: props.className,
          id: props.id,
          placeholder: props.placeholder,
          type: props.type,
        })}
        data-testid="search-input"
      />

En fait, il faudrait qu'on puisse ajouter les propriétés de downshift au label implicitement ajouté par react-dsfr :

<label
                    class="fr-label"
                    for="fr-header-search-input"
-----ici----
                  >
                    Rechercher
                  </label>
                  <input
                    aria-activedescendant=""
                    aria-autocomplete="list"
                    aria-controls="downshift-:r2:-menu"
                    aria-expanded="false"
                    aria-labelledby="downshift-:r2:-label"
                    autocomplete="off"
                    class="fr-input"
                    data-testid="search-input"
                    id="fr-header-search-input"
                    placeholder="Rechercher"
                    role="combobox"
                    type="search"
                    value=""
                  />
                  <ul
                    aria-labelledby="downshift-:r2:-label"
                    class="pos_absolute top_2.5rem w_100% z_100 bg_var(--background-default-grey)"
                    id="downshift-:r2:-menu"
                    role="listbox"
                  />

8. The aria-labelledby attribute must point to an element in the same document.

L'erreur vient de l'implémentation de la librairie combox chez nous avec la partie implicite de recherche sur le header sur le ul

<ul
        {...getMenuProps({
          className: list,
        })}
      >

En fait, il faudrait qu'on puisse ajouter les propriétés de downshift au label implicitement ajouté par react-dsfr :

<label
                    class="fr-label"
                    for="fr-header-search-input"
-----ici----
                  >
                    Rechercher
                  </label>
                  <input
                    aria-activedescendant=""
                    aria-autocomplete="list"
                    aria-controls="downshift-:r2:-menu"
                    aria-expanded="false"
                    aria-labelledby="downshift-:r2:-label"
                    autocomplete="off"
                    class="fr-input"
                    data-testid="search-input"
                    id="fr-header-search-input"
                    placeholder="Rechercher"
                    role="combobox"
                    type="search"
                    value=""
                  />
                  <ul
                    aria-labelledby="downshift-:r2:-label"
                    class="pos_absolute top_2.5rem w_100% z_100 bg_var(--background-default-grey)"
                    id="downshift-:r2:-menu"
                    role="listbox"
                  />

9.. The aria-describedby attribute must point to an element in the same document.

L'erreur vient du composant Feedback sur ce fichier :

<Input
        label="Saisissez le numéro de votre département"
        nativeInputProps={{
          maxLength: 3,
          onChange: (e) => setDepartment(e.target.value),
          onKeyDown: (e) => {
            if (e.key === "Enter") {
              onSearchInput();
            }
          },
        }}
        addon={
          <Button
            iconId="fr-icon-search-line"
            onClick={onSearchInput}
            title="Lancer la recherche par numéro de département"
          />
        }
        classes={{
          nativeInputOrTextArea: inputCss,
        }}
      />

On utilise l'input dsfr et le problème semble venir de react-dsfr : https://github.com/codegouvfr/react-dsfr/blob/main/src/Input.tsx#L163 qui ne retrouve pas cela : https://github.com/codegouvfr/react-dsfr/blob/main/src/Input.tsx#L187

Ce qui semble normal car aucune erreur ne semble justifier une description

[m-maillot]

Les erreurs 1, 2, 6 et 9 ont été poussé dans une PR sur le projet react-dsfr : https://github.com/codegouvfr/react-dsfr/pull/338