Bonjour,
Cette issue risque de faire un peu mal à la tête :upside_down: mais elle a semblé assez importante pour prendre le temps de la rédiger.
Elle découle de l'issue #182 côté portage Angular et un échange très enrichissant avec l'équipe MEN.
Nous souhaiterions vous mettre en avant quatre points concernant la barre d'actions haute :
- La position du titre lors de son utilisation.
- L'utilisation de tous les éléments.
- La position visuelle des éléments.
- L'ordre de tabulation.
Il semble y avoir un décalage entre les atendus graphiques de la position du titre (avant la barre d'actions haute) et le résultat technique (après la barre).
| Design | Storybook |
|---|---|
 |
 |
Sauf si je me trompe, la documentation ne fait pas référence à cet exemple/cas possible dans la partie "Démo" ni dans la partie "Code - Variantes de placement du titre". D'ailleurs même la partie "Accessibilité" ne fait aucune référence à la possible utilisation de l'attribut HTML aria-labelledby.
Si l'attendu est celui présent dans Figma et la partie "Design" de la documentation (ce qui semblerait logique selon moi), il serait intéressant de mettre à jour l'exemple Storybook ainsi que définir la stratégie à privilégier dans la partie "Accessibilité" : association d'un titre et de l'atribut HTML aria-labelledby, élément HTML caption caché (fr-table--no-caption) et texte visible non restitué ou autre.
Comme pour le point 1, il semble y avoir un décalage entre le contenu de la documentation et les exemples mis à disposition.
La documentation dit :
Une barre d’actions haute, pouvant contenir (uniquement et dans cet ordre) - le nombre de lignes sélectionnées, une barre de recherche, des boutons d’actions liés à la sélection de lignes et un contrôle segmenté — En option
Hors aucun exemple graphique, ni technique n'est présenté par le DSFR avec tous les éléments ensemble et il y a peut être une raison :
L'une d'entre elles serait que ce cas n'est tout simplement pas possible ou alors qu'il n'a pas été prévu. Il faudrait cependant le mentionner clairement pour éviter les mauvais usages.
Si cet usage est autorisé/toléré, une autre question est ressortie durant l'échange avec l'équipe MEN : Où doit se trouver la barre de recherche ?
Une solution serait de mettre la barre de recherche avec les autres éléments à droite
Dans la continuité, il semblerait qu'en fonction de la présence ou non des éléments, les alignements sont totalement différents :
Boutons d'actions + Contrôle segmenté
Contrôle segmenté uniquement
Barre de recherche + Boutons d'actions + Contrôle segmenté
Sur ce dernier exemple, je pense que fr-search-bar devrait profiter du même traitement que fr-table__detail et fr-segmented avec un margin-bottom: 1rem;.
Ici clairement, il y a un petit trou dans la raquette 🎾
En regardant sous le capot suite aux points 2 et 3, j'ai été interpelé par le fait que les éléments de la barre soient réorganisés via CSS.
Même si cette pratique n'invalide pas toujours le critère 12.8 du RGAA :
Note : il n’est pas obligatoire que la tabulation suive l’ordre de lecture naturel (de gauche à droite et de haut en bas par exemple) tant que les éléments sont accessibles dans un ordre cohérent.
Il serait très intéressant de fournir une justification dans la partie "Accessibilité" pour faire face à certains auditeurs sur le fait que le contrôle segmenté soit le premier dans l'ordre de tabulation 😅
En y réfléchissant, ça peut sembler louable de choisir d'abord l'affichage avant de faire une recherche mais çela reste un choix arbitraire très délicat selon moi.