Ao alterar o texto de ajuda para algo mais acionável (por exemplo, “Marcar como solução” em vez de “Solução”), descobri recentemente que tanto as respostas não aceitas quanto as aceitas usam o mesmo texto de ajuda e, por extensão, o mesmo ícone. Eu estava me perguntando se seria possível ter estados separados para quando uma resposta não foi aceita e quando uma resposta é marcada como solução, assim:
Estado do botão quando uma resposta não foi selecionada:
Acho que os usuários podem se beneficiar ao ver um texto de ajuda que sugere uma ação do que o texto padrão “Solução”. Quando uma resposta é selecionada, seria útil ver algum feedback evidente como resultado de sua seleção.
Além disso, estados de hover contextualizados também podem ser úteis para entender o que o botão fará, em vez de depender do atributo alt do navegador, veja os exemplos abaixo.
Aceitando uma solução:
Removendo uma resposta previamente selecionada:
Existem planos para implementar interações como essas?
Com pseudo-elementos, pelo menos o comportamento da parte do texto pode ser imitado:
Este código está um pouco aninhado semanticamente, mas funciona. O alinhamento do texto precisaria ser alterado ou a largura do botão corrigida para que o alvo não pule ao passar o mouse.
Também é possível fazer isso, o que resultaria no texto “Selecionar se esta resposta resolver o problema”, que é muito longo, mas deve respeitar as traduções de idiomas.
&::after {
content: attr(title);
}
Idealmente, eu mudaria o HTML real para suportar traduções, em vez de usar pseudo-elementos;
Exceto pelo atributo title (se fosse mais curto), pode ser melhor do que ter um listener de hover em JS.
Estou testando esta solução e tenho uma pergunta. Quando alguém é o autor original, um rótulo de botão adicional é enviado para o DOM <span>Mark as solution</span> que cria duplicação com esta solução. Você tem alguma sugestão sobre como lidar com isso? Devo apenas ocultar o rótulo do botão no CSS?
Notei também que não há uma maneira fácil de alinhar os botões à esquerda para que eles não saltem ao passar o mouse. A única solução que encontrei é adicionar uma largura ao botão, o que provavelmente não é o ideal, dado que não é um elemento de largura fixa. Você tem alguma outra sugestão para isso, por acaso?
É melhor combinar ambas as medidas, pois o botão pulará indefinidamente se o cursor permanecer no final de um elemento não fixo quando o texto mudar.
nav.post-controls {
.actions {
width: 100%;
.extra-buttons {
margin-right: auto; // ajusta o botão para a esquerda
.widget-button {
width: 200px; // define para um valor que cubra o texto máximo
}
}
}
}
Você pode ocultar a cor de fundo ao pairar o mouse e usar uma abordagem diferente para indicar o hover, se desejar.
Olá @tynaut, obrigado pela sua ajuda e contribuição.
Existe alguma maneira de alterarmos a propriedade <use href> para mudar o ícone para os diferentes estados (resposta selecionada, ao passar o mouse, etc.)?
