feat(picker): picker column is easier to select with assistive technology

Issue number: resolves #25221

What is the current behavior?

The wheel picker is hard to use with screen readers because users need to manually swipe over every option. Not only is this tedious, it also means it's impossible to move between columns/leave the picker by swiping only because the act of swiping selects a value.

What is the new behavior?

We did investigations into how native handles the wheel picker, and both iOS and Android do it differently. Unfortunately, neither of those patterns can be implemented exactly using web tech (at least not without a lot of brittle/hacky code).

As a result, we settled on a solution that follows web accessibility best practices and addresses the original issue:

Each picker column now renders an invisible element. This element receives focus and handles keyboard navigation. This element also has role="slider" which means that screen readers should synthesize keyboard events when swiping. This allows us to resolve the original issue. Users can also double tap to slide up/down to adjust values instead.

Note: Chrome currently does not synthesize keyboard events. However, this is something that could be fixed in the future (since Chrome is not following the spec right now). Android users can double tap to slide up/down in the meantime.

Does this introduce a breaking change?

[ ] Yes
[x] No

Other information

Dev build: 8.0.0-dev.11713893672.15a2b23e

Reviews: Please test this on iOS and Android!

I recommend testing on src/components/datetime/test/prefer-wheel since it lets you the core functionality as well as the datetime-specific integrations (the aria labels)

Docs PR: https://github.com/ionic-team/ionic-docs/pull/3612

ionic-team / ionic-framework