Al cambiar el texto de ayuda a algo más accionable (es decir, “Marcar como solución” en lugar de “Solución”), he descubierto recientemente que tanto las respuestas no aceptadas como las aceptadas utilizan el mismo texto de ayuda y, por extensión, el mismo icono. Me preguntaba si sería posible tener estados separados para cuando una respuesta no ha sido aceptada y cuando una respuesta se marca como solución, como esta:
Estado del botón cuando no se ha seleccionado una respuesta:
Creo que los usuarios podrían beneficiarse de ver un texto de ayuda que sugiera una acción en lugar del texto predeterminado “Solución”. Cuando se selecciona una respuesta, sería útil ver una evidencia y retroalimentación como resultado de su selección.
Además, los estados contextuales de desplazamiento también podrían ser útiles para comprender lo que hará el botón, en lugar de depender del atributo alt del navegador, vea los ejemplos a continuación.
Aceptar una solución:
Eliminar una respuesta seleccionada previamente:
¿Hay planes para implementar interacciones como estas?
Estoy agregando una solución CSS en caso de que resulte útil.
Con elementos pseudo, al menos el comportamiento de la parte del texto se puede imitar:
Este código está un poco anidado semánticamente, pero funciona. La alineación del texto tendría que cambiarse o el ancho del botón fijarse para que el objetivo no salte al pasar el cursor.
También es posible hacer esto, lo que resultaría en el texto “Seleccionar si esta respuesta resuelve el problema”, que es demasiado largo pero debería respetar las traducciones de idiomas.
:after {
content: attr(title);
}
Idealmente, cambiaría el HTML real para admitir traducciones, en lugar de usar elementos pseudo;
Excepto por el atributo title (si fuera más corto), puede ser mejor que tener un listener de hover de js.
Estoy probando esta solución y tengo una pregunta. Cuando uno es el autor original, se envía una etiqueta de botón adicional al DOM <span>Mark as solution</span> lo que crea una duplicación con esta solución. ¿Tienes alguna sugerencia sobre cómo lidiar con esto? ¿Debería simplemente ocultar la etiqueta del botón en CSS?
También noté que no hay una forma fácil de alinear los botones a la izquierda para que no salten al pasar el cursor sobre ellos. La única solución que encontré es agregar un ancho al botón, lo cual probablemente no sea ideal dado que no es un elemento de ancho fijo. ¿Tienes alguna otra sugerencia para esto, por casualidad?
Es mejor combinar ambas medidas, porque el botón saltará indefinidamente si el cursor permanece al final de un elemento no fijo cuando el texto cambia.
nav.post-controls {
.actions {
width: 100%;
.extra-buttons {
margin-right: auto; // ajusta el botón a la izquierda
.widget-button {
width: 200px; // se establece en un valor que cubra el texto máximo
}
}
}
}
Podrías ocultar el color de fondo al pasar el cursor y usar un enfoque diferente para indicar el hover si lo deseas.
Hola @tynaut, gracias por tu ayuda y aportación. ¿Hay alguna forma de cambiar la propiedad <use href> para cambiar el icono para los diferentes estados (respuesta seleccionada, al pasar el ratón por encima, etc.)?
