Sistema de Controles Segmentados

O que Sistema de Controles Segmentados faz?

Propósito

O Sistema de Controles Segmentados fornece uma metodologia de design para seletores compactos e mutuamente exclusivos (também conhecidos como Grupos de Botões, Alternâncias Deslizantes ou Botões Segmentados). Diferente de menus de navegação ou abas de painéis de conteúdo, um controle segmentado atua como um modificador inline dentro de um único contexto ou formulário. Ele permite que os usuários alterem imediatamente o formato de exibição, filtrem um único conjunto de dados ou selecionem uma opção de entrada dentro de um espaço físico altamente restrito.

Uma abordagem sistemática garante que esses controles tenham uma relação visual coesa, affordances interativas claras, escalonamento de layout contínuo e padrões semânticos de acessibilidade adequados para evitar que sejam confundidos com botões genéricos ou navegação por abas.

Casos de Uso

• Troca de Visualização: Alternar a apresentação de exibição de conteúdo idêntico (por exemplo, "Grade vs. Lista vs. Mapa" ou "Quadro vs. Calendário").
• Alternância de Preços e Faturamento: Escolher frequências de faturamento (por exemplo, "Mensal vs. Anual") alterando diretamente a exibição de preços.
• Microfiltragem / Subsegmentação: Filtrar uma lista ativa dentro de uma subcategoria específica (por exemplo, mensagens "Todas vs. Não Lidas vs. Destacadas").
• Seleção de Opção Inline: Substituir menus suspensos volumosos em formulários por 2 a 5 opções de alta prioridade (por exemplo, "Pequeno vs. Médio vs. Grande").
• Alternadores de Estado Interativos: Modificar um parâmetro métrico ativo em gráficos ao vivo (por exemplo, períodos "7D vs. 30D vs. 1A").

Quando NÃO Usar

• Navegação de Página Completa: Se clicar em um item alterar a URL da página ou navegar o usuário para fora do contexto de visualização atual, use sistema-de-navegacao-do-site.
• Alternância de Grandes Painéis de Conteúdo: Se alternar opções exibir blocos de conteúdo completamente diferentes com layouts complexos (como painéis de configurações ou abas de documentos), use sistema-de-interface-de-abas.
• Alta Contagem de Opções: Se houver mais de 5 opções, use uma seleção suspensa ou uma gaveta de filtro para evitar aglomeração visual e transbordamento horizontal de texto.
• Configurações de Múltipla Seleção: Se os usuários puderem selecionar mais de uma opção ativa simultaneamente, use caixas de seleção agrupadas ou tags (sistema-de-insignias-e-tags).
• Alternâncias Binárias Dinâmicas: Para configurações únicas de liga/desliga que acionam um processo em segundo plano imediato (por exemplo, "Ativar Notificações"), use um Interruptor Padrão (implementacao-de-interruptor-acessivel).

Entradas

1. Inventário de Opções: A lista de rótulos, ícones ou valores mutuamente exclusivos (normalmente 2 a 5 itens).
2. Escopo do Controle: Se o controle atua como uma entrada de formulário, um modificador de visualização de layout ou um alternador de métrica.
3. Restrições do Contêiner: A largura exata e o ambiente de layout (por exemplo, inline ao lado da pesquisa, centralizado em cartões de preço ou largura total em dispositivos móveis).
4. Tokens de Estilo: Escala tipográfica, variáveis de espaçamento (sistema-de-espacamento-fluidico), estados interativos (sistema-de-estados-interativos) e tokens de cor.

Saídas

1. Especificação de Anatomia do Controle: Definição visual da Trilha (o contêiner de fundo), os Segmentos (botões individuais) e o Indicador Ativo (o fundo deslizante ou destacado).
2. Mapeamento ARIA Comportamental: Seleção das funções ARIA corretas (role="radiogroup" vs. role="tablist") e regras de navegação por teclado.
3. Matriz de Transição de Estados: Definições de estilo para os estados Padrão, Hover, Ativo/Selecionado, Foco e Desabilitado.
4. Regras de Fluxo Responsivo: Especificações para escalonamento horizontal, comportamento fluido de largura total e refluxo móvel ou fallback para <select>.

