Non-editable combobox with multiselect listbox

The combobox container has tabindex="0" and gets initial focus instead of the textbox. And the textbox is a div with role="textbox instead of an input type="text".

  1. Set focus to the combobox.
  2. Open the listbox with the Enter, Space, or up/down arrow keys.
  3. Move through the options with the up/down arrow keys.
  4. Select or unselect an option using Enter or Space. If you use Enter, the listbox will close.

Focusable content before the combobox

Focusable content after the combobox