fix: set dataviews popover hover text color

[Pranjal1423]

What?

Closes #80067

This PR explicitly sets the hover, focus, and active text color of the filter list items (.dataviews-filters__search-widget-listitem) to the standard dark text color (var(--wpds-color-foreground-content-neutral)).

Why?

In newer WordPress Core releases, the core stylesheet (editor/style.css) contains a fallback style rule that sets the hover/active text color of Dataview list items to white (#fff) on a dark theme background.

Gutenberg recently refactored the Dataviews dropdown styling to use a very light background color on hover (var(--wpds-color-background-interactive-brand-weak-active)). However, because Gutenberg did not specify a text color for the hover state, it ended up inheriting the white text color rule from Core. This resulted in white text on a light background, making the dropdown items completely unreadable on hover.

How?

By adding color: var(--wpds-color-foreground-content-neutral); to the hover, focus, and active state selectors of .dataviews-filters__search-widget-listitem inside packages/dataviews/src/components/dataviews-filters/style.scss.

Testing Instructions

1. Navigate to the Site Editor (Appearance -> Editor) and click on Pages or Templates (ensure a block theme like Twenty Twenty-Four is active).
2. Click on the filter icon (funnel) next to the search bar and choose a filter (e.g., Status or Author).
3. Click on the added filter chip to open its value dropdown list.
4. Hover your mouse over the items in the dropdown (e.g., "Draft", "Published", or "admin").
5. Verify that the text remains dark and fully readable against the light gray/blue background on hover.

Testing Instructions for Keyboard

1. Tab to the filter chip and press Space or Enter to open the dropdown.
2. Use the Down and Up arrow keys to navigate the list items.
3. Verify that the active/focused item remains fully readable.

Screenshots

Before fix

After fix

Use of AI Tools

I used Chatgpt to help identify the missing color rule . I have personally made the change ,reviewed and verified all of it

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: First-time Contributor, [Package] DataViews.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[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: Pranjal1423 <pranjal4804@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: simison <simison@git.wordpress.org>
Co-authored-by: enejb <enej@git.wordpress.org>

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

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Pranjal1423! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[ntsekouras]

Let's update the changelog entry properly, by adding the PR.

[ntsekouras]

Should we also add the color for the description that was removed here? --cc @ciampo

[ciampo]

Yes, I think we should cover the description too.

A few related things I'm noticing:

• set the resting list-item color explicitly with --wpds-color-foreground-interactive-neutral;
• use the corresponding --wpds-color-foreground-interactive-neutral-active token for hover, focus, and the active item;
• give the secondary description the matching weak pair: --wpds-color-foreground-interactive-neutral-weak at rest and --wpds-color-foreground-interactive-neutral-weak-active in the active states.

These options are interactive, so the foreground-interactive family describes their role more accurately than foreground-content. The description override is also necessary for this compatibility fix: WordPress 7.0 still applies a more-specific active-state selector with color: #fff directly to the description, so changing only the parent's color does not override it. With the default tokens, leaving the description at #707070 against the active #e6eaf4 background is only 4.11:1, below the 4.5:1 required for this small text by WCAG 2.2 SC 1.4.3.

Suggested use of the tokens

.dataviews-filters__search-widget-listitem {
	color: var(--wpds-color-foreground-interactive-neutral);

	&:hover,
	&[data-active-item],
	&:focus {
		background-color: var(--wpds-color-background-interactive-brand-weak-active);
		color: var(--wpds-color-foreground-interactive-neutral-active);

		.dataviews-filters__search-widget-listitem-description {
			color: var(--wpds-color-foreground-interactive-neutral-weak-active);
		}
	}

	.dataviews-filters__search-widget-listitem-description {
		color: var(--wpds-color-foreground-interactive-neutral-weak);
	}
}