bug: datetime month/year picker is hard to use with screen readers

[amandaejohnston]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

When using ion-datetime's month/year picker with a screen reader, swiping to get around the page, it isn't possible to close the picker without unintentionally changing your selection. You have to swipe past all months to get back to the picker, and the scrolling automatically changes which month is selected.

Screencast: https://user-images.githubusercontent.com/90629384/166057993-70e1c6ad-2053-431c-a908-4ef03787fac7.mov

Expected Behavior

You should be able to change the month/year on a screen reader to any value. I'm not sure what should change about the design, though. Pressing Escape to toggle the picker would work on desktop, but not on phones, for example.

Steps to Reproduce

Use any ion-datetime with a presentation that shows the month/year picker as a separate overlay.

Code Reproduction URL

No response

Ionic Info

Recording was from core hosted through ngrok; output from hosting PC:

[WARN] You are not in an Ionic project directory. Project context may be missing.

Ionic:

   Ionic CLI : 6.18.1

Utility:

   cordova-res : not installed globally
   native-run  : 1.4.1

System:

   NodeJS : v16.13.0
   npm    : 8.1.0
   OS     : Windows 10

Additional Information

No response

[liamdebeasi]

Native iOS does something similar that we can probably follow:

https://user-images.githubusercontent.com/2721089/166465753-4fa4a0c7-74f6-4067-8ae7-d2c236c9330d.mov

With VoiceOver enabled, users can select the column as a whole. In order to interact with the picker, they need to double tap the column. At this point, users are able to drag the column up or down. Swiping to proceed to the next/prev items does not appear to select the individual picker items.

[iamandersonp]

This same behavior ocurs for the ion-datetime in wheel mode

in the video of liamdebeasi you can hear the voiceover say the month and year are sliders but the actual month selector is readed as buttons and nothin hapens when you select those buttons