Sistema de Seleção Customizada e Combobox

O que Sistema de Seleção Customizada e Combobox faz?

Propósito

O Sistema de Seleção Customizada e Combobox fornece uma metodologia sistemática para projetar e estruturar opções de menus suspensos, seletores de pesquisa com autocompletar (comboboxes) e campos de entrada de múltiplas opções com tokens.

Elementos HTML <select> padrão são notoriamente difíceis de estilizar de forma consistente entre navegadores e não suportam composições de layout ricas (como descrições, ícones, emblemas ou subgrades dentro de opções individuais). No entanto, menus suspensos personalizados são uma fonte frequente de falhas catastróficas de acessibilidade, armadilhas de teclado e bugs de usabilidade. Esta habilidade estabelece padrões de design, espaciais e de interação para garantir que os componentes de seleção personalizados permaneçam visualmente coesos, altamente responsivos e completamente acessíveis (em conformidade com WCAG 2.2 AA).

---

Casos de Uso

Aplique este sistema ao projetar:

• Menus Suspensos com Conteúdo Rico: Itens de seleção que exigem indicadores visuais, subtítulos, metadados auxiliares ou emblemas de status (por exemplo, seletores de país com ícones de bandeira, alternadores de espaço de trabalho ou perfis de conta).
• Seletores com Pesquisa (Comboboxes): Menus suspensos com mais de 10 opções onde o usuário deve ser capaz de filtrar escolhas através de um campo de pesquisa inline (por exemplo, longas listas de estados/províncias, seleções de tags).
• Campos de Token de Múltipla Seleção: Campos onde múltiplas seleções são permitidas e devem ser renderizadas como emblemas/chips dispensáveis dentro ou adjacentes ao contêiner do gatilho.
• Filtros de Configuração Dinâmica: Controles de filtro de alta densidade (por exemplo, em barras laterais de e-commerce ou painéis de dados) que precisam de alinhamento de layout rico e feedback contextual imediato.

---

Quando NÃO Usar

NÃO aplique este sistema para:

• Baixo Volume de Opções (2 a 5 opções): Use um sistema-de-controle-segmentado ou botões de rádio agrupados padrão. Isso evita ocultar opções atrás de um clique extra e reduz a carga cognitiva.
• Navegação Global da Página: Se clicar em um item do menu suspenso redireciona imediatamente o usuário para uma página diferente ou nó do mapa do site, use sistema-de-navegacao-do-site ou um menu suspenso aninhado. Inputs de seleção são campos de formulário semânticos destinados a editar propriedades, não a percorrer mapas do site.
• Formulários Padrão Não Estilizados: Para formulários genéricos, de baixa prioridade ou utilitários (como campos de contato básicos), use os inputs <select> nativos do navegador. Os menus suspensos nativos oferecem responsividade móvel perfeita e gratuita e suporte nativo a leitores de tela.
• Paletas de Comando em Tela Cheia: Se o objetivo é pesquisar em todas as páginas e ações do aplicativo, em vez de selecionar um único valor de formulário, use sistema-de-paleta-de-comandos.

---

Entradas

Antes de projetar um seletor personalizado ou combobox, reúna os seguintes requisitos:

1. Cardinalidade e Densidade das Opções: Quantas opções existem (por exemplo, 5, 50, 500+)? Qual é o comprimento máximo de caracteres?
2. Tipo de Seleção: Seleção única vs. Múltipla seleção? Lista estática vs. Lista de consulta filtrada assincronamente (Combobox)?
3. Riqueza dos Dados: As opções exigem recursos visuais auxiliares (ícones, avatares, bandeiras, chips de cor) ou texto de suporte (sub-rótulos, modificadores de preço, contagens de usuários ativos)?
4. Contexto do Layout: Isso ficará em uma barra lateral de alta densidade, uma página de destino espaçosa, um modal de sobreposição ou um painel de configurações persistente?
5. Tokens da Marca: Escala de espaçamento (sistema-de-espacamento-fluido), escala tipográfica (sistema-de-tipografia-fluida), anéis de foco (sistema-de-indicador-de-foco) e escalas de sombra de elevação (sistema-de-elevacao-e-profundidade).

---

