(Accessibility) Fix contrast issues in Search Profiler #207732
Conversation
| @@ -29,7 +30,7 @@ export const HighlightDetailsTable = ({ breakdown }: Props) => { | |||
| { | |||
| name: 'Time', | |||
| render: (item: BreakdownItem) => ( | |||
| <EuiBadge style={{ backgroundColor: item.color }}> | |||
| <EuiBadge style={{ backgroundColor: item.color, color: euiTheme.colors.plainDark }}> | |||
There was a problem hiding this comment.
I was under the impression that the EuiBadge component would automatically change to the most contrast-appropriate text color when applying the badge color via the color prop (rather than inlining overriding styles). Would you mind changing to using the prop and seeing if that alleviates your need to define the text color here?
There was a problem hiding this comment.
Thank you for the feedback. I’ve updated the code to use the color prop.
VriaA
force-pushed
the
fix/contrast-issues-in-search-profiler
branch
from
be60fe3 to
85d0374
Compare
…sues-in-search-profiler-mm
|
Thanks for making that change, @VriaA. If you don't mind, I made a few small suggested tweaks for your branch in a separate PR. If you agree with those suggestions and merge into your branch, I'd be happy to give this an approval. |
…arch-profiler-mm Search Profiler Contrast Issue Suggested Tweaks
There was a problem hiding this comment.
Thanks for merging in those suggestions, @VriaA! Looks good from my perspective!
|
Thank you very much @MichaelMarcialis 😁 |
Summary
This PR fixes #195106
I used the default text color set for Light Mode in Dark Mode.
Before
After
Before
After