• Success Criterion 2.1.1
  • Conformance level A

Custom Dropdown That Can’t Be Operated by Keyboard Arrows

2.1.1 — Keyboard

Scenario

Setting

A streaming music app's search results

What’s wrong

Custom dropdowns/comboboxes not operable via arrows/Enter/Esc.

Example 

<div class="sort-dropdown" onclick="toggleOptions()">
  <div class="selected">Relevance</div>
  <ul class="options" id="sortOptions">
    <li onclick="selectSort('Newest')">Newest</li>
    <li onclick="selectSort('Popularity')">Popularity</li>
  </ul>
</div>

Why it matters

A listener tabbing to the sort control can open the list but cannot move between options or pick one, so results stay in the default order.

How to test

Tab to a custom dropdown and try arrow keys, Enter, and Esc: if none of the standard combobox keys open/navigate/select/close it, it fails.

How to fix

Follow the ARIA listbox pattern: arrow keys move focus between options, Enter commits, Escape closes without changing the value.

list.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowDown') focusNextOption();
  if (e.key === 'ArrowUp') focusPrevOption();
  if (e.key === 'Enter') selectFocusedOption();
  if (e.key === 'Escape') closeDropdown();
});

Outcome

A listener opens the sort menu, arrows down to "Newest," and presses Enter to re-sort the results.

Who is affected

Keyboard-only users can open the dropdown but never navigate or commit a choice inside it.

Learn more

Related scenarios