Accessibility in custom suggestion dropdown in React

Question

I have a search field in my application and I have implemented a custom suggestion dropdown with it. When user types any keyword in the search field I query a search index and once results are fetched I show them in a custom dropdown under the search field. The code looks something like this:

import "./styles.css";
import {useState} from 'react';

export default function Search() {
  const [results, setResults] = useState([]);

  return (
    <div>
      <input
       placeholder="search"
       onChange={() => {// I fetch results and set them in state}}
       type="text" />
      {
        results && <div className="my-suggestion-dropdown">
       <h4>Suggestions</h4>
       <a>First suggestion</a>
       <a>Second suggestion</a>
       // so and so so forth
      </div>
      </div>
      
      }
    </div>
  );
}

This works fine. I want the suggestion dropdown to be accessible so the user can navigate using tabs. Once the dropdown is open if the user presses tab then focus should go into the dropdown and once the dropdown has been traversed focus should move to element after the input field.

How can I implement this behavior?

Answer 1

Building custom components is a lot of work, especially getting them robust, compatible with all platforms, responsive and accessible often requires way more work than it seems.

It is great that you are diving into accessibility, but judging by the shared code, it seems that you are just at the beginning of that journey.

That’s an interesting journey and I encourage you to pursue it!

But if you currently need that component for production, to deliver working software, my recommendation is to find an accessible component library with such a component.

---

If you are curious about accessibility and want to start your learning journey, there is a ton of material about that type component that can guide you. You could either continue to build your own component and try to get this right, or analyse the component from your chosen library.

What you describe is a combobox, which has clearly defined keyboard controls in ARIA. For a practical guide, see the Combobox pattern on APG.

For terminology, what you call the suggestion dropdown, is a listbox in ARIA.

Arrow keys instead of Tab

ARIA states that you MUST manage focus in the listbox. That means that the whole component (input and listbox) only have one tab stop. The listbox is then opened with arrow down keys, and options are also chosen with arrow keys and then Space.

Manage state, roles and properties

Keyboard control is an important foundation to accessibility, but also just a start. For screen reader users, for example, the state of the listbox will need to be exposed as well.

When the listbox is visible (open), the <input> must have aria-expanded="true". aria-controls` needs to point to that listbox.

The options in the listbox can only have role option or group, and the selected one needs to have aria-selected="true".