O que é preciso para tornar um dropdown customizado acessível?

Comece tentando um select nativo, já que você ganha suporte a teclado, gestão de foco e comportamento de leitor de tela de graça. Se o design descarta isso, implemente o padrão listbox ou combobox direito: gerencie o foco você mesmo, suporte setas, Home, End, Escape e digitação para busca, conecte aria-expanded, aria-activedescendant e as roles corretas, e devolva o foco ao gatilho ao fechar.

O meu primeiro movimento é questionar a construção de um, porque um select nativo te dá tratamento de teclado, seletores de mobile e anúncios de leitor de tela com zero código, e a maioria dos designs pode ser atendida com estilo em volta dele. Quando a gente genuinamente precisou de um customizado, para uma seleção múltipla com avatares, eu construí em cima do padrão listbox das práticas de autoria de ARIA em vez de improvisar. Isso significou que o gatilho é um botão de verdade com aria-expanded e aria-controls, o popup tem role listbox com opções que têm role option e aria-selected, e eu acompanho a opção ativa com aria-activedescendant para o foco ficar no input. No teclado você precisa de cima e baixo, Home e End, Escape para fechar e devolver o foco ao gatilho, Enter ou Espaço para selecionar, e digitação para pular. O importante que eu digo às pessoas é que o ARIA só anuncia estado; ele não adiciona comportamento nenhum, então uma div com role button e sem handler de tecla é pior que inútil. Eu testo só com teclado, depois com um leitor de tela, antes de aquilo chegar perto de uma revisão.