entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 12 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 +29 -23
1 changed files with 29 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a83e13fde0 - Show all commits

52
static/includes/_forms.scss
View File

@ -656,34 +656,40 @@ div.select2-search {
}
}
// Buttons with icons
.submit-button-with-icon {
&::after {
// Button with FontAwesome icon
// $position: left || right
// $character : UTF value
@mixin button-with-icon($position: right, $character: '\f105') {
&::before, &::after {
font-family: FontAwesome;
content: $submit-button-icon;
margin-left: 0.5em;
}
fpeters commented 2023-03-30 19:10:44 +02:00
Outdated
Review
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
Outdated
Review
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
Outdated
Review
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
Outdated
Review
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
Outdated
Review
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
Outdated
Review
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é.
@if ($position == left) {
&::before {
content: $character;
margin-right: 0.5em;
}
}
@if ($position == right) {
&::after {
content: $character;
margin-left: 0.5em;
}
}
}
.previous-button-with-icon {
&::before {
font-family: FontAwesome;
content: $previous-button-icon;
margin-right: 0.5em;
}
}
.cancel-button-with-icon {
&::before {
font-family: FontAwesome;
content: $cancel-button-icon;
margin-right: 0.5em;
}
}
@if $buttons-with-icons {
.submit-button-with-icon {
@include button-with-icon(right, $submit-button-icon);
}
.previous-button-with-icon {
@include button-with-icon(left, $previous-button-icon);
}
.cancel-button-with-icon {
@include button-with-icon(left, $cancel-button-icon);
}
.quixote:not(#wf-actions) div.buttons {
@each $btn in (submit, previous, cancel) {
.#{$btn}-button button {