[Lens] Focus Fixes for v8 Theme (elastic#106634) (elastic#107262)

* set correct focus ring for each theme * fix field and dimension button span faux focus * fix dimension button focus * add mixin to remove euiFocusRing * clean up the mess Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Michael Marcialis <[email protected]>
kibanamachine · Jul 30, 2021 · 4fe7b36 · 4fe7b36
1 parent d40feb5
commit 4fe7b36
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 26 deletions.
diff --git a/x-pack/plugins/lens/public/_mixins.scss b/x-pack/plugins/lens/public/_mixins.scss
@@ -47,3 +47,45 @@
 @mixin lnsDroppableNotAllowed {
   opacity: .5;
 }
+
+// Removes EUI focus ring
+@mixin removeEuiFocusRing {
+  @include kbnThemeStyle('v7') {
+    animation: none !important; // sass-lint:disable-line no-important
+  }
+
+  @include kbnThemeStyle('v8') {
+    outline: none;
+
+    &:focus-visible {
+      outline-style: none;
+    }
+  }
+}
+
+// Passes focus ring styles down to a child of a focused element
+@mixin passDownFocusRing($target) {
+  @include removeEuiFocusRing;
+
+  #{$target} {
+    @include euiFocusBackground;
+
+    @include kbnThemeStyle('v7') {
+      @include euiFocusRing;
+    }
+
+    @include kbnThemeStyle('v8') {
+      outline: $euiFocusRingSize solid currentColor; // Safari & Firefox
+    }
+  }
+
+  @include kbnThemeStyle('v8') {
+    &:focus-visible #{$target} {
+      outline-style: auto; // Chrome
+    }
+
+    &:not(:focus-visible) #{$target} {
+      outline: none;
+    }
+  }
+}
diff --git a/x-pack/plugins/lens/public/drag_drop/drag_drop.scss b/x-pack/plugins/lens/public/drag_drop/drag_drop.scss
@@ -20,7 +20,15 @@
   transform: translate(-12px, 8px);
   z-index: $lnsZLevel3;
   pointer-events: none;
-  box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
+
+  @include kbnThemeStyle('v7') {
+    box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
+  }
+
+  @include kbnThemeStyle('v8') {
+    outline: $euiFocusRingSize solid currentColor; // Safari & Firefox
+    outline-style: auto; // Chrome
+  }
 }
 
 // Draggable item
@@ -133,6 +141,7 @@
   &:focus-within {
     @include euiFocusRing;
     pointer-events: none;
+    z-index: $lnsZLevel2;
   }
 }
 

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss
@@ -1,3 +1,5 @@
+@import '../../../mixins';
+
 .lnsLayerPanel {
   margin-bottom: $euiSizeS;
 
@@ -132,12 +134,7 @@
   width: 100%;
 
   &:focus {
+    @include passDownFocusRing('.lnsLayerPanel__triggerTextLabel');
     background-color: transparent;
-    animation: none !important; // sass-lint:disable-line no-important
-  }
-
-  &:focus .lnsLayerPanel__triggerTextLabel,
-  &:focus-within .lnsLayerPanel__triggerTextLabel {
-    background-color: transparentize($euiColorVis1, .9);
   }
 }
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss
@@ -1,5 +1,23 @@
+@import '../mixins';
+
 .lnsFieldItem {
   width: 100%;
+
+  &.kbnFieldButton {
+    &:focus-within,
+    &-isActive {
+      @include removeEuiFocusRing;
+    }
+  }
+
+  .kbnFieldButton__button:focus {
+    @include passDownFocusRing('.kbnFieldButton__name > span');
+
+    .kbnFieldButton__name > span {
+      text-decoration: underline;
+    }
+  }
+
   .lnsFieldItem__infoIcon {
     visibility: hidden;
     opacity: 0;
@@ -14,25 +32,6 @@
       transition: opacity $euiAnimSpeedFast ease-in-out 1s;
     }
   }
-
-  &:focus,
-  &:focus-within,
-  .kbnFieldButton__button:focus:focus-visible,
-  &.kbnFieldButton-isActive {
-    @include kbnThemeStyle('v7') {
-      animation: none !important; // sass-lint:disable-line no-important
-    }
-    @include kbnThemeStyle('v8') {
-      outline: none !important; // sass-lint:disable-line no-important
-    }
-  }
-
-  &:focus .kbnFieldButton__name span,
-  &:focus-within .kbnFieldButton__name span,
-  &.kbnFieldButton-isActive .kbnFieldButton__name span {
-    background-color: transparentize($euiColorVis1, .9) !important;
-    text-decoration: underline !important;
-  }
 }
 
 .kbnFieldButton.lnsDragDrop_ghost {