Project

General

Profile

Development #40883

Accessibilité : lien "+" sur les cellules "demandes d'une catégorie" => bouton

Added by Marie Kuntz 2 months ago. Updated about 1 month ago.

Status:
Solution déployée
Priority:
Normal
Target version:
-
Start date:
23 Mar 2020
Due date:
% Done:

0%

Patch proposed:
Yes
Planning:
No

Description

Le bouton + sur les cellules "demandes d'une catégorie" devrait être un bouton

deplier.png View (2.87 KB) Marie Kuntz, 23 Mar 2020 10:05 AM

0001-misc-more-items-accessibility-40883-40884.patch View (3.41 KB) Lauréline Guerin, 24 Mar 2020 02:20 PM

0001-scss-more-items-button-40883.patch View (1.36 KB) Lauréline Guerin, 24 Mar 2020 02:22 PM

0001-misc-more-items-accessibility-40883-40884.patch View (3.77 KB) Lauréline Guerin, 26 Mar 2020 02:51 PM

0001-scss-more-items-button-40883.patch View (1.33 KB) Lauréline Guerin, 26 Mar 2020 02:51 PM

0001-misc-more-items-accessibility-40883-40884.patch View (4.41 KB) Lauréline Guerin, 26 Mar 2020 03:07 PM

0001-misc-more-items-accessibility-40883-40884.patch View (4.41 KB) Lauréline Guerin, 02 Apr 2020 10:31 AM

0001-scss-more-items-button-40883.patch View (1.34 KB) Lauréline Guerin, 02 Apr 2020 10:31 AM

0002-cells-add-blocks-in-link-list-cell.html-to-make-cust.patch View (1.08 KB) Lauréline Guerin, 23 Apr 2020 11:42 AM

0003-cells-add-block-in-forms_of_category.html-to-make-cu.patch View (1.28 KB) Lauréline Guerin, 23 Apr 2020 11:42 AM

0001-cells-more-items-accessibility-40883-40884.patch View (5.02 KB) Lauréline Guerin, 23 Apr 2020 11:42 AM

0010-saone-et-loire-cd71-2019-adapt-style-of-new-more-ite.patch View (984 Bytes) Lauréline Guerin, 23 Apr 2020 11:43 AM

0009-saint-chamond-adapt-style-of-new-more-items-markup-s.patch View (2.83 KB) Lauréline Guerin, 23 Apr 2020 11:43 AM

0008-roannais-agglomeration-adapt-style-of-new-more-items.patch View (741 Bytes) Lauréline Guerin, 23 Apr 2020 11:43 AM

0007-roannais-icitoyen-adapt-style-of-new-more-items-mark.patch View (946 Bytes) Lauréline Guerin, 23 Apr 2020 11:43 AM

0006-region-reunion-adapt-style-of-new-more-items-markup-.patch View (743 Bytes) Lauréline Guerin, 23 Apr 2020 11:43 AM

0005-pre-saint-gervais-adapt-style-of-new-more-items-mark.patch View (720 Bytes) Lauréline Guerin, 23 Apr 2020 11:43 AM

0004-montreuil-adapt-style-of-new-more-items-markup-40883.patch View (893 Bytes) Lauréline Guerin, 23 Apr 2020 11:43 AM

0003-lille-adapt-style-of-new-more-items-markup-40883.patch View (698 Bytes) Lauréline Guerin, 23 Apr 2020 11:43 AM

0002-gpseo-adapt-style-of-new-more-items-markup-40883.patch View (846 Bytes) Lauréline Guerin, 23 Apr 2020 11:43 AM

0001-scss-more-items-new-style-40883.patch View (1.45 KB) Lauréline Guerin, 23 Apr 2020 11:43 AM

0019-toulouse-simplify-custom-forms_of_category-link-list.patch View (2.44 KB) Lauréline Guerin, 23 Apr 2020 11:44 AM

