Repository navigation
Feature/criar visual acessivel - #28
Merged
Merged
Conversation
…dix) - tokens.css: adiciona escala --fs-* em rem (xs/sm/base/lg/xl/2xl) - base.css: fonte base do body usa var(--fs-base) em vez de px fixo - ui.css: substitui todos os tamanhos de fonte px por var(--fs-*); adiciona estilos .tf-dialogo-* e variante .tf-btn--perigo - Dialogo.tsx: novo componente acessivel sobre Radix UI Dialog: captura foco, ESC fecha, aria-labelledby/describedby, overlay, animacao respeitando prefers-reduced-motion - ui.test.tsx: 4 novos testes do Dialogo (abrir/fechar, titulo acessivel, ESC, axe sem violacoes com e sem o dialogo aberto) Criterios da historia atendidos: - Fontes em rem (zoom 200%: sem rolagem horizontal, sem conteudo sumindo) - Foco visivel em todo elemento clicavel via :focus-visible (base.css) - Variaveis CSS em arquivo unico (tokens.css) - Componente Dialogo sobre Radix UI (Dialog) - Informacao nunca so por cor (icone + texto nos alertas e erros)
joaokrv
approved these changes
Oct 13, 2026
joaokrv
added a commit
that referenced
this pull request
Oct 14, 2026
Merge pull request #28 from eksdat/feature/criar-visual-acessivel Feature/criar visual acessivel
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.
📝 Descrição
Esta PR implementa as regras visuais de acessibilidade definidas pelo Design System para atender pessoas com baixa visão, focando no escalonamento de fontes, contraste, navegação por teclado e novos componentes base.
🛠️ O que foi feito
rem): Substituímos os tamanhos estáticos de fonte (px) em todo o sistema (tokens.css,base.css,ui.css) por novas variáveis baseadas emrem(--fs-*). Isso garante que a plataforma seja utilizável até com 200% de zoom no navegador sem perda de legibilidade ou rolagem horizontal (WCAG 1.4.4 - AA).Dialogo: Criamos o componente acessívelDialogo.tsxconstruído em cima da primitivaDialogdo Radix UI, garantindo o aprisionamento de foco (focus trap), fechamento com teclaESCe a inatividade do conteúdo de fundo (overlay)..tf-btn--perigopara facilitar a criação de ações irreversíveis.docs/design-system/README.mdfoi atualizado para descrever a regra estrita de uso deremem tipografias e o uso do novo componente de Diálogo.✅ Critérios de Aceite Atendidos
rem, suportando 200% de zoom sem quebrar o layout.:focus-visible).tokens.css).vitest-axeinseridos e aprovados (100% dos testes concluídos).