feat(datetime): localize am/pm labels in time picker

[sean-perkins]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

The labels for "am" and "pm" are not localized to the user's current locale. This means in locales that either do not use am/pm in their time selection or have alternative labels, the text is incorrect.

This also affects the initial display of the time value, when using a presentation mode that opens the time picker in a popover.

Issue URL: #16279

What is the new behavior?

• The am/pm labels within the time picker (popover) are localized to the user's locale
• The value displayed within the time picker, when using a presentation mode that presents the time picker in a popover, is localized.
• The width of the popover will respond to grow to account for languages that have am/pm label representations that are longer than the standard width and would cause overflow.
• Locales that format the day period at the beginning of the label, will display the day period as the first column in the time picker
• Migrates the locale datetime tests from puppeteer to playwright.

Example of the change with a locale of: ta-IN:

iOS	MD

Does this introduce a breaking change?

• Yes
• No

Other information

Dev-build: 6.1.8-dev.11654624050.16b62b1b (outdated)

[averyjohnston]

Some of the ta-IN screenshots show time picker popovers that are too narrow:

• core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-md-ltr-Mobile-Chrome-linux.png
• core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-md-ltr-Mobile-Firefox-linux.png
• core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-md-rtl-Mobile-Chrome-linux.png
• core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-md-rtl-Mobile-Firefox-linux.png

Not sure if that's a screenshot timing issue or an actual bug, though.

Also, don't forget to remove the old e2e.ts file.

[sean-perkins]

Still working through the popover sizing (specifically on iOS). Will re-ping for reviews once I get that resolved 🤔

[averyjohnston]

(Whoops, clicked approve when I meant comment 😆)

[liamdebeasi]

Great job!

[sean-perkins]

It looks like when we updated picker column internal to make the rendered items buttons, we broke keyboard navigation across the columns (using tab to move across columns).

Now when tabbing through the interface, you move through each individual button, column by column.

Thoughts on what we can do here? I know our motivation for swapping it to a button was for screen readers. Would role="button" be a bad move here?

[liamdebeasi]

I think we should be able to add a tabindex="-1" to the button element. That would allow developers to use Tab to switch between columns but still use the arrow keys to navigate up and down within a column.

I will test more today and put up a PR. (along with tests)

[liamdebeasi]

Ok PR is up: #25464