bug: time picker in ion-datetime does not let me select AM/PM using keyboard input

[bchehraz]

Prerequisites

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

Ionic Framework Version

• v6.x

Current Behavior

In terms of accessibility on Web, I'm able to tab through to select a time using the time picker in ion-datetime by typing in values e.g. 12, tab, 35, but using the keyboard I am not able to switch between AM/PM (typing in A or P doesn't work, and neither does up/down arrow keys)

It also seems strange that I can use the scroll-wheel to select both times and AM/PM, but the up/down keys don't work for any of the input fields. This to me is a bug but if I need to put in a feature request instead, let me know and I will gladly do that!

In this screen recording, I'm using tab + keyboard to input into the component. When I reach the AM/PM section, I'm unable to switch from AM to PM using A, P, or up/down arrow keys so I'm stuck.
https://user-images.githubusercontent.com/7946204/137190396-f6c9036a-e3b9-48f1-ab54-95a60139124e.mov

Expected Behavior

Using a combination of number input and tab key, I should be able to type in any input into the numbers for the time picker, not just numbers, but also A or P to specify AM or PM when I get to the AM/PM selection.

Using some combination of keyboard input, I should be able to safely input a time as well as the AM/PM value into the time picker of the ion-datetime component. I should be able to type the letter A or P to go to AM or PM.

In addition, if I'm able to use the scroll wheel on a mouse to go scroll through the time or AM/PM selection, I should also be able to use up-down keyboard arrow keys for additional accessibility.

Steps to Reproduce

1. Simply generated a new ionic project, deleted some unnecessary code in the starter project, ran ionic serve
2. Added the following code into home.html. I happened to be testing out the ion-datetime inside a modal, but this issue will happen regardless of being in a modal.

  <ion-button id="open-modal">Open Datetime Modal</ion-button>
  <ion-modal trigger="open-modal" style="--height: 386px; --width: 351px;">
    <ng-template>
      <ion-content>
        <ion-datetime mode="ios" size="cover"></ion-datetime>
      </ion-content>
    </ng-template>
  </ion-modal>

3. opened modal and began interaction with ion-datetime to produce the result

Code Reproduction URL

https://github.com/bchehraz/ionic-v6-bugs

Ionic Info

Ionic:

   Ionic CLI                     : 6.17.1 (/Users/user/.nvm/versions/node/v14.15.3/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.0.0-rc.0
   @angular-devkit/build-angular : 12.1.4
   @angular-devkit/schematics    : 12.1.4
   @angular/cli                  : 12.1.4
   @ionic/angular-toolkit        : 4.0.0

Capacitor:

   Capacitor CLI      : 3.2.4
   @capacitor/android : 3.2.4
   @capacitor/core    : 3.2.4
   @capacitor/ios     : 3.2.4

Utility:

   cordova-res (update available: 0.15.3) : 0.15.1
   native-run                             : 1.5.0

System:

   NodeJS : v14.15.3 (/Users/user/.nvm/versions/node/v14.15.3/bin/node)
   npm    : 6.14.9
   OS     : macOS Big Sur

Additional Information

Related feat request as well as the PR that implemented the feat, if that is helpful at all...

Feat request: #23768

PR: #23996

[liamdebeasi]

Thanks! It looks like using the time picker in a popover does not seem to work with keyboards, but doing presentation="time" works fine. I will look into a fix for this.

[bchehraz]

Awesome, thanks. I didn't realize it was just with the popover/modal.

[sean-perkins]

@bchehraz the fix for this issue has been completed and will be available in the next release of Ionic v6 (rc.4). Thanks!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.