Tab Behavior

The component trigger contains an <auro-input> which has two elements:

Input
Clear button: only shown when the input has a value.

Each focusable element (when shown) participates in the browser window's default tabindex sequence.

When the component is disabled it is removed from the tabindex sequence. VoiceOver's virtual cursor (swipe navigation) can still encounter the component, but standard keyboard Tab navigation skips it.

On large viewport devices (e.g., desktop browser, tablet) there is no focusable content inside the component bib.

On small viewport devices (e.g., phone) the bib opens a modal dialog with a focusable input and clear button which can receive Click and Tap events.

Key Events

Static vs Dynamic Option List: The expanded state can never be applied without list options rendered into the DOM. Since the component supports dynamic option lists generated after a value is typed into the input, certain key events (as noted in the Current State column of the table below) only function with the option list rendered into the DOM.

Key	Modifier	Current State	Focus Element	Behavior
ArrowDown	-	Collapsed, list options have been populated	Trigger input element, NOT the trigger input clear button	Opens the bib.
	-	Expanded	Input element, NOT the input clear button Note: Includes both trigger and bib content inputs depending on viewport size.	Advances the `focused` option to the next enabled option in the list. If the current `focused` option is the last enabled option, selection wraps to the first enabled option.
	Command	Collapsed, list options have been populated	Trigger input element, NOT the trigger input clear button	Opens the bib.
	Command	Expanded	Input element, NOT the input clear button Note: Includes both trigger and bib content inputs.	Advances the `focused` option to the last enabled option in the list.
	Option	Collapsed, list options have been populated	Trigger input element, NOT the trigger input clear button	Opens the bib.
	Option	Expanded	Input element, NOT the input clear button Note: Includes both trigger and bib content inputs.	Advances the `focused` option to the last enabled option in the list.
ArrowUp	-	Collapsed, list options have been populated	Trigger input element, NOT the trigger input clear button	Opens the bib.
	-	Expanded	Input element, NOT the input clear button Note: Includes both trigger and bib content inputs.	Advances the `focused` option to the previous enabled option in the list. If the current `focused` option is the first enabled option, selection wraps to the last enabled option.
	Command	Collapsed, list options have been populated	Trigger input element, NOT the trigger input clear button	Opens the bib.
	Command	Expanded	Input element, NOT the input clear button Note: Includes both trigger and bib content inputs.	Advances the `focused` option to the first enabled option in the list.
	Option	Collapsed, list options have been populated	Input element, NOT the input clear button	Opens the bib.
	Option	Expanded	Input element, NOT the input clear button Note: Includes both trigger and bib content inputs.	Advances the `focused` option to the first enabled option in the list.
End	-	Expanded	Input element, NOT the input clear button Note: Includes both trigger and bib content inputs.	Advances the `focused` option to the last enabled option in the list.
Enter	-	Collapsed, list options have been populated	Trigger input, NOT the input clear button	The bib is opened.
		Collapsed	Input clear button, NOT the input element	The input value is cleared, focus moves to the trigger input element.
		Expanded, large viewport device	Trigger input element, NOT the trigger input clear button	The current `focused` option is selected, closes the bib and focus is returned to the trigger input element.
		Expanded, small viewport device	Dialog input element, NOT the dialog input clear button	The current `focused` option is selected, closes the bib and focus is returned to the trigger input element.
Escape	-	Expanded	Input element, NOT the input clear button Note: Includes both trigger and bib content inputs.	Closes the bib, moves focus to the trigger input element.
Home	-	Expanded	Input element, NOT the input clear button Note: Includes both trigger and bib content inputs.	Advances the `focused` option to the first enabled option in the list.
Tab	-	Expanded	Input element, NOT the input clear button Note: Includes both trigger and bib content inputs.	The current `focused` option is selected, the bib is closed and focus is moved to the clear button in the component trigger.
Tab	Shift	Expanded	Input element, NOT the input clear button Note: Includes both trigger and bib content inputs.	Advances the `focused` option to the first enabled option in the list. Note: the bib will NOT close and the page will NOT navigate to the previous focusable element in the tabindex order.

Note: The following keyboard behavior is unsupported at this time:

PageUp: The browser moves the focused option up by approximately one page of visible options (typically equal to the number of rendered rows). The scroll position updates in tandem so that the newly focused option is brought into view, usually aligning near the top of the visible list.
PageDown: The browser advances the focused option down by approximately one page of visible items (typically equal to the number of rendered rows). The scroll position updates accordingly so the newly focused option is brought into view, often aligning near the bottom of the visible list.