elastic · cchaos · Nov 16, 2020 · Nov 6, 2020 · Nov 6, 2020 · Nov 6, 2020
diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js
@@ -17,7 +17,10 @@ export default () => {
   };
 
   return (
-    <EuiPanel paddingSize="l" className="guideDemo__ghostBackground">
+    <EuiPanel
+      paddingSize="l"
+      color="transparent"
+      className="guideDemo__ghostBackground">
       <EuiFlexGroup wrap gutterSize="s" alignItems="center">
         <EuiFlexItem grow={false}>
           <EuiButton color="ghost" onClick={() => {}}>

diff --git a/src-docs/src/views/icon/icon_colors.js b/src-docs/src/views/icon/icon_colors.js
@@ -47,6 +47,7 @@ export default () => (
           key={iconColor}
           style={{ width: '340px' }}>
           <EuiPanel
+            color="transparent"
             className={classNames({
               guideDemo__ghostBackground: iconColor === 'ghost',
             })}>

diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss
@@ -47,7 +47,6 @@
 .euiBreadcrumbs--truncate {
   white-space: nowrap;
   flex-wrap: nowrap;
-  overflow: hidden;
 
   .euiBreadcrumb:not(.euiBreadcrumb--collapsed) {
     max-width: $euiBreadcrumbTruncateWidth;

diff --git a/src/components/collapsible_nav/_collapsible_nav.scss b/src/components/collapsible_nav/_collapsible_nav.scss
@@ -26,8 +26,7 @@
     @include euiFocusRing;
   }
 
-  &,
-  &:focus {
+  &:enabled:focus:focus-visible {
     // Override default `EuiButtonEmpty` :focus background to ensure better contrast
     background: $euiColorEmptyShade;
   }

diff --git a/src/components/color_picker/_hue.scss b/src/components/color_picker/_hue.scss
@@ -77,7 +77,7 @@
   }
 
   // Thumb has trouble with animation, so we make something similar to `@include euiFocusRing`
-  &:focus {
+  &:focus-visible {
     @include euiRangeThumbPerBrowser {
       box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
       border-color: $euiColorPrimary;

diff --git a/src/components/color_picker/color_stops/_color_stops.scss b/src/components/color_picker/color_stops/_color_stops.scss
@@ -1,5 +1,5 @@
 .euiColorStops:not(.euiColorStops-isDisabled) {
-  &:focus {
+  &:focus-visible {
     outline: 2px solid $euiFocusRingColor;
   }
 }
@@ -57,7 +57,7 @@
   height: 100%;
 
   // Background color can potentially have opacity
-  // Pseudo element placed below the thumb to prevent the track from showing through 
+  // Pseudo element placed below the thumb to prevent the track from showing through
   &:before {
     content: '';
     display: block;

diff --git a/src/components/combo_box/combo_box_input/_combo_box_input.scss b/src/components/combo_box/combo_box_input/_combo_box_input.scss
@@ -2,11 +2,10 @@
   max-width: 100%;
 
   // Ensure that no input states are visible on the hidden input
-  input[aria-hidden='true'] {
+  input {
     // sass-lint:disable-block no-important
     border: none !important;
     box-shadow: none !important;
     outline: none !important;
   }
-
 }
diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_option.scss b/src/components/combo_box/combo_box_options_list/_combo_box_option.scss
@@ -14,7 +14,7 @@
 
   &.euiComboBoxOption-isFocused {
     cursor: pointer;
-    color: $euiColorPrimary;
+    color: $euiColorPrimaryText;
     background-color: $euiFocusBackgroundColor;
   }
 

diff --git a/src/components/context_menu/_context_menu_item.scss b/src/components/context_menu/_context_menu_item.scss
@@ -4,6 +4,7 @@
   width: 100%;
   text-align: left;
   color: $euiTextColor;
+  outline-offset: -$euiFocusRingSize;
 
   &:hover,
   &:focus {

diff --git a/src/components/context_menu/_context_menu_panel.scss b/src/components/context_menu/_context_menu_panel.scss
@@ -1,6 +1,7 @@
 .euiContextMenuPanel {
   width: 100%;
   visibility: visible;
+  outline-offset: -$euiFocusRingSize;
 
   &.euiContextMenuPanel-txInLeft {
     pointer-events: none;
@@ -36,9 +37,9 @@
 .euiContextMenuPanelTitle {
   @include euiPopoverTitle;
   padding: $euiSizeM;
-
   width: 100%;
   text-align: left;
+  outline-offset: -$euiFocusRingSize;
 
   &:enabled:hover,
   &:enabled:focus {

diff --git a/src/components/datagrid/_data_grid_column_sorting.scss b/src/components/datagrid/_data_grid_column_sorting.scss
@@ -26,18 +26,17 @@
 
 .euiDataGridColumnSorting__fieldList {
   @include euiYScrollWithShadows;
+  padding-top: $euiSizeXS;
+  padding-bottom: $euiSizeXS;
   max-height: 300px;
 }
 
 .euiDataGridColumnSorting__field {
+  @include euiInteractiveStates;
   display: block;
-  padding: $euiSizeXS;
+  padding: $euiSizeXS $euiSizeS;
   width: 100%;
-
-  &:focus {
-    background: $euiFocusBackgroundColor;
-    text-decoration: underline;
-  }
+  outline-offset: -$euiFocusRingSize;
 }
 
 .euiDataGridColumnSorting__orderButtons {

diff --git a/src/components/datagrid/_data_grid_header_row.scss b/src/components/datagrid/_data_grid_header_row.scss
@@ -32,13 +32,15 @@
 
   &:focus {
     @include euiDataGridCellFocus;
+    border-top: none;
   }
 
   // We only truncate if the cell is not a control column.
   &:not(.euiDataGridHeaderCell--controlColumn) {
 
     &:focus-within {
       @include euiDataGridCellFocus;
+      border-top: none;
     }
 
     .euiDataGridHeaderCell__button {
@@ -48,6 +50,7 @@
       display: flex;
       text-align: left;
       font-weight: $euiFontWeightBold;
+      outline: none;
     }
 
     .euiDataGridHeaderCell__content {

diff --git a/src/components/datagrid/_mixins.scss b/src/components/datagrid/_mixins.scss
@@ -55,6 +55,7 @@ $euiDataGridStyles: (
   box-shadow: 0 0 0 2px $euiFocusRingColor;
   border-radius: 1px;
   z-index: 2; // Needed so it sits above potential striping in the next row
+  outline: none; // Remove outline as we're handling it manually
 }
 
 @mixin euiDataGridRowCell {

diff --git a/src/components/datagrid/column_sorting.tsx b/src/components/datagrid/column_sorting.tsx
@@ -213,7 +213,7 @@ export const useColumnSorting = (
                   closePopover={() => setAvailableColumnsIsOpen(false)}
                   anchorPosition="downLeft"
                   ownFocus
-                  panelPaddingSize="s"
+                  panelPaddingSize="none"
                   button={
                     <EuiButtonEmpty
                       size="xs"

diff --git a/src/components/filter_group/_filter_select_item.scss b/src/components/filter_group/_filter_select_item.scss
@@ -1,5 +1,6 @@
 .euiFilterSelectItem {
   @include euiFontSizeS;
+  @include euiInteractiveStates;
 
   padding: $euiSizeXS $euiSizeM;
   display: block; // Necessary to make sure it doesn't force the whole popover to be too wide
@@ -8,26 +9,12 @@
   color: $euiTextColor;
   border-bottom: $euiBorderThin;
   border-color: darken($euiColorLightestShade, 2%);
-
-  &:hover,
-  &:focus {
-    text-decoration: underline;
-  }
+  outline-offset: -$euiFocusRingSize;
 
   &:focus,
   &-isFocused {
-    cursor: pointer;
+    @include euiFocusBackground;
     color: $euiColorPrimary;
-    background-color: $euiFocusBackgroundColor;
-  }
-
-  &[disabled] {
-    color: $euiColorMediumShade;
-    cursor: not-allowed;
-
-    &:hover {
-      text-decoration: none;
-    }
   }
 }
 

diff --git a/src/components/form/checkbox/_checkbox.scss b/src/components/form/checkbox/_checkbox.scss
@@ -61,7 +61,7 @@
       }
     }
 
-    &:focus,
+    &:focus-visible,
     &:active:not(:disabled) {
       + .euiCheckbox__square {
         @include euiCustomControlFocused;

diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss
@@ -73,8 +73,9 @@
     border-radius: 0;
     background-color: $euiFormInputGroupLabelBackground;
 
-    &:focus {
-      box-shadow: inset 0 0 0 2px $euiFocusRingColor;
+    &:focus-visible {
+      outline: 2px solid $euiFocusRingColor;
+      outline-offset: -2px;
     }
   }
 

diff --git a/src/components/form/range/_range_slider.scss b/src/components/form/range/_range_slider.scss
@@ -51,10 +51,14 @@
     border-radius: $euiRangeTrackRadius;
   }
 
-  &:focus,
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible,
   &--hasFocus {
     @include euiRangeThumbPerBrowser {
-      @include euiCustomControlFocused;
+      box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
     }
 
     ~ .euiRangeThumb {

diff --git a/src/components/form/range/_range_thumb.scss b/src/components/form/range/_range_thumb.scss
@@ -9,6 +9,10 @@
   pointer-events: none;
 
   &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
     @include euiCustomControlFocused;
   }
 

diff --git a/src/components/form/super_select/_super_select.scss b/src/components/form/super_select/_super_select.scss
@@ -34,17 +34,8 @@
 
 .euiSuperSelect__item {
   @include euiFontSizeS;
+  @include euiInteractiveStates;
   padding: $euiSizeS;
-
-  &:hover:not(:disabled),
-  &:focus {
-    text-decoration: none;
-    background-color: $euiFocusBackgroundColor;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
 }
 
 .euiSuperSelect__item--hasDividers:not(:last-of-type) {

diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss
@@ -17,7 +17,11 @@
     flex-shrink: 0; // ensures the button doesn't lose width because of a long label
     line-height: 0; // ensures button takes height of switch inside
 
-    &:focus .euiSwitch__track {
+    &:focus-visible {
+      outline: none;
+    }
+
+    &:focus-visible .euiSwitch__track {
       @include euiCustomControlFocused;
     }
 

diff --git a/src/components/link/_link.scss b/src/components/link/_link.scss
@@ -26,13 +26,15 @@ $textColors: (
     &.euiLink--#{$name} {
       color: $color;
 
-      &:hover {
+      &:hover,
+      &:focus {
         color: darken($color, 10%);
+        text-decoration: underline;
+        background-color: transparentize($color, .9);
       }
 
-      &:focus {
-        outline: solid 3px transparentize($color, .9);
-        background-color: transparentize($color, .9);
+      &:focus-visible {
+        @include euiFocusRing;
       }
     }
   }

diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss
@@ -1,7 +1,6 @@
 .euiListGroupItem {
   padding: 0;
   border-radius: $euiBorderRadius;
-  overflow: hidden;
   display: flex;
   align-items: center;
   transition: background-color $euiAnimSpeedFast;

diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss
@@ -40,6 +40,7 @@
   &:focus {
     background-color: $euiFocusBackgroundColor;
     text-decoration: underline;
+    outline-offset: -$euiFocusRingSize;
 
     &::before {
       background-color: $euiColorLightShade;
@@ -66,15 +67,17 @@
     color: $euiColorPrimary;
     cursor: default;
 
-    &::after {
-      animation: euiTab $euiAnimSpeedFast $euiAnimSlightResistance;
-      background-color: $euiColorPrimary;
-      bottom: 0;
-      content: ' ';
-      height: $euiBorderWidthThick;
-      left: 0;
-      position: absolute;
-      width: 100%;
+    &:not(:focus-visible) {
+      &::after {
+        animation: euiTab $euiAnimSpeedFast $euiAnimSlightResistance;
+        background-color: $euiColorPrimary;
+        bottom: 0;
+        content: ' ';
+        height: $euiBorderWidthThick;
+        left: 0;
+        position: absolute;
+        width: 100%;
+      }
     }
   }
 

diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
@@ -112,16 +112,19 @@
   a:not([class]) {
     color: $euiLinkColor;
 
-    &:hover {
+    &:hover,
+    &:focus {
       color: darken($euiLinkColor, 10%);
       text-decoration: underline;
     }
 
     &:focus {
-      text-decoration: underline;
-      outline: solid 3px transparentize($euiLinkColor, .9);
       background-color: transparentize($euiLinkColor, .9);
     }
+
+    &:focus-visible {
+      @include euiFocusRing;
+    }
   }
 
   img {