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
The wheel picker in Datetime uses [Picker](./picker) internally. See [Picker Accessibility](./picker#accessibility) for more information on accessibility features with the wheel picker.
Copy file name to clipboardExpand all lines: docs/api/picker.md
+31Lines changed: 31 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -48,6 +48,37 @@ Pickers can be displayed inside of overlays, such as `ion-modal` to create a pic
48
48
import ModalExample from '@site/static/usage/v8/picker/modal/index.md';
49
49
50
50
<ModalExample />
51
+
52
+
## Accessibility
53
+
54
+
### Screen Readers
55
+
56
+
Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker.
57
+
58
+
| Gesture | Function |
59
+
| - | - |
60
+
| Swipe Left | Move focus to the previous Picker Column. |
61
+
| Swipe Right | Move focus to the next Picker Column. |
62
+
| Swipe Up | Select the next option in the Picker Column. |
63
+
| Swipe Down | Select the previous option in the Picker Column. |
64
+
| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. |
65
+
66
+
:::caution
67
+
The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers.
68
+
:::
69
+
70
+
### Keyboard Navigation
71
+
72
+
Each [Picker Column](./picker-column) can be navigated using the keyboard when focused.
0 commit comments