Dropdown

Usage
Code
Accessibility

Accessibility

The Dropdown component has been designed to best meet current accessibility criteria.

Therefore, in order to guarantee the accessibility of the component, please make sure to respect the following rules when integrating the component into your pages:

Always use an aria-expanded attribute on the .mc-dropdown__trigger element.

Always use an aria-activedescendant attribute on the .mc-dropdown__trigger element.

Keyboard navigation

The following guidelines are issued by W3C:

Complete guidelines

Enter: Open or close the listbox component

Down Arrow:

  • If the text-input is not empty and the listbox is displayed, moves visual focus to the first suggested value.
  • If the textbox is empty and the listbox is not displayed, opens the listbox and moves visual focus to the first option.
  • In both cases DOM focus remains on the text-input

Up Arrow:

  • If the text-input is not empty and the listbox is displayed, moves visual focus to the last suggested value.
  • If the text-input is empty, first opens the listbox if it is not already displayed and then moves visual focus to the last option.
  • In both cases DOM focus remains on the text-input.