Foundations · Accessibility · 03

Focus & Keyboard

Todo controle do Pulso é navegável apenas com teclado. Esta página documenta o focus ring canônico, o mapa de teclas por componente e o contrato de hit target. Se um componente não passa nessas três checks, ele não está pronto.

Focus ring · canônico

Um único padrão para todo o produto. Suficientemente espesso para enxergar de canto-de-olho, suficientemente sutil para não brigar com a UI.

Token cor
--ring · derivado de --primary com 32% alpha (light) / 40% alpha (dark)
Espessura
--ring-width: 2px · solid
Offset
--ring-offset: 2px · respira em volta do elemento, evita aglutinar com a borda
Pseudo-class
:focus-visible sempre — nunca :focus sozinho. Mouse não dispara ring, só teclado.
Contraste
AA 4.88:1 sobre sidebar, AA 5.48:1 sobre card

Demo · estado focado

Clique nos controles ou navegue por Tab para ver o focus ring real. A segunda linha mostra os mesmos controles com ring permanentemente aplicado para comparação.

Focus real (Tab para ver)

Focus simulado (sempre visível)

Hit target

Apple HIG · Material · WCAG 2.5.5 — todos exigem ≥ 44×44px para alvos primários em touch. O Pulso adota 44×44 como contrato, com afrouxamento para 32×32 em UI puramente desktop densa (tabelas, filter bars). Nunca abaixo de 32.

44 × 44
Token --touch-target · default em mobile e CTAs primárias
✓ contrato WCAG 2.5.5
36 × 36
Prominent · CTA desktop, ações em destaque
✓ ok desktop
32 × 32
Default · ações inline, controles densos · limite inferior do Pulso
✓ ok desktop denso
28 × 28
Compact · só dentro de tabelas com row hover, jamais standalone
✗ proibido fora de tabela

Tab order · regras gerais

  1. Top-to-bottom, left-to-right — segue o fluxo visual.
  2. Skip link no topo da página: Tab com página recém-carregada deve focar "Pular para conteúdo principal".
  3. Nunca use tabindex > 0. Só 0 (foca) ou -1 (não foca via teclado, mas pode receber focus programático).
  4. Modais e sheets: focus trap obrigatório. Tab não escapa. Esc fecha e devolve foco ao trigger.
  5. Item ativo em listas/menus recebe foco visível mesmo sem :focus-visible.

Keyboard map · por componente

Mapa canônico de teclas. Cada componente do Pulso implementa exatamente isso. Desvios precisam de RFC.

Button · IconButton

TeclaAçãoNotas
Tab / Shift+TabFoca / desfocaDefault browser
EnterDispara onClick
SpaceDispara onClickWAI-ARIA exige equivalência

Input · Textarea

TeclaAçãoNotas
TabFoca próximo controle
EscLimpa busca (se type=search) · cancela edição inline
EnterSubmete form paiApenas em <input> · textarea quebra linha

Checkbox · Switch · Radio

TeclaAçãoNotas
SpaceToggle checkbox/switch · seleciona radio
↑ / ↓ / ← / →Move entre opções (radio group)Wrap no fim

Select · Dropdown · Command

TeclaAçãoNotas
Enter / Space / ↓Abre menu
↑ / ↓Navega opçõesWrap habilitado
Home / EndPrimeira / última opção
A–ZType-ahead · pula para opção começando com a letraReset após 1s sem digitar
EnterSeleciona opção em destaque
EscFecha sem selecionar · foco volta ao trigger

Dialog · Sheet · Responsive Sheet

TeclaAçãoNotas
Tab / Shift+TabCicla dentro do modal · trap obrigatório
EscFecha · foco volta ao triggerSalvo se preventClose
EnterConfirma ação primária (em dialog de confirmação)Não em dialog editável (form)

Tabs

TeclaAçãoNotas
← / →Move entre tabs · ativa imediatamenteWrap habilitado
Home / EndPrimeiro / último tab
TabSai do tablist para conteúdo do tab ativoTablist = único stop · panel = stops próprios

Table · com row select

TeclaAçãoNotas
↑ / ↓Foca linha anterior / próximaroving tabindex
SpaceToggle seleção da linha focada
Shift+↑/↓Estende seleção em range
Cmd+ASeleciona todas da página atual
EnterAbre detalhe da linha
EscLimpa seleção

Command Palette

TeclaAçãoNotas
Cmd+KAbre command paletteSempre disponível globalmente
↑ / ↓Navega resultados
EnterExecuta comando focado
EscFecha palette

Accordion · Collapsible Card

TeclaAçãoNotas
Enter / SpaceExpande / colapsaNo header
↑ / ↓Move entre headersQuando múltiplos itens

Atalhos globais do produto

Reservados para o Crisis Monitor. Cada atalho aparece num cheat sheet acessível via ?.

AtalhoAçãoContexto
Cmd+KCommand paletteGlobal
G DIr para DashboardGlobal · sequência
G CIr para CasosGlobal · sequência
G SIr para SettingsGlobal · sequência
NNovo casoDashboard · Casos
AArquivar casoCrisis Detail
Cmd+EnterAprovar & enviar respostaCrisis Detail · IA panel
?Mostra cheat sheetGlobal

Auditoria de focus · status

Todos os atoms e form atoms checados. Componentes do Crisis Monitor podem ainda carecer do ring — issue tracking inline com a release v2.

ComponenteFocus ringKeyboard map
Button✓ AA✓
Input✓ AA✓
Checkbox · Switch · Radio✓ AA✓
Select · Dropdown · Command✓ AA✓
Tabs✓ AA⚠ verificar Home/End
Dialog · Sheet · Responsive Sheet✓ AA⚠ implementar focus trap
Table⚠ row focus pendente⚠ multi-select pendente
Accordion · Collapsible Card✓ AA✓

Regras

Faça
  • Use sempre :focus-visible, nunca :focus sozinho. Mouse não dispara ring.
  • Mantenha hit target ≥ 32×32 em desktop denso, ≥ 44×44 em mobile e CTAs primárias.
  • Implemente focus trap em todo Dialog/Sheet. Esc fecha e devolve foco.
  • Skip link no topo de toda página: Tab com página recém-carregada foca "Pular para conteúdo".
Evite
  • Não use outline: none sem oferecer substituto visível.
  • Não use tabindex > 0. Quebra a ordem natural.
  • Não dispare ações somente em Enter sem Space em botão (WAI-ARIA exige ambos).
  • Não esconda controles atrás de hover. Hover não existe em teclado.