Saídas

Este sistema produz os seguintes entregáveis de design:

1. Especificação da Anatomia: Blueprint detalhado mostrando espaçamento, alinhamentos, ícones, regras de truncamento de texto e camadas de borda/fundo tanto para o Gatilho quanto para o Painel Suspenso.
2. Matriz de Estado e Interação: Estilos visuais definidos para os estados de Pairar, Ativo/Aberto, Selecionado, Focado, Desabilitado e Erro de Validação.
3. Modelo Adaptável Responsivo: Especificações estruturais detalhando como o menu suspenso para desktop se traduz para viewports móveis (por exemplo, convertendo para uma gaveta/folha inferior ou uma sobreposição de fallback nativa).
4. Mapa de Acessibilidade (WAI-ARIA e Teclado): Funções precisas, declarações de região ativa, estados de rastreamento de foco e comportamento de mapeamento de teclas para entregar aos desenvolvedores.

---

Fluxo de Trabalho

1. Estruturar a Anatomia do Componente

Um sistema de seleção personalizada completo consiste em duas camadas espaciais primárias:

A. O Gatilho (O Campo)

• Contêiner: Altura combinada com inputs de formulário adjacentes (normalmente 40px a 48px para permitir alvos de toque). Usa um contorno neutro (contraste 3:1 contra o fundo da página) e preenchimento definido (geralmente 12px 16px).
• Slot de Valor/Placeholder: Posicionado à esquerda. Texto inativo representa um placeholder (contraste >= 4.5:1 contra o fundo do campo). O texto selecionado é estilizado com um peso neutro primário.
• Indicação Visual (Seta Chevron): Posicionada no extremo direito. Use uma seta distinta apontando para baixo para significar conteúdo recolhível. Gire a seta 180 graus quando o menu estiver ativo.
• Emblemas Selecionados (Apenas múltipla seleção): Chips inline compactos com controles individuais de fechar (x) que se ajustam ou truncam com modificadores de contagem (por exemplo, "+3 mais").

B. O Painel Suspenso (O Menu)

• Contêiner de Sobreposição: Fica em um nível de eixo Z mais alto (sistema-de-elevacao-e-profundidade Nível 3/4). Renderizado abaixo do Gatilho por padrão, ou acima dele se a borda da viewport restringir o espaço inferior. Usa uma sombra distinta (por exemplo, box-shadow com um desfoque suave) para elevá-lo do fundo da página.
• Contêiner de Rolagem: Defina restrições de altura máxima (normalmente 240px a 320px / 5–8 itens) para evitar que o painel ultrapasse a página. Use uma trilha de rolagem visível que evita o deslocamento da barra de rolagem para listas mais longas.
• Input de Pesquisa (Apenas Combobox): Um input de pesquisa fixo preso ao topo do painel suspenso com foco persistente ao ativar o menu.

C. Itens de Opção (As Escolhas)

• Layout: Layout flexível horizontal consistindo em recursos visuais à esquerda, texto primário (e subtítulo se for opção rica) no centro e indicador de estado de seleção (como uma marca de seleção) à direita.
• Preenchimento Seguro: Preenchimento vertical mínimo de 8px e preenchimento horizontal correspondente ao preenchimento horizontal do gatilho (12px a 16px).

+------------------------------------------+
|  Selecione o País                  [v]  |  <-- Gatilho (Fechado)
+------------------------------------------+

+------------------------------------------+
|  [Q] Pesquisar países...                 |  <-- Input de pesquisa fixo
+------------------------------------------+
|  [x] Canadá                              |  <-- Opção (Selecionada e Focada)
|      ISO: CA | +1 Código do País         |
|------------------------------------------|
|  [ ] Alemanha                            |  <-- Opção (Padrão)
|      ISO: DE | +49 Código do País        |
+------------------------------------------+

---

2. Formular a Matriz de Estado e Feedback

Projete estilos distintos e não ambíguos para cada estado do ciclo de vida do componente:

