Contrib.social

Autocomplete results not keyboard navigable

Open on Drupal.org →
Created on 5 May 2025, 4 months ago

Problem/Motivation

The autocomplete results are not keyboard accessible.

Steps to reproduce

  1. Type some text into the search box until autocomplete results appear.
  2. Press the down arrow key.
  3. Notice focus does not move to the search results.

Proposed resolution

  1. Since Tab correctly moves to the next element in sequence from the search input, the clear button, I propose using the established arrow key pattern to navigate the autocomplete results.
  2. When focus is on the search input, add some JavaScript that moves the focus to the search results when pressing the down arrow key.
  3. Each search autocomplete result is navigable via the up and down arrow keys.
  4. When pressing the up arrow key on the first autocomplete item, move the focus back to the search input.
🐛 Bug report
Status

Active

Version

1.0

Component

General code

Created by

🇺🇸United States bronzehedwick New York

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

  • Issue created by @bronzehedwick
  • Comment 4 months ago →
    🇺🇸United States bronzehedwick New York

    I did some initial investigation of the code, and it looks like it's using jQuery Autocomplete under the hood. jQuery Autocomplete is keyboard navigable with the arrow keys out of the box, so seems likely that this module is breaking that somehow. Maybe something in the uiAutocomplete.options.select override?

  • Comment 4 months ago →
    🇺🇸United States bronzehedwick New York

    Here's a list of expected screen readers keyboard shortcuts, which has a section on autocomplete results.

  • Status changed to Postponed: needs info 20 days ago
  • Comment 20 days ago →
    🇦🇹Austria drunken monkey Vienna, Austria

    This works fine for me. Are you sure you can reproduce this on a clean installation of Drupal?
    Otherwise, it seems rather like your theme or some other site-specific code gets in the way. We mostly just use Drupal’s own autocomplete functionality and I don’t think the adaptions we do make are likely to break keyboard navigation.

    That being said, it is of course possible we could make some improvements to make it easier for themes to keep this functionality working, but I’d need details for that. (I’m also not very good with frontend code in general, so always open for suggestions from frontend experts.)

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024