Chips Combobox Accessibility

Best Practices

Since chips-combobox is a composite component and includes a combobox , it automatically inherits its pattern. For the sake of completion, here’s that pattern quoted from its own page:

Each row in the list of options performs only a singular action: setting the value of the textbox. It is not possible, at the time of writing, to have additional actions per row, e.g. add, edit or delete.

The combobox listbox is not intended for storing or display kind of single-select or multi-select state. Again, the purpose of each option is to simply set the value of the textbox.

A combobox is an enhancement of textbox. Likewise, autocomplete is an enhancement of combobox. Suggestions provided will updatedynamically based on user input. The suggested values may appear inline within the textbox, in a list, or both places at once.

Examples of autocomplete are the URL bar in browsers, and the main search field in search engines.

Chips

Since chips-combobox manages the addition and removal of chip(s) , they require some key elements. A chip can be static of interactive. Static chips are extremely simple and don’t require much guidance. Here, we will only be looking at interactive chips . Here’s the markup for each chip :

<span class="chip">
  <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
  <button
    class="chip__button"
    type="button"
    aria-label="Remove"
    aria-describedby="chip-interactive-1-1-text"
  >
    <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
      <use href="#icon-close-12"></use>
    </svg>
  </button>
</span>

Each chip has a button inside that removes the chip from the chips-combobox . The chip__text needs an id that is used by the button via aria-describedby to link the button removal to the specific chip.

The close svg icon for each chip needs to have aria-hidden="true" since its function is conveyed by the button .

Interaction Design

Since chips combobox is a composite component and includes a combobox , it automatically inherits its interaction design. Once again, here’s that pattern quoted from its own page:

Keyboard

When the combobox receives focus, the listbox should expand to show all options.

With listbox expanded, pressing DOWN-ARROW and UP-ARROW keys must navigate through the list of options. The keyboard focus will appear to be in two places at the same time - the textbox and the listbox. In actual fact, keyboard focus always stays on the textbox. The aria-activedescendant property controls the pseudo-focus inside of the listbox.

Pressing SPACEBARmust always enter a blank space in the textbox.

For a combobox with autoSelect , changing the highlighted option will automatically fill the textbox with that option.

For a combobox without autoSelect , changing the highlighted option mustnot automatically fill the textbox; ENTER key is required to manually select the option.

Pressing ENTER key while an option is highlighted must collapse the listbox. For a combobox with autoSelect the form will be submitted. For a combobox without autoSelect the form must not be submitted.

Pressing ESC key while an option is highlighted must collapse the listbox.

For autocomplete type “list”:

The listbox remains but the options change based on the custom filtering criteria.

With focus in the empty combobox, type any letter. Any suggestions that match the filter will appear as options in the listbox flyout.

For autocomplete type “inline”:

The listbox is removed. The entire combobox value will update as the user types, with the suggested portion highlighted as a selection range.

For autocomplete type “both”:

This section is under development.

Screen Reader

The screen reader will announce the input as “text edit”, “combobox” or words to those effect, depending on level of ARIA support.

The screen reader will announce “expanded” or “collapsed”, depending on level of ARIA support.

The screen reader will announce any additional programmatic description, depending on level of ARIA support.

The screen reader will announce the current value of the textbox.

Pointer

When the combobox receives focus, via click or tap, the listbox should expand to show all options.

Clicking or tapping an option will fill the textbox with that value and collapse the listbox without triggering a form submit.

In addition, there is interaction between the combobox and chip items.

Chip Creation with Keyboard and Mouse

As the user has gained focus of the textbox, the listbox will display to show all available options. As the user types, the listbox will be filtered to display only items meeting the criteria of the entered text. Consistent with a typical combobox, the user would then use the arrow keys to navigate to the item they’d like to add. Pressing ENTER when the indicator is on a specific item, will create a chip with that item. Utilizing a mouse, when the user clicks on any of the items in the listbox, a chip will be created for that item.

Custom Chip Creation

A custom chip can be created only with the keyboard. As the user types inside the textbox, at any given moment, pressing ENTER will create a chip with/for the text present in the textbox.

Patterns to Avoid: Comma

There may be a tendency to consider using a comma( , ) to fire off the creation of a chip. The current guidance is to avoid doing so. Commas are too specific in usage on certain platforms and do not have as wide of an intuitive base of accepted usage patterns. Conversely, ENTER is a universally accepted pattern for submission of an entry.

ARIA Reference

This section gives an overview of ARIA usage, within the context of this pattern.