From da136b6d59c344958234b3cfd2556ce131cdbed4 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Tue, 26 Sep 2023 15:37:29 -0400 Subject: [PATCH 1/7] wip --- docs/api/select.md | 64 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) diff --git a/docs/api/select.md b/docs/api/select.md index b5a3455aec4..696b6e2ddb7 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -82,18 +82,25 @@ By default, select uses [ion-alert](alert.md) to open up the overlay of options ### Alert +Keyboard interactions for the `alert` interface are described in the [Keyboard Interactions](#interface-alert) section below. + import AlertExample from '@site/static/usage/v7/select/basic/single-selection/index.md'; + ### Action Sheet +Keyboard interactions for the `action-sheet` interface are described in the [Keyboard Interactions](#interface-action-sheet) section below. + import ActionSheetExample from '@site/static/usage/v7/select/interfaces/action-sheet/index.md'; ### Popover +Keyboard interactions for the `popover` interface are described in the [Keyboard Interactions](#interface-popover) section below. + import PopoverExample from '@site/static/usage/v7/select/interfaces/popover/index.md'; @@ -257,6 +264,63 @@ import Migration from '@site/static/usage/v7/select/migration/index.md'; Ionic uses heuristics to detect if an app is using the modern select syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-select` to `true` to force that instance of the input to use the legacy syntax. +## Accessibility + +### Keyboard Interactions + +Ionic's keyboard interactions follow the implementation patterns of the web `` instead of the native iOS select for a consistent experience across all platforms. The following sections describe the keyboard interactions for the different interfaces. +Ionic's keyboard interactions follow the implementation patterns of the web `` instead of the native iOS select for a consistent experience across all platforms. -These keyboard interactions apply to all `ion-select` when the following conditions are met: +These keyboard interactions apply to all `ion-select` elements when the following conditions are met: - The select is closed. - The select is focused. - The select is not disabled. @@ -284,7 +288,7 @@ These keyboard interactions apply to all `ion-select` when the following conditi Single selection keyboard interaction follows the [ARIA implementation patterns of a radio](https://www.w3.org/WAI/ARIA/apg/patterns/radio/). -These keyboard interactions apply to `ion-action-sheet`, `ion-alert`, and `ion-popover` dialogs when the overlay is presented and focused. +These keyboard interactions apply to `ion-action-sheet`, `ion-alert`, and `ion-popover` elements when the overlay is presented and focused. |Key|Description| |----|----| @@ -292,10 +296,10 @@ These keyboard interactions apply to `ion-action-sheet`, `ion-alert`, and `ion-p |ArrowLeft|Focuses and selects the previous option in the list. If there is no previous option, selection will cycle to the last option.| |ArrowRight|Focuses and selects the next option in the list. If there is no next option, selection will cycle to the first option.| |ArrowUp|Focuses and selects the previous option in the list. If there is no previous option, selection will cycle to the last option.| -|Enter|With the ok button focused or an option selected, will save the user's selection, dismiss the overlay and move focus back to the select.| -|Escape|Closes the overlay without changing the submitted option. Moves the focus back to the select.| +|Enter|When the 'OK' button is focused or an option is selected, it will save the user's selection, dismiss the overlay and return focus to the `ion-select` element.| +|Escape|Closes the overlay without changing the submitted option. Returns the focus back to the `ion-select` element.| |Space|If the focused radio button is not checked, unchecks the currently checked radio button and checks the focused radio button. Otherwise, does nothing.| -|Tab|Moves focus to the next focusable element (cancel button, ok button, or either the selection or the first option) on the overlay. If the next focusable element is an option, then it will focus on the selected option, otherwise it will focus the first option.| +|Tab|Moves focus to the next focusable element (cancel button, 'OK' button, or either the selection or the first option) on the overlay. If the next focusable element is an option, then it will focus on the selected option, otherwise it will focus the first option.| @@ -303,14 +307,14 @@ These keyboard interactions apply to `ion-action-sheet`, `ion-alert`, and `ion-p Multiple selection keyboard interaction follows the [ARIA implementation patterns of a checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/). -These keyboard interactions apply to `ion-alert` and `ion-popover` dialogs when the overlay is presented and multiple selection is enabled. +These keyboard interactions apply to `ion-alert` and `ion-popover` elements when the overlay is presented and multiple selection is enabled. |Key|Description| |----|----| -|Enter|With the ok button focused, will save the user's selection, dismiss the overlay and move focus back to the select.| -|Escape|Closes the overlay without changing the submitted option(s). Moves the focus back to the select.| +|Enter|When the 'OK' button is focused, it will save the user's selection, dismiss the overlay, and return focus to the `ion-select` element.| +|Escape|Closes the overlay without changing the submitted option(s). Returns the focus back to the `ion-select` element.| |Space|Selects or deselects the currently focused option. This does not deselect the other selected options.| -|Tab|Move focus to the next focusable element (cancel button, ok button, or any of the options) on the overlay. If the next focusable element is the options list, then it should iterate through each option.| +|Tab|Move focus to the next focusable element (cancel button, 'OK' button, or any of the options) on the overlay. If the next focusable element is the options list, then it should iterate through each option.| ## Properties From 69de6fe997291761663044005bcc80d79726a417 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Thu, 28 Sep 2023 15:27:28 -0400 Subject: [PATCH 4/7] docs: space key behavior --- docs/api/select.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/api/select.md b/docs/api/select.md index 029bf1ccf79..1fc25204450 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -298,7 +298,7 @@ These keyboard interactions apply to `ion-action-sheet`, `ion-alert`, and `ion-p |ArrowUp|Focuses and selects the previous option in the list. If there is no previous option, selection will cycle to the last option.| |Enter|When the 'OK' button is focused or an option is selected, it will save the user's selection, dismiss the overlay and return focus to the `ion-select` element.| |Escape|Closes the overlay without changing the submitted option. Returns the focus back to the `ion-select` element.| -|Space|If the focused radio button is not checked, unchecks the currently checked radio button and checks the focused radio button. Otherwise, does nothing.| +|Space|If the focused radio button is not checked, unchecks the currently checked radio button and checks the focused radio button. Otherwise, does nothing. If the overlay does not have an 'OK' button, the value will be committed immediately and the overlay will dismiss.| |Tab|Moves focus to the next focusable element (cancel button, 'OK' button, or either the selection or the first option) on the overlay. If the next focusable element is an option, then it will focus on the selected option, otherwise it will focus the first option.| @@ -313,7 +313,7 @@ These keyboard interactions apply to `ion-alert` and `ion-popover` elements when |----|----| |Enter|When the 'OK' button is focused, it will save the user's selection, dismiss the overlay, and return focus to the `ion-select` element.| |Escape|Closes the overlay without changing the submitted option(s). Returns the focus back to the `ion-select` element.| -|Space|Selects or deselects the currently focused option. This does not deselect the other selected options.| +|Space|Selects or deselects the currently focused option. This does not deselect the other selected options. If the overlay does not have an 'OK' button, the value will be committed immediately.| |Tab|Move focus to the next focusable element (cancel button, 'OK' button, or any of the options) on the overlay. If the next focusable element is the options list, then it should iterate through each option.| ## Properties From 78ccdd4da995361f285844bbdd2c79547ee7b3be Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Thu, 28 Sep 2023 15:35:05 -0400 Subject: [PATCH 5/7] docs: enter key behavior for single selection --- docs/api/select.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/select.md b/docs/api/select.md index 1fc25204450..5c34218693e 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -296,7 +296,7 @@ These keyboard interactions apply to `ion-action-sheet`, `ion-alert`, and `ion-p |ArrowLeft|Focuses and selects the previous option in the list. If there is no previous option, selection will cycle to the last option.| |ArrowRight|Focuses and selects the next option in the list. If there is no next option, selection will cycle to the first option.| |ArrowUp|Focuses and selects the previous option in the list. If there is no previous option, selection will cycle to the last option.| -|Enter|When the 'OK' button is focused or an option is selected, it will save the user's selection, dismiss the overlay and return focus to the `ion-select` element.| +|Enter|If an option is focused, it will select the option. Overlays **without** an 'OK' button will commit the value immediately, dismiss the overlay and return focus to the `ion-select` element.

