DEV Community

Cover image for Accessibility first: DropDown (Select)

Accessibility first: DropDown (Select)

Andrew Bone on March 07, 2019

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 ...
Collapse
 
jhfishersb profile image
jhfisherSB

Very interesting article!!

this.container.addEventListener('keyup', e => {
[...]
case 40: // DOWN
[...]
this.setChecked(this.options[current <= this.options.length ? current + 1 : this.options.length - 1].querySelector('input'));
[...]

should be either

this.setChecked(this.options[current + 1 < this.options.length ? current + 1 : this.options.length - 1].querySelector('input'));

or

this.setChecked(this.options[current < this.options.length -1 ? current + 1 : this.options.length - 1].querySelector('input'));

Otherwise a TypeError occurs when the last option is already active and the "down" button is pressed.

Collapse
 
moopet profile image
Ben Sinclair

I like the way you're using details and radio 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.

Collapse
 
link2twenty profile image
Andrew Bone

Thanks, I like trying to think of ways to move simple JavaScript actions over to native HTML. I really love this stuff 😁

Collapse
 
chadwithuhc profile image
cheddar

Appreciate the concept for this! But it doesn't work with VoiceOver on Mac and not functional at all on Edge. Seems worthless.

Collapse
 
link2twenty profile image
Andrew Bone

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.

Collapse
 
link2twenty profile image
Andrew Bone

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 🙂

Collapse
 
benjarlett profile image
benjarlett • Edited

I was gonna use this, but the no voiceover thing stopped me. I see details should be happy on edge looking on caniuse.com

Thread Thread
 
link2twenty profile image
Andrew Bone

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 🙂

Collapse
 
link2twenty profile image
Andrew Bone

Ping @emmawedekind 🙂

Collapse
 
chibiblasphem profile image
Debove Christopher

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?

Collapse
 
link2twenty profile image
Andrew Bone

<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.

Collapse
 
link2twenty profile image
Andrew Bone

Here's a preview of something else I'm working on, it's based what I learnt with this project 😀