Select keyboard controls

I was recently given a design that included a customised select. Since that’s currently only available in the most recent version of Chrome, I went looking for libraries and instructions on how to create your own select. And I came across a problem: none of them talked about the keyboard controls in a way that matched with how select works for me with the keyboard. Until I considered that I was using Firefox and most people use Chrome. Turns out they don’t work identically. So I went through the main browsers and documented what did what.

Same for all browsers

Most keyboard controls are the same in all browsers.

When select is closed:

Enter: does nothing
Space: opens select
Tab: goes to next tabbable element
Shift + tab: goes to previous tabbable element
Down arrow: opens select
Up arrow: opens select
Any letter key: selects first/next option that starts with that letter

When select is open:

Enter: selects focused option and closes select
Escape: closes select
Down arrow: focuses next option
Up arrow: focuses previous option
Home: focuses option at top of list
End: focuses option at bottom of list
Any letter key: selects first/next option that starts with that letter

Different in different browsers

I tested in Firefox, Chrome, Safari and Opera, all on a Mac. Although a Mac has different keyboard shortcuts to Windows and Linux, navigating a website doesn’t seem to be any different on a Mac.

When select is closed

Escape
Firefox: goes to next tabbable element
The rest: does nothing

Page down
Firefox: selects option one page down
The rest: does nothing

Page up
Firefox: selects option one page up
The rest: does nothing

Home
Firefox: selects option at top of list
The rest: does nothing

End
Firefox: selects option at bottom of list
The rest: does nothing

When select is open

Space
Firefox: does nothing
The rest: selects focused option and closes select

Tab
Firefox: selects focused option and closes select
The rest: selects random option

Shift + tab
Firefox: selects focused option and closes select
The rest: selects random option

Page down
Firefox: focuses option one page down
The rest: focuses option at bottom of list

Page up
Firefox: focuses option one page up
The rest: focuses option at top of list