[Lens] (Accessibility) Focus mistakenly stops on righthand form

[myasonik]

Firefox automatically allows users to place focus on all scrollable containers. This behavior differs from all webkit/chromium but is generally seen as a good accessibility improvement for a few reasons (users can scroll containers without tab stops in them, users can scroll before being teleported to the first tab stop in it which can be very problematic in long containers).

For some reason, this is being triggered on the right-hand sidebar (div.lnsConfigPanel) even when it isn't scrollable which is confusing (and not helped by the fact that firefox adds no focus state indicator for this.

Generally, I'd say to not touch this but because we have a lot of tab stops in this scrollable container (so we don't have to worry about a user being teleported somewhere they can't see), we can safely remove this browser behavior by expressly telling Firefox we don't want it with a tabIndex={-1}.

TLDR

Add tabIndex={-1} to .lnsConfigPanel

[elasticmachine]

Pinging @elastic/kibana-accessibility (Project:Accessibility)

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[mbondyra]

Joe's comment about potential solution from here #84866:

[flash1293]

@myasonik I just re-tested this in Firefox on Mac and it seems like even though the container is still scrollable (I'm not sure why that's even the case...), tabbing doesn't seem to stop. Could you check latest master to confirm the current behavior is fine?

[myasonik]

Don't seem to be able to reproduce it anymore! Closing the issue!