• Estado Padrão: O gatilho usa um contorno claro (contraste mínimo 3:1 contra o fundo da página) com rótulos de texto claros (contraste mínimo 4.5:1).
• Estado Pairar (Hover): Mudança sutil de matiz de fundo no gatilho (por exemplo, cinza de baixo contraste) e linhas de opção para sinalizar capacidade interativa. O cursor é definido como pointer.
• Estado Focado (Focused): Um anel de foco altamente visível ao redor do elemento ativo. Para comboboxes, o foco deve permanecer no input de pesquisa enquanto a lista está aberta, mas use um tratamento visual de foco (por exemplo, matiz de fundo ou contorno ativo) na opção de lista destacada.
• Estado Ativo / Expandido: A seta gira, o contorno do gatilho muda de cor (por exemplo, cor da marca primária) e o Painel Suspenso aparece com uma transição suave de altura e opacidade (150ms a 250ms).
• Estado Selecionado: As linhas de opção mudam visualmente quando escolhidas. Use um ícone de marca de seleção de alto contraste no extremo direito e preenchimento de fundo sutil. Não confie apenas na cor para indicar seleção.
• Estado Desabilitado: Opacidade visual reduzida para 40%–50%. O cursor se torna um indicador not-allowed, e o elemento é ignorado no índice de tabulação.
• Estado de Erro / Inválido: O contorno do gatilho muda para uma cor de erro de validação (geralmente vermelho de alto contraste, >= 3.1 contraste) com uma mensagem de erro e ícone de erro abaixo do input.

---

3. Estabelecer Regras Espaciais e de Posicionamento

Para evitar conflitos de layout e Mudança de Layout Cumulativa (CLS):

• Posicionamento Dinâmico (Comportamento de Inversão): Calcule os limites da viewport. Se o contêiner suspenso estiver próximo da dobra inferior da viewport, inverta seu alinhamento para deslizar para cima acima do gatilho.
• Alinhamento de Largura: O painel suspenso deve se alinhar exatamente com as bordas esquerda e direita do gatilho, ou ter uma largura mínima definida que corresponda ao gatilho para evitar instabilidade visual.
• Isolamento da Sobreposição: Use uma pilha de z-index CSS que corresponda ao Nível 3 (UI Flutuante/Fixa) ou Nível 4 (Sobreposição e Diálogos) do seu sistema de elevação. Sempre garanta que o painel seja renderizado acima de elementos de formulário adjacentes, fundos e cartões de layout.

---

4. Projetar Adaptações Responsivas e Móveis

Nunca force um menu suspenso de desktop de múltiplas colunas ou largo em viewports móveis pequenas. Aplique estas regras de layout adaptável:

Padrão A: Folha Inferior Móvel (Recomendado para Opções Ricas)

Em tamanhos de tela abaixo de 640px (ou pontos de interrupção padrão de tablet), traduza o painel suspenso personalizado em uma Folha Inferior deslizante:

• Gatilhos: Tocar no gatilho abre uma sobreposição de folha inferior de largura total.
• Cortina (Scrim): Um fundo escuro semitransparente (40% a 60% de opacidade) cobre o conteúdo principal, tornando os elementos de fundo não interativos.
• Cabeçalho: A folha contém um cabeçalho fixo com um título claro e um grande botão "Fechar" (x) acessível por toque no canto superior direito.
• Acessibilidade do Polegar: As linhas de opção ocupam a largura total da tela com uma altura de alvo de toque aumentada (mín. 48px, preferencial 56px) para seleções fáceis com o toque do dedo.

Padrão B: Fallback Nativo (Recomendado para Listas Simples)

Em viewports móveis, oculte completamente a marcação personalizada dos leitores de tela e do DOM visual, substituindo-a por um elemento <select> nativo oculto visualmente e empilhado em camadas:

• Como funciona: Posicione um <select> padrão diretamente sobre o gatilho personalizado, estilizado com opacity: 0.
• Resultado: O usuário vê seu gatilho personalizado com a marca, mas tocá-lo ativa as rodas de seleção nativas do SO (iOS Picker ou Android Dialog). Isso fornece desempenho nativo incomparável e acessibilidade local.

---

5. Definir Arquitetura para Leitor de Tela e Teclado

Elementos de seleção personalizados devem suportar tecnologias assistivas completas. Especifique este comportamento preciso para a entrega:

Mapeamentos ARIA e Semântica

