entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 11 Releases Wiki Activity

scss: add option to display icons in forms buttons (#74954) #205

Merged
smihai merged 2 commits from wip/74954-option-for-buttons-with-icons into main 2023-04-06 10:18:38 +02:00
Conversation 3 Commits 2 Files Changed 2 +53
smihai commented 2023-03-21 16:41:36 +01:00
Owner
Copy Link
No description provided.
smihai commented 2023-03-21 16:47:08 +01:00
Author
Owner
Copy Link

Rendu sûrement pas adapté pour la disposition par défaut des boutons (exemple sur le thème des Clapotis), mais ça ira pour les nouveaux thèmes où on posera le bouton bouton "Suivant" toujours à droite (https://dev.entrouvert.org/issues/74237)

Rendu sûrement pas adapté pour la disposition par défaut des boutons (exemple sur le thème des Clapotis), mais ça ira pour les nouveaux thèmes où on posera le bouton bouton "Suivant" toujours à droite (https://dev.entrouvert.org/issues/74237)
clapotis.png
150 KiB
ee.png
445 KiB
clapotis.png ee.png
tjund requested review from tjund 2023-03-30 17:45:57 +02:00
tjund requested changes 2023-03-30 17:54:28 +02:00
help/fr/misc-scss.page Outdated
@ -667,1 +667,4 @@
</tr>
<tr>
<td><p><code>$buttons-with-icons</code></p></td>
<td><p>Affichage d'icônes dans les boutons des formulaires.</p>
tjund commented 2023-03-30 17:54:21 +02:00
Owner
Copy Link

Je mettrais :
"Ajoute des icones aux boutons des formulaires des demandes"

Je mettrais : "Ajoute des icones aux boutons des formulaires des demandes"
tjund commented 2023-04-06 09:59:53 +02:00
Owner
Copy Link

Je remonte, n'ayant pas vu de réaction à ce commentaire.

Je remonte, n'ayant pas vu de réaction à ce commentaire.
smihai commented 2023-04-06 10:16:24 +02:00
Author
Owner
Copy Link

Désolé, je n'avais pas poussé la branche avec cette modif.

Désolé, je n'avais pas poussé la branche avec cette modif.
tjund commented 2023-04-06 10:17:57 +02:00
Owner
Copy Link

C'est pour valider le ticket.

C'est pour valider le ticket.
tjund marked this conversation as resolved
tjund commented 2023-03-30 17:58:25 +02:00
Owner
Copy Link

Je pense que de pouvoir profiter de l'option d'ajouter des icons à d'autres boutons via un mixin pourrait être très pratique pour certains thèmes custom.
J'ai poussé une branch avec une proposition dans ce sens. Dis-moi ce que tu en penses.

Je pense que de pouvoir profiter de l'option d'ajouter des icons à d'autres boutons via un mixin pourrait être très pratique pour certains thèmes custom. J'ai poussé une branch avec une proposition dans ce sens. Dis-moi ce que tu en penses.
fpeters reviewed 2023-03-30 19:10:44 +02:00
static/includes/_forms.scss Outdated
@ -655,0 +662,4 @@
@mixin button-with-icon($position: right, $character: '\f105') {
&::before, &::after {
font-family: FontAwesome;
}
fpeters commented 2023-03-30 19:10:44 +02:00
Owner
Copy Link

Quel comportement de lecture sur ce contenu ? ajouter speak: never; ici ?

Quel comportement de lecture sur ce contenu ? ajouter speak: never; ici ?
smihai commented 2023-03-31 11:15:36 +02:00
Author
Owner
Copy Link

Quel comportement de lecture sur ce contenu ? ajouter speak: never; ici ?

Cela semble en effet suffisant pour la non réproduction orale du contenu. Mais je laisse @tjund donner son avis.

> Quel comportement de lecture sur ce contenu ? ajouter speak: never; ici ? Cela semble en effet suffisant pour la non réproduction orale du contenu. Mais je laisse @tjund donner son avis.
tjund commented 2023-04-03 14:41:15 +02:00
Owner
Copy Link

La propriété CSS2 speak n'a (il me semble) jamais été supporté par les lecteurs d'écrans ou les navigateurs.

Le contenu d'un pseudo element est génralement être lu et il n'y a rien à faire pour l'empêcher, c'est pourquoi, pour l'ajout d'une icône "décorative" les préconisations vont vers l'utilisatiuon d'une balise dédiée avec un aria-hidden dessus

<span class="icon" aria-hidden="true"></span>

L'autre solution, plus simple pour nous dans ce cas, serait l'ajout d'un attr aria-label.

<button name="submit" value="Suivant" class="form-next" arai-label="Suivant">Suivant</button>

la valeur d'aria-label va remplacer son contenu pour les lecteurs d'écran et donc le problème de l'ajout d'un pseudo element ne se pose plus.

La propriété CSS2 `speak` n'a (il me semble) jamais été supporté par les lecteurs d'écrans ou les navigateurs. Le contenu d'un pseudo element est génralement être lu et il n'y a rien à faire pour l'empêcher, c'est pourquoi, pour l'ajout d'une icône "décorative" les préconisations vont vers l'utilisatiuon d'une balise dédiée avec un aria-hidden dessus `<span class="icon" aria-hidden="true"></span>` L'autre solution, plus simple pour nous dans ce cas, serait l'ajout d'un attr aria-label. ``` <button name="submit" value="Suivant" class="form-next" arai-label="Suivant">Suivant</button> ``` la valeur d'aria-label va remplacer son contenu pour les lecteurs d'écran et donc le problème de l'ajout d'un pseudo element ne se pose plus.
smihai commented 2023-04-05 17:33:42 +02:00
Author
Owner
Copy Link

L'autre solution, plus simple pour nous dans ce cas, serait l'ajout d'un attr aria-label.

Je suis d'accord.
J'ai créé https://dev.entrouvert.org/issues/76293 côté wcs pour rajouter l'attribut.

> > L'autre solution, plus simple pour nous dans ce cas, serait l'ajout d'un attr aria-label. > > Je suis d'accord. J'ai créé https://dev.entrouvert.org/issues/76293 côté wcs pour rajouter l'attribut.
fpeters commented 2023-04-06 10:40:18 +02:00
Owner
Copy Link

J'ai créé https://dev.entrouvert.org/issues/76293 côté wcs pour rajouter l'attribut.

Pour la forme : je ne trouve pas terrible d'envoyer dans le dépôt quelque chose qu'on sait être une régression en accessibilité.

> J'ai créé https://dev.entrouvert.org/issues/76293 côté wcs pour rajouter l'attribut. Pour la forme : je ne trouve pas terrible d'envoyer dans le dépôt quelque chose qu'on sait être une régression en accessibilité.
smihai commented 2023-04-06 11:16:48 +02:00
Author
Owner
Copy Link

Je suis d'accord.

Mais nous avons déjà 8 thèmes au moins qui ajoutent les pictos aux boutons à coup de pseudo éléments dans _custom.scss et à chaque demande d'une intégration par une collectivité on en rajoutera encore.

Avec l'option introduite, même si elle ne règle le problème, on évitera les custom et pourra travailler à améliorer l'accessibilité.

Je suis d'accord. Mais nous avons déjà 8 thèmes au moins qui ajoutent les pictos aux boutons à coup de pseudo éléments dans `_custom.scss` et à chaque demande d'une intégration par une collectivité on en rajoutera encore. Avec l'option introduite, même si elle ne règle le problème, on évitera les custom et pourra travailler à améliorer l'accessibilité.
smihai force-pushed wip/74954-option-for-buttons-with-icons from 0d9bc4bb52 to c9496ae12c 2023-03-31 11:14:32 +02:00 Compare
smihai commented 2023-03-31 11:14:52 +02:00
Author
Owner
Copy Link

J'ai poussé une branch avec une proposition dans ce sens. Dis-moi ce que tu en penses.

C'est très bien. J'ai juste modifié le message de commit.

> J'ai poussé une branch avec une proposition dans ce sens. Dis-moi ce que tu en penses. C'est très bien. J'ai juste modifié le message de commit.
smihai force-pushed wip/74954-option-for-buttons-with-icons from c9496ae12c to a83e13fde0 2023-04-06 10:16:04 +02:00 Compare
tjund approved these changes 2023-04-06 10:18:06 +02:00
smihai merged commit 450708981b into main 2023-04-06 10:18:38 +02:00
smihai deleted branch wip/74954-option-for-buttons-with-icons 2023-04-06 10:18:38 +02:00
Sign in to join this conversation.
Reviewers
No reviewers
tjund
Labels
Clear labels
No items
No Label
Milestone
Clear milestone
No items
No Milestone
Assignees
Clear assignees
No Assignees
3 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: entrouvert/publik-base-theme#205
No description provided.
Delete Branch "wip/74954-option-for-buttons-with-icons"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?