From ff7fff12c156956c4fed129bb21f3033653edf60 Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Thu, 22 Jul 2021 15:26:03 -0400 Subject: [PATCH 1/5] set correct focus ring for each theme --- x-pack/plugins/lens/public/drag_drop/drag_drop.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) 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..55cc8731ac8a6 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; + outline-style: auto; // Chrome + } } // Draggable item From 766228b26a1c83046f1cbace28dbfa50ad95493d Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Thu, 22 Jul 2021 17:57:12 -0400 Subject: [PATCH 2/5] fix field and dimension button span faux focus --- .../lens/public/drag_drop/drag_drop.scss | 2 +- .../config_panel/layer_panel.scss | 36 +++++++++++++++-- .../indexpattern_datasource/field_item.scss | 40 ++++++++++++++----- 3 files changed, 63 insertions(+), 15 deletions(-) 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 55cc8731ac8a6..cec9df572bfdf 100644 --- a/x-pack/plugins/lens/public/drag_drop/drag_drop.scss +++ b/x-pack/plugins/lens/public/drag_drop/drag_drop.scss @@ -26,7 +26,7 @@ } @include kbnThemeStyle('v8') { - outline: $euiFocusRingSize solid currentColor; + outline: $euiFocusRingSize solid currentColor; // Safari & Firefox outline-style: auto; // Chrome } } 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..810b9f75477e2 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 @@ -133,11 +133,39 @@ &:focus { background-color: transparent; - animation: none !important; // sass-lint:disable-line no-important + + @include kbnThemeStyle('v7') { + animation: none !important; // sass-lint:disable-line no-important + } + + @include kbnThemeStyle('v8') { + outline: none; + + &:focus-visible { + outline-style: none; + } + } } - &:focus .lnsLayerPanel__triggerTextLabel, - &:focus-within .lnsLayerPanel__triggerTextLabel { - background-color: transparentize($euiColorVis1, .9); + &:focus .lnsLayerPanel__triggerTextLabel { + @include euiFocusBackground; + + @include kbnThemeStyle('v7') { + @include euiFocusRing; + } + + @include kbnThemeStyle('v8') { + outline: $euiFocusRingSize solid currentColor; // Safari & Firefox + } + } + + @include kbnThemeStyle('v8') { + &:focus:focus-visible .lnsLayerPanel__triggerTextLabel { + outline-style: auto; // Chrome + } + + &:focus:not(:focus-visible) .lnsLayerPanel__triggerTextLabel { + outline: none; + } } } \ 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..65694a6a440ba 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss +++ b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss @@ -14,24 +14,44 @@ transition: opacity $euiAnimSpeedFast ease-in-out 1s; } } +} - &:focus, - &:focus-within, - .kbnFieldButton__button:focus:focus-visible, - &.kbnFieldButton-isActive { +.lnsFieldItem .kbnFieldButton__button { + &:focus { @include kbnThemeStyle('v7') { animation: none !important; // sass-lint:disable-line no-important } + + @include kbnThemeStyle('v8') { + outline: none; + + &:focus-visible { + outline-style: none; + } + } + } + + &:focus .kbnFieldButton__name > span { + @include euiFocusBackground; + text-decoration: underline; + + @include kbnThemeStyle('v7') { + @include euiFocusRing; + } + @include kbnThemeStyle('v8') { - outline: none !important; // sass-lint:disable-line no-important + outline: $euiFocusRingSize solid currentColor; // Safari & Firefox } } - &:focus .kbnFieldButton__name span, - &:focus-within .kbnFieldButton__name span, - &.kbnFieldButton-isActive .kbnFieldButton__name span { - background-color: transparentize($euiColorVis1, .9) !important; - text-decoration: underline !important; + @include kbnThemeStyle('v8') { + &:focus:focus-visible .kbnFieldButton__name > span { + outline-style: auto; // Chrome + } + + &:focus:not(:focus-visible) .kbnFieldButton__name > span { + outline: none; + } } } From 05741874124e0abba352e4c8e613eb368aa19643 Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Thu, 22 Jul 2021 23:08:33 -0400 Subject: [PATCH 3/5] fix dimension button focus --- .../lens/public/drag_drop/drag_drop.scss | 1 + .../indexpattern_datasource/field_item.scss | 17 +++++++++++++++++ 2 files changed, 18 insertions(+) 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 cec9df572bfdf..5522b65fca261 100644 --- a/x-pack/plugins/lens/public/drag_drop/drag_drop.scss +++ b/x-pack/plugins/lens/public/drag_drop/drag_drop.scss @@ -141,6 +141,7 @@ &:focus-within { @include euiFocusRing; pointer-events: none; + z-index: $lnsZLevel2; } } 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 65694a6a440ba..496ff41782550 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss +++ b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss @@ -16,6 +16,23 @@ } } +.lnsFieldItem.kbnFieldButton { + &:focus-within, + &-isActive { + @include kbnThemeStyle('v7') { + animation: none !important; // sass-lint:disable-line no-important + } + + @include kbnThemeStyle('v8') { + outline: none; + + &:focus-visible { + outline-style: none; + } + } + } +} + .lnsFieldItem .kbnFieldButton__button { &:focus { @include kbnThemeStyle('v7') { From 17953b4633291e20d77a5154a261d1d560a9d9ce Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Thu, 22 Jul 2021 23:25:26 -0400 Subject: [PATCH 4/5] add mixin to remove euiFocusRing --- x-pack/plugins/lens/public/_mixins.scss | 15 +++++++++++ .../config_panel/layer_panel.scss | 15 +++-------- .../indexpattern_datasource/field_item.scss | 26 +++---------------- 3 files changed, 22 insertions(+), 34 deletions(-) diff --git a/x-pack/plugins/lens/public/_mixins.scss b/x-pack/plugins/lens/public/_mixins.scss index f9b8ce466040e..8694726181ec4 100644 --- a/x-pack/plugins/lens/public/_mixins.scss +++ b/x-pack/plugins/lens/public/_mixins.scss @@ -47,3 +47,18 @@ @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; + } + } +} \ No newline at end of file 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 810b9f75477e2..f76974d279acb 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,19 +134,8 @@ width: 100%; &:focus { + @include removeEuiFocusRing; background-color: transparent; - - @include kbnThemeStyle('v7') { - animation: none !important; // sass-lint:disable-line no-important - } - - @include kbnThemeStyle('v8') { - outline: none; - - &:focus-visible { - outline-style: none; - } - } } &:focus .lnsLayerPanel__triggerTextLabel { 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 496ff41782550..1c24ab0890da3 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss +++ b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss @@ -1,3 +1,5 @@ +@import '../mixins'; + .lnsFieldItem { width: 100%; .lnsFieldItem__infoIcon { @@ -19,33 +21,13 @@ .lnsFieldItem.kbnFieldButton { &:focus-within, &-isActive { - @include kbnThemeStyle('v7') { - animation: none !important; // sass-lint:disable-line no-important - } - - @include kbnThemeStyle('v8') { - outline: none; - - &:focus-visible { - outline-style: none; - } - } + @include removeEuiFocusRing; } } .lnsFieldItem .kbnFieldButton__button { &:focus { - @include kbnThemeStyle('v7') { - animation: none !important; // sass-lint:disable-line no-important - } - - @include kbnThemeStyle('v8') { - outline: none; - - &:focus-visible { - outline-style: none; - } - } + @include removeEuiFocusRing; } &:focus .kbnFieldButton__name > span { From 1287e98007695e08347bb67c831d052c6aa0a0b4 Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Fri, 23 Jul 2021 00:02:52 -0400 Subject: [PATCH 5/5] clean up the mess --- x-pack/plugins/lens/public/_mixins.scss | 27 ++++++++++ .../config_panel/layer_panel.scss | 24 +-------- .../indexpattern_datasource/field_item.scss | 52 ++++++------------- 3 files changed, 44 insertions(+), 59 deletions(-) diff --git a/x-pack/plugins/lens/public/_mixins.scss b/x-pack/plugins/lens/public/_mixins.scss index 8694726181ec4..5a798bcc6c23b 100644 --- a/x-pack/plugins/lens/public/_mixins.scss +++ b/x-pack/plugins/lens/public/_mixins.scss @@ -61,4 +61,31 @@ 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/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 f76974d279acb..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 @@ -134,29 +134,7 @@ width: 100%; &:focus { - @include removeEuiFocusRing; + @include passDownFocusRing('.lnsLayerPanel__triggerTextLabel'); background-color: transparent; } - - &:focus .lnsLayerPanel__triggerTextLabel { - @include euiFocusBackground; - - @include kbnThemeStyle('v7') { - @include euiFocusRing; - } - - @include kbnThemeStyle('v8') { - outline: $euiFocusRingSize solid currentColor; // Safari & Firefox - } - } - - @include kbnThemeStyle('v8') { - &:focus:focus-visible .lnsLayerPanel__triggerTextLabel { - outline-style: auto; // Chrome - } - - &:focus:not(:focus-visible) .lnsLayerPanel__triggerTextLabel { - outline: none; - } - } } \ 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 1c24ab0890da3..b96a670144d37 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss +++ b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.scss @@ -2,6 +2,22 @@ .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; @@ -18,42 +34,6 @@ } } -.lnsFieldItem.kbnFieldButton { - &:focus-within, - &-isActive { - @include removeEuiFocusRing; - } -} - -.lnsFieldItem .kbnFieldButton__button { - &:focus { - @include removeEuiFocusRing; - } - - &:focus .kbnFieldButton__name > span { - @include euiFocusBackground; - text-decoration: underline; - - @include kbnThemeStyle('v7') { - @include euiFocusRing; - } - - @include kbnThemeStyle('v8') { - outline: $euiFocusRingSize solid currentColor; // Safari & Firefox - } - } - - @include kbnThemeStyle('v8') { - &:focus:focus-visible .kbnFieldButton__name > span { - outline-style: auto; // Chrome - } - - &:focus:not(:focus-visible) .kbnFieldButton__name > span { - outline: none; - } - } -} - .kbnFieldButton.lnsDragDrop_ghost { .lnsFieldItem__infoIcon { visibility: hidden;