0018-fontenay-sous-bois-2018-simplify-custom-forms_of_cat.patch View (2.48 KB) Lauréline Guerin, 23 Apr 2020 11:44 AM

0016-saint-lo-agglo-simplify-custom-forms_of_category-cel.patch View (2.27 KB) Lauréline Guerin, 23 Apr 2020 11:44 AM

0017-toulouse-metropole-simplify-custom-forms_of_category.patch View (4.13 KB) Lauréline Guerin, 23 Apr 2020 11:44 AM

0015-nancy-en-direct-simplify-custom-forms_of_category-ce.patch View (2.25 KB) Lauréline Guerin, 23 Apr 2020 11:44 AM

0014-tours-simplify-custom-forms_of_category-cell-40883.patch View (2.32 KB) Lauréline Guerin, 23 Apr 2020 11:44 AM

0013-vincennes-2018-adapt-style-of-new-more-items-markup-.patch View (903 Bytes) Lauréline Guerin, 23 Apr 2020 11:44 AM

0012-venissieux-adapt-style-of-new-more-items-markup-simp.patch View (2.89 KB) Lauréline Guerin, 23 Apr 2020 11:44 AM

0011-tours-metropole-adapt-style-of-new-more-items-markup.patch View (3.3 KB) Lauréline Guerin, 23 Apr 2020 11:44 AM

0001-liege-pwa-2019-adapt-styles-of-new-more-items-markup.patch View (1.12 KB) Thomas Jund, 28 Apr 2020 03:18 PM

42525

Related issues

Related to Combo - Development #40884: Accessibilité : lien "+" sur les cellules "demandes d'une catégorie", ajouter intitulé & état Fermé 23 Mar 2020

Associated revisions

Revision 57174012 (diff)
Added by Lauréline Guérin 2 months ago