Fluxo de Trabalho

1. Identificar a Intenção Semântica

Determine se o controle modifica um valor ou modifica uma visualização:

• Entrada de Formulário ou Microfiltro: Atua semanticamente como um Grupo de Botões de Rádio. Altera um valor armazenado ou enviado ao submeter, ou refiltra imediatamente uma lista inline.
• Controlador de Visualização: Atua semanticamente como uma Lista de Abas. Alterna o painel visível ativo ou a apresentação dentro do mesmo contêiner.

2. Projetar a Anatomia Visual

Construa um componente visual altamente polido e unificado. O design consiste em três camadas principais:

• A Trilha: Um contêiner horizontal único com uma cor de fundo sutil (por exemplo, cinza de baixo contraste), pequeno preenchimento (geralmente 2px a 4px) e cantos arredondados (semi-arredondados ou em pílula).
• Os Segmentos: Botões colocados lado a lado dentro da Trilha. Eles devem compartilhar largura igual (justificada) ou adaptar-se à largura do conteúdo com preenchimento consistente.
• O Indicador Ativo: Um cartão físico deslizante ou destaque com um fundo distinto (geralmente branco ou cor de tema primária) e uma sombra sutil (sistema-de-elevacao-e-profundidade) que fica abaixo do texto ativo para levantá-lo visualmente.

3. Estabelecer Coreografia de Estado e Movimento

Configure feedback visual distinto para cada fase de interação:

• Estado Padrão: O texto não ativo usa uma cor neutra secundária com uma taxa de contraste suficientemente alta (pelo menos 4,5:1).
• Estado Hover: Um destaque de fundo sutil no segmento alvo para indicar clicabilidade.
• Estado Selecionado: O texto move-se para estilo primário/negrito, e o Indicador Ativo desliza para trás dele.
• Estado Foco: Ao navegar via teclado, desenhe um contorno de foco distinto e de alto contraste ao redor do segmento ativo. O indicador de foco não deve ultrapassar o limite da Trilha.
• Estado Desabilitado: Opacidade diminuída (tipicamente 40%) com cursor do ponteiro desabilitado.

4. Anotações de Código e Entrega

Anote os requisitos estruturais para implementação:

• Distribuição de Largura Igual: Especifique alinhamento flexbox (flex: 1 1 0%) para distribuir segmentos igualmente quando apropriado.
• Transição do Indicador Deslizante: Especifique regras de transição CSS (transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)) para o cartão indicador ativo deslizante, garantindo que ele não cause Mudança de Layout Cumulativa (CLS) utilizando propriedades aceleradas por hardware (transform e opacity em vez de alterar diretamente as propriedades left/width).

5. Planejar Comportamentos Responsivos

Defina como o controle segmentado dimensiona para baixo em viewports pequenos:

• Justificação Fluida: Expanda a Trilha e os Segmentos para ocupar 100% da largura em telas móveis, atuando como uma barra inferior ou componente de cabeçalho de largura total.
• Truncamento de Rótulo e Largura Mínima: Imponha larguras mínimas estritas para segmentos para evitar que quebras de texto empilhem linhas dentro de um único botão.
• Fallback para Menu Suspenso por Transbordamento: Se as opções não couberem em uma viewport de 320px sem quebra visual, troque o layout do controle segmentado para um menu suspenso <select> nativo usando consultas de mídia CSS responsivas.

Regras de Decisão

Padrão de Grupo de Botões de Rádio vs. Lista de Abas

