Normalize button moz-focus-inner

[andreadelrio]

Summary

Remove border that shows up when tabbing through components in Firefox. Covers #2373

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

[snide]

Think you got an extra CL in here

[myasonik]

I setup a reduced test case because I'm not sure what other styles are having an effect inside EUI but ::-moz-focus-inner does not seem to be the selector we want.

Seems like ::moz-focusring works:
https://codepen.io/myasonik/pen/QWLPKjQ?editors=1100

[cchaos]

I don't think it hurts to have both. Normalize uses both. https://github.com/necolas/normalize.css/blob/fc091cce1534909334c1911709a39c22d406977b/normalize.css#L202-L223

But in @myasonik's codepen, the -moz-focusring also changes the border which completely removes the actual button border which seems to have unintended consequences.

[andreadelrio]

Not sure what's happening on that codepen but I've tested with ::-moz-focus-inner and it works well in Eui (tabs, buttons). -moz-focusring alone doesn't seem to be removing the dotted border in Eui. I suggest we stick with just ::-moz-focus-inner because Mozilla advices not to use -moz-focusring in production sites:

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. from https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring

[cchaos]

Well it seems there are inconsistencies between browser versions for support. Perhaps it is just best to support both.

[andreadelrio]

Well it seems there are inconsistencies between browser versions for support. Perhaps it is just best to support both.

I've added -moz-focusring to be on the safer side. From what I can tell we only need outline: none; there as border: none; (present on @myasonik's CodePen) has unintended effects on the elements (for example, borders getting removed from EuiButton on focus). So I've done:

  &:-moz-focusring {
    outline: none;
  }

[cchaos]

LGTM and there doesn't seem to be any adverse affects.

I think you just need to rebase with master to put the CL item in the right place and then you're good to merge.