Use case

The DropdownMenu widget requires roles, ARIA properties, and expected keyboard support to meet accessibility compliance requirements outlined in the Web Content Accessibility Guidelines (WCAG).

Proposal

WAI-ARIA Roles, States, and Properties

Combobox element

• Use role="combobox" to define the container element, and "tabindex="0" to include the checkbox in the Tab sequence.
• Either use aria-label or aria-labelledby="[IDREF]" on the combobox element, with [IDREF] referencing the unique ID of the label container
• Use aria-expanded="true" on the container element when the dropdown panel is expanded, and aria-expanded="false" when collapsed.
• Use aria-controls="[IDREF]" on the container element, with [IDREF] referencing the unique ID of the list container that displays the options.
• Use aria-haspopup="listbox" on the container to signify that the combobox has a pop-up list.
• Use aria-activedescendant="[IDREF]" on the container, with [IDREF] referencing the unique ID of the option in the listbox that has keyboard focus (when applicable)
• When a combobox element is in a disabled state, use aria-disabled="true" on the overall combobox control so screen reader users are still allowed to access the combobox, announcing that it is disabled. Use the disabled attribute on the individual options.

Listbox popup

• Use role="listbox" for the element that contains all of the options.
• Use role="option" for each option contained within the listbox.
• Use aria-selected="true" on an option in the listbox when it is visually highlighted as selected.
• Use aria-multiselectable="true" on the listbox element if the listbox supports selection of more than one option.

Combobox Keyboard Interaction

When focus is in the combobox:

• Down Arrow: Places focus on the first focusable element in the popup.
• Up Arrow: If the popup is available, places focus on the last focusable element in the popup.
• Escape: Dismisses the popup if it is visible. Optionally, if the popup is hidden before Escape is pressed, clears the combobox.
• Enter: If the combobox is editable and an autocomplete suggestion is selected in the popup, accepts the suggestion either by placing the input cursor at the end of the accepted value in the combobox or by performing a default action on the value. For example, in a messaging application, the default action may be to add the accepted value to a list of message recipients and then clear the combobox so the user can add another recipient.
• Printable Characters: If the combobox is not editable, moves focus to a value that starts with the typed characters.

Listbox Popup Keyboard Interaction

When focus is in a listbox popup:

• Enter: Accepts the focused option in the listbox by closing the popup, placing the accepted value in the combobox, and if the combobox is editable, placing the input cursor at the end of the value.
• Escape: Closes the popup and returns focus to the combobox. Optionally, if the combobox is editable, clears the contents of the combobox.
• Down Arrow: Moves focus to and selects the next option. If focus is on the last option, either returns focus to the combobox or does nothing.
• Up Arrow: Moves focus to and selects the previous option. If focus is on the first option, either returns focus to the combobox or does nothing.
• Right Arrow: If the combobox is editable, returns focus to the combobox without closing the popup and moves the input cursor one character to the right. If the input cursor is on the right-most character, the cursor does not move.
• Left Arrow: If the combobox is editable, returns focus to the combobox without closing the popup and moves the input cursor one character to the left. If the input cursor is on the left-most character, the cursor does not move.
• Home: Either moves focus to and selects the first option or, if the combobox is editable, returns focus to the combobox and places the cursor on the first character.
• End: Either moves focus to the last option or, if the combobox is editable, returns focus to the combobox and places the cursor after the last character.
• Any printable character: Moves focus to the next option with a name that starts with the characters typed.