A better way to handle select behaviour

I’ve encountered this time and time again: designers want fully branded and styled dropdown menus in forms; developers haven’t been able to achieve it with the native <select> element, so they’ve built their own. That usually involves a bunch of <div>s, <span>s, lots of JavaScript, and a good deal of ARIA. It’s a lot of work. While it’s totally possible to build a fully accessible select menu without using the <select> element, there’s a big issue with this approach: the behaviour of the component and the difficulties meeting our users’ expectations across platforms. In a ‘how to’ article from a couple of years ago, I cover how the <select> keyboard experience differs between Mac and Windows, and this highlights our problem when custom-building our component. What are the differences? How different can they be? Surely they’re just a button that triggers a menu where an option can be picked? Well, first let’s examine how they work on a Mac: The menu must be open to choose an option…