[Controls] Fix timeslider focus outline and Shift-Tab behavior

[Zacqary]

Summary

• Makes the focus outline visible on the Timeslider control:

Before	After

• Fixes [Analytics:Maps page]Timeslider unexpectedly closes #215846 and prevents the timeslider from closing when Shift-Tabbing away from the second range slider handle

To test:

• Create a timeslider control
• Tab into focus until the dates are highlighted
• Press Enter
• Tab to the second range handle
• Shift-Tab back to the previous handle and ensure the popover doesn't close
• Tab forward to the second range handle, then Tab forward again. Ensure the popover does close

Note that Shift-Tabbing all the way back to the Pin at the beginning of the popover, and then Shift-Tabbing again, will loop back to the second range handle. This is because of the focus trap on the popover, and I believe it's expected. We only want to close the popover when tabbing forward.

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[nreese]

Is this a workaround recommended by EUI? Could you provide some more background about why this implemenation path was selected?

[Zacqary]

No workaround is currently recommended by EUI. This bug wasn't tracked, I just opened the issue after discovering it.

As I explained in the issue, <EuiInputPopover> uses an onKeyDown handler to trigger closePopover when the user tabs away from it. It does it by detecting if the Tab key was pressed, and if document.activeElement is equal to the last tabbable item in the popover. It does not check to see whether the Shift key was also being held.

The reason I'm doing it in this janky way is:

• Passing a new onKeyDown function to the input popover does not override the original onKeyDown. It will always call closePopover if you hit Tab on the last tabbable element, and it doesn't send any arguments to closePopover. An observable is the only way I could figure out to communicate event.shiftKey === true to the closePopover function.
• "Last tabbable element" is determined using some complex logic from a library called tabbable, an EUI dependency but not a Kibana dependency, so it's not available. The best we can do without adding a new dependency is to just hard disable closing the popover if the Shift key is used.
• Disabling the focusTrap entirely on the <EuiInputPopover> just makes it impossible to Tab into the popover at all

Happy to use a different workaround if EUI can recommend one, but this is what I got working

[weronikaolejniczak]

@Zacqary that's a very clever workaround but of course, we don't want it! I opened a PR to check for Shift key too: elastic/eui#8950

I also noticed that overall, EuiInputPopover keyboard navigation is strange. We might need to look more deeply into this but for now the simple change ☝🏻 should at least get rid of the code on your side.

The earliest we will be able to merge this PR is next week so don't hesitate to merge this as is.

cc @nreese @elastic/eui-team

[elasticmachine]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: fe119bb

Failed CI Steps

• FTR Configs #131

Test Failures

• [job] [logs] FTR Configs #131 / Fleet Endpoints fleet policy secrets fleet server version requirements "after each" hook for "should store new secrets after package upgrade"

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
controls	484.5KB	484.7KB	+179.0B

History

• 💛 Build #327185 was flaky 0ec221b

[Zacqary]

Closing in favor of elastic/eui#8950, it'll be cleaner to wait for the EUI fix instead of reverting our workaround.