Roles
The following sections describe the various element roles involved in building the multi-select autoccomplete component.
Overview
Consider the following schema. The autocomplete consists of 6 basic building blocks:
- A value container with a delete button to remove the selected value.
- An input field element that is used to enter the search query.
- A button to toggle the listbox popover.
- A listbox popover that contains the list of options.
- An option element that represents a single option.
- A wrapper element that contains the entire autocomplete component.
We'll cover the roles in detail in the following sections.
Value
The value container is has no special role and is simply a container for the selected value and a delete button.
The delete button and the value container are not focusable. By clicking on the ◀left and ▶right arrow keys, the user can navigate through the selected values, highlighting the next or previous value. By clicking the backspace key, the user can delete the currently highlighted value. If the backspace key is pressed in the empty input field, the user will delete the last value in the list.
Input
The input serves as a search field for the list of options. The input is focusable and the user can type in a search query. By entering a search query, the input opens the listbox popover and filters the list of options.
Button
The button is used to toggle the listbox popover. The button is not focusable and the user can toggle the listbox popover by pressing the enter or space key.
Popover
The popover is a container for the list of options. The user can navigate through the list of options by pressing the up and down arrow keys. The popover is closed when
Option
The option represents a single option in the list of options. The option is not focusable. The user can select an option by pressing the Enter key. The option is also selectable by clicking on it.
To navigate between options, the user can press the ▲up and ▼down arrow keys. Pressing the ▲up arrow key, the previous option is highlighted. When the user presses the ▼down arrow key, the next option is highlighted.
Wrapper
The wrapper bundles all elements together and acts as the root element of the autocomplete component. It binds all click and keydown handlers for controlling the autocomplete behavior.
The wrapper should hold the visual indication of the focus state, for example via a style change using the :focus-within pseudo-class.
The wrapper gets its properties from the getWrapperProps function.