Fix EuiNavDrawer collapse/expand button height issue

[andreadelrio]

Summary

I reverted some changes introduced in #2417 and ended up with the original situation (i.e. a collapse/expand button with a weird focus behaviour). However, I think I've found a way to fix this using the :focus-within selector.

This is the behaviour now:

Fixes #2456

Note: I moved footerContent back to its original position (above modifiedChildren) as I had missed a comment we have explaining why we need to have it before modifiedChildren.

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

[andreadelrio]

@cchaos This is what was happening when adding a background to the button on focus . Here you can see the element with forced focus state on Chrome and in pink so that it's easy to see what was going on. With focus-within I added a background to its parent element. Is that too hacky?

[cchaos]

The only problem with :focus-within is that it's not well supported by all browsers: https://caniuse.com/#feat=css-focus-within

[andreadelrio]

Ok, I think I've found an alternative to using :focus-within. Tested in Chrome, Firefox and IE11.

[cchaos]

Where is the reference to this comment?:

Note: I moved footerContent back to its original position (above modifiedChildren) as I had missed a comment we have explaining why we need to have it before modifiedChildren.

[andreadelrio]

Where is the reference to this comment?:

Note: I moved footerContent back to its original position (above modifiedChildren) as I had missed a comment we have explaining why we need to have it before modifiedChildren.

I was refering to this https://github.com/elastic/eui/blob/v14.4.0/src/components/nav_drawer/nav_drawer.js#L332

{/* Put expand button first so it's first in tab order then on toggle starts the tabbing of the items from the top */}

[cchaos]

Ahh, right, ok I now follow through the comments on #2252.

LGTM! Only tested in Chrome. Can you just be sure to test in FF and IE before merging?

[andreadelrio]

Ahh, right, ok I now follow through the comments on #2252.

LGTM! Only tested in Chrome. Can you just be sure to test in FF and IE before merging?

Just double checked on Firefox and IE11.