Parabéns pela solução, Adriano! 🎉
Ainda quero fazer esse desafio e aprender a usar o Babel e o Webpack.
Algumas sugestões para melhorar a acessibilidade:
1 - Usar uma borda transparente no botão (border: 1px solid transparent) em vez de removê-la totalmente com border: none. Essa borda transparente aparece quando o sistema está no modo de alto contraste, deixando o botão mais visível.
2 - Indicar que o botão está em foco para usuários que navegam com o teclado. Aqui, bastaria remover o outline: none. Assim, o próprio navegador adiciona um contorno ao focar no botão com a tecla Tab. Nos meus testes, isso não alterou o visual do botão. Esse contorno pode ser personalizado através da pseudoclasse focus-visible.
E é bastante comum aplicar os estilos de :hover à pseudoclasse :focus, o que também ajuda a indicar o foco no botão ao navegar com o teclado.
Um artigo sobre essa questão da borda e do contorno (focus ring): Use transparent borders and outlines to assist with high contrast mode (Andy Bell)
3 - Fazer com que o novo conselho seja lido para usuários de leitores de tela. No momento, usando um leitor de tela, o novo texto não é lido automaticamente depois de apertar o botão; o usuário precisa "navegar para trás" para perceber que o texto mudou.
Um jeito fácil de fazer isso é colocando o atributo aria-live="polite" no elemento que contém o texto do conselho. Assim, o novo texto é lido automaticamente depois de carregar.
Porém, testando esse método, vi que tanto o TalkBack no Android quanto o VoiceOver no iOS leem o novo texto com a voz do idioma do sistema (português, no meu caso) em vez de no idioma da página, então a pronúncia fica estranha. Um jeito de resolver isso é voltar a focar no texto após ele ser atualizado. Este vídeo mostra como fazer isso: Managing Focus - A11ycasts #22
Achei uma boa ideia você ter colocado uma animação mais demorada para simular um carregamento do texto, já que a API tem um cachê de dois segundos.
O usuário ainda pode sair clicando várias vezes no botão, o que resulta em várias requisições por segundo (veja a aba "Rede" nas DevTools).
Se quiser implementar um mecanismo no front-end para prevenir um "spam" de requisições, você pode desativar o botão após o clique e só reativá-lo depois do tempo do seu setTimeout() (adicionando e removendo o atributo "disabled"):
button.addEventListener("click", () => {
// ...
button.setAttribute("disabled", "");
setTimeout(async () => {
await loadAdvice();
button.removeAttribute("disabled");
}, 960);
});
Parabéns mais uma vez pela solução! Espero ter ajudado!
