DEV Community

Discussion on: Creating A Custom, Accessible Drop Down

 
equinusocio profile image
Mattia Astorino • Edited

There are just a lot of things to consider/recreate:

  • Keyboard navigation (arrows and tabs) and activation (enter)
  • Select status (disabled)
  • Options status (disabled, selected, hidden)
  • User accessibility preferences (high contrast, reduced-transparency and reduced-motion)(Check this demo)
  • Options group element (<optgroup>)
  • Dropdown reposition based on the distance from window edges.
  • Dropdown vertical overflow with a long list
  • Mobile usability (custom select are almost always unusable on smarphones)
  • Fieldset element integration...
  • Multiple selection

All of these thing must be recreated. A lot of effort and possible breaking bugs just to add a custom experience (not better for all) and a custom style. In design systems these things are considere UX breaking.

BTW, i agree with you that this operation must be done if it provide a real value, but at this point, it's not a custom dropdown, it's just a new component. 👍🏻 Cheers.