If the 'OK' button is focused, it will save the user's selection, dismiss the overlay and return focus to the `ion-select` element.| |Escape|Closes the overlay without changing the submitted option. Returns the focus back to the `ion-select` element.| |Space|If the focused radio button is not checked, unchecks the currently checked radio button and checks the focused radio button. Otherwise, does nothing. If the overlay does not have an 'OK' button, the value will be committed immediately and the overlay will dismiss.| |Tab|Moves focus to the next focusable element (cancel button, 'OK' button, or either the selection or the first option) on the overlay. If the next focusable element is an option, then it will focus on the selected option, otherwise it will focus the first option.| From 071737838c31a4ea97b1fd591b2b9d4edc0c75fd Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Wed, 4 Oct 2023 13:39:29 -0400 Subject: [PATCH 6/7] chore: adjust wording of implementation patterns --- docs/api/select.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/select.md b/docs/api/select.md index 5c34218693e..acdc16633bb 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -270,7 +270,7 @@ Ionic uses heuristics to detect if an app is using the modern select syntax. In ### Keyboard Interactions -Ionic's keyboard interactions follow the implementation patterns of the web `` element. When a user taps the select, a dialog appears with all of the options in a large, easy to select list. +Selects are form controls to select an option, or options, from a set of options. When a user taps the select, a dialog appears with all of the options in a large, easy to select list. A select should be used with child `` elements. If the child option is not given a `value` attribute then its text will be used as the value.