Skip to content

Commit 82b6153

Browse files
authored
docs(picker): add accessibility docs (#3612)
1 parent f03dd1d commit 82b6153

File tree

2 files changed

+32
-8
lines changed

2 files changed

+32
-8
lines changed

docs/api/datetime.md

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -443,14 +443,7 @@ dates in JavaScript.
443443

444444
#### Time, Month, and Year Wheels
445445

446-
When using the time wheel picker, you can use the number keys to select hour and minute values when the columns are focused.
447-
448-
| Key | Function |
449-
| ------------------ | ------------------------------------------------------------ |
450-
| `ArrowUp` | Scroll to the previous item. |
451-
| `ArrowDown` | Scroll to the next item. |
452-
| `Home` | Scroll to the first item. |
453-
| `End` | Scroll to the last item. |
446+
The wheel picker in Datetime uses [Picker](./picker) internally. See [Picker Accessibility](./picker#accessibility) for more information on accessibility features with the wheel picker.
454447

455448
## Interfaces
456449

docs/api/picker.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,37 @@ Pickers can be displayed inside of overlays, such as `ion-modal` to create a pic
4848
import ModalExample from '@site/static/usage/v8/picker/modal/index.md';
4949

5050
<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.
73+
74+
| Key | Function |
75+
| ------------------ | ------------------------------------------------------------ |
76+
| `ArrowUp` | Scroll to the previous option. |
77+
| `ArrowDown` | Scroll to the next option. |
78+
| `PageUp` | Scroll up by more than one option. |
79+
| `PageDown` | Scroll down by more than one option. |
80+
| `Home` | Scroll to the first option. |
81+
| `End` | Scroll to the last option. |
5182

5283
## Properties
5384
<Props />

0 commit comments

Comments
 (0)