codegouvfr / codegouvfr/eleventy-dsfr

Rendre le niveau des titres personnalisable dans les composants

Open
#23 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Nunjucks
Stars
64
Forks
28
Avg merge
6m
Merged PRs (30d)
1

Description

Certains composants introduisent des éléments headings qui sont ceux par défaut de la documentation du DSFR mais peuvent ne pas correspondre à la hiérarchie des headings de la page dans laquelle on insère le composant. Ceci pose un problème d'accessibilité de la page en créant des sauts de heading ou en interrompant le plan logique de la page.

Ceci concerne en particulier :

- [ ] [un h3 dans le composant Accordéon en njk](https://github.com/codegouvfr/eleventy-dsfr/blob/79e669c8d6e8dbca24b275887dc198b639439982/_includes/components/accordionsgroup.njk#L5)
- [ ] [un h3 dans le conteneur markdown de l'Accordéon](https://github.com/codegouvfr/eleventy-dsfr/blob/79e669c8d6e8dbca24b275887dc198b639439982/markdown-custom-containers.js#L109)
- [ ] [un h3 dans le composant Alert en njk](https://github.com/codegouvfr/eleventy-dsfr/blob/79e669c8d6e8dbca24b275887dc198b639439982/_includes/components/alert.njk#L4)
- [ ] [un h3 dans le conteneur markdown de l'Alerte](https://github.com/codegouvfr/eleventy-dsfr/blob/79e669c8d6e8dbca24b275887dc198b639439982/markdown-custom-containers.js#L77)
- [ ] [un h3 dans Callout en njk](https://github.com/codegouvfr/eleventy-dsfr/blob/79e669c8d6e8dbca24b275887dc198b639439982/_includes/components/callout.njk#L3)
- [ ] [un h3 dans Callout en md](https://github.com/codegouvfr/eleventy-dsfr/blob/79e669c8d6e8dbca24b275887dc198b639439982/markdown-custom-containers.js#L16)
- [ ] [un h3 dans le composant Carte en njk](https://github.com/codegouvfr/eleventy-dsfr/blob/79e669c8d6e8dbca24b275887dc198b639439982/_includes/components/card.njk#L6)
- [ ] [un h4 dans le composant Tuile en njk](https://github.com/codegouvfr/eleventy-dsfr/blob/79e669c8d6e8dbca24b275887dc198b639439982/_includes/components/tile.njk#L7)

Il faudrait introduire une possibilité de préciser quel niveau de heading on souhaite donner au composant (entre `h2` et `h6`) pour chacun de ces éléments, aussi bien s'il l'insère en utilisant la syntaxe nunjucks que la syntaxe markdown.

Cette problématique est rencontrée sur toutes les adaptations du DSFR dans différents frameworks. Un paramètre supplémentaire `titleAs` a été introduit sur les composants concernés dans [codegouvfr/react-dsfr](https://github.com/codegouvfr/react-dsfr/blob/main/src/Accordion.tsx#L18) par exemple.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.