[Logs UI] [Metrics UI] Keyboard control audit

[Kerry350]

Summary

During 7.9 testing a few keyboard control issues have been found, we should do an audit of Logs and Metrics to see if there are any additional issues. We can most likely put all of the fixes in one PR.

Examples

The screenshots show where keyboard navigation should work.

Log stream

The logs stream, categories page examples, and anomalies page examples all make use of the same shared components to show log lines, however these lines and the context menu (with the "view in context" etc link) aren't keyboard accessible.

Alerting flyout (logs and metrics)

When editing the conditions via the keyboard it's possible to enter and use the popover content, however when the popover is closed with escape the flyover loses focus, so you have to tab back through the hierarchy again to reach the expression you were dealing with.

Metrics snapshot

It's possible to navigate to nodes via the keyboard, and open the node context menu with enter, however it's not possible to cycle through the full set of links with tab, instead only the last link in the list is accessible (or the first link if the menu has just been opened).

ML job setup flyout (logs)

The dataset selection popovers don't receive a keyboard focus when opened.

Logs stream log event flyout

The "Actions" menu button can be tabbed to, enter opens the menu, however on Firefox the links can't be accessed via the keyboard. On Chrome the links can be accessed once with tab, but then the popover loses focus and can't be reached via keyboard controls again.

Screenshot:

Firefox:

Chrome:

Pointers from EUI

These are some pointers from the EUI team for whoever picks up this issue:

There were changes to the underlying focus-trap react library that could probably have affected this. elastic/eui#3631

For some of the popover issues you're seeing, I'd recommend adding ownFocus to the popover, which will move focus into the popover and will keep you there until you hit esc. For closing popovers, I'd always recommend to place focus back to wherever you expect it to go manually using the closePopover callback.

[elasticmachine]

Pinging @elastic/logs-metrics-ui (Team:logs-metrics-ui)

[thompsongl]

There were changes to the underlying focus-trap react library that could probably have affected this.

Just a note on this: Those changes are not yet in Kibana, so they wouldn't be the cause. #74004 will introduce the EUI focus-trap React library changes

[weltenwort]

@thompsongl good to know, thank you. Do you have any idea what else might have caused the popovers not to receive focus anymore?

[thompsongl]

Nothing comes to mind if indeed it was an EUI change in the 7.9 timeframe. I'd follow the suggestion of auditing the use of ownFocus in the problematic popover components. If ownFocus is not in use, it's likely keyboard navigation was not really in order beforehand.

[smith]

I'm sure many of these same problems exist and an audit would be helpful but we are not currently planning on doing this.