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

smihai commented

Owner

There is no content yet.

smihai added 1 commit

gitea/publik-base-theme/pipeline/head This commit looks good Details

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

smihai commented

Poster

Owner

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)

ee.png

445 KiB

clapotis.png

150 KiB

tjund requested review from tjund

tjund requested changes

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

Owner

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

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

tjund commented

Owner

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

smihai commented

Poster

Owner

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

tjund commented

Owner

C'est pour valider le ticket.

tjund marked this conversation as resolved

tjund added 1 commit

gitea/publik-base-theme/pipeline/head This commit looks good Details

0d9bc4bb52 code inside @mixin

tjund commented

Owner

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

static/includes/_forms.scss Outdated

													
				@ -655,0 +662,4 @@

				@mixin button-with-icon($position: right, $character: '\f105') {

					&::before, &::after {

						font-family: FontAwesome;

					}

fpeters commented

Owner

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

smihai commented

Poster

Owner

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

Owner

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

Poster

Owner

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

Owner

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

Poster

Owner

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

smihai commented

Poster

Owner

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

tjund approved these changes

smihai merged commit 450708981b into main 2 months ago

smihai deleted branch wip/74954-option-for-buttons-with-icons

Reviewers

tjund approved these changes

gitea/publik-base-theme/pipeline/head This commit looks good

Details

The pull request has been merged as 450708981b.

You can also view command line instructions.

Step 1:

From your project repository, check out a new branch and test the changes.

git checkout -b wip/74954-option-for-buttons-with-icons main

git pull origin wip/74954-option-for-buttons-with-icons

Step 2:

Merge the changes and update on Gitea.

git checkout main

git merge --no-ff wip/74954-option-for-buttons-with-icons

git push origin main

No reviewers

No Label

No Milestone

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.

Loading…

There is no content yet.

Labels Milestones

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

Reviewers

Step 1:

Step 2: