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).
Geração
Geração de julho: 9.842 kWh. Série mensal pré-carregada no DOM.
Faturas
Últimas 12 faturas processadas. Link interno de teste.
Equipamentos
Inversores e strings cadastrados nesta unidade.
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.
Anual
Auditoria
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.
Vencendo
3 propostas vencem nos próximos 5 dias.
Fechadas
48 propostas encerradas neste trimestre.
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.
- Escopo
- Valores
- 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).
⚓ Alvo do link interno de teste dos painéis.