Componentes
16. Banner
seed-componentes.md v1.43 · §16seção 18 de 9816-banner-estavel-validado-pelo-rafael-em-2026-08.md · MD5 f8f2db8eTítulo completo no canon: Banner — estável · validado pelo Rafael em 2026-08-04 (preview v0.15 + suite; P2 em dois níveis, corrigido na verificação primária)
Base: a mesma do §15, com peso em GOV.UK notification banner (primária: posicionamento pré-h1, largura de conteúdo, mecânica de foco type=success), USWDS site alert (cor em emergência), Atlassian banner (system-level, empurra conteúdo), NN/g banner blindness (via GOV.UK/NHS).
16.1 Papel — DOIS níveis, nunca misturados (P2 revisado)#
A verificação primária expôs que "banner" no mercado são dois componentes: o GOV.UK notification banner tem largura do conteúdo da página e vive imediatamente antes do h1; o banner Atlassian/USWDS site alert é full-width no topo da viewport. A SEED formaliza os dois níveis num componente só com variante estrutural:
- Banner de sistema (
--nivel-sistema): full-width, topo da viewport, EMPURRA o conteúdo (nunca sobrepõe — cobriria header/nav do ERP). Só para condição do sistema/serviço inteiro: indisponibilidade, manutenção, emergência. Raro por definição. - Banner de página (
--nivel-pagina): largura do conteúdo, imediatamente antes do h1. Para notícia relevante à página inteira ou desfecho pós-redirect ("proposta enviada" → volta pra listagem) quando não cabe página de confirmação.
Descartado: banner de página como variante do alerta (§15) — a mecânica ARIA é diferente (P4) e a posição é fixa (pré-h1), não contextual.
16.2 Decisões P1–P5#
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| P1 | UM banner por vez, por nível; se concorrem, exibe só o de maior severidade (erro > atenção > informação > sucesso); mensagens combináveis combinam antes | GOV.UK primária: evitar mais de um — combinar ou mostrar só a maior prioridade; NN/g banner blindness: uso excessivo agrava a cegueira | Empilhar banners (mata a atenção) |
| P2 | Dois níveis (§16.1); nível de sistema nunca sobrepõe conteúdo | GOV.UK (página) + Atlassian/USWDS (sistema) — ver §16.1 | Full-width único para tudo (era o P2 original, corrigido) |
| P3 | Banner é landmark: role="region" + aria-labelledby no título — navegável por leitores de tela; persiste até resolução/dispensa; dispensa não reaparece na sessão |
GOV.UK primária (markup exato); USWDS: aria-label(ledby) coloca o banner no menu de landmarks | Live region permanente (banner não é anúncio contínuo) |
| P4 | Banner de página pós-redirect (sucesso/erro de ação): role="alert" + foco movido ao banner via JS no load (tabindex="-1" + focus()), com opção de desligar; banner informativo: role="region", sem foco. Remover o banner de sucesso ao navegar |
GOV.UK primária: type=success → role="alert" + JS move o foco no load (existe disableAutoFocus); garante que AT perceba o desfecho |
Foco em todo banner (rouba o início da leitura); autofocus HTML (dispara antes do AT montar) |
| P5 | Cor: mesmo emergência NÃO usa vermelho massivo full-width — a posição já carrega o peso; severidades T1; segue 70/20/10 da marca | USWDS: vermelho/laranja pesado em emergência produz medo/pânico; posição no topo já dá peso suficiente; vermelho é interface-only e nunca massa (tokens v1.2) | Banner vermelho sólido |
16.3 Anatomia e tokens#
Mesma pele do alerta (§15.3: fundo -bg, borda, barra 4px, ícone, título T5-b) com as diferenças estruturais: nível sistema é full-bleed (barra lateral vira barra superior 4px, padding lateral acompanha o gutter do layout + --seed-safe-* em app); nível página respeita a largura da coluna de conteúdo (GOV.UK: se o conteúdo ocupa dois terços, o banner ocupa dois terços). Fechar 44×44 quando dismissível (P3).
16.4 Os 7 testes#
- Borda/contraste medidos. 2. 3 sinais. 3. Grayscale: barra + ícone. 4. Sistema × página distinguíveis a 1s (full-bleed × coluna). 5. Um por nível (P1). 6. Visível sem interação. 7. 360px: os dois níveis convergem visualmente (a coluna É a tela), texto quebra sem truncar. (Verificado: suite v0.15, aprovado.)