Data views filter chips color contrast below standards

[joedolson]

Description

The buttons to filter patterns according to synced status are below color contrast. The button is at 4.04:1, where the minimum contrast is 4.5:1.

See previous relevant issue: #52555. That issue was with a different wrapping design, but the same control group.

I'll also observe that these should be real buttons, rather than div elements with events and tabindex; but that's a separate issue.

Step-by-step reproduction instructions

1. Go to Patterns
2. Choose All Patterns
3. Inspect the 'Sync Status' button colors

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.5.4
• Gutenberg build from main branch 6/21/2024

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[annezazu]

@jasmussen @jameskoster as a heads up. If we can get this fixed for 6.6, let's add it to the board.

[jasmussen]

Seems like we can either use $gray-800 for the text, resulting in this:

That would match these chips:

Or we can use a border instead of a background:

I'd love a quick check by @jameskoster before I make either PR, as the interface is meant for additional places.