Currently, at work, we are implementing some beautiful custom inputs for our Page Editor (a WYSIWYG editor that is being used inside Liferay). When I found that I needed to create a custom <select> element, I though it would be as easy as creating a simple dropdown with a bit of JS.
I didn't now how wrong I was until I started investigating about how select works and which aria-roles could I use to emulate it's behavior. There is no exact select role, but I found that using a combination of haspopup, listbox and option gives a valid result that can also be made accessible.
This HTML is more or less based on a W3C collapsible dropdown listbox demo (linked below) with a custom JavaScript implementation to manage keyboard navigation and some click events.
These are some interesting articles and videos I found during my investigation (thanks to Eduardo Allegrini for his help 😄):
- Accessible Custom Select Dropdowns.
- Striking a Balance Between Native and Custom Select Elements.
- The Future of HTML Controls.
- ARIA: listbox role.
- Collapsible Dropdown Listbox Example.
Demo
See the Pen Accessible custom <select> by Pablo Molina (@p2kmgcl) on CodePen.