banco-pessoa.html · bancada do §62 · preview v0.1 —
catálogo de ESTADOS do seletor de pessoa (PS1–PS16), do seed-componentes.md.
Bancada, não tela (CP31). Dado sintético: todos os nomes, iniciais e cargos
abaixo são inventados para esta bancada — nenhum colaborador, cliente ou identificador real.
Atribuir é transferir responsabilidade técnica — num ERP de
engenharia isso não é um select bonito. É por isso que a escolha precisa ser
desfazível, auditável, e que quem saiu da empresa continue aparecendo onde já assinou (PS12).
O achado que originou os contratos. No produto de referência a
lista é exemplar na tela — agrupada, com avatares, com o escolhido destacado — e na
árvore de acessibilidade é um bloco de nomes soltos: cada pessoa é generic,
sem option, sem aria-selected, e o campo é um textbox sem
combobox, sem aria-expanded, sem aria-controls (dispositivo
C130). Dois de dois seletores auditados repetem o padrão — o do calendário
(C122) e este.
aria-hidden (PS7): quem informa é
o nome. Concatenar avatar e nome faz o leitor de tela anunciar as iniciais duas vezes —
é o mesmo defeito do ✋ Mover que o SG8 já tinha pego.
role="group" com nome próprio (PS4): cabeçalho só
visual é decoração, e o agrupamento aqui é informação.
"+N", que é um botão real com aria-expanded — não um
texto. Corte silencioso lê como “coube tudo”.
Esc que confirma é a armadilha clássica de picker (PS6). E o
foco do DOM não entra na lista: ele fica no campo, e a AT anda por
aria-activedescendant (PS3) — mover o foco real quebraria a digitação contínua,
que é o modo natural de filtrar.
Ninguém com esse nome.
Digite um e-mail para convidar alguém para o projeto.
aria-disabled). Herda o VD16: ausência e vazio não são a mesma
coisa.
A cor do avatar sem foto sai de um hash do nome para um índice neste conjunto de 8 pares (PS8). Determinístico: a mesma pessoa tem a mesma cor em toda tela, sempre. Alternativa descartada: derivar matiz livre (HSL a partir do hash), que é o que a maioria dos produtos faz — ela gera uma classe infinita de cores, e contraste de classe infinita não se mede, se torce para dar certo. Com o conjunto fechado, a PS-P3 se prova por enumeração: a suíte mede os 8 pares, nos dois temas, e reprova se qualquer um ficar abaixo do piso.
| # | Contrato | Onde se prova |
|---|---|---|
| PS1 | O campo é role="combobox" com aria-expanded e aria-controls | Todos os quatro seletores desta página — é o C130 corrigido |
| PS2 | A lista é listbox; cada item é option com aria-selected | Abra qualquer lista: “lista de N, 1 selecionada” |
| PS3 | O foco do DOM fica no CAMPO; a AT anda por aria-activedescendant | ↓/↑ movem o realce sem tirar o cursor de digitação do campo |
| PS4 | Grupos são role="group" com nome próprio | “Eu”, “Já atribuídos”, “Equipe”, “Inativos” — nomeados, não só desenhados |
| PS5 | Multi produz CHIPS removíveis — herda SG9–SG13, com teto e "+N" | Estado 2, com teto de 3 |
| PS6 | ↓/↑ andam · Enter escolhe · Esc fecha SEM alterar · Backspace no campo vazio remove o último chip | Estado 2 — o Esc que confirma é a armadilha clássica de picker |
| PS7 | O avatar é aria-hidden; quem informa é o NOME | Herda o SG8 e o defeito real do ✋ Mover |
| PS8 | Sem foto, INICIAIS sobre fundo derivado do nome — determinístico | A paleta FECHADA de 8 pares, impressa nesta página |
| PS9 | Presença, quando existe, tem rótulo TEXTUAL | “Disponível” / “Ausente”, escrito |
| PS10 | “Eu” aparece primeiro e é rotulado como tal | Estado 1 aberto — C127: é o caso mais frequente |
| PS11 | Buscar e CONVIDAR são ações distintas; convidar exige confirmação explícita | Estado 3 — dois toques, e o primeiro diz o que o segundo vai criar |
| PS12 | Inativo continua exibível onde já foi atribuído, marcado; e não é oferecido | Estado 4 — aria-disabled, e o clique diz por quê |
| PS13 | A lista carrega em página, com estado declarado; nunca corta em silêncio | Estado 3 — o botão diz quantos faltam |
| PS14 | Vazio de busca diz O QUE FAZER | Estado 3 — “Digite um e-mail para convidar” |
| PS15 | Remover anuncia quem saiu E quantos restam | Estado 2 — herda o SG12 |
| PS16 | Alvo de 44px por linha, e a linha inteira é clicável | Medido pela suíte em todas as opções de todas as listas |