Autocomplete

Anatomy

1. combobox — APG: 'The element that serves as an input and displays the combobox value has role combobox' (an input widget with an associated popup).
2. popup — APG: the popup is an element with role listbox, tree, grid, or dialog; hidden by default.
3. Open button optional — APG: 'a third optional element -- a graphical Open button adjacent to the combobox'; also called 'popup indicator icon or button' elsewhere on the page.
4. label — Not stated on the combobox pattern page; its roles section is silent on aria-label/aria-labelledby for the combobox (the page contains those attributes in example markup only). Plain term.

Keys the APG binds

• TabThe combobox is in the page Tab sequence. Note: The popup indicator icon or button (if present), the popup, and the popup descendants are excluded from the page Tab sequence.
• Combobox (focus in combobox). Down ArrowIf the popup is available, moves focus into the popup: If the autocomplete behavior automatically selected a suggestion before Down Arrow was pressed, focus is placed on the suggestion following the automatically selected suggestion. Otherwise, places focus on the first focusable element in the popup.
• Combobox. Up Arrow (Optional)If the popup is available, places focus on the last focusable element in the popup.
• Combobox. EscapeDismisses the popup if it is visible. Optionally, if the popup is hidden before Escape is pressed, clears the combobox.
• Combobox. EnterIf 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.
• Combobox. Printable CharactersIf the combobox is editable, type characters in the combobox. If the combobox is not editable, optionally moves focus to a value that starts with the typed characters.
• Combobox. If the combobox is editable, it supports standard single line text editing keys appropriate for the device platform.
• Combobox. Alt + Down Arrow (Optional)If the popup is available but not displayed, displays the popup without moving focus.
• Combobox. Alt + Up Arrow (Optional)If the popup is displayed: If the popup contains focus, returns focus to the combobox. Closes the popup.
• Listbox popup. EnterAccepts 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.
• Listbox popup. EscapeCloses the popup and returns focus to the combobox. Optionally, if the combobox is editable, clears the contents of the combobox.
• Listbox popup. Down ArrowMoves focus to and selects the next option. If focus is on the last option, either returns focus to the combobox or does nothing.
• Listbox popup. Up ArrowMoves focus to and selects the previous option. If focus is on the first option, either returns focus to the combobox or does nothing.
• Listbox popup. Right ArrowIf 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.
• Listbox popup. Left ArrowIf 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.
• Listbox popup. Home (Optional)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.
• Listbox popup. End (Optional)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.
• Listbox popup. Any printable characterIf the combobox is editable, returns the focus to the combobox without closing the popup and types the character. Otherwise, moves focus to the next option with a name that starts with the characters typed.
• Listbox popup. Backspace (Optional)If the combobox is editable, returns focus to the combobox and deletes the character prior to the cursor.
• Listbox popup. Delete (Optional)If the combobox is editable, returns focus to the combobox, removes the selected state if a suggestion was selected, and removes the inline autocomplete string if present.
• Grid popup. EnterAccepts the currently selected suggested value by closing the popup, placing the selected value in the combobox, and if the combobox is editable, placing the input cursor at the end of the value.
• Grid popup. EscapeCloses the popup and returns focus to the combobox. Optionally, if the combobox is editable, clears the contents of the combobox.
• Grid popup. Right ArrowMoves focus one cell to the right. Optionally, if focus is on the right-most cell in the row, focus may move to the first cell in the following row. If focus is on the last cell in the grid, either does nothing or returns focus to the combobox.
• Grid popup. Left ArrowMoves focus one cell to the left. Optionally, if focus is on the left-most cell in the row, focus may move to the last cell in the previous row. If focus is on the first cell in the grid, either does nothing or returns focus to the combobox.
• Grid popup. Down ArrowMoves focus one cell down. If focus is in the last row of the grid, either does nothing or returns focus to the combobox.
• Grid popup. Up ArrowMoves focus one cell up. If focus is in the first row of the grid, either does nothing or returns focus to the combobox.
• Grid popup. Page Down (Optional)Moves focus down an author-determined number of rows, typically scrolling so the bottom row in the currently visible set of rows becomes one of the first visible rows. If focus is in the last row of the grid, focus does not move.
• Grid popup. Page Up (Optional)Moves focus up an author-determined number of rows, typically scrolling so the top row in the currently visible set of rows becomes one of the last visible rows. If focus is in the first row of the grid, focus does not move.
• Grid popup. Home (Optional)Either moves focus to the first cell in the row that contains focus, or, if the grid has fewer than three cells per row or multiple suggested values per row, focus may move to the first cell in the grid. If the combobox is editable, returns focus to the combobox and places the cursor on the first character.
• Grid popup. End (Optional)Either moves focus to the last cell in the row that contains focus, or, if the grid has fewer than three cells per row or multiple suggested values per row, focus may move to the last cell in the grid. If the combobox is editable, returns focus to the combobox and places the cursor after the last character.
• Grid popup. Control + Home (optional)moves focus to the first row.
• Grid popup. Control + End (Optional)moves focus to the last row.
• Grid popup. Any printable characterIf the combobox is editable, returns the focus to the combobox without closing the popup and types the character.
• Grid popup. Backspace (Optional) and Delete (Optional)as for the listbox popup.
• Tree popup (vertical). EnterAccepts the currently selected suggested value by closing the popup, placing the selected value in the combobox, and if the combobox is editable, placing the input cursor at the end of the value.
• Tree popup. EscapeCloses the popup and returns focus to the combobox. Optionally, clears the contents of the combobox.
• Tree popup. Right arrowWhen focus is on a closed node, opens the node; focus and selection do not move. When focus is on a open node, moves focus to the first child node and selects it if it is selectable. When focus is on an end node, does nothing.
• Tree popup. Left arrowWhen focus is on an open node, closes the node. When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node and selects it if it is selectable. When focus is on a root node that is also either an end node or a closed node, does nothing.
• Tree popup. Down ArrowMoves focus to the next node that is focusable without opening or closing a node and selects it if it is selectable.
• Tree popup. Up ArrowMoves focus to the previous node that is focusable without opening or closing a node and selects it if it is selectable.
• Tree popup. HomeMoves focus to the first focusable node in the tree without opening or closing a node and selects it if it is selectable.
• Tree popup. EndMoves focus to the last focusable node in the tree without opening or closing a node and selects it if it is selectable.
• Tree popup. Any printable characterIf the combobox is editable, returns the focus to the combobox without closing the popup and types the character. Otherwise, moves focus to the next suggested value with a name that starts with the characters typed.
• Dialog popup. The dialog implements the keyboard interaction defined in the modal dialog pattern. Unlike other combobox popups, dialogs do not support aria-activedescendant so DOM focus moves into the dialog from the combobox. Closingperform an action in the dialog that specifies a value, or cancel (Escape or cancel button); focus returns to the combobox.

The seven states