docs(picker): add accessibility docs (#3612)

ionic-team · Apr 25, 2024 · 82b6153 · 82b6153
1 parent f03dd1d
commit 82b6153
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/docs/api/datetime.md b/docs/api/datetime.md
@@ -443,14 +443,7 @@ dates in JavaScript.
 
 #### Time, Month, and Year Wheels
 
-When using the time wheel picker, you can use the number keys to select hour and minute values when the columns are focused.
-
-| Key | Function |
-| ------------------ | ------------------------------------------------------------ |
-| `ArrowUp` | Scroll to the previous item. |
-| `ArrowDown` | Scroll to the next item. |
-| `Home` | Scroll to the first item. |
-| `End` | Scroll to the last item. |
+The wheel picker in Datetime uses [Picker](./picker) internally. See [Picker Accessibility](./picker#accessibility) for more information on accessibility features with the wheel picker.
 
 ## Interfaces
 

diff --git a/docs/api/picker.md b/docs/api/picker.md
@@ -48,6 +48,37 @@ Pickers can be displayed inside of overlays, such as `ion-modal` to create a pic
 import ModalExample from '@site/static/usage/v8/picker/modal/index.md';
 
 <ModalExample />
+
+## Accessibility
+
+### Screen Readers
+
+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.
+
+| Gesture | Function |
+| - | - |
+| Swipe Left | Move focus to the previous Picker Column. |
+| Swipe Right | Move focus to the next Picker Column. |
+| Swipe Up | Select the next option in the Picker Column. |
+| Swipe Down | Select the previous option in the Picker Column. |
+| 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. |
+
+:::caution
+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.
+:::
+
+### Keyboard Navigation
+
+Each [Picker Column](./picker-column) can be navigated using the keyboard when focused.
+
+| Key | Function |
+| ------------------ | ------------------------------------------------------------ |
+| `ArrowUp` | Scroll to the previous option. |
+| `ArrowDown` | Scroll to the next option. |
+| `PageUp` | Scroll up by more than one option. |
+| `PageDown` | Scroll down by more than one option. | 
+| `Home` | Scroll to the first option. |
+| `End` | Scroll to the last option. |
 
 ## Properties
 <Props />