Skip to content

♿️ Fix : remove título duplicado e adiciona ícones decorativos em “OQueFazerAgora”#78

Merged
TeT95 merged 1 commit intomainfrom
fix/duplicated-heading
Mar 31, 2026
Merged

♿️ Fix : remove título duplicado e adiciona ícones decorativos em “OQueFazerAgora”#78
TeT95 merged 1 commit intomainfrom
fix/duplicated-heading

Conversation

@matheuscarvalheira
Copy link
Copy Markdown
Contributor

🎯 Contexto / Problema
Antes desse ajuste, os cards de orientação exibiam o título duplicado, por exemplo:

  • Atendimento Atendimento
  • Gestao Gestao
  • Populacao Populacao

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:

  • 🧩 PERSONAS[*].icone deixou de repetir texto e passou a ser um ícone visual (emoji):
  • 🩺 Atendimento (perfil médico)
  • 📋 Gestão (perfil gestor)
  • 👥 População (perfil cidadão)
  • ♿️ O ícone agora é tratado como decorativo, usando:

aria-hidden="true" no do ícone → leitores de tela não anunciam o emoji como conteúdo textual indevido.

  • 🔎 O texto principal do card continua sendo o titulo, sem repetição.
  • 🧠 Mantivemos o contexto acessível do card, que já usa:

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:

  • icone agora contém emoji (não texto)

Ajuste no cabeçalho renderizado:

  • Ícone com aria-hidden="true"
  • Mantém o título legível e único

Exemplo do trecho final:

  • 👁️ Ícone aparece visualmente
  • ♿ Leitor de tela foca no rótulo e no conteúdo relevante, sem duplicação
  • 🧪 Como foi testado
  • ✅ Testes rodados no frontend:

npm test -- --watchAll=false

📌 Resultado: todas as suítes passaram.

  • 🧠 Resultado / Benefícios
  • 🧹 Remove duplicação visual (“Atendimento Atendimento” etc.)
  • ♿ Melhora a experiência para acessibilidade ao separar “ícone decorativo” de “texto informativo”
  • 👀 Interface mais limpa e fácil de ler
  • 🧩 Mantém compatibilidade com a estrutura atual e sem quebra de API do componente

@TeT95 TeT95 merged commit 1058cc0 into main Mar 31, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants