You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/api/select.md
+14-10
Original file line number
Diff line number
Diff line change
@@ -72,7 +72,11 @@ import SingleSelectionExample from '@site/static/usage/v7/select/basic/single-se
72
72
73
73
By adding the `multiple` attribute to select, users are able to select multiple options. When multiple options can be selected, the alert or popover overlay presents users with a checkbox styled list of options. The select component's value receives an array of all of the selected option values.
74
74
75
-
Note: the `action-sheet` interface will not work with multiple selection.
75
+
:::note
76
+
77
+
The `action-sheet` interface is not supported with multiple selection.
78
+
79
+
:::
76
80
77
81
Keyboard interactions for multiple selection are described in the [Keyboard Interactions](#multiple-selection-1) section below.
78
82
@@ -268,7 +272,7 @@ Ionic uses heuristics to detect if an app is using the modern select syntax. In
268
272
269
273
Ionic's keyboard interactions follow the implementation patterns of the web `<select>` instead of the native iOS select for a consistent experience across all platforms.
270
274
271
-
These keyboard interactions apply to all `ion-select` when the following conditions are met:
275
+
These keyboard interactions apply to all `ion-select`elements when the following conditions are met:
272
276
- The select is closed.
273
277
- The select is focused.
274
278
- The select is not disabled.
@@ -284,33 +288,33 @@ These keyboard interactions apply to all `ion-select` when the following conditi
284
288
Single selection keyboard interaction follows the [ARIA implementation patterns of a radio](https://www.w3.org/WAI/ARIA/apg/patterns/radio/).
285
289
286
290
287
-
These keyboard interactions apply to `ion-action-sheet`, `ion-alert`, and `ion-popover`dialogs when the overlay is presented and focused.
291
+
These keyboard interactions apply to `ion-action-sheet`, `ion-alert`, and `ion-popover`elements when the overlay is presented and focused.
288
292
289
293
|Key|Description|
290
294
|----|----|
291
295
|<kbd>ArrowDown</kbd>|Focuses and selects the next option in the list. If there is no next option, selection will cycle to the first option.|
292
296
|<kbd>ArrowLeft</kbd>|Focuses and selects the previous option in the list. If there is no previous option, selection will cycle to the last option.|
293
297
|<kbd>ArrowRight</kbd>|Focuses and selects the next option in the list. If there is no next option, selection will cycle to the first option.|
294
298
|<kbd>ArrowUp</kbd>|Focuses and selects the previous option in the list. If there is no previous option, selection will cycle to the last option.|
295
-
|<kbd>Enter</kbd>|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.|
296
-
|<kbd>Escape</kbd>|Closes the overlay without changing the submitted option. Moves the focus back to the select.|
299
+
|<kbd>Enter</kbd>|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.|
300
+
|<kbd>Escape</kbd>|Closes the overlay without changing the submitted option. Returns the focus back to the `ion-select` element.|
297
301
|<kbd>Space</kbd>|If the focused radio button is not checked, unchecks the currently checked radio button and checks the focused radio button. Otherwise, does nothing.|
298
-
|<kbd>Tab</kbd>|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.|
302
+
|<kbd>Tab</kbd>|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.|
299
303
300
304
301
305
302
306
#### Multiple Selection
303
307
304
308
Multiple selection keyboard interaction follows the [ARIA implementation patterns of a checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/).
305
309
306
-
These keyboard interactions apply to `ion-alert` and `ion-popover`dialogs when the overlay is presented and multiple selection is enabled.
310
+
These keyboard interactions apply to `ion-alert` and `ion-popover`elements when the overlay is presented and multiple selection is enabled.
307
311
308
312
|Key|Description|
309
313
|----|----|
310
-
|<kbd>Enter</kbd>|With the ok button focused, will save the user's selection, dismiss the overlay and move focus back to the select.|
311
-
|<kbd>Escape</kbd>|Closes the overlay without changing the submitted option(s). Moves the focus back to the select.|
314
+
|<kbd>Enter</kbd>|When the 'OK' button is focused, it will save the user's selection, dismiss the overlay, and return focus to the `ion-select` element.|
315
+
|<kbd>Escape</kbd>|Closes the overlay without changing the submitted option(s). Returns the focus back to the `ion-select` element.|
312
316
|<kbd>Space</kbd>|Selects or deselects the currently focused option. This does not deselect the other selected options.|
313
-
|<kbd>Tab</kbd>|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.|
317
+
|<kbd>Tab</kbd>|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.|
0 commit comments