♿️ Fix : remove título duplicado e adiciona ícones decorativos em “OQueFazerAgora”#78
Merged
♿️ Fix : remove título duplicado e adiciona ícones decorativos em “OQueFazerAgora”#78
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🎯 Contexto / Problema
Antes desse ajuste, os cards de orientação exibiam o título duplicado, por exemplo:
Isso acontecia porque o componente renderizava dois campos lado a lado (icone + titulo), mas o icone era o mesmo texto do título. O resultado era redundância visual e ruído na leitura do usuário.
✅ O que foi feito
Este PR ajusta o cabeçalho de cada card dentro de frontend/src/components/OQueFazerAgora.jsx para manter clareza visual e boa semântica de acessibilidade:
aria-hidden="true" no do ícone → leitores de tela não anunciam o emoji como conteúdo textual indevido.
aria-label={Card de orientacoes para ${persona.titulo}}
Isso garante que leitores de tela tenham um rótulo entendível para o agrupamento do conteúdo.
🧾 Mudanças técnicas principais
📌 Arquivo alterado: frontend/src/components/OQueFazerAgora.jsx
Atualização da constante PERSONAS:
Ajuste no cabeçalho renderizado:
Exemplo do trecho final:
npm test -- --watchAll=false
📌 Resultado: todas as suítes passaram.