misc: more items & accessibility (#40883, #40884)

Revision 870e1328 (diff)
Added by Lauréline Guérin about 1 month ago

cells: more items & accessibility (#40883, #40884)

Revision 757db7d3 (diff)
Added by Lauréline Guérin about 1 month ago

cells: add blocks in link-list-cell.html to make customization easier (#40883)

Revision c41b41de (diff)
Added by Lauréline Guérin about 1 month ago

cells: add block in forms_of_category.html to make customization easier (#40883)

History

#1 Updated by Marie Kuntz 2 months ago

  • Related to Development #40884: Accessibilité : lien "+" sur les cellules "demandes d'une catégorie", ajouter intitulé & état added

#2 Updated by Marie Kuntz 2 months ago

  • Subject changed from Accessibilité : lien "+" sur les cellules "demandes d'une catégorie to Accessibilité : lien "+" sur les cellules "demandes d'une catégorie" => bouton

#4 Updated by Lauréline Guerin 2 months ago

  • Assignee set to Lauréline Guerin

#5 Updated by Lauréline Guerin 2 months ago

je pense que ça répond aussi à #40884

#6 Updated by Lauréline Guerin 2 months ago

je pose ce patch publik-base-theme pour review avant de faire un ticket dédié

#7 Updated by Thomas Jund 2 months ago

Le choix niveau UI est d'utiliser un bouton qui ouvre un container en dessous.
Comme pour un accordion ou un collapse. Pourquoi pas.
Quelques remarques alors :

  • La liste `additional-[forms|links]` devrait avoir un label. Souvent, on ajoute un attribut `aria-labelledby` qui pointe vers l'id du bouton.
  • donc le bouton devrait avoir un id
  • Je me demande si c'est une bonne idée de masquer le bouton par un display=`none` une fois cliqué. On perd le focus. À tester. Ou alors donner le focus à la list `additional-*`.
  • Je ne suis pas pour différencier avec 2 class `additional-forms` et `additional-links` parce qu'ils ont le même style. J'utiliserais une class unique pour les 2 : `additional-list`. L'idée étant qu'à terme on ai un seul composant de type `links-list` pour styler toutes les listes de liens, que ce soit des demandes ou autre et cette class risque de devenir dans un avenir certain `links-list--additional-list`.
  • Et si on en profitait pour proposer un feedback visuel un peu plus efficace que tout afficher d'un coup ? Un petite animation CSS ? Les items qui apparaissent les 1 après les autres ?

#8 Updated by Frédéric Péters 2 months ago

Et si on en profitait pour proposer un feedback visuel un peu plus efficace que tout afficher d'un coup ? Un petite animation CSS ? Les items qui apparaissent les 1 après les autres ?

Côté publik-base-theme peut-être mais limitons ce ticket au balisage pour l'accessibilité.

#10 Updated by Lauréline Guerin 2 months ago

ha oui, maintenant que j'ai une branche correctement nommée, il faudrait peut-être que je regarde du côté des tests ce qui se passe :)

#12 Updated by Thomas Jund 2 months ago

Remarques sur les noms de class. On a :

  • .more-items (pour le bouton)
  • .additional-list (sur ul)
  • .additional-list (idem, sur li)

J'en profiterais bien pour uniformiser et gagner en lisibilité en utilisant le même prefix "more-items" et utiliser la convention de nommage qui est là pour ça.

  • .more-items--button
  • .more-items--list
  • .more-items--item

Ensuite, puisqu'on parle d'accessibilité, j'ai un doute sur les aria-labels utilisés sur les boutons. Autant `{% trans 'More forms' }` pourrait être valable en fonction de sa traduction pour la cellule 'demarches d'une catégorie", autant { trans 'More links' %} sera souvent hors contexte. La cellule "liste de liens" est utilisée dans beaucoup de cas de figures différents, et également pour lister des démarches.
Je propose plutôt un label générique de type "Plus de choix" ou "Plus de propositions" plutôt que "plus de liens".

#14 Updated by Thomas Jund about 2 months ago

un label "More items", ça irait ?

Je pense. En EN ça passe, tout dépend comment il sera traduit en FR :)

Côté HTML, je n'ai plus de remarque.
côté JS, tu peux simplifier le sélecteur sizzle en utilisant simplement ".more-items--button" (je n'ai pas encore commencé ma croisade `less Jquery`).

Et pour le CSS, il y aurait pas mal de trucs à dire, commençons par
  • `more-items` n'étant plus un élément li (et ayant changé de class), il faut repasser sur tous les thèmes (qui par exemple ajoutent des styles à l'élément li.more-items… ho joie!)
  • ne jamais utiliser `!important` dans le core (sauf pour les class qui doivent imposer un comportement comme .hide ou mobile-only)
  • et d'autres trucs, … Je vais t'aider.

#15 Updated by Thomas Jund about 2 months ago

Notes après la séance de travail avec Laureline :

  • Utiliser une balise `button` pour l'élément `.more-items--button` parait compliqué. L'élément hérite alors de tous les styles de %button (ligne 140 de _forms.scss, qui applique les styles), ce qui modifie le comportement graphique et impacte alors tous les thèmes existants. Il a été décider de conserver une balise `a` sans `href` et d'y ajouter les comportements d'un bouton via `role=button`, `tabindex=0` et une gestion des touches `enter` et `space` via JS.
  • Placer `.more-items--button` en dehors de (après) la links-list lui fait perdre l'effet appliqué par `$cell-entry-hover-effect` qui a besoin d'un parent positionné et zindexé pour fonctionner (appliqué sur l'élément ul). Il a été décidé de conserver (pour le moment) l'emplacement actuel du bouton (dernier item de la liste). Positionner le bouton après la liste serait possible une fois le code des effets simplifié en utilisant simplement le background du bouton plutôt qu'un pseudo-element avec un z-index négatif.

Malgré ces revers, l'amélioration de l'accessibilité sur ce module n'est quand même pas négligeable.

#16 Updated by Thomas Jund about 2 months ago

  • Status changed from Solution proposée to En cours

Et avec l'ajout d'une deuxième liste, on repart pour un tour sur les hacks CSS pour gérer les $border-radius des cellules (je déteste ce truc).

#17 Updated by Frédéric Péters about 2 months ago

Quelle est cette histoire de deuxième liste ? C'est peut-être quelque chose qui peut dégager ?

#18 Updated by Thomas Jund about 2 months ago

Quelle est cette histoire de deuxième liste ?

Les items supplémentaires se trouvent dans une seconde liste. Le bouton doit pouvoir afficher/masquer un container cible (aria-controls = id de la boite à afficher.

<ul>
  <li>Item Visible</li>
  …
  <li><a class="add-more-items--button" … aria-controls="more-items"></a></li>
</ul>
<ul class="more-items" id="more-items">
  <li>Item invisible par défaut</li>
  …
</ul>

#19 Updated by Frédéric Péters about 2 months ago

Mais ça pourrait évoluer, il y a des intégrations qui stylent le <li class="more-items"> mais d'un rapide coup d'œil pas d'attention particulière à la liste qui suit, et donc on pourrait tous les mettre dans une unique liste, et avoir le bouton "+" venir s'insérer dedans, il me semble.

#20 Updated by Thomas Jund about 2 months ago

et donc on pourrait tous les mettre dans une unique liste, et avoir le bouton "+" venir s'insérer dedans, il me semble.

je ne suis pas sûr de comprendre, tu proposes de revenir à l'état actuel ?

<ul>
  <li>Item Visible</li>
  …
  <li><a class="add-more-items--button" … aria-controls="more-items"></a></li>
  <li display="none"> Item invisible par défaut </li>
  …
</ul>

Il faudrait pour cela que l'attribut aria-controls du bouton possède une liste d'identifiants, correspondant à l'id de chaque item caché.

Dans l'état actuel du patch (avec 2 listes), le design du bouton '+' ne pose plus de problème. Le problème qui reste à régler c'est les hacks pour $cell-border-radius

#21 Updated by Frédéric Péters about 2 months ago

je ne suis pas sûr de comprendre, tu proposes de revenir à l'état actuel ?

Je parle sans suivre assez, désolé, j'avais cru qu'il y avait des cas où plusieurs listes étaient utilisées, mais non, la question apparait uniquement parce que ce ticket amènerait ça. (et donc normal qu'il n'y ait pas dans les intégrations existantes de gestion particulière du cas "deux listes").

#22 Updated by Lauréline Guerin about 1 month ago

Les modifs dans combo
J'ai ajouté des blocks pour faciliter la custo, en évitant au maximum de tout recopier

#25 Updated by Thomas Jund about 1 month ago

J'ai fait un tour des themes imio, atreal et rouen.
Seul imio -> liege_pwa-2019 nécessite un patch CSS.

#26 Updated by Frédéric Péters about 1 month ago

Go pour tout; on a du temps ensuite en recette pour détecter d'éventuels ajustements.

#27 Updated by Serghei Mihai about 1 month ago

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

#28 Updated by Lauréline Guerin about 1 month ago

  • Status changed from Solution validée to Résolu (à déployer)
commit c41b41de72f712ad87099b14d2e3ae039b0cdd38
Author: Lauréline Guérin <zebuline@entrouvert.com>
Date:   Thu Apr 23 10:32:41 2020 +0200

    cells: add block in forms_of_category.html to make customization easier (#40883)

commit 757db7d37bba9f718477cb8cec2f95adba99be63
Author: Lauréline Guérin <zebuline@entrouvert.com>
Date:   Thu Apr 23 10:29:44 2020 +0200

    cells: add blocks in link-list-cell.html to make customization easier (#40883)

commit 870e132867d49cf58b284619a96e6a6f8de8a8c9
Author: Lauréline Guérin <zebuline@entrouvert.com>
Date:   Tue Mar 24 14:19:54 2020 +0100

    cells: more items & accessibility (#40883, #40884)

#29 Updated by Frédéric Péters about 1 month ago

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

Also available in: Atom PDF