Repository: flutter
Issue: DropdownMenu, Menu, and ComboBox widget requires roles, ARIA properties, and keyboard support (Accessibility)
Labels: c: new feature,framework,f: material design,a: accessibility,platform-web,c: proposal,P1,customer: castaway,team-accessibility,triaged-accessibility

### 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.