Acessibilidade

O que todo componente do Camaleo garante em todos os estilos, como isso é testado e o contraste medido das cores de cada estilo.

A meta é WCAG 2.2 AA em todos os estilos, em claro e escuro, com qualquer cor de marca. Um estilo pode mudar forma, profundidade, tipografia e movimento; não pode tirar um nome, uma tecla ou um anel de foco.

O que todo componente garanteCopy Anchor Link

• Teclado. Cada componente segue um padrão do WAI-ARIA Authoring Practices e herda o modelo de teclado da primitiva por baixo (Base UI, ou React Aria nas datas). As setas andam dentro de um widget, o Tab passa de um widget a outro, o Esc fecha popups e devolve o foco ao gatilho.
• Foco. O foco é desenhado com outline, nunca só com box-shadow, então sobrevive às cores forçadas. A cor dele, --cml-focus-ring, é testada com 3:1 ou mais contra a superfície em todos os estilos.
• Nomes. Botões e regiões embutidos têm nome (fechar, limpar, mostrar senha, página 3…), que você traduz com o MessagesProvider. Controles só com ícone que você monta ainda precisam de aria-label.
• Alvos. Checkboxes, rádios, links da trilha e outros controles pequenos mantêm uma área de clique de pelo menos 24 × 24 px, mesmo nos estilos densos.
• Movimento reduzido. Reduz, não remove: com prefers-reduced-motion, distâncias e escalas vão a zero, fades curtos ficam, painéis abrem de uma vez, o brilho do skeleton para e uma barra de progresso indeterminada pulsa no lugar.
• Cores forçadas. Os componentes reservam uma borda transparente que aparece no alto contraste do Windows, e os estados selecionados passam para cores do sistema (Highlight, CanvasText).
• Transparência reduzida. glass e cupertino trocam as superfícies translúcidas por opacas com prefers-reduced-transparency: reduce e em navegadores sem backdrop-filter.
• Direita para a esquerda. Os componentes invertem com o DirectionProvider; veja Idiomas e RTL.

Como é testadoCopy Anchor Link

Os testes ficam em packages/react/test e rodam num navegador de verdade (Vitest em modo navegador com Playwright).

• A matriz (matrix.test.tsx) renderiza uma vitrine com todos os componentes em 13 estilos × claro e escuro × 5 cores de marca difíceis (#2563eb, #facc15, #22d3ee, #ff7f50 e #808080): 130 escopos. Em cada um, roda o axe com as regras A/AA da WCAG 2.0, 2.1 e 2.2, confere que o anel de foco e a borda dos controles chegam a 3:1, que os tons de perigo, sucesso, aviso e informação chegam a 4,5:1, e depois abre 17 popups (diálogo, menu, select, seletor de data, toast…), um por vez, para conferir que cada um mantém o estilo pelo portal e também passa no axe. São 2.340 execuções.
• Texto sobre imagem. O axe não mede texto sobre gradiente e vidro e marca o caso como "incompleto". A matriz mede esses nós em pixels reais (pixel-contrast.ts): duas capturas, com e sem o texto, e o pior pixel das letras contra o fundo logo atrás.
• Teclado (keyboard.test.tsx): 30 testes que usam os componentes com teclas de verdade, do Espaço num checkbox ao PageUp num calendário.
• As docs. Cada página deste site, com os exemplos ao vivo, passa pelo axe em 4 estilos, claro e escuro, em larguras de desktop, tablet e celular, nos dois idiomas.

Relatório de contrasteCopy Anchor Link

A tabela abaixo é medida, não digitada: o apps/docs/scripts/contrast-report.mjs carrega o tokens.css e o CSS de cada estilo num navegador, resolve os tokens com cada uma das cinco cores de marca da matriz e guarda a menor razão das cinco. Os números são arredondados para baixo, então 4,499 aparece como 4,49.

O que ele mede, sempre contra a cor da página do estilo, --cml-surface, salvo indicação:

• Texto, 4,5:1 ou mais: --cml-fg (texto corrido), --cml-fg-secondary, --cml-fg-muted, --cml-accent-text (texto e links na cor da marca), --cml-accent-fg sobre --cml-accent (texto num botão sólido da marca) e os tons --cml-danger, --cml-success e --cml-warning.
• Não texto, 3:1 ou mais: --cml-border-control (a borda de campos e opções) e --cml-focus-ring.

Ele não mede texto sobre superfícies elevadas, estados de hover nem painéis de vidro sobre o fundo; a matriz cobre esses casos nos componentes renderizados.

Todos os pares atingem a meta em todos os estilos e modos. Rode node scripts/contrast-report.mjs em apps/docs depois de mudar um estilo para atualizar os números.

Autêntico ou acessívelCopy Anchor Link

Alguns estilos falham no contraste por natureza: o neumorphism não tem bordas, o vidro põe texto sobre o que estiver atrás, um sistema operacional clássico desenha um retângulo de foco pontilhado de 1 px. O projeto decidiu (decisão 9 do plano) que todo estilo é acessível por padrão, e que uma variante autêntica seria opcional e marcada como "não garante AA". Nenhuma variante autêntica existe ainda.