# Auditoria de UI / UX / Acessibilidade — Nexus (julho/2026) Revisão completa das quatro frentes: **operação/portaria em tempo real**, **gestão/admin (formulários e tabelas)**, **morador (mobile/PWA)** e **acessibilidade (WCAG 2.1 AA)**. Escopo varrido: 165 views, `app.css` (681 linhas), `app.js`, `push.js`, `sw.js`, layout, componentes de navegação e o manifest do PWA. Este documento registra **o que estava errado, o que foi corrigido e o que ficou pendente**. As regras que passaram a valer estão no `CLAUDE.md` §3.1 — leia antes de mexer na interface. --- ## 1. Resumo | Severidade | Achados | Corrigidos | Pendentes | |---|---|---|---| | **P0** — quebra de uso / risco operacional / barreira séria | 11 | 11 | 0 | | **P1** — atrito real | 14 | 14 | 0 | | **P2** — polimento | 9 | 8 | 1 (decisão consciente — §5) | O achado mais grave não foi de estética: **11 confirmações de ações destrutivas nunca apareciam** (a ação disparava direto), e **o painel da portaria mostrava dado velho como se fosse atual** quando a rede caía. --- ## 2. P0 — corrigidos ### 2.1 Confirmação de ação destrutiva que NUNCA aparecia O `app.js` interceptava `form[data-confirm]` e `a[data-confirm]`, mas **não** `button[data-confirm]`. Havia 11 botões assim, em 8 telas — incluindo **excluir documento**, **remover item de checklist**, **cancelar OS**, **excluir plano preventivo**, **ligar/desligar a bomba d'água**. O usuário clicava e a ação executava **sem nenhuma pergunta**, exatamente onde se acreditava haver uma trava. Corrigido em `public/assets/js/app.js` (novo handler de clique em `button[data-confirm]`, usando `form.requestSubmit(btn)` para preservar o submitter). ### 2.2 Portaria vendo dado velho achando que é atual No `/monitor`, se o feed caísse (rede, backend fora), o selo verde **"● Ao vivo" continuava pulsando** e a lista simplesmente parava de crescer. Mesmo problema no painel de **água** (o nível congelava — e alguém pode ligar a bomba olhando um número velho) e no **mural**. Corrigido: em `monitor/screen.php`, `automation/water.php`, `mural/screen_sistemas.php` e `mural/screen_cameras.php`, o poll conta falhas consecutivas e, na 2ª, troca o indicador para **"SEM CONEXÃO — última atualização HH:MM:SS"** (vermelho, sem pulso). Vocabulário compartilhado no CSS: `.live-flag` / `.live-flag.stale`. Além disso: no mural, **"Carregando…" era verde** (`status ok`) — visualmente idêntico a "tudo normal". Se a primeira chamada falhasse, a TV ficava exibindo um ✅ verde para sempre. Agora o carregando é neutro e o erro é vermelho. E a tela de câmeras, que ficava **preta** se o primeiro load falhasse (indistinguível de monitor desligado), agora mostra o erro. ### 2.3 Contraste: nenhum botão sólido passava em AA Calculado com a fórmula WCAG: **nenhum** ponto do gradiente de `.btn-primary`, `.btn-success` e `.btn-danger` atingia 4.5:1 com o texto branco — em nenhum dos dois temas. No tema escuro chegava a **2.14:1**. São os botões de Salvar/Confirmar/Excluir. Badges, alertas, flash e `env-tag` reprovavam pelo mesmo motivo: usavam a cor de acento como cor de texto (o `--warning` dava **2.61:1**, e nem sobre branco puro chega a 3:1). Corrigido com tokens novos no `app.css`: - `--success-text` / `--warning-text` / `--danger-text` / `--info-text` / `--neutral-text` / `--accent-text` → versões escurecidas, medidas para ≥4.5:1 sobre superfície e sobre `*-soft`. - `--btn-primary-bg` / `--btn-success-bg` / `--btn-danger-bg` + `--on-accent` → botão de **cor cheia** (sem gradiente). No claro: texto branco sobre fundo escurecido. No escuro: tinta escura sobre a cor viva (padrão de dark UI). - `--text-faint` no escuro estava em 3.3:1 sobre `--surface-3` — clareado. ### 2.4 Autoatendimento de foto: beco sem saída Em `/minha-foto`, se o morador **negasse a permissão da câmera** (comum na 1ª vez), o código **escondia** o botão de captura manual e desabilitava o início — sem `` em lugar nenhum. Não havia **nenhum caminho** para concluir. Idem em desktop sem webcam. Corrigido: botão **"Enviar foto do arquivo"** sempre disponível, com recorte 3:4 e **a mesma validação de QA** do fluxo da câmera (`/minha-foto/qa`). A falha de permissão agora devolve o usuário às instruções, onde a alternativa está visível. ### 2.5 Modal de confirmação inacessível Sem foco preso (Tab escapava para a página atrás), sem devolver o foco ao fechar, e o **foco inicial caía no botão vermelho "Confirmar"** — um Enter reflexo executava a ação destrutiva. Corrigido: focus trap, `aria-labelledby`, foco inicial no **Cancelar**, foco devolvido ao fechar. ### 2.6 Ordenação de tabela era mouse-only O `` clicável não tinha `tabindex`, `role` nem handler de teclado: **impossível ordenar por teclado** em ~30 tabelas. E o estado não era anunciado. Corrigido (Enter/Espaço + `aria-sort`). ### 2.7 Flash sem `aria-live` `Flash::success/error` é o **único** feedback de salvar/excluir em ~150 telas — e não tinha `role`/`aria-live`. Leitor de tela nunca anunciava. Corrigido no layout. ### 2.8 Botão de push cobrindo a navegação O botão "Ativar notificações" era `position:fixed; bottom:16px; z-index:9999` — **por cima** da bottom-nav (64px, z-index 40), cobrindo o último item do menu no celular. Corrigido (fica acima da barra) + agora usa `.btn` do design system e explica como reverter se o usuário bloquear. ### 2.9 PWA não instalável O `manifest.webmanifest` **não tinha `icons`** — e não existia nenhum ícone no projeto (nem favicon). Gerados `icon-192`, `icon-512`, `icon-maskable-512`, `apple-touch-icon` e `favicon.ico`, e declarados no manifest. --- ## 3. P1 — corrigidos - **Rótulos não associados**: ~81% dos arquivos com `