fix: set dataviews popover hover text color

[Pranjal1423]

What?

Closes #80067

This PR updates the hover, focus, and active text colors for Dataview filter list items (.dataviews-filters__search-widget-listitem) and their descriptions. It migrates them to use official interactive design tokens:

• List Item: Uses --wpds-color-foreground-interactive-neutral (resting) and --wpds-color-foreground-interactive-neutral-active (hover/focus).
• Description: Uses --wpds-color-foreground-interactive-neutral-weak (resting) and --wpds-color-foreground-interactive-neutral-weak-active (hover/focus).

Why?

WordPress 7.0 Core added a style rule forcing hover/active list item text to white (#fff). Because Gutenberg's Dataview list items use a light background color on hover, the text (and description details) inherited that white color. This resulted in white text on a light background, making the options completely unreadable.

Setting these explicit interactive neutral tokens overrides the Core fallback styles and ensures proper WCAG color contrast.

How?

Modified packages/dataviews/src/components/dataviews-filters/style.scss to assign the proper --wpds-color-foreground-interactive-neutral token variants to the list item and its nested description for both resting and active/hover/focus states.

Testing Instructions

1. Go to the Site Editor (Pages or Templates list).
2. Click the funnel icon and add the Status filter.
3. Open the Status dropdown and hover over the options.
4. Verify that both the main title and secondary description remain dark and readable on hover/focus.

Testing Instructions for Keyboard

1. Navigate to the filter chip via keyboard and press Space or Enter to open the dropdown.
2. Use the arrow keys to focus on different options.
3. Verify that the focused option text remains dark and readable.

Use of AI Tools

I used Chatgpt to help debug the styles and identify the correct interactive tokens. I verified and tested the changes locally.

Screenshots

Before Fix

After Fix

[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);
	}
}

[ciampo]

Nitty, but can we update the PR description to match the latest code changes?

Can you also update a few more screenshots with the before/after comparison, including the description text?

Maybe a filter with more than ten options and a non-empty option description, too. That exercises the ComboboxList path and verifies the nested active-state override against WordPress 7.0's legacy CSS.

[ciampo]

This is looking good to me 🚀

@ntsekouras also looking good for you?

[ciampo]

We'll need to rebase the PR on top of latest trunk and move this entry under the Unreleased section, given that a new version of the npm packages was released in the meantime.

[ciampo]

@ntsekouras are you ok with backporting these changes to both Gutenberg 23.6 RC and WordPress 7.1 beta?

[ntsekouras]

@ntsekouras are you ok with backporting these changes to both Gutenberg 23.6 RC and WordPress 7.1 beta?

Yes, of course

[t-hamano]

I'm reviewing four PRs, including this one, after hearing from Nik. If these four PRs are to be backported to wp/7.1, it would be better to backport them to Gutenberg 23.6 RC accordingly.

• fix: set dataviews popover hover text color #80105
• DataViews: Fix the unintended gap between list layout items when groupBy is set #80254
• DataViews: Fix the list layout ignoring some settings when groupBy is set #80255
• DataViews: Add shift-click range selection #80046

Since the backport to wp/7.1 has not been completed, I will address that first.

[github-actions]

I just cherry-picked this PR to the wp/7.1 branch to get it included in the next release: 5dc9d14

[t-hamano]

OK, It seems the cherry-pick for this PR was successful.

[t-hamano]

• fix: set dataviews popover hover text color #80105
• DataViews: Fix the unintended gap between list layout items when groupBy is set #80254
• DataViews: Fix the list layout ignoring some settings when groupBy is set #80255
• DataViews: Add shift-click range selection #80046

Since the backport to wp/7.1 has not been completed, I will address that first.

@ntsekouras @ciampo, I have backported these four items to wp/7.1.

[ntsekouras]

@ntsekouras @ciampo, I have backported these four items to wp/7.1.

Thanks so much Aki!

[t-hamano]

I just cherry-picked this PR to the release/23.6 branch to get it included in the next release: b94a6a1