Publicado em 16 de dezembro de 2024
Em setembro, pedimos seu feedback sobre o recurso experimental de seleção personalizável. O feedback compartilhado incluiu casos de uso (por exemplo, sistemas de design, caixas combinadas), ideias sobre o modo de entrada da API e feedback sobre estilos básicos. As preocupações incluíam acessibilidade, compatibilidade com navegadores, a necessidade de funcionalidade de pesquisa e o desejo de suporte à seleção múltipla. Parece que você está ansioso para usar a API na produção, mas tem algumas dúvidas e solicitações de recursos específicos.
Todas essas informações foram usadas por engenheiros e gerentes do Chrome para tomar decisões informadas sobre o recurso. Esta postagem compartilha as principais conclusões de cada uma das perguntas da pesquisa de seleção personalizável.
O que você criaria com essa nova API?
Vários casos de uso foram compartilhados, incluindo:
- Criar componentes do sistema de design: criar componentes selecionados para os sistemas de design, garantindo consistência e personalização em todos os projetos.
- Criar vários tipos de seletor: seletor de idioma, seletor de país, seletor de permissão do usuário e muito mais.
- Melhorar os elementos de seleção atuais: melhore os elementos de seleção atuais com recursos como imagens, SVGs e estilos mais ricos.
- Substituir implementações de seleção personalizadas: substitua os componentes de seleção personalizados por uma solução nativa e padronizada.
- Criar caixas combinadas e seletores personalizados: recursos mais complexos, como caixas combinadas, seletores personalizados para números de telefone, fusos horários, moedas e outros tipos de dados.
- Melhoria das interfaces de formulários: melhore os formulários criando elementos de seleção mais atrativos e funcionais.
Essas respostas destacam a versatilidade da nova API e o potencial dela de melhorar a experiência do usuário e a eficiência de desenvolvimento para uma ampla gama de aplicativos da Web.
Você planeja usar essa API na produção quando ela estiver disponível em grande escala?
Você já testou a nova API? Se sim, você conseguiu criar o que queria?
O que você acha do modo de entrada para o seletor personalizável (appearance: base-select
no elemento <select>
e ::picker(select)
)
O feedback sobre esse modo de entrada é misto:
- Alguns acham a abordagem aceitável, razoável ou até melhor do que a situação atual. Eles consideram que essa é uma maneira "lógica" ou "adequada" de aprimorar progressivamente o elemento
<select>
. - Outros expressam confusão ou acham a sintaxe estranha. O uso de duas propriedades (
appearance: base-select
e::picker(select)
) é considerado redundante ou desnecessário. Há preocupações sobre a nomenclatura (base-select
pode ser enganosa) e a possível confusão para os novatos que não estão familiarizados com os conceitos subjacentes. - Alguns participantes sugerem abordagens alternativas, como usar uma única propriedade ou seletor ou evitar a propriedade
appearance
.
No geral, embora alguns participantes se sintam confortáveis com o modo de entrada atual, outros acham que ele é confuso ou sugerem melhorias para clareza e simplicidade. Esse feedback destaca a importância de exemplos e documentação claros para orientar os desenvolvedores a usar a nova API de maneira eficaz.
Você tem algum feedback sobre os estilos de base (user agent) atuais para seleção personalizável?
Alguns participantes acham os estilos aceitáveis ou bons, enquanto outros têm críticas ou sugestões específicas. Alguns pontos de feedback incluem:
- O ícone de marcação não é bonito ou poderia ser mais simples.
- Não há espaço suficiente para uma marca de seleção ao lado dos itens.
- Os estilos básicos parecem apertados, com o anel de foco cortado e sem espaço entre o ícone e o texto marcados.
- Os estilos podem ser mais próximos do estilo da plataforma do SO ou de um elemento
<dialog>
. - A seta padrão deve apontar para baixo e virar para cima quando aberta.
- Talvez seja necessário redefinir para remover os estilos de user agent básicos.
Você tem dúvidas, comentários ou perguntas sobre esse recurso?
Recebemos vários feedbacks, perguntas e preocupações sobre a nova API de seleção personalizável. Alguns dos principais temas incluem:
- Acessibilidade: vários participantes expressaram preocupações com a acessibilidade, principalmente com leitores de tela e navegação por teclado.
- Caixas de seleção múltiplas e combinadas: há uma grande demanda por funcionalidade de seleção múltipla e suporte a caixas combinadas.
- Funcionalidade de pesquisa: a capacidade de pesquisar nas opções selecionadas é um recurso solicitado.
- Estilo e compatibilidade com navegadores: foram levantadas preocupações sobre opções de estilo, compatibilidade com navegadores e a necessidade de redefinições de CSS.
- Detalhes da implementação: foram feitas perguntas sobre detalhes específicos da implementação, como bloqueio de foco, comportamento de renderização e filhos personalizados.
- Feedback geral: alguns participantes compartilharam feedback geral, como o desejo de um modo de entrada de API mais simples e a capacidade de renderizar fora do navegador Chrome.
No geral, o feedback destaca a necessidade de melhorar a acessibilidade, adicionar recursos, como seleção múltipla e pesquisa, e fornecer orientações claras sobre estilo e compatibilidade com navegadores.
Gostaria de adicionar mais algum feedback?
Os principais temas das ideias e sugestões dos participantes incluem:
- Desejo de funcionalidade de caixa de seleção múltipla e caixa combinada: vários participantes solicitam especificamente a adição de recursos de caixa de seleção múltipla e caixa combinada.
- Importância da acessibilidade: alguns participantes enfatizam a necessidade de manter o foco nos recursos de acessibilidade.
- Feedback positivo e solicitações de recursos: algumas pessoas expressam entusiasmo com a API e oferecem sugestões, como uma opção de pesquisa ou a capacidade de detectar suporte usando
@supports
. - Casos de uso específicos: alguns participantes mencionam casos de uso específicos que gostariam de ver com suporte, como renderização fora do navegador Chrome ou permitir valores personalizados no elemento
<select>
. - Comentários gerais: alguns oferecem elogios gerais ou expressam o desejo de uma aparência consistente em todos os navegadores.
No geral, esse feedback reforça a demanda por recursos de múltipla seleção e caixa combinada, destaca a importância da acessibilidade e fornece insights adicionais sobre possíveis casos de uso e áreas de melhoria.
Agradecemos a todos novamente e esperamos que este resumo do feedback da comunidade ajude os implementadores e desenvolvedores a ter uma experiência de seleção personalizada melhor para usuários e desenvolvedores.