List
Lab componentList
ListNext
and ListItemNext
allow the user to select an item from an array of options. Selected items are visually distinct from nonselected items. To ensure efficient space usage, long lists of items are in a scrolling pane that can provide access to options not immediately visible to the user.
Key | Function |
---|---|
Tab | If focus is above the list, Tab moves focus to one of the following items depending on previous user interaction:
|
Shift + Tab | If focus is below the list, this action moves focus to the list item that last had focus or the first item in the list. |
Space / Enter | When focus is on a list item, this action selects the item and deselects the previously selected item, if any. |
Up arrow | Up arrow moves focus to the previous item in the list. If focus is on the first item, the next key press retains focus on the first item. It doesn't wrap focus to the last item in the list. |
Down arrow | Down arrow moves focus to the next item in the list. If focus is on the last item, the next key press retains focus on the last item. It does not wrap focus back to the first item in the list. |
Home | When focus is within the list, Home moves focus to the first list item. |
End | When focus is within the list, End moves focus to the last list item. |