Bloco 5 — Navegação · preview v0.40c

Bloco completo: 5A tabs §34 · 5B menu §35 · 5C breadcrumb §36 + paginação §37 · 5D stepper §38 · 5E command palette §39.

Detalhe da UC 4482 — ativação automática (TB3 default)

Painéis pré-carregados: setas já trocam o painel. A aba corrente vai para o fragmento da URL (TB2).

Resumo

Visão geral da UC: potência instalada 75 kWp, modalidade A4 verde, compensação ativa. Conteúdo pré-carregado — por isso a ativação automática (TB3).

Relatórios — ativação manual (TB3: conteúdo sob demanda)

Setas só movem o foco; Enter/Espaço ativa. O painel lazy entra com skeleton (Régua de Espera).

Mensal

Relatório do mês corrente, pré-carregado.

Propostas — abas como filtro com contador (TB7)

Quando a aba filtra uma lista, o contador inline via badge §21 é obrigatório (Fiori).

Abertas

12 propostas aguardando resposta do cliente.

Menu de ações — proposta #1290 (MN1 saída 1: role=menu)

APG menu button: Enter/Espaço/↓ abrem no 1º item, ↑ abre no último, setas com wrap, typeahead, Esc devolve ao trigger. Destrutivo no fim; indisponível com motivo (MN6).

Botão dividido — ação padrão + variantes (§54 · BD1–BD6)

O corpo executa a ação mais frequente; o gatilho colado abre as variantes. São DOIS botões reais: um clique nunca faz coisas diferentes conforme a metade em que caiu, e o leitor de tela anuncia as duas ações separadamente. O menu traz cabeçalho de seção com ação secundária (MN9) — o "Gerenciar" do print não é uma opção da lista, é atalho para administrar a própria lista, então é botão e fica fora da varredura de menuitem.

Overflow "⋯" com alternáveis — exibição da tabela (MN2/MN4)

Icon-button nomeado; menuitemcheckbox e grupo menuitemradio permanecem abertos ao alternar (opção ≠ ação).

Disclosure de links — fronteira MN1 (saída 2: o que o shell consome)

Botão aria-expanded + lista de links. ZERO roles de menu — navegação não é menu (Roselli/APG disclosure).

Breadcrumb — trilha de navegação (BC)

Localização na hierarquia (nunca histórico). Último item = página atual, sem link, aria-current="page". Colapso: primeiro + último com "…" expansível.

Paginação — modelo de tabela (PG)

Itens por página + faixa "X–Y de N" (mono) + janela de páginas com reticências + anterior/próxima. Na faixa 360px vira compacta ("Página X de Y").

Stepper — wizard de proposta (ST)

Fluxo ERP 3–8 etapas (Fiori): concluídas clicáveis (voltar livre), corrente com aria-current="step", futuras não-interativas. Avançar valida a etapa. No mobile vira vertical.

  1. Escopo
  2. Valores
  3. Revisão

Variante para formulário público (GOV.UK/DWP): texto simples Etapa 2 de 4 — Escopo, sem indicador gráfico.

Command palette ⌘K (CP)

Combobox (§11) dentro de modal (§30): o foco fica no input; setas movem aria-activedescendant; Enter executa; Esc devolve ao gatilho. Abre por Ctrl/⌘K (treinado pela busca §4).

Nenhum resultado. Tente outro termo.

⚓ Alvo do link interno de teste dos painéis.