[Block] Form - Date picker title header (month, year, arrows) inherits theme foreground color, making it unreadable on dark themes

[radtechgh]

Quick summary

User added a Form block, used date picker. On live view, the calendar shows the day numbers, but not the month, year, or prev/next arrows.

Steps to reproduce

1. Form with date picker field added to page.
2. Publish page.
3. View page, select date picker, title header appears blank.
4. Switch to another FSE theme (Zoologist in my test), form date picker now shows the proper calendar with titles.

What you expected to happen

Date picker should show the month, year and previous/next arrows. Plus day date numbers.

What actually happened

Entire title area of date picker is blank.

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Atomic

Logs or notes

CSS (provided by another HE) will add the month and year back, but not the prev/next arrows:

div#ui-datepicker-div {
    color: #333;
}

[radtechgh]

initial site: 6067936-zen

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 6067936-zen
• [ ] 7720615-zen
• [ ] 7627294-zen
• [ ] 8022733-zen
• [ ] 9310622-zen

[cuemarie]

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on Simple: Replicated
• Tested on AT: Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

• Replicated in AT and Simple, using multiple themes with a dark background and white foreground color by default. (Tested in VideoMaker, Remote). The date picker has a white background, and then the text is inheriting the foreground color of the theme due to this CSS:

body {
  color: var(--wp--custom--color--foreground);

AT Example

Simple Example

📌 ACTIONS

• Assigned to Apex
• Transferred to jetpack repo

[github-actions[bot]]

This issue has been marked as stale. This happened because:

• It has been inactive for the past 6 months.
• It hasn’t been labeled `[Pri] BLOCKER`, `[Pri] High`, `[Type] Feature Request`, `[Type] Enhancement`, `[Type] Janitorial`, `Good For Community`, `[Type] Good First Bug`, etc.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

[anomiex]

Issue is still present.

If nothing else, probably https://github.com/Automattic/jetpack/blob/trunk/projects/packages/forms/src/contact-form/css/jquery-ui-datepicker.css should do more overriding of styles if it's not going to try to use theme variables.

[Gustavo-Hilario]

Another report here: 7720615-zen

[cuemarie]

Encountered this here on a light theme as well: 7627294-zen

Example: (Content highlighted so you can see it, but its white text on white bg):

Provided CSS to resolve the issue.

#ui-datepicker-div {
    color: #000;
}

[upwardmomentum84]

Reported here: 8022733-zd-a8c

Provided CSS to resolve issue.

[rosepajaroja]

Reported here: 9310622-zd-a8c Provided CSS to resolve the issue

[enejb]

Fixed with https://github.com/Automattic/jetpack/pull/41342