For a while, I've been musing over how to take the un-customisable select element and make an accessible, jQuery-esc select menu. Of course if you ...
For further actions, you may consider blocking this person and/or reporting abuse
Very interesting article!!
should be either
or
Otherwise a TypeError occurs when the last option is already active and the "down" button is pressed.
I like the way you're using
details
andradio
to make this work. I've gone with replacing the select with radios and styling it up before, but this is better. At first I didn't think it felt semantically correct, but after a little bit of thought I've changed my mind.I really like enhancing
details
as a dialog box though, that's cool.Thanks, I like trying to think of ways to move simple JavaScript actions over to native HTML. I really love this stuff 😁
Appreciate the concept for this! But it doesn't work with VoiceOver on Mac and not functional at all on Edge. Seems worthless.
There was a big glaring bug that was making it work less than ideally anyway, which is now fixed, I've also added an
aria-label
to make the voice-over line up with combo-boxes.I'll look into voiceover not working, that means I've made a mistake.
As for no Edge support, that's true but Edge will be moving over to the Blink engine 'soon' at which point it will work 🙂
I was gonna use this, but the no voiceover thing stopped me. I see details should be happy on edge looking on caniuse.com
Yep, edge is now chrome based so has all chrome's capabilities. Also I fixed the voice over issue back then and updated the post 🙂
Ping @emmawedekind 🙂
I just liked how you did it. But it seems to not be compatible on IE, did you know that? And how would you do it for this browser?
<details>
doesn't work with either IE or Edge, Edge will soon support it though. As for IE, it is possible to polyfill the features in but generally, I wouldn't support IE.Here's a preview of something else I'm working on, it's based what I learnt with this project 😀