fix(datetime): hide footer when month-year picker is open

[averyjohnston]

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)
• 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?

When the month-year dropdown/picker is open, the cancel/done buttons look like they apply to the picker, rather than the whole datetime. This leads to confusing UI where the user might click Done to select a new month/year, but it closes the dialog instead and discards their choice.

Issue URL: #24998, #24962

What is the new behavior?

When the month/year picker is open, the datetime's footer is hidden. The user must collapse the picker to access the buttons again. They can still cancel their choice by clicking outside the overlay or pressing Escape.

Behavior is unchanged for the month, year, and month-year presentations; the footer will remain visible.

Does this introduce a breaking change?

• Yes
• No

Other information

Native behavior is inconsistent across platforms:

• MUI has the OK button apply to the whole dialog, as in Ionic's old behavior: https://material-ui-pickers.dev/demo/datepicker
• iOS doesn't typically use overlays with buttons, instead showing the picker inline: https://developer.apple.com/design/human-interface-guidelines/ios/controls/pickers/#date-pickers
• Windows Chrome's web implementation hides buttons when the picker is open, as in this PR's new behavior: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
• iOS's web implementation has the OK button apply to the whole dialog, but keeps the user's updated month/year selection (see above URL)

We decided to go with this PR's behavior across platforms for better consistency and ease of maintenance. It clarifies the UI without adding extra layers to the component's behavior, i.e. changing what the confirm method does depending on the datetime's state.

Side note: Technically, monthYearPickerOpen is redundant since showMonthAndYear would suffice, but I found this easier to reason about. I can tweak things if preferred.

[sean-perkins]

Behavior and changes look good to me.

Question around accessibility. Now that the actions are no longer available, should we add secondary behavior to help screen reader users get back to the previous datetime state or do we expect them to traverse backwards to the expander, to collapse the month/year selection? UX that I am thinking of is ESC key to collapse the section, but also know we use that interaction within overlays, so that may not be ideal.

[liamdebeasi]

These changes look good. Re: Sean's accessibility question, we could change the month/year item in the top left (the button that says "April 2022") to read "hide year picker" when it is expanded and "show year picker" when it is collapsed. This is what iOS w/ VoiceOver does.

[averyjohnston]

I played around with it some, and while I was able to get it reading "show year picker"/"hide year picker" after the month/year, the usability still isn't great 🤔 I'm going to merge this PR as-is and open a separate issue in a few, since there might be some deeper design discussions around it.

[CarstenRuetz]

First of all, thanks for the great work!
@amandaejohnston is there any news around the month/year picker part?
During user tests, we noticed that for choosing their birthdate, they just don't understand that to close the month/year dropdown, they have to click on the month/year label again...

[SaroGFX]

Our users also reported that they would like a Done button on the Month / Year selector. Since the buttons are removed, it created confusion. From an UX point of view I believe what you want is to simply have Done to register all the changes. It can either go back to the day calendar, but preferably just registers the selected date, month and year and closes the picker.