DatePicker: better hover/focus styles

[ciampo]

What?

DatePicker: fix buggy hover styles and improve focus styles for selected day, add high-contrast mode styles.

Why?

Fix bugs, improve accessibility and UI polish

How?

Tweaking the day button styles.

Testing Instructions

• Open the DatePicker in storybook
• Make sure that, when hovering over the selected day, the color of the button remains white
• Make sure that, when focusing the selected day, a more clear focus ring is shown
• Make sure that, when in high-contrast more, users can effectively understand what is the selected day
  • In chrome, this can be emulated using dev tools by setting the forced-colors: active media feature

Screenshots or screencast

Before	After
Kapture.2024-09-06.at.12.07.46.mp4	date-picker-after.mp4

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ciampo <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: t-hamano <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[tyxla]

When the calendar uses a list of events, and the selected date has an event, it still looks weird:

This looks like something we should address in this PR.

[ciampo]

Well spotted, @tyxla  — the bug that you highlighted was caused by my code. I had initially used the ::before pseudo-element for the high-contrast mode, but as you found out, that pseudo-element is already used to display the "event dot".
Switching to the ::after pseudo-element for high-contrast styles seems to fix the issue.

I also took the opportunity to make the "event dot" work in high contrast mode, too.

[mirka]

Great catch, thanks 👍

[t-hamano]

It works as expected in Windows high contrast mode.

This may be a minor thing, but is it possible to fix the misaligned event dots when a button gets focus? This issue doesn't seem to occur on trunk:

c103c38d06110ee9214f9695eebac5d2.mp4

[ciampo]

is it possible to fix the misaligned event dots when a button gets focus? This issue doesn't seem to occur on trunk

I'm aware of that little jump — it's a consequence of showing an extra "white" focus ring to better indicate when a selected day is focused.

I'll try to apply Lena's suggestion and see how that goes

[tyxla]

LGTM 👍 The bug has been addressed.

Should be good to go once prior feedback is addressed.

[ciampo]

I addressed all pending feedback — the component is testing well for me

Kapture.2024-09-11.at.09.52.05.mp4

Thank you all for the review, I'll merge once CI checks are 🟢