Improve contrast for EuiCollapsibleNav close link

[ryankeairns]

In testing the new nav component in Kibana, it was noted that the close link can become obfuscated by content underneath the overlay mask, as seen below.

A solution that insures better contrast would significantly improve the readability and accessibility of this link.

[miukimiu]

Hi @ryankeairns,

I was thinking to add a background behind the close link. What do you think about one of these two options?

You can find the Figma project here.

[ryankeairns]

Thanks @miukimiu , of that set, I prefer Option 2.

I was curious to see a white background version, but I see in the Figma file you've already done that :) The light gray background seems to blend better with the big shadow coming from the nav versus the white.

[miukimiu]

Thanks @ryankeairns,

I added two more options with a light gray background. I also added a better background screenshot based on @cchaos Figma comments.

You can find the Figma project here.

[ryankeairns]

Thanks! Most of all, I prefer the lighter weight font as it detracts the eye less. I could go either way on the light gray/white and slightly prefer the blue text.

[cchaos]

I prefer the white as well. The other thing we can do, since this was implemented mostly for keyboard users, is to wrap this one in the <EuiScreenReaderOnly showOnFocus> component. Then make sure there's a good visible focus ring around it as well.

[RyanBuono]

@miukimiu can you please share the Figma project file for collabsiblenav? I can't find anything in the Community file and this link you provided didn't work for me: https://www.figma.com/file/rmB9s2T1IkxITMpBsFiuSE/EuiCollapsibleNav-Close-Button?node-id=0%3A1