[EuiBadge][COLOR CONTRAST]: It is difficult to see selected text when I click and drag or select all with the keyboard
1Copenut opened this issue · 2 comments
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)
@1Copenut Do you remember where this came in from? A slack thread, or a kibana issue?
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.