DEV Community

Keyboard accessible dropdown in Elm

Margarita Krutikova on June 14, 2019

- and how I discovered that browsers are awesome! 😍 This is a follow-up on my previous post, where I showed how to decode DOM nodes from the event ...
Read full post
Collapse
 
stereobooster profile image
stereobooster •

👏👏👏 Nicely done. You can handle Home and End keys as well.

Home If the listbox is displayed, moves focus to and selects the first option.
End If the listbox is displayed, moves focus to and selects the last option.

Waiting for the next post

to add the appropriate ARIA attributes and test the dropdown with a screen reader

Collapse
 
margaretkrutikova profile image
Margarita Krutikova •

Thank you! 🙂

Absolutely true about Home and End keys, but since they were marked as optional here on keyboard interactions, I decided not to include them to make the article more compact 🙂

Collapse
 
roboticmind profile image
RoboticMind •

Just wanted to say thank you for writing this! I was working on something else and could not figure out how to get preventDefault to work with anything but always preventing the default action or never preventing it.

This was the only post I was able to find that showed something other than:

alwaysPreventDefault : msg -> ( msg, Bool )
alwaysPreventDefault msg = ( msg, True )

so thank you for taking to time to write this. Otherwise I might never have gotten it working.

Also, the elm-accessible-dropdown package looks pretty neat too

Collapse
 
mthadley profile image
Michael Hadley •

Awesome post!

I had also implemented a recursive "outside" decoder in a "dropdown-ish" type of widget. However, I was able to get rid of some subscriptions after I adapted something similar to your usage of focusout and relatedTarget. Thanks so much!

Collapse
 
laplacesdemon profile image
Suleyman Melikoglu •

Elm syntax is gorgeous!