BaseAlertBanner

Aviso dentro da página, perto do conteúdo a que se refere. Diz o que aconteceu ou o que está para acontecer e, quando houver, o que a pessoa pode fazer.

Medição de outubro aberta até 10/11. Depois disso, só o fiscal reabre.

Boletim gerado. PDF pronto para assinatura e envio ao SEI.

Aditivo em 46% de 50%. O próximo aditivo de reforma pode passar o limite legal.

Garantia vencida em 12/10. Peça a renovação à contratada antes de aprovar a medição.

Uso

• info: contexto útil que não pede ação imediata.
• success: confirma que uma ação terminou bem.
• warning: algo pode dar errado se nada for feito.
• error: algo deu errado ou bloqueia o fluxo. Diga como resolver.
• O título é curto e diz o fato; o texto explica a consequência ou o próximo passo.
• Um aviso por área. Vários avisos juntos perdem a força.
• Para erro de um campo, use invalidText do BaseField, não um aviso solto.

Com ação

Os dados iniciais podem vir do Projeto 12 (licitações). Número, empresa, valor e processo chegam preenchidos.

A ação é um botão fantasma pequeno, logo abaixo do texto. Use action-loading enquanto a ação estiver em andamento: o botão continua no foco do teclado, mas ignora cliques.

Dispensável

Contrato salvo. As alterações já aparecem para o gestor.

O botão de fechar só avisa com o evento dismiss. Quem usa o componente tira o aviso da tela e leva o foco para um lugar que faça sentido: aqui, o botão "Mostrar de novo". Sem isso, o foco cai no início da página e quem usa teclado perde o lugar.

Depois de uma ação

Marque live quando o aviso de erro ou de atenção aparecer como resposta a algo que a pessoa fez. Assim o leitor de tela interrompe o que está lendo e anuncia o aviso na hora. O :key="tentativas" monta o aviso de novo a cada envio, para que a mesma falha seja anunciada outra vez. Ao fechar, o foco volta para "Enviar medição".

Estilo

Propriedade	Token
Fundo	--tj-support-info-subtle, --tj-support-success-subtle, --tj-support-warning-subtle, --tj-support-error-subtle
Borda	--tj-support-{tom}-border (1 px)
Texto	--tj-support-{tom}-strong
Ícone	--tj-icon-interactive (informação), --tj-support-{tom}-text (demais)
Tamanho do ícone	--tj-icon-md (20 px)
Espaçamento	--tj-space-3 vertical, --tj-space-4 horizontal, --tj-space-3 entre ícone e texto
Raio	--tj-radius-md (8 px)
Fechar	--tj-control-sm (32 px)
Foco (fechar e ação)	contorno de 2 px em --tj-support-{tom}-strong mais --tj-ring; Highlight em cores forçadas

No tema escuro, os mesmos tokens trocam de valor e o contraste se mantém.

Código

<BaseAlertBanner tone="warning" title="Garantia vence em 12/11.">
  Peça a renovação à contratada; sem ela a medição de novembro fica bloqueada.
</BaseAlertBanner>

<BaseAlertBanner
  v-if="falhou"
  tone="error"
  live
  title="Não foi possível enviar a medição."
  action-label="Tentar de novo"
  :action-loading="enviando"
  dismissible
  @action="reenviar"
  @dismiss="fecharErro"
>
  O SEI não respondeu.
</BaseAlertBanner>

import { nextTick, ref } from 'vue'

const falhou = ref(false)
const botaoEnviar = ref(null) // ref="botaoEnviar" on the "Enviar medição" BaseButton

// Hide the banner, then return focus to the button that triggered the send.
async function fecharErro() {
  falhou.value = false
  await nextTick()
  botaoEnviar.value?.$el.focus()
}

Propriedade	Tipo	Padrão	Descrição
tone	'info' | 'success' | 'warning' | 'error'	'info'	Significado do aviso; muda cor, ícone e o nome lido do ícone
title	string	—	Frase curta em negrito antes do texto
live	boolean	false	Só vale para error e warning: o aviso surgiu depois de uma ação e passa a role="alert". Não muda info nem success
dismissible	boolean	false	Mostra o botão de fechar
closeLabel	string	'Fechar aviso'	Nome acessível e dica do botão de fechar
actionLabel	string	—	Texto da ação; sem ele, não há ação
actionIcon	string	—	Ícone da ação, nome do Bootstrap Icons sem bi-
actionLoading	boolean	false	Ação em andamento: ocupada e sem cliques

Eventos: dismiss (clique em fechar) e action (clique na ação, com o MouseEvent).

Slot padrão: o texto do aviso.

Acessibilidade

• Segue os padrões Alert do WAI-ARIA APG e role="status" do WAI-ARIA.
• A mensagem fica numa região com role="status": o leitor de tela anuncia, sem interromper, o que mudar nela depois que ela já está na página. Um aviso status que entra na tela já com o texto costuma não ser anunciado (NVDA e JAWS no Chromium).
• Para confirmar em voz alta uma ação que deu certo (success ou info), deixe o BaseAlertBanner montado (por exemplo com v-show ou dentro de um contêiner que sempre existe) e troque o texto dele, ou use o BaseToast.
• Com live e tom error ou warning, a região vira role="alert" e o anúncio é imediato, inclusive quando o aviso acaba de entrar na tela. Não use live em aviso que já está na página quando ela abre: ele interromperia a leitura sem motivo.
• Uma falha repetida com o mesmo texto não é anunciada de novo. Para anunciar outra vez, monte o aviso de novo com um :key diferente.
• Mantenha tone e live fixos enquanto o aviso está na tela. Se mudarem, o componente cria uma região nova em vez de trocar o papel da atual, porque leitores de tela lidam mal com essa troca.
• O ícone vem primeiro dentro da região, então o nome do tom é lido antes do título e do texto.
• Os botões de ação e de fechar ficam fora da região anunciada, para o leitor de tela ler só a mensagem. O botão de ação aponta para a mensagem com aria-describedby: quem chega nele pelo Tab ouve o contexto ("Tentar de novo", seguido do erro).
• O aviso não rouba o foco. Ação e fechar entram na ordem do Tab e respondem a Enter e Espaço.
• A cor nunca é o único sinal: cada tom tem um ícone de forma diferente, e o ícone tem nome ("Informação", "Sucesso", "Atenção", "Erro") lido antes do texto.
• O botão de fechar tem 32 px e nome acessível. Fechar e ação mostram, no foco, um contorno de 2 px na cor do texto do tom, com contraste de pelo menos 3:1 sobre o fundo de qualquer tom e nos dois temas. Em cores forçadas (alto contraste do Windows), o contorno usa a cor Highlight do sistema.
• Ao fechar, leve o foco para um elemento próximo, como nos exemplos acima, para ele não cair no início da página.
• A transição do botão de fechar é desligada com prefers-reduced-motion.
• Testado com axe em todos os tons, com e sem live, com ação, ação em andamento e botão de fechar.