Components: Feature Request: down/up arrow keys activate select

Created on 8 Feb 2017 · 4Comments · Source: angular/components

Bug, feature request, or proposal:

Use up and down arrow keys to activate select menus and remove return as an activator.

What is the expected behavior?

Standard html select menus are activated on down/up arrow keys and click instead of the return key. This allows return to still submit while making access to the select menu available without a mouse.

Behavior example https://plnkr.co/edit/MoygfDy6qyEyF96Sa0v4?p=preview

What is the current behavior?

up and down do nothing while hitting enter activates the select menu.

What is the use-case or motivation for changing an existing behavior?

accessibility in line with standard html features

Which versions of Angular, Material, OS, browsers are affected?

material2 < 2.0.0-beta.1

a11y feature has pr

Source

paullryan

Most helpful comment

Stated ARIA interaction spec for listbox menus (from https://www.w3.org/TR/wai-aria-practices/#Listbox):

Keyboard Interaction

For a vertically oriented listbox:

When a single-select listbox receives focus:

If none of the options are selected before the listbox receives focus, the first option receives focus. Optionally, the first option may be automatically selected.

If an option is selected before the listbox receives focus, focus is set on the selected option.

When a multi-select listbox receives focus:

If none of the options are selected before the listbox receives focus, focus is set on the first option and there is no automatic change in the selection state.

If one or more options are selected before the listbox receives focus, focus is set on the first option in the list that is selected.

Down Arrow: Moves focus to the next option. Optionally, in a single-select listbox, selection may also move with focus.

Up Arrow: Moves focus to the previous option. Optionally, in a single-select listbox, selection may also move with focus.

Home (Optional): Moves focus to first option. Optionally, in a single-select listbox, selection may also move with focus. Supporting this key is strongly recommended for lists with more than five options.

End (Optional): Moves focus to last option. Optionally, in a single-select listbox, selection may also move with focus. Supporting this key is strongly recommended for lists with more than five options.

Type-ahead is recommended for all listboxes, especially those with more than seven options:

Type a character: focus moves to the next item with a name that starts with the typed character.

Type multiple characters in rapid succession: focus moves to the next item with a name that starts with the string of characters typed.

Multiple Selection: Authors may implement either of two interaction models to support multiple selection: a recommended model that does not require the user to hold a modifier key, such as Shift or Control, while navigating the list or an alternative model that does require modifier keys to be held while navigating in order to avoid losing selection states.

Recommended selection model -- holding modifier keys is not necessary:

Space: changes the selection state of the focused option .

Shift + Down Arrow (Optional): Moves focus to and toggles the selected state of the next option.

Shift + Up Arrow (Optional): Moves focus to and toggles the selected state of the previous option.

Shift + Space (Optional): Selects contiguous items from the most recently selected item to the focused item.

Control + Shift + Home (Optional): Selects the focused option and all options up to the first option.

Control + Shift + End (Optional): Selects the focused option and all options down to the last option.

Control + A (Optional): Selects all options in the list. Optionally, if all options are selected, it may also unselect all options.

Alternative selection model -- moving focus without holding a Shift or Control modifier unselects all selected nodes except the focused node:

Shift + Down Arrow: Moves focus to and toggles the selection state of the next option.

Shift + Up Arrow: Moves focus to and toggles the selection state of the previous option.

Control + Down Arrow: Moves focus to the next option without changing its selection state.

Control + Up Arrow: Moves focus to the previous option without changing its selection state.

Control + Space Changes the selection state of the focused option.

Shift + Space (Optional): Selects contiguous items from the most recently selected item to the focused item.

Control + Shift + Home (Optional): Selects the focused option and all options up to the first option.

Control + Shift + End (Optional): Selects the focused option and all options down to the last option.

Control + A (Optional): Selects all options in the list. Optionally, if all options are selected, it may also unselect all options.

paullryan on 8 Feb 2017

👍4

All 4 comments

Stated ARIA interaction spec for listbox menus (from https://www.w3.org/TR/wai-aria-practices/#Listbox):

Keyboard Interaction

For a vertically oriented listbox:

When a single-select listbox receives focus:

If none of the options are selected before the listbox receives focus, the first option receives focus. Optionally, the first option may be automatically selected.

If an option is selected before the listbox receives focus, focus is set on the selected option.

When a multi-select listbox receives focus:

If none of the options are selected before the listbox receives focus, focus is set on the first option and there is no automatic change in the selection state.

If one or more options are selected before the listbox receives focus, focus is set on the first option in the list that is selected.

Down Arrow: Moves focus to the next option. Optionally, in a single-select listbox, selection may also move with focus.

Up Arrow: Moves focus to the previous option. Optionally, in a single-select listbox, selection may also move with focus.

Home (Optional): Moves focus to first option. Optionally, in a single-select listbox, selection may also move with focus. Supporting this key is strongly recommended for lists with more than five options.

End (Optional): Moves focus to last option. Optionally, in a single-select listbox, selection may also move with focus. Supporting this key is strongly recommended for lists with more than five options.

Type-ahead is recommended for all listboxes, especially those with more than seven options:

Type a character: focus moves to the next item with a name that starts with the typed character.

Type multiple characters in rapid succession: focus moves to the next item with a name that starts with the string of characters typed.

Multiple Selection: Authors may implement either of two interaction models to support multiple selection: a recommended model that does not require the user to hold a modifier key, such as Shift or Control, while navigating the list or an alternative model that does require modifier keys to be held while navigating in order to avoid losing selection states.

Recommended selection model -- holding modifier keys is not necessary:

Space: changes the selection state of the focused option .

Shift + Down Arrow (Optional): Moves focus to and toggles the selected state of the next option.

Shift + Up Arrow (Optional): Moves focus to and toggles the selected state of the previous option.

Shift + Space (Optional): Selects contiguous items from the most recently selected item to the focused item.

Control + Shift + Home (Optional): Selects the focused option and all options up to the first option.

Control + Shift + End (Optional): Selects the focused option and all options down to the last option.

Control + A (Optional): Selects all options in the list. Optionally, if all options are selected, it may also unselect all options.

Alternative selection model -- moving focus without holding a Shift or Control modifier unselects all selected nodes except the focused node:

Shift + Down Arrow: Moves focus to and toggles the selection state of the next option.

Shift + Up Arrow: Moves focus to and toggles the selection state of the previous option.

Control + Down Arrow: Moves focus to the next option without changing its selection state.

Control + Up Arrow: Moves focus to the previous option without changing its selection state.

Control + Space Changes the selection state of the focused option.

Shift + Space (Optional): Selects contiguous items from the most recently selected item to the focused item.

Control + Shift + Home (Optional): Selects the focused option and all options up to the first option.

Control + Shift + End (Optional): Selects the focused option and all options down to the last option.

Control + A (Optional): Selects all options in the list. Optionally, if all options are selected, it may also unselect all options.