scss: add option to display icons in forms buttons (#74954) #205
|
|
@ -665,6 +665,12 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
|
|||
</td>
|
||||
<td><p><var>null</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$buttons-with-icons</code></p></td>
|
||||
<td><p>Ajoute des icônes aux boutons des formulaires des demandes.</p>
|
||||
|
tjund marked this conversation as resolved
Outdated
|
||||
</td>
|
||||
<td><p><var>false</var></p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p><code>$timetable-cell-background</code></p></td>
|
||||
<td><p>Couleur de fond des créneaux horaires.</p>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,11 @@ $form-style: classic !default;
|
|||
// optionnal (grow) option to move next button to right (ex: cancel (grow), previous, submit);
|
||||
$buttons-order: null !default;
|
||||
$buttons-alignment: null !default; // any flexbox justify-content value;
|
||||
$buttons-with-icons: false !default;
|
||||
|
||||
$submit-button-icon: '\f105' !default; /* angle right */
|
||||
$previous-button-icon: '\f104' !default; /* angle left */
|
||||
$cancel-button-icon: '\f00d' !default; /* remove icon */
|
||||
|
||||
%custom-radio-checkbox-widget {
|
||||
label {
|
||||
|
|
@ -652,6 +656,49 @@ div.select2-search {
|
|||
}
|
||||
}
|
||||
|
||||
// Button with FontAwesome icon
|
||||
// $position: left || right
|
||||
// $character : UTF value
|
||||
@mixin button-with-icon($position: right, $character: '\f105') {
|
||||
&::before, &::after {
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
fpeters
commented
Quel comportement de lecture sur ce contenu ? ajouter speak: never; ici ? Quel comportement de lecture sur ce contenu ? ajouter speak: never; ici ?
smihai
commented
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
La propriété CSS2 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
L'autre solution, plus simple pour nous dans ce cas, serait l'ajout d'un attr aria-label. 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
Je suis d'accord. >
> 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
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
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 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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 {
|
||||
@extend .#{$btn}-button-with-icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons order & alignment configuration
|
||||
@if $buttons-order or $buttons-alignment {
|
||||
.quixote:not(#wf-actions) div.buttons {
|
||||
|
|
|
|||
Je mettrais :
"Ajoute des icones aux boutons des formulaires des demandes"
Je remonte, n'ayant pas vu de réaction à ce commentaire.
Désolé, je n'avais pas poussé la branche avec cette modif.
C'est pour valider le ticket.