use euiFocusBackgroundColor for EuiFacetButton :focus

[hbharding]

Summary

To date, most usage of EuiFacetButton in Kibana has been done on a white background. With the upcoming Integrations project, we have plans to include this against a light grey background ($euiPageBackgroundColor). The button's focus state is difficult to see when on an off-white background. This PR modifies EuiFacetButton's :focus state to use a light blue background instead of light grey. We use this color elsewhere in EUI such as when focusing on tabs.

Screenshots

Before

After

Checklist

• Checked in dark mode
• Checked in mobile
• Checked in IE11 and Firefox
• Props have proper autodocs
• Added documentation examples
• Added or updated jest tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[hbharding]

I wasn't sure if I needed to complete everything in the Checklist for a simple 1 liner CSS change.

[snide]

I know this is small, but don't forget to add a changlog item. Just add a new line under master. Then you should be safe to merge. As a suggestion, If you wanted to be clever, my guess is that you could use a CSS outline to mimic "padding" so that the focus state wasn't flush to the text. This could be more trouble than it's worth, but it's a trick i've used when the focused element looked weird because of the lack of padding.

https://github.com/elastic/eui/blob/master/CHANGELOG.md

[cchaos]

We also have variables for pixel values that you'll want to use

Suggested change

	box-shadow: -4px 0 $euiFocusBackgroundColor, 4px 0 $euiFocusBackgroundColor;
	box-shadow: (-$euiSizeXS) 0 $euiFocusBackgroundColor, $euiSizeXS 0 $euiFocusBackgroundColor;

[cchaos]

Awesome thanks!

[cchaos]

Oh whoops, looks like you've got a CL conflict. Be sure to rebase before merging.

[hbharding]

Ok I think this is ready!

One note: when testing in Firefox I noticed a dotted grey border while tab focusing (see screenshots below). Since this behavior occurs on multiple EUI components and not just EuiFacetButton, we may want to create a separate issue if we want to "normalize" this style. Perhaps something like:

# normalize.scss
button::moz-inner-focus { border: 0; }