Critério	Usar Padrão de Grupo de Botões de Rádio (role="radiogroup")	Usar Padrão de Lista de Abas (role="tablist")
Função Primária	Edita uma propriedade de dados ou filtra uma lista inline.	Alterna entre visualizações de layout ou painéis distintos.
Integração com Formulário	Integrado dentro de um <form> ou atua como uma entrada.	Fora de formulários padrão; gerencia modos de visualização de layout.
Função ARIA	Pai: role="radiogroup", Filho: role="radio" com aria-checked="true/false".	Pai: role="tablist", Filho: role="tab" com aria-selected="true/false".
Navegação por Teclado	Teclas de seta movem a seleção imediatamente; Tab sai do grupo.	Teclas de seta movem o foco imediatamente; Espaço/Enter ativa.

Layout Visual: Largura Igual Fixa vs. Largura Fluida Automática

• Largura Igual Fixa: Melhor para rótulos curtos e uniformes (por exemplo, "7D", "30D", "90D" ou "Grade", "Lista"). Cada segmento tem largura idêntica, oferecendo simetria visual.
• Largura Fluida Automática: Melhor quando os rótulos diferem significativamente no comprimento dos caracteres (por exemplo, "Todos os Itens" vs. "Pendente de Verificação"). Cada segmento envolve seu texto com preenchimento consistente (por exemplo, 12px 16px).

Restrições

• Taxas de Contraste: Tanto os segmentos de texto ativos quanto os inativos devem atender à taxa de contraste mínima WCAG AA de 4,5:1 em relação ao seu fundo.
• Dimensões do Alvo de Toque: Cada segmento individual deve fornecer uma área interativa mínima de 24x24px (WCAG 2.2 SC 2.5.8), mas uma altura mínima de 40px a 44px é fortemente recomendada para toques de dedo contínuos em dispositivos móveis.
• Indicadores de Foco: O foco do teclado deve estar claramente visível no segmento atualmente selecionado ou no alvo de foco ativo. Certifique-se de que os anéis de foco não sejam cortados ou ocultos atrás de segmentos adjacentes.
• Sem Quebra de Texto: O texto do segmento deve ser de linha única e nunca deve quebrar em várias linhas dentro de um botão. Isso quebra o ritmo vertical e causa sobreposição visual.
• Movimento Reduzido: Se indicadores deslizantes animados forem implementados, respeite as preferências do sistema operacional do usuário via @media (prefers-reduced-motion: reduce) desabilitando o efeito de deslizamento e alternando instantaneamente destaques de opacidade ou contorno.

Padrões Comuns de Falha

• A Mudança de Layout (CLS): Alterar o segmento ativo modifica a largura do botão ativo, fazendo com que elementos adjacentes saltem para a esquerda ou direita.
• A Falácia de Navegação: Estilizar navegação global de página principal para parecer com controles segmentados, confundindo os usuários que esperam mudanças instantâneas de conteúdo dentro da página.
• Affordance de Seleção Ausente: Usar apenas uma mudança sutil no peso da fonte ou indicador de baixo contraste, dificultando para usuários com baixa visão identificar qual opção está selecionada.
• Armadilha de Teclado: Falha em vincular teclas de seta padrão do teclado dentro do controle, forçando usuários somente de teclado a pressionar Tab em cada opção individualmente.
• Esmagamento Móvel: Permitir que um controle de 4 segmentos encolha em dispositivos móveis até que os rótulos se sobreponham, truncam ilegivelmente ou cortem fora dos limites da Trilha.

Critérios de Validação

• O padrão ARIA semântico claro é escolhido com base na função do controle (Grupo de Botões de Rádio vs. Lista de Abas).
• Segmentos individuais atendem ao tamanho mínimo de alvo de toque de 24x24px (44px preferido em dispositivos móveis).
• Os contrastes de texto inativo e ativo estão em conformidade com WCAG AA (>= 4,5:1).
• O indicador ativo usa propriedades CSS aceleradas por hardware (transform) durante transições deslizantes para evitar Mudança de Layout Cumulativa (CLS).
• O comportamento responsivo é definido (justificação fluida, largura mínima ou fallback de menu suspenso select).
• O texto dentro dos segmentos permanece em uma única linha, sem quebra vertical ou corte.
• O fallback de transição @media (prefers-reduced-motion: reduce) é tratado explicitamente.