DEV Community

Discussion on: Creating A Custom, Accessible Drop Down

Collapse
 
lexlohr profile image
Alex Lohr

A small addition: it could also help to select the correct WAI ARIA roles for the elements, i.e.

<ul role="listbox">
  <li role="option">
  ...
</ul>
Enter fullscreen mode Exit fullscreen mode

Another minor thing: I prefer to use global event handlers (document.addEventListener(...)) and filter the event target after their attributes in the handler if I deal with plain vanilla JS; this way, you can even asynchronously add more of those elements and don't need to add events every time you add a custom select box. Obviously, using a toolkit or framework like React, Angular, Vue or similar, you get the events basically for free.

Collapse
 
lkopacz profile image
Lindsey Kopacz

oh i like the addition of roles here.

Collapse
 
isfotis profile image
Fotis Papadogeorgopoulos

As an addition, when recreating some of the native (or more complex) interactive widgets, I find the WAI-ARIA Authoring Practices a great read.

They offer a list of the expected behaviour (for focus, keyboard etc.), as well as the roles and examples of alternative implementations.

iirc, <select> in this case falls under a "Listbox" pattern

For example, it lists that the ul is the one to receive focus, and that the li items are not tabbable per se, but aria-activedescendant on the ul marks the candidate selection. There different ways to do things, of course, which is why I like documents there. The discussion of those patterns on Github has also taught me much about accessibility :)

Something else that I am reminded of, Scott Jehl from Filament Group had an article a while back about styling the native select element. It has some fun stuff:
filamentgroup.com/lab/select-css.html

(There was a comment below that mentioned all this replacement seeming tedious, but I find it fascinating how much gets exposed to assistive tehcnologies out of the box)

Collapse
 
lexlohr profile image
Alex Lohr

One more thing I forgot to mention. You should also ensure that the functionality on different screen sizes works. Imagine a country list with 100+ countries and a web app that cuts of at the bottom of the screen. A maximum height of your options list with overflow: auto; will help, but doesn't solve all edge cases.