Merge branch 'master' into expression_progress

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;
+    }
+  }
+}

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;
   }
 }
 

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);
   }
 }

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx

@@ -6,6 +6,7 @@
  */
 
 import { ReactWrapper, ShallowWrapper } from 'enzyme';
+import 'jest-canvas-mock';
 import React, { ChangeEvent, MouseEvent, ReactElement } from 'react';
 import { act } from 'react-dom/test-utils';
 import {

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/reference_editor.test.tsx

@@ -10,6 +10,7 @@ import { ReactWrapper, ShallowWrapper } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { EuiComboBox } from '@elastic/eui';
 import { mountWithIntl as mount } from '@kbn/test/jest';
+import 'jest-canvas-mock';
 import type { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana/public';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
 import type { DataPublicPluginStart } from 'src/plugins/data/public';

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 {

x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.test.ts

@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import React from 'react';
+import 'jest-canvas-mock';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
 import { getIndexPatternDatasource, IndexPatternColumn } from './indexpattern';
 import { DatasourcePublicAPI, Operation, Datasource, FramePublicAPI } from '../types';
@@ -18,8 +20,6 @@ import { operationDefinitionMap, getErrorMessages } from './operations';
 import { createMockedFullReference } from './operations/mocks';
 import { indexPatternFieldEditorPluginMock } from 'src/plugins/index_pattern_field_editor/public/mocks';
 import { uiActionsPluginMock } from '../../../../../src/plugins/ui_actions/public/mocks';
-import React from 'react';
-
 jest.mock('./loader');
 jest.mock('../id_generator');
 jest.mock('./operations');

x-pack/plugins/lens/public/indexpattern_datasource/indexpattern_suggestions.test.tsx

@@ -8,6 +8,7 @@
 import { DatasourceSuggestion } from '../types';
 import { generateId } from '../id_generator';
 import type { IndexPatternPrivateState } from './types';
+import 'jest-canvas-mock';
 import {
   getDatasourceSuggestionsForField,
   getDatasourceSuggestionsFromCurrentState,