feat(footer): add heading level customisation on column name #349
Conversation
| @@ -73,6 +73,10 @@ export type FooterProps = { | |||
| >; | |||
| style?: CSSProperties; | |||
| linkList?: FooterProps.LinkList.List; | |||
| linkHeadingWrapper?: { | |||
There was a problem hiding this comment.
Je l'ia placé dans une variable à part pour éviter les intégrations actuelles. Sinon on peut partir aussi sur la modification de la variable linkList sous forme de "hack" où l'on a soit un objet, soit un tableau. Si un tableau, on garde le même comportement. Si un object, on retrouve à l'intérieur les infos sur la column. On peut aussi le mettre sur le type Column mais on doit le répéter pour chaque colonne et ça serait peut trop permissif ?
| @@ -73,6 +73,10 @@ export type FooterProps = { | |||
| >; | |||
| style?: CSSProperties; | |||
| linkList?: FooterProps.LinkList.List; | |||
| linkHeadingWrapper?: { | |||
| level: 2 | 3 | 4 | 5 | 6; | |||
There was a problem hiding this comment.
On pourrait aussi ne pas permettre de mettre un heading ici et de pouvori mettre un simple p par exemple. A voir aussi si on ne commence pas à 3.
| "controls": { "type": null }, | ||
| "description": | ||
| "Customizable list element for footers. It allows you to display a categorized list of links tailored to various needs, particularly for websites requiring a structured and accessible footer." | ||
| }, | ||
| "linkHeadingWrapper": { | ||
| "controls": { "type": null }, | ||
| "description": | ||
| 'Allow to set a custom heading level on the column title and use a `<div role="heading" aria-level="level">` for SEO optimisation' |
There was a problem hiding this comment.
J'ai ajouté de la doc sur storybook.
|
Merci pour la PR. Dans la documentation pied de page, la customisation des niveaux de titres ne semble pas possible. Avant de pouvoir merger cette PR, nous avons besoin d'avoir l'aval du SIG. En attante d'un retour GouvernementFR/dsfr#1062. |
|
Bonjour, Une réponse à été faite dans le ticket GouvernementFR/dsfr#1062 |
Pour des soucis d'optimisation SEO et d'accessibilité, il peut être intéressant de laisser la main sur le niveau des titres et la façon dont ils sont représentés dans la page.
Le choix du niveau est intéressant pour l'accessibilité et la logique derrière l'ordre des niveaux. DSFR utilise des h3 sur les titres des colonnes mais cela peut être incompatible avec une structure de page spécifique.
Le fait de pouvoir utiliser un
<div role="heading" level="3">permet d'optimiser la partie SEO. Les moteurs de recherche place ces titres à un niveau inférieur à deshXtout en ne perdant pas l'accessibilité.il y a une issue sur un problème similaire : #345
L'idée serait de permettre de personnaliser ces informations sur différents composants et de ne pas être limité par
react-dsfr. Si la lib n'est pas assez personnalisable, les contraintes SEO/Accessibilité risquent d'obliger les personnes à ne plus utiliser la lib.