[Lens] Focus Fixes for v8 Theme

[MichaelMarcialis]

Summary

This PR fixes broken focus states for field item and dimension item components when using the latest v8 (Amsterdam) theme. Closes #97421.

CCing @andreadelrio and @ryankeairns.

Before Screenshots

After Screenshots

Checklist

Delete any items that are not applicable to this PR.

• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• This was checked for cross-browser compatibility

[elasticmachine]

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

[mbondyra]

@elasticmachine merge upstream

[mbondyra]

Tested on Chrome and Safari and noticed that on Safari there's no border-radius:


and the color of the 'ghost dnd' element is still blue:

On FF, every focus is blue, but I think it's expected, because it's the same across all the Kibana:

[andreadelrio]

Tested on Chrome and Safari and noticed that on Safari there's no border-radius:

I was looking into this and it seems that's the expected behavior as per the notes here.

and the color of the 'ghost dnd' element is still blue:

In Safari, the outline of the ghost element while being dragged is blue because we're applying outline-style: auto; as seen here:

.lnsDragDrop_ghost {
  @include kbnThemeStyle('v8') {
    outline: $euiFocusRingSize solid currentColor; // Safari & Firefox
    outline-style: auto; // Chrome
  }
}

However, we usually only apply outline-style: auto; inside :focus-visible (as seen in the screenshot above) in order to be able to target Chrome only. In this particular case the element we're dragging gets the class lnsDragDrop_ghost, but this element doesn't get focus (as can be checked through document.activeElement) so there's not way to use :focus and :focus-visible. @mbondyra do you have any ideas on how to work around this?

[mbondyra]

@elasticmachine merge upstream

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: e4d15de
• Storybooks Preview

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
lens	1.6MB	1.6MB	+1.4KB

History

• 💚 Build #140619 succeeded 68d3e6a
• 💚 Build #140537 succeeded f04db4c

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[mbondyra]

Hi @andreadelrio thanks for detailed explanation. I tried to find a way to avoid the blue focus for Safari, but was not able to do so without overcomplicating the code. Overall, I think it's a minor detail so I am ok with leaving it like this.

[andreadelrio]

LGTM

[mbondyra]

I'll merge this PR to avoid potential future conflicts. We can follow up if anything surfaces.

[kibanamachine]

💚 Backport successful

Status	Branch	Result
✅	7.14
✅	7.x

The backport PRs will be merged automatically after passing CI.