[EuiBadge][COLOR CONTRAST]: It is difficult to see selected text when I click and drag or select all with the keyboard

[1Copenut]

Describe the problem
This issue was raised in a thread in the EUI slack channel where the user was having trouble determining when text was selected using their mouse. After some discussion, we determined the text was being selected, but the default ::selection CSS background color was almost identical to our EuiBadge background color.

I did some more experimenting with the EuiBadge component in light and dark themes. The screenshots below show most of our badges make it difficult to see selected text with Chrome's default CSS.

Light theme, all text selected, Chrome latest, MacOS

---

Dark theme, all text selected, Chrome latest, MacOS

Environment

• MacOS Ventura
• Chrome latest
• https://eui.elastic.co/#/display/badge

Proposed solution

We should review these badges and add custom CSS for the ::selection pseudo-class. This selector is supported in all evergreen browsers and would be a big improvement for accessibility.

See MDN ::selection entry for more information and browser support.

WCAG or Vendor Guidance (optional)

• Understanding SC 1.4.3: Contrast (Minimum) (Level AA)
• MDN ::selection accessibility concerns

[JasonStoltz]

@1Copenut Do you remember where this came in from? A slack thread, or a kibana issue?

[JasonStoltz]

We talked about this today. We think we could solve this by setting the selected color to be in the inverse of the background color. These are prevalent enough in our UI that it is worth cleaning up.