diff --git a/x-pack/plugins/lens/public/_mixins.scss b/x-pack/plugins/lens/public/_mixins.scss index f9b8ce466040e..5a798bcc6c23b 100644 --- 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; + } + } +} \ No newline at end of file diff --git a/x-pack/plugins/lens/public/drag_drop/drag_drop.scss b/x-pack/plugins/lens/public/drag_drop/drag_drop.scss index 9c5bc79ba044a..5522b65fca261 100644 --- 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 index 788bf049b779b..fd37a7bada02f 100644 --- 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); } } \ No newline at end of file diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss index a652a18752949..b96a670144d37 100644 --- 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 {