• O Botão Gatilho: Deve ter role="combobox", aria-haspopup="listbox", aria-expanded="true/false" e aria-controls="id-da-listbox".
• O Painel Suspenso: Deve ter role="listbox", rotulado pelo ID do gatilho (aria-labelledby="id-do-gatilho").
• Os Itens de Opção: Devem ter role="option". O item atualmente selecionado deve ter aria-selected="true", e os outros itens devem ter aria-selected="false".
• Gerenciamento de Foco: Para comboboxes de autocompletar, o input de pesquisa deve ter aria-autocomplete="list". Use aria-activedescendant="id-da-opcao" no input para rastrear a opção visualmente destacada enquanto o usuário move as teclas de seta para cima e para baixo.
• Anúncios ao Vivo: Use aria-live="polite" ou um elemento de anúncio designado para leitor de tela para transmitir mudanças de estado de seleção ou atualizações de contagem (por exemplo, "5 opções encontradas. Use as teclas de seta para navegar.").

Tabela de Interação por Teclado

Sua folha de especificações deve determinar esses mapeamentos de teclas de atalho exatos:

Ação	Tecla	Comportamento Esperado
Abrir Menu	Espaço ou Enter ou SetaParaBaixo	Abre o painel suspenso, coloca o foco na primeira opção (ou pesquisa).
Fechar Menu	Escape ou Tab	Fecha o painel, retorna o foco do teclado para o Gatilho.
Navegar Opções	SetaParaBaixo / SetaParaCima	Move o estado de destaque ativo para a próxima ou anterior linha de opção.
Selecionar Opção	Espaço ou Enter	Seleciona a opção destacada, atualiza o valor, fecha o painel.
Primeiro/Último Item	Home / End	Move o destaque ativo para o início ou fim absoluto da lista de opções.
Pesquisa por Salto	Qualquer Tecla Alfanumérica	Se estático, o foco salta imediatamente para a primeira opção que começa com aquela letra.

---

Regras de Decisão

Árvore de Decisão de Opções de Seleção Personalizada

Quantas opções totais existem?
 ├── 2 a 5 opções ─────────> Use CONTROLE SEGMENTADO ou BOTÕES DE RÁDIO AGRUPADOS
 ├── 6 a 10 opções ────────> Use SELEÇÃO PERSONALIZADA (Coluna única, sem input de pesquisa)
 └── Mais de 10 opções ───> Use COMBOBOX (Seleção personalizada com Input de Pesquisa integrado)

Escolhendo o Padrão de Seleção Correto

Requisito	Usar Seleção Padrão	Usar Combobox Pesquisável	Usar Tokens de Múltipla Seleção
Limite de Seleção	Valor único apenas	Valor único apenas	Múltiplos valores simultaneamente
Escala de Opções	6 a 15 itens	15 a 100+ itens	5 a 50 itens
Tipo de Fricção	Baixa exploração	Necessita recuperação rápida de alvo	Montagem acumulativa
Layout da Opção	Linhas de texto simples	Linhas de lista simples ou ricas	Layout de encapsulamento de Chips/Tokens

---

Restrições

• Preservação de Foco: Ao fechar o menu suspenso via Escape ou clicando fora, o foco NUNCA deve ser perdido ou redefinido para o nível superior do mapa do site. Ele deve retornar programaticamente para o elemento Gatilho.
• Visibilidade do Foco (WCAG 2.2 SC 2.4.11): Os indicadores de foco no gatilho ou opções ativas nunca devem ser ocultados ou obscurecidos por cabeçalhos de página fixos, barras inferiores flutuantes ou sobreposições sobrepostas.
• Alvo de Toque (WCAG 2.2 SC 2.5.8): Cada linha de opção e elemento gatilho deve ter um tamanho clicável mínimo de 24x24px, com 40px a 48px de altura sendo o requisito de layout padrão para evitar sobreposição de toque em dispositivos móveis.
• Contraste de Cor (WCAG 2.2 SC 1.4.3): Todo texto e conteúdo não textual (incluindo contornos, bordas de foco e ícones de indicação de estado) deve atender a uma proporção de contraste mínima de 3:1 (para componentes) e 4.5:1 (para texto).