diff --git a/docs/api/datetime.md b/docs/api/datetime.md index a820311f1b3..3cd8c2e566d 100644 --- 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 index a78be5cf151..f3929bd7440 100644 --- 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'; + +## 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