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]

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.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
• Labels found: .

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: SainathPoojary <[email protected]>
Co-authored-by: im3dabasia <[email protected]>
Co-authored-by: afercia <[email protected]>
Co-authored-by: Rishit30G <[email protected]>
Co-authored-by: carolinan <[email protected]>

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