Lorsque le texte d’aide est modifié pour être plus concret (par exemple, « Marquer comme solution » au lieu de « Solution »), j’ai récemment découvert que les réponses non acceptées et acceptées utilisent le même texte d’aide et, par extension, la même icône. Je me demandais s’il serait possible d’avoir des états distincts pour lorsqu’une réponse n’a pas été acceptée et lorsqu’une réponse est marquée comme solution, comme ceci :
État du bouton lorsqu’une réponse n’a pas été sélectionnée :
Je pense que les utilisateurs pourraient bénéficier de voir un texte d’aide qui suggère une action plutôt que le texte par défaut « Solution ». Lorsqu’une réponse est sélectionnée, il serait utile de voir un retour d’information évident à la suite de leur sélection.
De plus, des états de survol contextuels pourraient également être utiles pour comprendre ce que le bouton fera, plutôt que de se fier à l’attribut alt du navigateur, voir les exemples ci-dessous.
Accepter une solution :
Supprimer une réponse précédemment sélectionnée :
Y a-t-il des projets pour implémenter des interactions comme celles-ci ?
J’ajoute une solution CSS au cas où cela s’avérerait utile.
Avec les pseudo-éléments, au moins le comportement de la partie texte peut être imité :
Ce code est un peu imbriqué sémantiquement, mais il fonctionne. L’alignement du texte devrait être modifié ou la largeur du bouton fixée afin que la cible ne saute pas au survol.
Il est également possible de faire ceci, ce qui aurait pour résultat le texte “Sélectionner si cette réponse résout le problème”, qui est trop long mais devrait respecter les traductions linguistiques.
&::after {
content: attr(title);
}
Idéalement, je changerais le HTML réel pour prendre en charge les traductions, au lieu d’utiliser des pseudo-éléments ;
À l’exception de l’attribut title (s’il était plus court), cela pourrait être mieux que d’avoir un écouteur de survol JS.
Je teste cette solution et j’ai une question. Quand on est l’auteur original, une étiquette de bouton supplémentaire est envoyée au DOM Marquer comme solution ce qui crée un doublon avec cette solution. Avez-vous des suggestions sur la façon de gérer cela ? Devrais-je simplement masquer l’étiquette du bouton en CSS ?
J’ai également remarqué qu’il n’y avait pas de moyen simple d’aligner les boutons à gauche afin qu’ils ne sautent pas au survol. La seule solution que j’ai trouvée est d’ajouter une largeur au bouton, ce qui est probablement moins idéal étant donné que ce n’est pas un élément à largeur fixe. Avez-vous d’autres suggestions à ce sujet par hasard ?
Il est préférable de combiner les deux mesures, car le bouton sautera indéfiniment si le curseur reste à la fin d’un élément non fixe lorsque le texte change.
nav.post-controls {
.actions {
width: 100%;
.extra-buttons {
margin-right: auto; // ajuste le bouton à gauche
.widget-button {
width: 200px; // défini sur une valeur qui couvre le texte maximum
}
}
}
}
Vous pourriez masquer la couleur d’arrière-plan du survol et utiliser une approche différente pour indiquer le survol si vous le souhaitez.
Et les pseudo-éléments (et la classe .d-icon) auraient besoin que leurs tailles de police soient spécifiées car ce sont des enfants qui hériteront de cette propriété.
Salut @tynaut, merci pour ton aide et tes commentaires.
Existe-t-il un moyen de modifier la propriété <use href> pour changer l’icône pour les différents états (réponse sélectionnée, survol, etc.) ?
