Frontend Web - Acessibilidade

Este documento descreve os recursos de acessibilidade do frontend web.

Base atual

• Componentes base com Radix UI (src/components/ui/*)
• Painel de acessibilidade global: src/components/AccessibilityPanel.tsx
• Estilos e comportamento globais distribuídos em src/styles/* e utilitários da aplicação

Princípios adotados

1. Navegação por teclado em elementos interativos.
2. Semântica adequada de HTML e ARIA quando necessário.
3. Indicador de foco visível.
4. Contraste mínimo para leitura em estados padrão e hover.

Navegação por teclado

• Tab e Shift+Tab para foco sequencial
• Enter e Space para ativação
• Esc para fechar overlays (dialogs/popovers compatíveis)
• ⌘K (macOS) ou Ctrl+K (Windows/Linux) para abrir a command palette global

Command palette (acessibilidade)

• A palette pode ser aberta por atalho global ou botão no header/sidebar.
• Navegação entre itens por ArrowUp/ArrowDown.
• Execução de item focado com Enter.
• Fechamento com Esc mantendo foco consistente no elemento anterior.
• Itens são agrupados por seção (Ações e Páginas) para melhorar leitura e orientação.

Regras para componentes de feature

1. view.tsx deve permanecer declarativa e sem lógica de dados.
2. Componentes em src/modules/**/components devem preservar semântica (button, label, fieldset, nav, main etc.).
3. Inputs devem ter rótulo explícito (label visível ou aria-label quando aplicável).
4. Ícones isolados em botões devem possuir texto alternativo acessível.

Checklist de revisão

• Todos os controles são alcançáveis por teclado?
• O foco é visível em tema atual?
• Mensagens de erro de formulário têm associação com o campo?
• Estados desabilitados não dependem apenas de cor?
• Componentes dinâmicos mantêm leitura consistente para screen reader?

Relação com Design System

Qualquer ajuste de acessibilidade em componentes base deve refletir em:

• src/components/ui/*
• src/modules/design-system/*
• documentação em design-system.md