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
+64Lines changed: 64 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -82,18 +82,25 @@ By default, select uses [ion-alert](alert.md) to open up the overlay of options
82
82
83
83
### Alert
84
84
85
+
Keyboard interactions for the `alert` interface are described in the [Keyboard Interactions](#interface-alert) section below.
86
+
85
87
import AlertExample from '@site/static/usage/v7/select/basic/single-selection/index.md';
86
88
87
89
<AlertExample />
88
90
91
+
89
92
### Action Sheet
90
93
94
+
Keyboard interactions for the `action-sheet` interface are described in the [Keyboard Interactions](#interface-action-sheet) section below.
95
+
91
96
import ActionSheetExample from '@site/static/usage/v7/select/interfaces/action-sheet/index.md';
92
97
93
98
<ActionSheetExample />
94
99
95
100
### Popover
96
101
102
+
Keyboard interactions for the `popover` interface are described in the [Keyboard Interactions](#interface-popover) section below.
103
+
97
104
import PopoverExample from '@site/static/usage/v7/select/interfaces/popover/index.md';
98
105
99
106
<PopoverExample />
@@ -257,6 +264,63 @@ import Migration from '@site/static/usage/v7/select/migration/index.md';
257
264
258
265
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.
259
266
267
+
## Accessibility
268
+
269
+
### Keyboard Interactions
270
+
271
+
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. The following sections describe the keyboard interactions for the different interfaces.
272
+
273
+
These keyboard interactions apply to the `ion-select` when the following conditions are met:
274
+
- The select is closed.
275
+
- The select is focused.
276
+
- The select is not disabled.
277
+
278
+
|Key|Description|
279
+
|----|----|
280
+
|<kbd>Space</kbd>|Opens the overlay and focuses on the first selected option. If there is no selected option, then it focuses on the first option.|
281
+
|<kbd>Enter</kbd>|Opens the overlay and focuses on the first selected option. If there is no selected option, then it focuses on the first option.|
282
+
283
+
#### Interface: Alert
284
+
285
+
These keyboard interactions apply to the `ion-alert` dialog when the overlay is presented and focused.
286
+
287
+
|Key|Description|
288
+
|----|----|
289
+
|<kbd>Space</kbd>|[**Single selection**](#single-selection): If the currently focused option is not selected, then it will become selected. <br /> <br /> [**Multiple selection**](#multiple-selection): Selects or deselects the currently focused option. This does not deselect the other selected options. |
290
+
|<kbd>ArrowUp</kbd>|[**Single selection**](#single-selection): Focuses and selects the previous option in the list. If there is no previous option, selection will cycle to the last option.|
291
+
|<kbd>ArrowLeft</kbd>|[**Single selection**](#single-selection): Focuses and selects the previous option in the list. If there is no previous option, selection will cycle to the last option.|
292
+
|<kbd>ArrowDown</kbd>|[**Single selection**](#single-selection): Focuses and selects the next option in the list. If there is no next option, selection will cycle to the first option.|
293
+
|<kbd>ArrowRight</kbd>|[**Single selection**](#single-selection): Focuses and selects the next option in the list. If there is no next option, selection will cycle to the first option.|
294
+
|<kbd>Tab</kbd>|[**Single selection**](#single-selection): 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.<br /><br />[**Multiple selection**](#multiple-selection): 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.|
295
+
|<kbd>Enter</kbd>|[**Single selection**](#single-selection): 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.<br /><br/>[**Multiple selection**](#multiple-selection): With the ok button focused, 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(s). Moves the focus back to the select.|
297
+
298
+
#### Interface: Action Sheet
299
+
300
+
These keyboard interactions apply to the [`ion-action-sheet` dialog](#action-sheet) when the overlay is presented and focused.
301
+
302
+
|Key|Description|
303
+
|---|----|
304
+
|<kbd>Escape</kbd>|Closes the overlay without changing the submitted option. Moves the focus back to the select.|
305
+
|<kbd>Tab</kbd>|Moves focus to the next focusable element (cancel button or options) on the overlay. If the next focusable element is the options list, then it should iterate through each option.|
306
+
|<kbd>Enter</kbd>|Submits the currently selected option, closes the overlay, and moves focus back to the select.|
307
+
|<kbd>Space</kbd>|Submits the currently focused option, closes the overlay, and moves focus back to the select.|
308
+
309
+
#### Interface: Popover
310
+
311
+
These keyboard interactions apply to the [`ion-popover` dialog](#popover) when the overlay is presented and focused.
312
+
313
+
|Key|Description|
314
+
|---|----|
315
+
|<kbd>Escape</kbd>|Closes the overlay without changing the selected option.|
316
+
|<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.|
317
+
|<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.|
318
+
|<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.|
319
+
|<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.|
320
+
|<kbd>Space</kbd>|[**Single selection**](#single-selection): Submits the currently selected option and closes the overlay.<br /><br/>[**Multiple selection**](#multiple-selection): Selects or deselects the currently focused option. This does not deselect the other selected options. The selected option is automatically submitted.|
321
+
|<kbd>Tab</kbd>|[**Single selection**](#single-selection): Focuses on the select and keeps the overlay open. It does not tab through the options.<br /><br />[**Multiple selection**](#multiple-selection): Moves focus to the next focusable element (the options or the select). The order will be option and then select. If the next focusable element is the options list, then it should iterate through each option.|
0 commit comments