Project

General

Profile

Development #73116

accessibilité pour les zones dé/pliables de la page d'une demande

Added by Frédéric Péters over 1 year ago. Updated about 1 year ago.

Status:
Fermé
Priority:
Normal
Target version:
-
Start date:
07 January 2023
Due date:
% Done:

0%

Estimated time:
Patch proposed:
No
Planning:
No

Description

Le composant d’accordéon ne respecte le motif de conception, le composant qui permet d’activer l’ouverture ou la fermeture des panneaux doit être un bouton, et celui-ci doit se trouver à l’intérieur du titre et non l’inverse.
De plus, il manque également la présence de l’attribut aria-controls sur le bouton qui permet d’indiquer quel est le panneau contrôlé. La présence de l’attribut aria-expanded n’est pas nécessaire du fait de la présence de l’attribut title qui indique déjà l’état.

voir https://www.w3.org/WAI/ARIA/apg/patterns/accordion/

(je ne suis pas bien sûr de la partie où ça parle d'un attribut title, qui n'existe pas sur la page en question, mais ça peut a priori être ignoré et aria-expanded implémenté).


Related issues

Related to Gadjo - Development #73802: style bouton accordéon transparent pour dé/pliage de sectionRejeté24 January 2023

Actions
Related to Intégrations graphiques Publik - Development #40885: [RGAA] Enchaînement de plusieurs zones affichées/masquéesFermé

Actions
Related to Intégrations graphiques Publik - Development #71070: [RGAA] Lien "Résumé (afficher le détail de la demande)" Fermé

Actions

Associated revisions

Revision b253bdc6 (diff)
Added by Frédéric Péters about 1 year ago

a11y: add accordion pattern to form view sections (#73116)

History

#2

Updated by Frédéric Péters over 1 year ago

  • Related to Development #73802: style bouton accordéon transparent pour dé/pliage de section added
#3

Updated by Robot Gitea over 1 year ago

  • Status changed from Nouveau to Solution proposée

Frédéric Péters (fpeters) a ouvert une pull request sur Gitea concernant cette demande :

#4

Updated by Thomas Jund over 1 year ago

Pourquoi ajouter un tag button ? Cela complique tout : le JS, le CSS.
Je suis partisan d'ajouter simplement un attribut `role="button"` au h2

#5

Updated by Frédéric Péters over 1 year ago

Pourquoi ajouter un tag button ? Cela complique tout : le JS, le CSS.

Ça correspond à ce que note l'audit "le composant qui permet d’activer l’ouverture ou la fermeture des panneaux doit être un bouton, et celui-ci doit se trouver à l’intérieur du titre"; aussi ça assure des interactions au clavier qui sont totalement standard.

#7

Updated by Thomas Jund over 1 year ago

expliquer ce qu'on va faire différemment etc.

Pourquoi ?
Dans l'audit il est dit :

Motif de conception ARIA button : lorsqu’il n’est pas possible d’utiliser un élément
<button>, ARIA fournit un motif de conception button :
L’élément doit avoir un attribut role="button".
L’événement doit se déclencher sur le clic de souris, la touche Entrée et la touche
Espace.
Si l’élément ne peut pas recevoir le focus de tabulation, l’élément doit posséder une
propriété tabindex="0" pour le rendre opérable au clavier.

Et dans la page détaillant le motif de conception on peut y lire

The title of each accordion header is contained in an element with role button.

Conclusion, a accessibilité <button> et role="button" c'est kif kif d'un point de vue sémantique.

Donc on est bien libre de proposer ce qui est le plus pertinent avec notre existant.
Ma proposition est juste d'utiliser ce que tu as fait pour les cellules foldable.

Ce qui me dérange aussi dans ce lot de patch c'est le CSS pour générer un bouton "unset".
J'ai l'impression qu'utiliser un role="button" nous évite des contorsions CSS.

Après en effet, ce qui change par rapport au travail sur les cellules foldable et que je n'avais pas relevé c'est : "le bouton doit être au sein du h2".

Je comprends qu'utiliser un bouton assure des interactions au clavier qui sont totalement standard par défaut.
Mais là encore la function Js combo prepare_foldable fait déjà le job

Je suis donc partisan d'utiliser l'existant pour combo.

Enfin ce point ne semble pas être traité dans le patch :

The accordion header button element has aria-controls set to the ID of the element containing the accordion panel content.

#8

Updated by Robot Gitea over 1 year ago

  • Status changed from Solution proposée to Solution validée

Thomas Jund (tjund) a approuvé une pull request sur Gitea concernant cette demande :

#9

Updated by Robot Gitea about 1 year ago

  • Status changed from Solution validée to Résolu (à déployer)

Frédéric Péters (fpeters) a mergé une pull request sur Gitea concernant cette demande :

#10

Updated by Transition automatique about 1 year ago

  • Status changed from Résolu (à déployer) to Solution déployée
#11

Updated by Frédéric Péters about 1 year ago

  • Related to Development #40885: [RGAA] Enchaînement de plusieurs zones affichées/masquées added
#12

Updated by Frédéric Péters about 1 year ago

  • Related to Development #71070: [RGAA] Lien "Résumé (afficher le détail de la demande)" added
#13

Updated by Transition automatique about 1 year ago

Automatic expiration

Also available in: Atom PDF