banco-data.html · bancada do §61 · preview v0.4 —
catálogo de ESTADOS do seletor de data, intervalo e hora (DH1–DH18), do
seed-componentes.md. Bancada, não tela (CP31). Dado sintético.
O “hoje” desta bancada é FIXADO em 16 de agosto de 2026, domingo — um calendário que muda todo dia
não tem âncora: os bytes mudariam sozinhos e nenhuma guarda poderia afirmar nada. A data de
referência entra pelo gerador, declarada, em vez de vir de Date.now().
A régua em uma frase: pergunte se o usuário JÁ SABE a data. Sabe — nota fiscal, nascimento, prazo em contrato — e digitar é mais rápido que caçar num calendário. Não sabe, e precisa do contexto que só o calendário dá: que dia da semana cai, quantos dias faltam, se cai no fim de semana. Os dois existem sempre, e nenhum é opcional — escolher um seria acertar metade dos casos.
A grade é <table role="grid"> — row,
columnheader e gridcell vêm implícitos de tr,
th e td. Cada dia tem nome acessível completo (dia, mês,
ano e dia da semana), nunca só o número: no produto de referência o dia é um
button "2", e o leitor de tela anuncia exatamente isso.
Ele funciona. Clique num dia para começar o intervalo e em outro para fechá-lo; passe o mouse entre os dois e o vão se desenha antes do clique. As setas mudam de mês, “Hoje” volta para 16/08/2026, e os atalhos preenchem. No teclado: Tab entra na grade com um pressionamento, ←/→ andam por dia, ↑/↓ por semana, Home/End vão às pontas da semana, PageUp/PageDown mudam o mês, com Shift mudam o ano, e Enter ou Espaço escolhem.
O valor exibido fora de campo usa a mesma formatação do campo. E vazio não é hoje: ausência de data exibe travessão, porque "sem prazo" e "vence hoje" são coisas diferentes — herda o VD16.
| # | Contrato | Onde se prova |
|---|---|---|
| DH1 | O campo de TEXTO existe sempre e aceita digitação | Todos os campos desta página |
| DH2 | O calendário existe sempre, com gatilho de nome próprio e alvo de 44px | .cd__gatilho, com aria-label por campo |
| DH3 | O formato esperado é VISÍVEL, não só no placeholder | .cd__formato sob cada campo — permanente |
| DH4 | pt-BR dd/mm/aaaa, inputmode="numeric", parser tolerante a / . - | Digite 31.12.2026 ou 31-12-26 — e tente 31/02/2026 |
| DH5 | A grade é role="grid" sobre <table>, com abbr nos cabeçalhos | O calendário abaixo |
| DH6 | Nome acessível COMPLETO de cada dia — nunca só o número | Contraexemplo medido (C122): no produto de referência é button "2" |
| DH7 | aria-selected no escolhido; aria-current="date" em hoje | Hoje tem anel; escolhido tem fundo cheio — marcas diferentes para coisas diferentes |
| DH8 | Teclado do APG inteiro, incluindo PageUp/Down e Shift+PageUp/Down | Foque um dia e navegue |
| DH9 | UM tab stop na grade (roving) | Tab entra e sai do calendário com um pressionamento |
| DH10 | Intervalo é UM controle: dois campos e um calendário compartilhado | Os três estados de “Período do relatório” |
| DH11 | A validação diz QUAL dos dois corrigir, e sugere o valor | Estado “fim antes do início” |
| DH12 | O vão entre os extremos é desenhado; extremos ≠ meio | O calendário abaixo — único contrato decidido sem leitura visual |
| DH13 | A hora é campo SEPARADO e opt-in; ausência não é erro | Estado “Início da visita” e o campo de hora no rodapé do calendário |
| DH14 | ISO na camada de dado; a string ISO NUNCA passa por new Date(string) | window.__DATA.deISO — construtor por componentes, não por string |
| DH15 | Atalho relativo mostra a data ABSOLUTA que resolve | Coluna à esquerda do calendário |
| DH16 | “Hoje” é o do usuário, e o fuso fica declarado | Rodapé do calendário — e o “hoje” desta bancada é fixado, por âncora |
| DH17 | Recorrência NÃO é deste componente | Ausência declarada — até o produto de referência a põe atrás de um passo (C124) |
| DH18 | Data já informada na sessão não se pede de novo (SC 3.3.7, nível A) | Fronteira de produto: o componente aceita valor inicial; quem o pré-carrega é a tela |