Autocompleters: Change user slug color

[SainathPoojary]

What?

Closes #69001

This PR improves the accessibility and readability of user slugs in the autocompleter dropdown when selecting a user.

Why?

The current color contrast of the user slug text in the autocompleter list is insufficient, making it hard to read.

• Selected state: Contrast ratio of 1:1 (#757575 on #007cba)
• Hover state: Contrast ratio of 1.26:1 (#007cba on #006ba1)

These values do not meet accessibility guidelines and hinder usability.

How?

• Removed the hardcoded $gray-700 color for the slug text.
• Removed the hover color override (var(--wp-admin-theme-color)) to avoid low contrast issues.
• Allowed the slug to inherit color from the parent list item for better consistency and accessibility.

Testing Instructions

1. Open a post or page in the editor.
2. Type @ in the editor to trigger the user autocompleter dropdown.
3. Select a user and observe the color contrast of the slug text in both selected and hover states.

Screencast

Screen.Recording.2025-02-06.at.1.36.57.PM.mov

[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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @rotemg-elementor.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: rotemg-elementor.

Co-authored-by: SainathPoojary <sainathpoojary@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: Rishit30G <rishit30g@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>

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

[Mamaduka]

@SainathPoojary, can you rebase this on top of the latest trunk?

[Mamaduka]

Thanks, @SainathPoojary!

While this solves the color contrast issue for the selected option, it introduces another issue. If we remove $gray-700 for slug text, they're as emphasized as the user name.

Maybe instead we should only apply color for items that aren't currently selected. What do you think?

diff --git packages/editor/src/components/autocompleters/style.scss packages/editor/src/components/autocompleters/style.scss
index 295d63b8e57..475ed306b3b 100644
--- packages/editor/src/components/autocompleters/style.scss
+++ packages/editor/src/components/autocompleters/style.scss
@@ -24,7 +24,6 @@
 	}
 	.editor-autocompleters__user-slug {
 		margin-left: 8px;
-		color: $gray-700;
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		overflow: none;
@@ -32,7 +31,7 @@
 		flex-grow: 0;
 		flex-shrink: 0;
 	}
-	&:hover .editor-autocompleters__user-slug {
-		color: var(--wp-admin-theme-color);
+	&:not(.is-primary) .editor-autocompleters__user-slug {
+		color: $gray-700;
 	}
 }

[SainathPoojary]

Thanks, @Mamaduka!

That makes sense. Instead of completely removing $gray-700, I’ll update the PR so that the color only applies to items that aren’t currently selected. This way, the slug text remains visually distinct while ensuring proper emphasis on the selected item.

[Mamaduka]

Thanks, @SainathPoojary!