From a74bfe307b731318c513333dc6649d93b4a5a5df Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Fri, 20 Nov 2020 15:40:04 -0700
Subject: [PATCH 1/8] Updated to eui@30.4.1, fixed types and unit tests

---
 package.json                                  |   2 +-
 .../header/__snapshots__/header.test.tsx.snap |  56 +-
 .../chrome/ui/header/header_help_menu.tsx     |   1 -
 .../dashboard_empty_screen.test.tsx.snap      |   4 +-
 .../actions/library_notification_popover.tsx  |   1 -
 .../data/public/ui/filter_bar/filter_bar.tsx  |   1 -
 .../query_string_input/language_switcher.tsx  |   1 -
 .../saved_query_management_component.tsx      |   1 -
 .../sidebar/change_indexpattern.tsx           |   1 -
 .../components/sidebar/discover_field.tsx     |   1 -
 .../sidebar/discover_field_search.test.tsx    |  29 -
 .../sample_data_view_data_button.test.js.snap |   2 +-
 .../components/recently_accessed.js           |   1 -
 .../__snapshots__/indices_list.test.tsx.snap  |  10 +-
 .../inspector_panel.test.tsx.snap             | 110 ++--
 .../public/ui/inspector_view_chooser.tsx      |   1 -
 .../__snapshots__/table.test.tsx.snap         |   4 +-
 .../public/context_menu/open_context_menu.tsx |   1 -
 .../vislib/components/legend/legend_item.tsx  |   1 -
 .../__test__/__snapshots__/List.test.tsx.snap |  10 -
 .../app/ServiceMap/Popover/Info.tsx           |   2 +-
 .../ServiceMap/Popover/ServiceStatsList.tsx   |   2 +-
 .../app/ServiceMap/cytoscape_options.ts       |   2 +-
 .../shared/Stacktrace/CauseStacktrace.tsx     |   2 +-
 .../time_filter.stories.storyshot             |  45 --
 .../__snapshots__/palette.stories.storyshot   | 256 ++++++++-
 .../__snapshots__/asset.stories.storyshot     |   4 +-
 .../asset_manager.stories.storyshot           |   4 +-
 .../color_picker_popover.stories.storyshot    |  20 -
 .../palette_picker.stories.storyshot          | 512 ++++++++++++++++--
 .../shape_picker_popover.stories.storyshot    |  15 -
 .../text_style_picker.stories.storyshot       |  10 -
 .../__snapshots__/edit_menu.stories.storyshot |  30 -
 .../element_menu.stories.storyshot            |   5 -
 .../share_menu.stories.storyshot              |   5 -
 .../__snapshots__/view_menu.stories.storyshot |  20 -
 .../workpad_templates.stories.storyshot       |  10 -
 .../extended_template.stories.storyshot       |  15 -
 .../simple_template.stories.storyshot         |  10 -
 .../__snapshots__/canvas.stories.storyshot    |  15 -
 .../__snapshots__/footer.stories.storyshot    |  10 -
 .../__snapshots__/settings.stories.storyshot  |  10 -
 .../__snapshots__/settings.test.tsx.snap      |  42 +-
 .../settings/__tests__/settings.test.tsx      |   4 +-
 .../danger_eui_context_menu_item.tsx          |   2 +-
 .../settings/use_list_keys.test.tsx           |   4 +
 .../extend_index_management.test.tsx.snap     | 122 ++---
 .../logging/log_minimap/time_ruler.tsx        |   2 +-
 .../upload_license.test.tsx.snap              |  16 +
 .../tooltip_popover.test.js.snap              |   4 +-
 .../__snapshots__/tools_control.test.tsx.snap |   4 +-
 .../toc_entry_actions_popover.test.tsx.snap   |   8 +-
 .../job_map/components/cytoscape_options.tsx  |   3 +-
 .../report_info_button.test.tsx.snap          |   4 +-
 .../__snapshots__/anomaly_score.test.tsx.snap |   2 +-
 .../__snapshots__/index.test.tsx.snap         |  43 +-
 .../common/components/subtitle/index.tsx      |   2 +-
 .../common/components/utility_bar/styles.tsx  |   2 +-
 .../pages/policy/view/policy_list.tsx         |   2 +-
 .../note_card_body.test.tsx.snap              |  43 +-
 .../components/resolve_all_conflicts.test.tsx |   2 +-
 ...onnected_flyout_manage_drilldowns.test.tsx |   4 +
 .../url_drilldown_collect_config.test.tsx     |   4 +
 .../location_missing.test.tsx.snap            |   2 +-
 .../step_screenshot_display.test.tsx          | 100 ++--
 .../alerts/__tests__/add_filter_btn.test.tsx  |   6 +-
 yarn.lock                                     |   8 +-
 67 files changed, 1051 insertions(+), 626 deletions(-)

diff --git a/package.json b/package.json
index 8e94e5277b8e3..465dec3ff020d 100644
--- a/package.json
+++ b/package.json
@@ -107,7 +107,7 @@
     "@elastic/datemath": "link:packages/elastic-datemath",
     "@elastic/elasticsearch": "7.10.0-rc.1",
     "@elastic/ems-client": "7.10.0",
-    "@elastic/eui": "30.2.0",
+    "@elastic/eui": "30.4.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/node-crypto": "1.2.1",
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index ee2fcbd5078af..299a11ae1fc9c 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -4757,51 +4757,41 @@ exports[`Header renders 1`] = `
                         panelPaddingSize="m"
                         repositionOnScroll={true}
                       >
-                        <EuiOutsideClickDetector
-                          isDisabled={true}
-                          onOutsideClick={[Function]}
+                        <div
+                          className="euiPopover euiPopover--anchorDownRight"
+                          data-test-subj="helpMenuButton"
+                          id="headerHelpMenu"
                         >
                           <div
-                            className="euiPopover euiPopover--anchorDownRight"
-                            data-test-subj="helpMenuButton"
-                            id="headerHelpMenu"
-                            onKeyDown={[Function]}
-                            onMouseDown={[Function]}
-                            onMouseUp={[Function]}
-                            onTouchEnd={[Function]}
-                            onTouchStart={[Function]}
+                            className="euiPopover__anchor"
                           >
-                            <div
-                              className="euiPopover__anchor"
+                            <EuiHeaderSectionItemButton
+                              aria-expanded={false}
+                              aria-haspopup="true"
+                              aria-label="Help menu"
+                              onClick={[Function]}
                             >
-                              <EuiHeaderSectionItemButton
+                              <button
                                 aria-expanded={false}
                                 aria-haspopup="true"
                                 aria-label="Help menu"
+                                className="euiHeaderSectionItem__button"
                                 onClick={[Function]}
+                                type="button"
                               >
-                                <button
-                                  aria-expanded={false}
-                                  aria-haspopup="true"
-                                  aria-label="Help menu"
-                                  className="euiHeaderSectionItem__button"
-                                  onClick={[Function]}
-                                  type="button"
+                                <EuiIcon
+                                  size="m"
+                                  type="help"
                                 >
-                                  <EuiIcon
+                                  <span
+                                    data-euiicon-type="help"
                                     size="m"
-                                    type="help"
-                                  >
-                                    <span
-                                      data-euiicon-type="help"
-                                      size="m"
-                                    />
-                                  </EuiIcon>
-                                </button>
-                              </EuiHeaderSectionItemButton>
-                            </div>
+                                  />
+                                </EuiIcon>
+                              </button>
+                            </EuiHeaderSectionItemButton>
                           </div>
-                        </EuiOutsideClickDetector>
+                        </div>
                       </EuiPopover>
                     </HeaderHelpMenuUI>
                   </InjectIntl(HeaderHelpMenuUI)>
diff --git a/src/core/public/chrome/ui/header/header_help_menu.tsx b/src/core/public/chrome/ui/header/header_help_menu.tsx
index 6d2938e3345a6..c7dd8c7e8bb1c 100644
--- a/src/core/public/chrome/ui/header/header_help_menu.tsx
+++ b/src/core/public/chrome/ui/header/header_help_menu.tsx
@@ -319,7 +319,6 @@ class HeaderHelpMenuUI extends Component<Props, State> {
         data-test-subj="helpMenuButton"
         id="headerHelpMenu"
         isOpen={this.state.isOpen}
-        ownFocus
         repositionOnScroll
       >
         <EuiPopoverTitle>
diff --git a/src/plugins/dashboard/public/application/__snapshots__/dashboard_empty_screen.test.tsx.snap b/src/plugins/dashboard/public/application/__snapshots__/dashboard_empty_screen.test.tsx.snap
index dac84c87faf97..4fb061ec816ad 100644
--- a/src/plugins/dashboard/public/application/__snapshots__/dashboard_empty_screen.test.tsx.snap
+++ b/src/plugins/dashboard/public/application/__snapshots__/dashboard_empty_screen.test.tsx.snap
@@ -304,7 +304,7 @@ exports[`DashboardEmptyScreen renders correctly with readonly mode 1`] = `
                         url="/plugins/home/assets/welcome_graphic_light_2x.png"
                       >
                         <figure
-                          className="euiImage "
+                          className="euiImage euiImage--original"
                         >
                           <img
                             alt=""
@@ -1023,7 +1023,7 @@ exports[`DashboardEmptyScreen renders correctly without visualize paragraph 1`]
                         url="/plugins/home/assets/welcome_graphic_light_2x.png"
                       >
                         <figure
-                          className="euiImage "
+                          className="euiImage euiImage--original"
                         >
                           <img
                             alt=""
diff --git a/src/plugins/dashboard/public/application/actions/library_notification_popover.tsx b/src/plugins/dashboard/public/application/actions/library_notification_popover.tsx
index 6ec5b0d637556..e46851a85a67f 100644
--- a/src/plugins/dashboard/public/application/actions/library_notification_popover.tsx
+++ b/src/plugins/dashboard/public/application/actions/library_notification_popover.tsx
@@ -50,7 +50,6 @@ export function LibraryNotificationPopover({
 
   return (
     <EuiPopover
-      ownFocus
       button={
         <EuiButtonIcon
           data-test-subj={`embeddablePanelNotification-${id}`}
diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
index 194e253fd7b26..23650340bd98b 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
@@ -110,7 +110,6 @@ function FilterBarUI(props: Props) {
           closePopover={() => setIsAddFilterPopoverOpen(false)}
           anchorPosition="downLeft"
           panelPaddingSize="none"
-          ownFocus={true}
           initialFocus=".filterEditor__hiddenItem"
           repositionOnScroll
         >
diff --git a/src/plugins/data/public/ui/query_string_input/language_switcher.tsx b/src/plugins/data/public/ui/query_string_input/language_switcher.tsx
index 3957e59388acf..63bf47671a84a 100644
--- a/src/plugins/data/public/ui/query_string_input/language_switcher.tsx
+++ b/src/plugins/data/public/ui/query_string_input/language_switcher.tsx
@@ -71,7 +71,6 @@ export function QueryLanguageSwitcher(props: Props) {
     <EuiPopover
       id="queryLanguageSwitcherPopover"
       anchorClassName="euiFormControlLayout__append"
-      ownFocus
       anchorPosition={props.anchorPosition || 'downRight'}
       button={button}
       isOpen={isPopoverOpen}
diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
index 8582f4a12fa38..536a79899c5ee 100644
--- a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
+++ b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
@@ -206,7 +206,6 @@ export function SavedQueryManagementComponent({
         anchorPosition="downLeft"
         panelPaddingSize="none"
         buffer={-8}
-        ownFocus
         repositionOnScroll
       >
         <div
diff --git a/src/plugins/discover/public/application/components/sidebar/change_indexpattern.tsx b/src/plugins/discover/public/application/components/sidebar/change_indexpattern.tsx
index 4a539b618f817..a24668e814608 100644
--- a/src/plugins/discover/public/application/components/sidebar/change_indexpattern.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/change_indexpattern.tsx
@@ -78,7 +78,6 @@ export function ChangeIndexPattern({
       anchorClassName="eui-textTruncate"
       display="block"
       panelPaddingSize="s"
-      ownFocus
     >
       <div style={{ width: 320 }}>
         <EuiPopoverTitle>
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
index 35515a6a0e7a5..87dfbdc0a4a6a 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
@@ -188,7 +188,6 @@ export function DiscoverField({
 
   return (
     <EuiPopover
-      ownFocus
       display="block"
       button={
         <FieldButton
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx
index 527be8cff9f0c..a97416fa9da84 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx
@@ -145,33 +145,4 @@ describe('DiscoverFieldSearch', () => {
     popover = component.find(EuiPopover);
     expect(popover.prop('isOpen')).toBe(false);
   });
-
-  test('click outside popover should close popover', () => {
-    const triggerDocumentMouseDown: EventHandler<any> = (e: ReactMouseEvent<any>) => {
-      const event = new Event('mousedown');
-      // @ts-ignore
-      event.euiGeneratedBy = e.nativeEvent.euiGeneratedBy;
-      document.dispatchEvent(event);
-    };
-    const triggerDocumentMouseUp: EventHandler<any> = (e: ReactMouseEvent<any>) => {
-      const event = new Event('mouseup');
-      // @ts-ignore
-      event.euiGeneratedBy = e.nativeEvent.euiGeneratedBy;
-      document.dispatchEvent(event);
-    };
-    const component = mountWithIntl(
-      <div onMouseDown={triggerDocumentMouseDown} onMouseUp={triggerDocumentMouseUp} id="wrapperId">
-        <DiscoverFieldSearch {...defaultProps} />
-      </div>
-    );
-    const btn = findTestSubject(component, 'toggleFieldFilterButton');
-    btn.simulate('click');
-    let popover = component.find(EuiPopover);
-    expect(popover.length).toBe(1);
-    expect(popover.prop('isOpen')).toBe(true);
-    component.find('#wrapperId').simulate('mousedown');
-    component.find('#wrapperId').simulate('mouseup');
-    popover = component.find(EuiPopover);
-    expect(popover.prop('isOpen')).toBe(false);
-  });
 });
diff --git a/src/plugins/home/public/application/components/__snapshots__/sample_data_view_data_button.test.js.snap b/src/plugins/home/public/application/components/__snapshots__/sample_data_view_data_button.test.js.snap
index 1484ce6b1a81f..1889d14238cac 100644
--- a/src/plugins/home/public/application/components/__snapshots__/sample_data_view_data_button.test.js.snap
+++ b/src/plugins/home/public/application/components/__snapshots__/sample_data_view_data_button.test.js.snap
@@ -19,7 +19,7 @@ exports[`should render popover when appLinks is not empty 1`] = `
   hasArrow={true}
   id="sampleDataLinksecommerce"
   isOpen={false}
-  ownFocus={false}
+  ownFocus={true}
   panelPaddingSize="none"
 >
   <EuiContextMenu
diff --git a/src/plugins/home/public/application/components/recently_accessed.js b/src/plugins/home/public/application/components/recently_accessed.js
index 181968a2e063a..80119a5063f14 100644
--- a/src/plugins/home/public/application/components/recently_accessed.js
+++ b/src/plugins/home/public/application/components/recently_accessed.js
@@ -99,7 +99,6 @@ export class RecentlyAccessed extends Component {
     return (
       <EuiPopover
         id="popover"
-        ownFocus
         button={openPopoverComponent}
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover}
diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/__snapshots__/indices_list.test.tsx.snap b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/__snapshots__/indices_list.test.tsx.snap
index db527ea81b2cb..ca41dddf6197e 100644
--- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/__snapshots__/indices_list.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/__snapshots__/indices_list.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`IndicesList should change pages 1`] = `
         hasArrow={true}
         id="customizablePagination"
         isOpen={false}
-        ownFocus={false}
+        ownFocus={true}
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
@@ -154,7 +154,7 @@ exports[`IndicesList should change per page 1`] = `
         hasArrow={true}
         id="customizablePagination"
         isOpen={false}
-        ownFocus={false}
+        ownFocus={true}
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
@@ -269,7 +269,7 @@ exports[`IndicesList should highlight the query in the matches 1`] = `
         hasArrow={true}
         id="customizablePagination"
         isOpen={false}
-        ownFocus={false}
+        ownFocus={true}
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
@@ -370,7 +370,7 @@ exports[`IndicesList should render normally 1`] = `
         hasArrow={true}
         id="customizablePagination"
         isOpen={false}
-        ownFocus={false}
+        ownFocus={true}
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
@@ -535,7 +535,7 @@ exports[`IndicesList updating props should render all new indices 1`] = `
         hasArrow={true}
         id="customizablePagination"
         isOpen={false}
-        ownFocus={false}
+        ownFocus={true}
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
diff --git a/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap b/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap
index 7fb00fe8d40c4..cd5a23ceb1169 100644
--- a/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap
+++ b/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap
@@ -244,81 +244,71 @@ exports[`InspectorPanel should render as expected 1`] = `
                     panelPaddingSize="none"
                     repositionOnScroll={true}
                   >
-                    <EuiOutsideClickDetector
-                      isDisabled={true}
-                      onOutsideClick={[Function]}
+                    <div
+                      className="euiPopover euiPopover--anchorDownRight"
+                      id="inspectorViewChooser"
                     >
                       <div
-                        className="euiPopover euiPopover--anchorDownRight"
-                        id="inspectorViewChooser"
-                        onKeyDown={[Function]}
-                        onMouseDown={[Function]}
-                        onMouseUp={[Function]}
-                        onTouchEnd={[Function]}
-                        onTouchStart={[Function]}
+                        className="euiPopover__anchor"
                       >
-                        <div
-                          className="euiPopover__anchor"
+                        <EuiButtonEmpty
+                          data-test-subj="inspectorViewChooser"
+                          iconSide="right"
+                          iconType="arrowDown"
+                          onClick={[Function]}
+                          size="s"
                         >
-                          <EuiButtonEmpty
+                          <button
+                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
                             data-test-subj="inspectorViewChooser"
-                            iconSide="right"
-                            iconType="arrowDown"
                             onClick={[Function]}
-                            size="s"
+                            type="button"
                           >
-                            <button
-                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
-                              data-test-subj="inspectorViewChooser"
-                              onClick={[Function]}
-                              type="button"
-                            >
-                              <EuiButtonContent
-                                className="euiButtonEmpty__content"
-                                iconSide="right"
-                                iconType="arrowDown"
-                                textProps={
-                                  Object {
-                                    "className": "euiButtonEmpty__text",
-                                  }
+                            <EuiButtonContent
+                              className="euiButtonEmpty__content"
+                              iconSide="right"
+                              iconType="arrowDown"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
                                 }
+                              }
+                            >
+                              <span
+                                className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                               >
-                                <span
-                                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                <EuiIcon
+                                  className="euiButtonContent__icon"
+                                  size="m"
+                                  type="arrowDown"
                                 >
-                                  <EuiIcon
+                                  <span
                                     className="euiButtonContent__icon"
+                                    data-euiicon-type="arrowDown"
                                     size="m"
-                                    type="arrowDown"
-                                  >
-                                    <span
-                                      className="euiButtonContent__icon"
-                                      data-euiicon-type="arrowDown"
-                                      size="m"
-                                    />
-                                  </EuiIcon>
-                                  <span
-                                    className="euiButtonEmpty__text"
-                                  >
-                                    <FormattedMessage
-                                      defaultMessage="View: {viewName}"
-                                      id="inspector.view"
-                                      values={
-                                        Object {
-                                          "viewName": "View 1",
-                                        }
+                                  />
+                                </EuiIcon>
+                                <span
+                                  className="euiButtonEmpty__text"
+                                >
+                                  <FormattedMessage
+                                    defaultMessage="View: {viewName}"
+                                    id="inspector.view"
+                                    values={
+                                      Object {
+                                        "viewName": "View 1",
                                       }
-                                    >
-                                      View: View 1
-                                    </FormattedMessage>
-                                  </span>
+                                    }
+                                  >
+                                    View: View 1
+                                  </FormattedMessage>
                                 </span>
-                              </EuiButtonContent>
-                            </button>
-                          </EuiButtonEmpty>
-                        </div>
+                              </span>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonEmpty>
                       </div>
-                    </EuiOutsideClickDetector>
+                    </div>
                   </EuiPopover>
                 </InspectorViewChooser>
               </div>
diff --git a/src/plugins/inspector/public/ui/inspector_view_chooser.tsx b/src/plugins/inspector/public/ui/inspector_view_chooser.tsx
index e1502e5e912e6..be84488589423 100644
--- a/src/plugins/inspector/public/ui/inspector_view_chooser.tsx
+++ b/src/plugins/inspector/public/ui/inspector_view_chooser.tsx
@@ -121,7 +121,6 @@ export class InspectorViewChooser extends Component<Props, State> {
     return (
       <EuiPopover
         id="inspectorViewChooser"
-        ownFocus
         button={triggerButton}
         isOpen={this.state.isSelectorOpen}
         closePopover={this.closeSelector}
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/table.test.tsx.snap b/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/table.test.tsx.snap
index 67bbb46cfb607..bb426c91e827c 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/table.test.tsx.snap
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/table.test.tsx.snap
@@ -60,7 +60,7 @@ exports[`Table prevents saved objects from being deleted 1`] = `
           display="inlineBlock"
           hasArrow={true}
           isOpen={false}
-          ownFocus={false}
+          ownFocus={true}
           panelPaddingSize="m"
         >
           <EuiFormRow
@@ -276,7 +276,7 @@ exports[`Table should render normally 1`] = `
           display="inlineBlock"
           hasArrow={true}
           isOpen={false}
-          ownFocus={false}
+          ownFocus={true}
           panelPaddingSize="m"
         >
           <EuiFormRow
diff --git a/src/plugins/ui_actions/public/context_menu/open_context_menu.tsx b/src/plugins/ui_actions/public/context_menu/open_context_menu.tsx
index 80a8668a8a5b6..9684c14a9987c 100644
--- a/src/plugins/ui_actions/public/context_menu/open_context_menu.tsx
+++ b/src/plugins/ui_actions/public/context_menu/open_context_menu.tsx
@@ -186,7 +186,6 @@ export function openContextMenu(
       closePopover={onClose}
       panelPaddingSize="none"
       anchorPosition="downRight"
-      ownFocus={true}
     >
       <EuiContextMenu
         initialPanelId="mainMenu"
diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx
index ba09f12cfab2b..39e6fb2d2aff4 100644
--- a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx
+++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx
@@ -152,7 +152,6 @@ const VisLegendItemComponent = ({
 
   const renderDetails = () => (
     <EuiPopover
-      ownFocus
       display="block"
       button={button}
       isOpen={selected}
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
index 1f34a0cef1ccf..4b332b6904282 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
@@ -94,11 +94,6 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
               >
                 <div
                   className="euiPopover euiPopover--anchorDownRight"
-                  onKeyDown={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseUp={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchStart={[Function]}
                 >
                   <div
                     className="euiPopover__anchor"
@@ -518,11 +513,6 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
               >
                 <div
                   className="euiPopover euiPopover--anchorDownRight"
-                  onKeyDown={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseUp={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchStart={[Function]}
                 >
                   <div
                     className="euiPopover__anchor"
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Info.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Info.tsx
index d0902c427aac8..95373113695f4 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Info.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Info.tsx
@@ -24,7 +24,7 @@ const ItemRow = styled.div`
 
 const SubduedDescriptionListTitle = styled(EuiDescriptionListTitle)`
   &&& {
-    color: ${({ theme }) => theme.eui.textColors.subdued};
+    color: ${({ theme }) => theme.eui.euiTextSubduedColor};
   }
 `;
 
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceStatsList.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceStatsList.tsx
index 8463da0824bde..2898194dc40e7 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceStatsList.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceStatsList.tsx
@@ -20,7 +20,7 @@ export const ItemRow = styled('tr')`
 `;
 
 export const ItemTitle = styled('td')`
-  color: ${({ theme }) => theme.eui.textColors.subdued};
+  color: ${({ theme }) => theme.eui.euiTextSubduedColor};
   padding-right: 1rem;
 `;
 
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/cytoscape_options.ts b/x-pack/plugins/apm/public/components/app/ServiceMap/cytoscape_options.ts
index d8a8a3c8e9ab4..ed5fbe3be0058 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/cytoscape_options.ts
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/cytoscape_options.ts
@@ -129,7 +129,7 @@ const getStyle = (theme: EuiTheme): cytoscape.Stylesheet[] => {
         color: (el: cytoscape.NodeSingular) =>
           el.hasClass('primary') || el.selected()
             ? theme.eui.euiColorPrimaryText
-            : theme.eui.textColors.text,
+            : theme.eui.euiTextColor,
         // theme.euiFontFamily doesn't work here for some reason, so we're just
         // specifying a subset of the fonts for the label text.
         'font-family': 'Inter UI, Segoe UI, Helvetica, Arial, sans-serif',
diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.tsx
index 50f87184f8ee7..a36980d49db3a 100644
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.tsx
@@ -22,7 +22,7 @@ const CausedByContainer = styled('h5')`
 `;
 
 const CausedByHeading = styled('span')`
-  color: ${({ theme }) => theme.eui.textColors.subdued};
+  color: ${({ theme }) => theme.eui.euiTextSubduedColor};
   display: block;
   font-size: ${({ theme }) => theme.eui.euiFontSizeXS};
   font-weight: ${({ theme }) => theme.eui.euiFontWeightBold};
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/__snapshots__/time_filter.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/__snapshots__/time_filter.stories.storyshot
index 3fba41069253e..59771973f2aa5 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/__snapshots__/time_filter.stories.storyshot
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/__snapshots__/time_filter.stories.storyshot
@@ -23,11 +23,6 @@ exports[`Storyshots renderers/TimeFilter default 1`] = `
           <div
             className="euiPopover euiPopover--anchorDownLeft"
             id="QuickSelectPopover"
-            onKeyDown={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
           >
             <div
               className="euiPopover__anchor euiQuickSelectPopover__anchor"
@@ -109,11 +104,6 @@ exports[`Storyshots renderers/TimeFilter with absolute time bounds 1`] = `
           <div
             className="euiPopover euiPopover--anchorDownLeft"
             id="QuickSelectPopover"
-            onKeyDown={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
           >
             <div
               className="euiPopover__anchor euiQuickSelectPopover__anchor"
@@ -152,11 +142,6 @@ exports[`Storyshots renderers/TimeFilter with absolute time bounds 1`] = `
             >
               <div
                 className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiSuperDatePicker__startPopoverButton"
-                onKeyDown={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchStart={[Function]}
               >
                 <div
                   className="euiPopover__anchor"
@@ -183,11 +168,6 @@ exports[`Storyshots renderers/TimeFilter with absolute time bounds 1`] = `
               </div>
               <div
                 className="euiPopover euiPopover--anchorDownRight euiPopover--displayBlock"
-                onKeyDown={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchStart={[Function]}
               >
                 <div
                   className="euiPopover__anchor"
@@ -235,11 +215,6 @@ exports[`Storyshots renderers/TimeFilter with commonlyUsedRanges 1`] = `
           <div
             className="euiPopover euiPopover--anchorDownLeft"
             id="QuickSelectPopover"
-            onKeyDown={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
           >
             <div
               className="euiPopover__anchor euiQuickSelectPopover__anchor"
@@ -321,11 +296,6 @@ exports[`Storyshots renderers/TimeFilter with dateFormat 1`] = `
           <div
             className="euiPopover euiPopover--anchorDownLeft"
             id="QuickSelectPopover"
-            onKeyDown={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
           >
             <div
               className="euiPopover__anchor euiQuickSelectPopover__anchor"
@@ -407,11 +377,6 @@ exports[`Storyshots renderers/TimeFilter with relative time bounds 1`] = `
           <div
             className="euiPopover euiPopover--anchorDownLeft"
             id="QuickSelectPopover"
-            onKeyDown={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
           >
             <div
               className="euiPopover__anchor euiQuickSelectPopover__anchor"
@@ -450,11 +415,6 @@ exports[`Storyshots renderers/TimeFilter with relative time bounds 1`] = `
             >
               <div
                 className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiSuperDatePicker__startPopoverButton"
-                onKeyDown={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchStart={[Function]}
               >
                 <div
                   className="euiPopover__anchor"
@@ -481,11 +441,6 @@ exports[`Storyshots renderers/TimeFilter with relative time bounds 1`] = `
               </div>
               <div
                 className="euiPopover euiPopover--anchorDownRight euiPopover--displayBlock"
-                onKeyDown={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchStart={[Function]}
               >
                 <div
                   className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__stories__/__snapshots__/palette.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__stories__/__snapshots__/palette.stories.storyshot
index 320ec7733e197..fccf5d2b56651 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__stories__/__snapshots__/palette.stories.storyshot
+++ b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__stories__/__snapshots__/palette.stories.storyshot
@@ -35,14 +35,126 @@ exports[`Storyshots arguments/Palette default 1`] = `
             id="generated-id"
           >
             Select an option: 
-            <div
-              className="euiColorPalettePicker__itemGradient"
-              style={
-                Object {
-                  "background": "linear-gradient(to right, #882E72 0%, #882E72 7%, #B178A6 7%, #B178A6 14%, #D6C1DE 14%, #D6C1DE 21%, #1965B0 21%, #1965B0 28%, #5289C7 28%, #5289C7 35%, #7BAFDE 35%, #7BAFDE 42%, #4EB265 42%, #4EB265 50%, #90C987 50%, #90C987 57%, #CAE0AB 57%, #CAE0AB 64%, #F7EE55 64%, #F7EE55 71%, #F6C141 71%, #F6C141 78%, #F1932D 78%, #F1932D 85%, #E8601C 85%, #E8601C 92%, #DC050C 92%, #DC050C 100%)",
-                }
-              }
-            />
+            <span
+              className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
+            >
+              <span
+                className="euiColorPaletteDisplayFixed__bleedArea"
+              >
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#882E72",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#B178A6",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#D6C1DE",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#1965B0",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#5289C7",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#7BAFDE",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#4EB265",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#90C987",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#CAE0AB",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#F7EE55",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#F6C141",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#F1932D",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#E8601C",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#DC050C",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+              </span>
+            </span>
             , is selected
           </span>
           <button
@@ -54,14 +166,126 @@ exports[`Storyshots arguments/Palette default 1`] = `
             readOnly={false}
             type="button"
           >
-            <div
-              className="euiColorPalettePicker__itemGradient"
-              style={
-                Object {
-                  "background": "linear-gradient(to right, #882E72 0%, #882E72 7%, #B178A6 7%, #B178A6 14%, #D6C1DE 14%, #D6C1DE 21%, #1965B0 21%, #1965B0 28%, #5289C7 28%, #5289C7 35%, #7BAFDE 35%, #7BAFDE 42%, #4EB265 42%, #4EB265 50%, #90C987 50%, #90C987 57%, #CAE0AB 57%, #CAE0AB 64%, #F7EE55 64%, #F7EE55 71%, #F6C141 71%, #F6C141 78%, #F1932D 78%, #F1932D 85%, #E8601C 85%, #E8601C 92%, #DC050C 92%, #DC050C 100%)",
-                }
-              }
-            />
+            <span
+              className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
+            >
+              <span
+                className="euiColorPaletteDisplayFixed__bleedArea"
+              >
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#882E72",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#B178A6",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#D6C1DE",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#1965B0",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#5289C7",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#7BAFDE",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#4EB265",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#90C987",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#CAE0AB",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#F7EE55",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#F6C141",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#F1932D",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#E8601C",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#DC050C",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+              </span>
+            </span>
           </button>
           <div
             className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
diff --git a/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset.stories.storyshot b/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset.stories.storyshot
index 05339ca558562..8194d923f34a5 100644
--- a/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset.stories.storyshot
@@ -18,7 +18,7 @@ exports[`Storyshots components/Assets/Asset airplane 1`] = `
         className="canvasAsset__thumb canvasCheckered"
       >
         <figure
-          className="euiImage canvasAsset__img "
+          className="euiImage canvasAsset__img euiImage--original"
         >
           <img
             alt="Asset thumbnail"
@@ -196,7 +196,7 @@ exports[`Storyshots components/Assets/Asset marker 1`] = `
         className="canvasAsset__thumb canvasCheckered"
       >
         <figure
-          className="euiImage canvasAsset__img "
+          className="euiImage canvasAsset__img euiImage--original"
         >
           <img
             alt="Asset thumbnail"
diff --git a/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset_manager.stories.storyshot b/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset_manager.stories.storyshot
index b8712b19041ac..4f616dd1cb4ea 100644
--- a/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset_manager.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset_manager.stories.storyshot
@@ -302,7 +302,7 @@ exports[`Storyshots components/Assets/AssetManager two assets 1`] = `
                   className="canvasAsset__thumb canvasCheckered"
                 >
                   <figure
-                    className="euiImage canvasAsset__img "
+                    className="euiImage canvasAsset__img euiImage--original"
                   >
                     <img
                       alt="Asset thumbnail"
@@ -469,7 +469,7 @@ exports[`Storyshots components/Assets/AssetManager two assets 1`] = `
                   className="canvasAsset__thumb canvasCheckered"
                 >
                   <figure
-                    className="euiImage canvasAsset__img "
+                    className="euiImage canvasAsset__img euiImage--original"
                   >
                     <img
                       alt="Asset thumbnail"
diff --git a/x-pack/plugins/canvas/public/components/color_picker_popover/__stories__/__snapshots__/color_picker_popover.stories.storyshot b/x-pack/plugins/canvas/public/components/color_picker_popover/__stories__/__snapshots__/color_picker_popover.stories.storyshot
index 6cab47734039b..b6e0a30d7f542 100644
--- a/x-pack/plugins/canvas/public/components/color_picker_popover/__stories__/__snapshots__/color_picker_popover.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/color_picker_popover/__stories__/__snapshots__/color_picker_popover.stories.storyshot
@@ -5,11 +5,6 @@ exports[`Storyshots components/Color/ColorPickerPopover interactive 1`] = `
   <div
     className="euiPopover euiPopover--anchorDownCenter"
     id="color-picker-popover"
-    onKeyDown={[Function]}
-    onMouseDown={[Function]}
-    onMouseUp={[Function]}
-    onTouchEnd={[Function]}
-    onTouchStart={[Function]}
   >
     <div
       className="euiPopover__anchor"
@@ -66,11 +61,6 @@ exports[`Storyshots components/Color/ColorPickerPopover six colors 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownCenter"
   id="color-picker-popover"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -110,11 +100,6 @@ exports[`Storyshots components/Color/ColorPickerPopover six colors, value missin
 <div
   className="euiPopover euiPopover--anchorDownCenter"
   id="color-picker-popover"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -154,11 +139,6 @@ exports[`Storyshots components/Color/ColorPickerPopover three colors 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownCenter"
   id="color-picker-popover"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/public/components/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot
index d5990d3dbfd53..dc9c7f4c492cf 100644
--- a/x-pack/plugins/canvas/public/components/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot
@@ -100,14 +100,126 @@ exports[`Storyshots components/Color/PalettePicker default 1`] = `
             id="generated-id"
           >
             Select an option: 
-            <div
-              className="euiColorPalettePicker__itemGradient"
-              style={
-                Object {
-                  "background": "linear-gradient(to right, #882E72 0%, #882E72 7%, #B178A6 7%, #B178A6 14%, #D6C1DE 14%, #D6C1DE 21%, #1965B0 21%, #1965B0 28%, #5289C7 28%, #5289C7 35%, #7BAFDE 35%, #7BAFDE 42%, #4EB265 42%, #4EB265 50%, #90C987 50%, #90C987 57%, #CAE0AB 57%, #CAE0AB 64%, #F7EE55 64%, #F7EE55 71%, #F6C141 71%, #F6C141 78%, #F1932D 78%, #F1932D 85%, #E8601C 85%, #E8601C 92%, #DC050C 92%, #DC050C 100%)",
-                }
-              }
-            />
+            <span
+              className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
+            >
+              <span
+                className="euiColorPaletteDisplayFixed__bleedArea"
+              >
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#882E72",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#B178A6",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#D6C1DE",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#1965B0",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#5289C7",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#7BAFDE",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#4EB265",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#90C987",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#CAE0AB",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#F7EE55",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#F6C141",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#F1932D",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#E8601C",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#DC050C",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+              </span>
+            </span>
             , is selected
           </span>
           <button
@@ -119,14 +231,126 @@ exports[`Storyshots components/Color/PalettePicker default 1`] = `
             readOnly={false}
             type="button"
           >
-            <div
-              className="euiColorPalettePicker__itemGradient"
-              style={
-                Object {
-                  "background": "linear-gradient(to right, #882E72 0%, #882E72 7%, #B178A6 7%, #B178A6 14%, #D6C1DE 14%, #D6C1DE 21%, #1965B0 21%, #1965B0 28%, #5289C7 28%, #5289C7 35%, #7BAFDE 35%, #7BAFDE 42%, #4EB265 42%, #4EB265 50%, #90C987 50%, #90C987 57%, #CAE0AB 57%, #CAE0AB 64%, #F7EE55 64%, #F7EE55 71%, #F6C141 71%, #F6C141 78%, #F1932D 78%, #F1932D 85%, #E8601C 85%, #E8601C 92%, #DC050C 92%, #DC050C 100%)",
-                }
-              }
-            />
+            <span
+              className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
+            >
+              <span
+                className="euiColorPaletteDisplayFixed__bleedArea"
+              >
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#882E72",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#B178A6",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#D6C1DE",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#1965B0",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#5289C7",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#7BAFDE",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#4EB265",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#90C987",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#CAE0AB",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#F7EE55",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#F6C141",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#F1932D",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#E8601C",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#DC050C",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+              </span>
+            </span>
           </button>
           <div
             className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
@@ -182,14 +406,126 @@ exports[`Storyshots components/Color/PalettePicker interactive 1`] = `
             id="generated-id"
           >
             Select an option: 
-            <div
-              className="euiColorPalettePicker__itemGradient"
-              style={
-                Object {
-                  "background": "linear-gradient(to right, #882E72 0%, #882E72 7%, #B178A6 7%, #B178A6 14%, #D6C1DE 14%, #D6C1DE 21%, #1965B0 21%, #1965B0 28%, #5289C7 28%, #5289C7 35%, #7BAFDE 35%, #7BAFDE 42%, #4EB265 42%, #4EB265 50%, #90C987 50%, #90C987 57%, #CAE0AB 57%, #CAE0AB 64%, #F7EE55 64%, #F7EE55 71%, #F6C141 71%, #F6C141 78%, #F1932D 78%, #F1932D 85%, #E8601C 85%, #E8601C 92%, #DC050C 92%, #DC050C 100%)",
-                }
-              }
-            />
+            <span
+              className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
+            >
+              <span
+                className="euiColorPaletteDisplayFixed__bleedArea"
+              >
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#882E72",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#B178A6",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#D6C1DE",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#1965B0",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#5289C7",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#7BAFDE",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#4EB265",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#90C987",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#CAE0AB",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#F7EE55",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#F6C141",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#F1932D",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#E8601C",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#DC050C",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+              </span>
+            </span>
             , is selected
           </span>
           <button
@@ -201,14 +537,126 @@ exports[`Storyshots components/Color/PalettePicker interactive 1`] = `
             readOnly={false}
             type="button"
           >
-            <div
-              className="euiColorPalettePicker__itemGradient"
-              style={
-                Object {
-                  "background": "linear-gradient(to right, #882E72 0%, #882E72 7%, #B178A6 7%, #B178A6 14%, #D6C1DE 14%, #D6C1DE 21%, #1965B0 21%, #1965B0 28%, #5289C7 28%, #5289C7 35%, #7BAFDE 35%, #7BAFDE 42%, #4EB265 42%, #4EB265 50%, #90C987 50%, #90C987 57%, #CAE0AB 57%, #CAE0AB 64%, #F7EE55 64%, #F7EE55 71%, #F6C141 71%, #F6C141 78%, #F1932D 78%, #F1932D 85%, #E8601C 85%, #E8601C 92%, #DC050C 92%, #DC050C 100%)",
-                }
-              }
-            />
+            <span
+              className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
+            >
+              <span
+                className="euiColorPaletteDisplayFixed__bleedArea"
+              >
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#882E72",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#B178A6",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#D6C1DE",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#1965B0",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#5289C7",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#7BAFDE",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#4EB265",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#90C987",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#CAE0AB",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#F7EE55",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#F6C141",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#F1932D",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#E8601C",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+                <span
+                  style={
+                    Object {
+                      "backgroundColor": "#DC050C",
+                      "width": "7.142857142857143%",
+                    }
+                  }
+                />
+              </span>
+            </span>
           </button>
           <div
             className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
diff --git a/x-pack/plugins/canvas/public/components/shape_picker_popover/__stories__/__snapshots__/shape_picker_popover.stories.storyshot b/x-pack/plugins/canvas/public/components/shape_picker_popover/__stories__/__snapshots__/shape_picker_popover.stories.storyshot
index 1d292c94436e3..548c441680c55 100644
--- a/x-pack/plugins/canvas/public/components/shape_picker_popover/__stories__/__snapshots__/shape_picker_popover.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/shape_picker_popover/__stories__/__snapshots__/shape_picker_popover.stories.storyshot
@@ -3,11 +3,6 @@
 exports[`Storyshots components/Shapes/ShapePickerPopover default 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownCenter"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -37,11 +32,6 @@ exports[`Storyshots components/Shapes/ShapePickerPopover default 1`] = `
 exports[`Storyshots components/Shapes/ShapePickerPopover interactive 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownCenter"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -78,11 +68,6 @@ exports[`Storyshots components/Shapes/ShapePickerPopover interactive 1`] = `
 exports[`Storyshots components/Shapes/ShapePickerPopover shape selected 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownCenter"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot
index 5f4f5ead13641..90f94b5141874 100644
--- a/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot
@@ -216,11 +216,6 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
         <div
           className="euiPopover euiPopover--anchorDownCenter"
           id="color-picker-popover"
-          onKeyDown={[Function]}
-          onMouseDown={[Function]}
-          onMouseUp={[Function]}
-          onTouchEnd={[Function]}
-          onTouchStart={[Function]}
         >
           <div
             className="euiPopover__anchor"
@@ -694,11 +689,6 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
         <div
           className="euiPopover euiPopover--anchorDownCenter"
           id="color-picker-popover"
-          onKeyDown={[Function]}
-          onMouseDown={[Function]}
-          onMouseUp={[Function]}
-          onTouchEnd={[Function]}
-          onTouchStart={[Function]}
         >
           <div
             className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/__snapshots__/edit_menu.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/__snapshots__/edit_menu.stories.storyshot
index 93f4db664d1db..a242747f74362 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/__snapshots__/edit_menu.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/__snapshots__/edit_menu.stories.storyshot
@@ -3,11 +3,6 @@
 exports[`Storyshots components/WorkpadHeader/EditMenu 2 elements selected 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -36,11 +31,6 @@ exports[`Storyshots components/WorkpadHeader/EditMenu 2 elements selected 1`] =
 exports[`Storyshots components/WorkpadHeader/EditMenu 3+ elements selected 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -69,11 +59,6 @@ exports[`Storyshots components/WorkpadHeader/EditMenu 3+ elements selected 1`] =
 exports[`Storyshots components/WorkpadHeader/EditMenu clipboard data exists 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -102,11 +87,6 @@ exports[`Storyshots components/WorkpadHeader/EditMenu clipboard data exists 1`]
 exports[`Storyshots components/WorkpadHeader/EditMenu default 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -135,11 +115,6 @@ exports[`Storyshots components/WorkpadHeader/EditMenu default 1`] = `
 exports[`Storyshots components/WorkpadHeader/EditMenu single element selected 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -168,11 +143,6 @@ exports[`Storyshots components/WorkpadHeader/EditMenu single element selected 1`
 exports[`Storyshots components/WorkpadHeader/EditMenu single grouped element selected 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/__snapshots__/element_menu.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/__snapshots__/element_menu.stories.storyshot
index de78772bcb124..0d1505b6aa72e 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/__snapshots__/element_menu.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/__snapshots__/element_menu.stories.storyshot
@@ -3,11 +3,6 @@
 exports[`Storyshots components/WorkpadHeader/ElementMenu default 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/share_menu.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/share_menu.stories.storyshot
index a016912a51cd2..2f56046b2b768 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/share_menu.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/share_menu.stories.storyshot
@@ -4,11 +4,6 @@ exports[`Storyshots components/WorkpadHeader/ShareMenu default 1`] = `
 <div>
   <div
     className="euiPopover euiPopover--anchorDownLeft"
-    onKeyDown={[Function]}
-    onMouseDown={[Function]}
-    onMouseUp={[Function]}
-    onTouchEnd={[Function]}
-    onTouchStart={[Function]}
   >
     <div
       className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__stories__/__snapshots__/view_menu.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__stories__/__snapshots__/view_menu.stories.storyshot
index 41b3f44f0842f..a8f3f6566ddaa 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__stories__/__snapshots__/view_menu.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__stories__/__snapshots__/view_menu.stories.storyshot
@@ -3,11 +3,6 @@
 exports[`Storyshots components/WorkpadHeader/ViewMenu edit mode 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -35,11 +30,6 @@ exports[`Storyshots components/WorkpadHeader/ViewMenu edit mode 1`] = `
 exports[`Storyshots components/WorkpadHeader/ViewMenu read only mode 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -67,11 +57,6 @@ exports[`Storyshots components/WorkpadHeader/ViewMenu read only mode 1`] = `
 exports[`Storyshots components/WorkpadHeader/ViewMenu with autoplay enabled 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -99,11 +84,6 @@ exports[`Storyshots components/WorkpadHeader/ViewMenu with autoplay enabled 1`]
 exports[`Storyshots components/WorkpadHeader/ViewMenu with refresh enabled 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot
index 50664789eddae..0b39ecd5f9dd5 100644
--- a/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot
@@ -53,11 +53,6 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
         <div
           className="euiPopover euiPopover--anchorDownCenter"
           id="field_value_selection_0"
-          onKeyDown={[Function]}
-          onMouseDown={[Function]}
-          onMouseUp={[Function]}
-          onTouchEnd={[Function]}
-          onTouchStart={[Function]}
         >
           <div
             className="euiPopover__anchor"
@@ -117,11 +112,6 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
             >
               <div
                 className="euiPopover euiPopover--anchorDownRight"
-                onKeyDown={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchStart={[Function]}
               >
                 <div
                   className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot b/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot
index 755cfc343eef0..e41e48b9d199f 100644
--- a/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot
+++ b/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot
@@ -436,11 +436,6 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
             <div
               className="euiPopover euiPopover--anchorUpCenter"
               id="color-picker-popover"
-              onKeyDown={[Function]}
-              onMouseDown={[Function]}
-              onMouseUp={[Function]}
-              onTouchEnd={[Function]}
-              onTouchStart={[Function]}
             >
               <div
                 className="euiPopover__anchor"
@@ -905,11 +900,6 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
           <div
             className="euiPopover euiPopover--anchorUpCenter"
             id="color-picker-popover"
-            onKeyDown={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
           >
             <div
               className="euiPopover__anchor"
@@ -1386,11 +1376,6 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
             <div
               className="euiPopover euiPopover--anchorUpCenter"
               id="color-picker-popover"
-              onKeyDown={[Function]}
-              onMouseDown={[Function]}
-              onMouseUp={[Function]}
-              onTouchEnd={[Function]}
-              onTouchStart={[Function]}
             >
               <div
                 className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/simple_template.stories.storyshot b/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/simple_template.stories.storyshot
index 9eeffde84ffac..ba4c6cc113bd3 100644
--- a/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/simple_template.stories.storyshot
+++ b/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/simple_template.stories.storyshot
@@ -29,11 +29,6 @@ exports[`Storyshots arguments/ContainerStyle simple 1`] = `
       <div
         className="euiPopover euiPopover--anchorLeftCenter"
         id="color-picker-popover"
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        onTouchEnd={[Function]}
-        onTouchStart={[Function]}
       >
         <div
           className="euiPopover__anchor"
@@ -101,11 +96,6 @@ exports[`Storyshots arguments/ContainerStyle/components simple template 1`] = `
       <div
         className="euiPopover euiPopover--anchorLeftCenter"
         id="color-picker-popover"
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        onTouchEnd={[Function]}
-        onTouchStart={[Function]}
       >
         <div
           className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/__stories__/__snapshots__/canvas.stories.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/__stories__/__snapshots__/canvas.stories.storyshot
index 7d7b2a0ae9341..869f44488e902 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/__stories__/__snapshots__/canvas.stories.storyshot
+++ b/x-pack/plugins/canvas/shareable_runtime/components/__stories__/__snapshots__/canvas.stories.storyshot
@@ -1447,11 +1447,6 @@ exports[`Storyshots shareables/Canvas component 1`] = `
                   <div
                     className="euiPopover euiPopover--anchorUpRight"
                     id="settings"
-                    onKeyDown={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchStart={[Function]}
                   >
                     <div
                       className="euiPopover__anchor"
@@ -2929,11 +2924,6 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
                   <div
                     className="euiPopover euiPopover--anchorUpRight"
                     id="settings"
-                    onKeyDown={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchStart={[Function]}
                   >
                     <div
                       className="euiPopover__anchor"
@@ -3226,11 +3216,6 @@ exports[`Storyshots shareables/Canvas contextual: hello 1`] = `
                   <div
                     className="euiPopover euiPopover--anchorUpRight"
                     id="settings"
-                    onKeyDown={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchStart={[Function]}
                   >
                     <div
                       className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/__stories__/__snapshots__/footer.stories.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/footer/__stories__/__snapshots__/footer.stories.storyshot
index 28c01c3fba8e5..7612e50a39047 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/__stories__/__snapshots__/footer.stories.storyshot
+++ b/x-pack/plugins/canvas/shareable_runtime/components/footer/__stories__/__snapshots__/footer.stories.storyshot
@@ -1400,11 +1400,6 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
                 <div
                   className="euiPopover euiPopover--anchorUpRight"
                   id="settings"
-                  onKeyDown={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseUp={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchStart={[Function]}
                 >
                   <div
                     className="euiPopover__anchor"
@@ -1651,11 +1646,6 @@ exports[`Storyshots shareables/Footer contextual: hello 1`] = `
                 <div
                   className="euiPopover euiPopover--anchorUpRight"
                   id="settings"
-                  onKeyDown={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseUp={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchStart={[Function]}
                 >
                   <div
                     className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__stories__/__snapshots__/settings.stories.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__stories__/__snapshots__/settings.stories.storyshot
index b7c3470cef653..7bcbd247a9919 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__stories__/__snapshots__/settings.stories.storyshot
+++ b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__stories__/__snapshots__/settings.stories.storyshot
@@ -23,11 +23,6 @@ exports[`Storyshots shareables/Footer/Settings component 1`] = `
       <div
         className="euiPopover euiPopover--anchorUpRight"
         id="settings"
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        onTouchEnd={[Function]}
-        onTouchStart={[Function]}
       >
         <div
           className="euiPopover__anchor"
@@ -75,11 +70,6 @@ exports[`Storyshots shareables/Footer/Settings contextual 1`] = `
       <div
         className="euiPopover euiPopover--anchorUpRight"
         id="settings"
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        onTouchEnd={[Function]}
-        onTouchStart={[Function]}
       >
         <div
           className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap
index b5049b7f1166a..eaedc2c3b5d61 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap
+++ b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap
@@ -6,16 +6,24 @@ exports[`<Settings /> can navigate Autoplay Settings 1`] = `
     data-eui="EuiFocusTrap"
   >
     <div
-      aria-live="assertive"
+      aria-describedby="generated-id"
+      aria-live="off"
       aria-modal="true"
       class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--top"
       role="dialog"
       style="top: -16px; left: -22px; z-index: 2000;"
+      tabindex="0"
     >
       <div
         class="euiPopover__panelArrow euiPopover__panelArrow--top"
         style="left: 10px; top: 0px;"
       />
+      <p
+        class="euiScreenReaderOnly"
+        id="generated-id"
+      >
+        You are in a dialog. To close this dialog, hit escape.
+      </p>
       <div>
         <div
           class="euiContextMenu"
@@ -96,16 +104,24 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
     data-eui="EuiFocusTrap"
   >
     <div
-      aria-live="assertive"
+      aria-describedby="generated-id"
+      aria-live="off"
       aria-modal="true"
       class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--top euiPopover__panel-isOpen"
       role="dialog"
       style="top: -16px; left: -22px; z-index: 2000;"
+      tabindex="0"
     >
       <div
         class="euiPopover__panelArrow euiPopover__panelArrow--top"
         style="left: 10px; top: 0px;"
       />
+      <p
+        class="euiScreenReaderOnly"
+        id="generated-id"
+      >
+        You are in a dialog. To close this dialog, hit escape.
+      </p>
       <div>
         <div
           class="euiContextMenu"
@@ -338,16 +354,24 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 1`] =
     data-eui="EuiFocusTrap"
   >
     <div
-      aria-live="assertive"
+      aria-describedby="generated-id"
+      aria-live="off"
       aria-modal="true"
       class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--top"
       role="dialog"
       style="top: -16px; left: -22px; z-index: 2000;"
+      tabindex="0"
     >
       <div
         class="euiPopover__panelArrow euiPopover__panelArrow--top"
         style="left: 10px; top: 0px;"
       />
+      <p
+        class="euiScreenReaderOnly"
+        id="generated-id"
+      >
+        You are in a dialog. To close this dialog, hit escape.
+      </p>
       <div>
         <div
           class="euiContextMenu"
@@ -428,16 +452,24 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
     data-eui="EuiFocusTrap"
   >
     <div
-      aria-live="assertive"
+      aria-describedby="generated-id"
+      aria-live="off"
       aria-modal="true"
       class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--top euiPopover__panel-isOpen"
       role="dialog"
       style="top: -16px; left: -22px; z-index: 2000;"
+      tabindex="0"
     >
       <div
         class="euiPopover__panelArrow euiPopover__panelArrow--top"
         style="left: 10px; top: 0px;"
       />
+      <p
+        class="euiScreenReaderOnly"
+        id="generated-id"
+      >
+        You are in a dialog. To close this dialog, hit escape.
+      </p>
       <div>
         <div
           class="euiContextMenu"
@@ -600,4 +632,4 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
 </div>
 `;
 
-exports[`<Settings /> can navigate Toolbar Settings, closes when activated 3`] = `"<div><div data-eui=\\"EuiFocusTrap\\"><div class=\\"euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--top\\" aria-live=\\"assertive\\" role=\\"dialog\\" aria-modal=\\"true\\" style=\\"top: -16px; left: -22px; z-index: 2000;\\"><div class=\\"euiPopover__panelArrow euiPopover__panelArrow--top\\" style=\\"left: 10px; top: 0px;\\"></div><div><div class=\\"euiContextMenu\\" style=\\"height: 0px;\\"><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutLeft\\" tabindex=\\"0\\"><div class=\\"euiContextMenuPanelTitle\\"><span class=\\"euiContextMenu__itemLayout\\">Settings</span></div><div><div><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"play\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenuItem__text\\">Auto Play</span><span data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></span></span></button><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"boxesHorizontal\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenuItem__text\\">Toolbar</span><span data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></span></span></button></div></div></div><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInLeft\\" tabindex=\\"0\\"><button class=\\"euiContextMenuPanelTitle\\" type=\\"button\\" data-test-subj=\\"contextMenuPanelTitleButton\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenu__text\\">Toolbar</span></span></button><div><div><div style=\\"padding: 16px;\\"><div class=\\"euiFormRow\\" id=\\"generated-id-row\\"><div class=\\"euiFormRow__fieldWrapper\\"><div class=\\"euiSwitch\\"><button id=\\"generated-id\\" aria-checked=\\"true\\" class=\\"euiSwitch__button\\" role=\\"switch\\" type=\\"button\\" aria-labelledby=\\"generated-id\\" data-test-subj=\\"hideToolbarSwitch\\" name=\\"toolbarHide\\" aria-describedby=\\"generated-id-help\\"><span class=\\"euiSwitch__body\\"><span class=\\"euiSwitch__thumb\\"></span><span class=\\"euiSwitch__track\\"><span data-euiicon-type=\\"cross\\" class=\\"euiSwitch__icon\\"></span><span data-euiicon-type=\\"check\\" class=\\"euiSwitch__icon euiSwitch__icon--checked\\"></span></span></span></button><span class=\\"euiSwitch__label\\" id=\\"generated-id\\">Hide Toolbar</span></div><div class=\\"euiFormHelpText euiFormRow__text\\" id=\\"generated-id-help\\">Hide the toolbar when the mouse is not within the Canvas?</div></div></div></div></div></div></div></div></div></div></div></div>"`;
+exports[`<Settings /> can navigate Toolbar Settings, closes when activated 3`] = `"<div><div data-eui=\\"EuiFocusTrap\\"><div class=\\"euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--top\\" tabindex=\\"0\\" aria-live=\\"off\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-describedby=\\"generated-id\\" style=\\"top: -16px; left: -22px; z-index: 2000;\\"><div class=\\"euiPopover__panelArrow euiPopover__panelArrow--top\\" style=\\"left: 10px; top: 0px;\\"></div><p id=\\"generated-id\\" class=\\"euiScreenReaderOnly\\">You are in a dialog. To close this dialog, hit escape.</p><div><div class=\\"euiContextMenu\\" style=\\"height: 0px;\\"><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutLeft\\" tabindex=\\"0\\"><div class=\\"euiContextMenuPanelTitle\\"><span class=\\"euiContextMenu__itemLayout\\">Settings</span></div><div><div><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"play\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenuItem__text\\">Auto Play</span><span data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></span></span></button><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"boxesHorizontal\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenuItem__text\\">Toolbar</span><span data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></span></span></button></div></div></div><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInLeft\\" tabindex=\\"0\\"><button class=\\"euiContextMenuPanelTitle\\" type=\\"button\\" data-test-subj=\\"contextMenuPanelTitleButton\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenu__text\\">Toolbar</span></span></button><div><div><div style=\\"padding: 16px;\\"><div class=\\"euiFormRow\\" id=\\"generated-id-row\\"><div class=\\"euiFormRow__fieldWrapper\\"><div class=\\"euiSwitch\\"><button id=\\"generated-id\\" aria-checked=\\"true\\" class=\\"euiSwitch__button\\" role=\\"switch\\" type=\\"button\\" aria-labelledby=\\"generated-id\\" data-test-subj=\\"hideToolbarSwitch\\" name=\\"toolbarHide\\" aria-describedby=\\"generated-id-help\\"><span class=\\"euiSwitch__body\\"><span class=\\"euiSwitch__thumb\\"></span><span class=\\"euiSwitch__track\\"><span data-euiicon-type=\\"cross\\" class=\\"euiSwitch__icon\\"></span><span data-euiicon-type=\\"check\\" class=\\"euiSwitch__icon euiSwitch__icon--checked\\"></span></span></span></button><span class=\\"euiSwitch__label\\" id=\\"generated-id\\">Hide Toolbar</span></div><div class=\\"euiFormHelpText euiFormRow__text\\" id=\\"generated-id-help\\">Hide the toolbar when the mouse is not within the Canvas?</div></div></div></div></div></div></div></div></div></div></div></div>"`;
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/settings.test.tsx b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/settings.test.tsx
index a4f2aca9bd79c..dc2248659ce46 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/settings.test.tsx
+++ b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/settings.test.tsx
@@ -56,7 +56,9 @@ describe('<Settings />', () => {
     expect(portal(wrapper).exists()).toEqual(true);
     expect(popover(wrapper).prop('isOpen')).toEqual(true);
     expect(menuItems(wrapper).length).toEqual(2);
-    expect(portal(wrapper).text()).toEqual('SettingsAuto PlayToolbar');
+    expect(portal(wrapper).text()).toEqual(
+      'You are in a dialog. To close this dialog, hit escape.SettingsAuto PlayToolbar'
+    );
     trigger(wrapper).simulate('click');
     expect(popover(wrapper).prop('isOpen')).toEqual(false);
   });
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/danger_eui_context_menu_item.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/danger_eui_context_menu_item.tsx
index 54dc8ab6188b7..18a040bd56939 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/danger_eui_context_menu_item.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/danger_eui_context_menu_item.tsx
@@ -8,5 +8,5 @@ import styled from 'styled-components';
 import { EuiContextMenuItem } from '@elastic/eui';
 
 export const DangerEuiContextMenuItem = styled(EuiContextMenuItem)`
-  color: ${(props) => props.theme.eui.textColors.danger};
+  color: ${(props) => props.theme.eui.euiTextSubduedColor};
 `;
diff --git a/x-pack/plugins/graph/public/components/settings/use_list_keys.test.tsx b/x-pack/plugins/graph/public/components/settings/use_list_keys.test.tsx
index c80296feccdd4..aa17ef6153f92 100644
--- a/x-pack/plugins/graph/public/components/settings/use_list_keys.test.tsx
+++ b/x-pack/plugins/graph/public/components/settings/use_list_keys.test.tsx
@@ -8,6 +8,10 @@ import React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
 import { useListKeys } from './use_list_keys';
 
+jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
+  htmlIdGenerator: () => () => `id-${Math.random()}`,
+}));
+
 describe('use_list_keys', () => {
   function ListingComponent({ items }: { items: object[] }) {
     const getListKey = useListKeys(items);
diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap
index 6106503566c2f..9dfcac033ead9 100644
--- a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap
@@ -345,63 +345,53 @@ exports[`extend index management ilm summary extension should return extension w
             hasArrow={true}
             id="stackPopover"
             isOpen={false}
-            ownFocus={false}
+            ownFocus={true}
             panelPaddingSize="m"
           >
-            <EuiOutsideClickDetector
-              isDisabled={true}
-              onOutsideClick={[Function]}
+            <div
+              className="euiPopover euiPopover--anchorDownCenter"
+              id="stackPopover"
             >
               <div
-                className="euiPopover euiPopover--anchorDownCenter"
-                id="stackPopover"
-                onKeyDown={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchStart={[Function]}
+                className="euiPopover__anchor"
               >
-                <div
-                  className="euiPopover__anchor"
+                <EuiButtonEmpty
+                  onClick={[Function]}
                 >
-                  <EuiButtonEmpty
+                  <button
+                    className="euiButtonEmpty euiButtonEmpty--primary"
                     onClick={[Function]}
+                    type="button"
                   >
-                    <button
-                      className="euiButtonEmpty euiButtonEmpty--primary"
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      <EuiButtonContent
-                        className="euiButtonEmpty__content"
-                        iconSide="left"
-                        textProps={
-                          Object {
-                            "className": "euiButtonEmpty__text",
-                          }
+                    <EuiButtonContent
+                      className="euiButtonEmpty__content"
+                      iconSide="left"
+                      textProps={
+                        Object {
+                          "className": "euiButtonEmpty__text",
                         }
+                      }
+                    >
+                      <span
+                        className="euiButtonContent euiButtonEmpty__content"
                       >
                         <span
-                          className="euiButtonContent euiButtonEmpty__content"
+                          className="euiButtonEmpty__text"
                         >
-                          <span
-                            className="euiButtonEmpty__text"
+                          <FormattedMessage
+                            defaultMessage="Stack trace"
+                            id="xpack.indexLifecycleMgmt.indexLifecycleMgmtSummary.stackTraceButton"
+                            values={Object {}}
                           >
-                            <FormattedMessage
-                              defaultMessage="Stack trace"
-                              id="xpack.indexLifecycleMgmt.indexLifecycleMgmtSummary.stackTraceButton"
-                              values={Object {}}
-                            >
-                              Stack trace
-                            </FormattedMessage>
-                          </span>
+                            Stack trace
+                          </FormattedMessage>
                         </span>
-                      </EuiButtonContent>
-                    </button>
-                  </EuiButtonEmpty>
-                </div>
+                      </span>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonEmpty>
               </div>
-            </EuiOutsideClickDetector>
+            </div>
           </EuiPopover>
         </div>
       </EuiText>
@@ -594,45 +584,35 @@ exports[`extend index management ilm summary extension should return extension w
                     id="phaseExecutionPopover"
                     isOpen={false}
                     key="phaseExecutionPopover"
-                    ownFocus={false}
+                    ownFocus={true}
                     panelPaddingSize="m"
                   >
-                    <EuiOutsideClickDetector
-                      isDisabled={true}
-                      onOutsideClick={[Function]}
+                    <div
+                      className="euiPopover euiPopover--anchorDownCenter"
+                      id="phaseExecutionPopover"
                     >
                       <div
-                        className="euiPopover euiPopover--anchorDownCenter"
-                        id="phaseExecutionPopover"
-                        onKeyDown={[Function]}
-                        onMouseDown={[Function]}
-                        onMouseUp={[Function]}
-                        onTouchEnd={[Function]}
-                        onTouchStart={[Function]}
+                        className="euiPopover__anchor"
                       >
-                        <div
-                          className="euiPopover__anchor"
+                        <EuiLink
+                          onClick={[Function]}
                         >
-                          <EuiLink
+                          <button
+                            className="euiLink euiLink--primary"
                             onClick={[Function]}
+                            type="button"
                           >
-                            <button
-                              className="euiLink euiLink--primary"
-                              onClick={[Function]}
-                              type="button"
+                            <FormattedMessage
+                              defaultMessage="Show definition"
+                              id="xpack.indexLifecycleMgmt.indexLifecycleMgmtSummary.showPhaseDefinitionButton"
+                              values={Object {}}
                             >
-                              <FormattedMessage
-                                defaultMessage="Show definition"
-                                id="xpack.indexLifecycleMgmt.indexLifecycleMgmtSummary.showPhaseDefinitionButton"
-                                values={Object {}}
-                              >
-                                Show definition
-                              </FormattedMessage>
-                            </button>
-                          </EuiLink>
-                        </div>
+                              Show definition
+                            </FormattedMessage>
+                          </button>
+                        </EuiLink>
                       </div>
-                    </EuiOutsideClickDetector>
+                    </div>
                   </EuiPopover>
                 </dd>
               </EuiDescriptionListDescription>
diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx
index 4bee9d9a5209b..458fdbfcd4916 100644
--- a/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx
@@ -47,7 +47,7 @@ TimeRuler.displayName = 'TimeRuler';
 const TimeRulerTickLabel = euiStyled.text`
   font-size: 9px;
   line-height: ${(props) => props.theme.eui.euiLineHeight};
-  fill: ${(props) => props.theme.eui.textColors.subdued};
+  fill: ${(props) => props.theme.eui.euiTextSubduedColor};
   user-select: none;
   pointer-events: none;
 `;
diff --git a/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap b/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
index cc41a3a4b4e22..32b0d2eaee632 100644
--- a/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
+++ b/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
@@ -1373,12 +1373,16 @@ exports[`UploadLicense should display an error when ES says license is expired 1
                         token="euiForm.addressFormErrors"
                       >
                         <EuiCallOut
+                          aria-live="assertive"
                           className="euiForm__errors"
                           color="danger"
+                          role="alert"
                           title="Please address the highlighted errors."
                         >
                           <div
+                            aria-live="assertive"
                             className="euiCallOut euiCallOut--danger euiForm__errors"
+                            role="alert"
                           >
                             <div
                               className="euiCallOutHeader"
@@ -2091,12 +2095,16 @@ exports[`UploadLicense should display an error when ES says license is invalid 1
                         token="euiForm.addressFormErrors"
                       >
                         <EuiCallOut
+                          aria-live="assertive"
                           className="euiForm__errors"
                           color="danger"
+                          role="alert"
                           title="Please address the highlighted errors."
                         >
                           <div
+                            aria-live="assertive"
                             className="euiCallOut euiCallOut--danger euiForm__errors"
+                            role="alert"
                           >
                             <div
                               className="euiCallOutHeader"
@@ -2809,12 +2817,16 @@ exports[`UploadLicense should display an error when submitting invalid JSON 1`]
                         token="euiForm.addressFormErrors"
                       >
                         <EuiCallOut
+                          aria-live="assertive"
                           className="euiForm__errors"
                           color="danger"
+                          role="alert"
                           title="Please address the highlighted errors."
                         >
                           <div
+                            aria-live="assertive"
                             className="euiCallOut euiCallOut--danger euiForm__errors"
+                            role="alert"
                           >
                             <div
                               className="euiCallOutHeader"
@@ -3527,12 +3539,16 @@ exports[`UploadLicense should display error when ES returns error 1`] = `
                         token="euiForm.addressFormErrors"
                       >
                         <EuiCallOut
+                          aria-live="assertive"
                           className="euiForm__errors"
                           color="danger"
+                          role="alert"
                           title="Please address the highlighted errors."
                         >
                           <div
+                            aria-live="assertive"
                             className="euiCallOut euiCallOut--danger euiForm__errors"
+                            role="alert"
                           >
                             <div
                               className="euiCallOutHeader"
diff --git a/x-pack/plugins/maps/public/connected_components/mb_map/tooltip_control/__snapshots__/tooltip_popover.test.js.snap b/x-pack/plugins/maps/public/connected_components/mb_map/tooltip_control/__snapshots__/tooltip_popover.test.js.snap
index d95a418988ae7..a0ed4496c8281 100644
--- a/x-pack/plugins/maps/public/connected_components/mb_map/tooltip_control/__snapshots__/tooltip_popover.test.js.snap
+++ b/x-pack/plugins/maps/public/connected_components/mb_map/tooltip_control/__snapshots__/tooltip_popover.test.js.snap
@@ -19,7 +19,7 @@ exports[`TooltipPopover render should render tooltip popover 1`] = `
   hasArrow={true}
   id="mapTooltip"
   isOpen={true}
-  ownFocus={false}
+  ownFocus={true}
   panelPaddingSize="m"
   style={
     Object {
@@ -83,7 +83,7 @@ exports[`TooltipPopover render should render tooltip popover with custom tooltip
   hasArrow={true}
   id="mapTooltip"
   isOpen={true}
-  ownFocus={false}
+  ownFocus={true}
   panelPaddingSize="m"
   style={
     Object {
diff --git a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/tools_control/__snapshots__/tools_control.test.tsx.snap b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/tools_control/__snapshots__/tools_control.test.tsx.snap
index a57fcaa393b89..009403ba34637 100644
--- a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/tools_control/__snapshots__/tools_control.test.tsx.snap
+++ b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/tools_control/__snapshots__/tools_control.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`Should render cancel button when drawing 1`] = `
       hasArrow={true}
       id="toolsControlPopover"
       isOpen={false}
-      ownFocus={false}
+      ownFocus={true}
       panelPaddingSize="none"
     >
       <EuiContextMenu
@@ -147,7 +147,7 @@ exports[`renders 1`] = `
   hasArrow={true}
   id="toolsControlPopover"
   isOpen={false}
-  ownFocus={false}
+  ownFocus={true}
   panelPaddingSize="none"
 >
   <EuiContextMenu
diff --git a/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/__snapshots__/toc_entry_actions_popover.test.tsx.snap b/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/__snapshots__/toc_entry_actions_popover.test.tsx.snap
index ea37e76bc8494..b121f7a283e9a 100644
--- a/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/__snapshots__/toc_entry_actions_popover.test.tsx.snap
+++ b/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/__snapshots__/toc_entry_actions_popover.test.tsx.snap
@@ -41,7 +41,7 @@ exports[`TOCEntryActionsPopover is rendered 1`] = `
   hasArrow={true}
   id="testLayer"
   isOpen={false}
-  ownFocus={false}
+  ownFocus={true}
   panelPaddingSize="none"
 >
   <EuiContextMenu
@@ -154,7 +154,7 @@ exports[`TOCEntryActionsPopover should disable fit to data when supportsFitToBou
   hasArrow={true}
   id="testLayer"
   isOpen={false}
-  ownFocus={false}
+  ownFocus={true}
   panelPaddingSize="none"
 >
   <EuiContextMenu
@@ -268,7 +268,7 @@ exports[`TOCEntryActionsPopover should have "show layer" action when layer is no
   hasArrow={true}
   id="testLayer"
   isOpen={false}
-  ownFocus={false}
+  ownFocus={true}
   panelPaddingSize="none"
 >
   <EuiContextMenu
@@ -381,7 +381,7 @@ exports[`TOCEntryActionsPopover should not show edit actions in read only mode 1
   hasArrow={true}
   id="testLayer"
   isOpen={false}
-  ownFocus={false}
+  ownFocus={true}
   panelPaddingSize="none"
 >
   <EuiContextMenu
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape_options.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape_options.tsx
index 18be614afb5c3..0ec441918beba 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape_options.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape_options.tsx
@@ -89,8 +89,7 @@ export const cytoscapeOptions: cytoscape.CytoscapeOptions = {
         // @ts-ignore
         'background-image': (el: cytoscape.NodeSingular) => iconForNode(el),
         'border-width': (el: cytoscape.NodeSingular) => (el.selected() ? 2 : 1),
-        // @ts-ignore
-        color: theme.textColors.default,
+        color: theme.euiTextColors.default,
         'font-family': 'Inter UI, Segoe UI, Helvetica, Arial, sans-serif',
         'font-size': theme.euiFontSizeXS,
         'min-zoomed-font-size': parseInt(theme.euiSizeL, 10),
diff --git a/x-pack/plugins/reporting/public/components/buttons/__snapshots__/report_info_button.test.tsx.snap b/x-pack/plugins/reporting/public/components/buttons/__snapshots__/report_info_button.test.tsx.snap
index ab554e05ace2d..a79b6080ed12e 100644
--- a/x-pack/plugins/reporting/public/components/buttons/__snapshots__/report_info_button.test.tsx.snap
+++ b/x-pack/plugins/reporting/public/components/buttons/__snapshots__/report_info_button.test.tsx.snap
@@ -50,7 +50,7 @@ Array [
       />
     </EuiOverlayMask>
     <EuiFocusTrap
-      clickOutsideDisables={true}
+      clickOutsideDisables={false}
     >
       <div
         data-eui="EuiFocusTrap"
@@ -251,7 +251,7 @@ Array [
       />
     </EuiOverlayMask>
     <EuiFocusTrap
-      clickOutsideDisables={true}
+      clickOutsideDisables={false}
     >
       <div
         data-eui="EuiFocusTrap"
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
index 0abb94f6e92ff..19f65b8d287e4 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
@@ -93,7 +93,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
       id="anomaly-score-popover"
       isOpen={false}
       onClick={[Function]}
-      ownFocus={false}
+      ownFocus={true}
       panelPaddingSize="m"
       repositionOnScroll={true}
     >
diff --git a/x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap
index 6d114258224d1..55e60f545e642 100644
--- a/x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap
@@ -36,6 +36,7 @@ exports[`Paginated Table Component rendering it renders the default load more ta
           "gutterExtraSmall": "4px",
           "gutterSmall": "8px",
         },
+        "euiBodyLineHeight": 1,
         "euiBorderColor": "#343741",
         "euiBorderEditable": "2px dotted #343741",
         "euiBorderRadius": "4px",
@@ -68,7 +69,7 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         "euiButtonHeightSmall": "32px",
         "euiButtonIconTypes": Object {
           "accent": "#f990c0",
-          "danger": "#ff7575",
+          "danger": "#ff6666",
           "disabled": "#4c4e51",
           "ghost": "#ffffff",
           "primary": "#1ba9f5",
@@ -139,6 +140,8 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         "euiCodeBlockTitleColor": "#da8b45",
         "euiCodeBlockTypeColor": "#6092c0",
         "euiCodeFontFamily": "'Roboto Mono', 'Consolas', 'Menlo', 'Courier', monospace",
+        "euiCodeFontWeightBold": 700,
+        "euiCodeFontWeightRegular": 400,
         "euiCollapsibleNavGroupDarkBackgroundColor": "#131317",
         "euiCollapsibleNavGroupDarkHighContrastColor": "#1ba9f5",
         "euiCollapsibleNavGroupLightBackgroundColor": "#1a1b20",
@@ -148,9 +151,11 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         "euiColorChartBand": "#2a2b33",
         "euiColorChartLines": "#343741",
         "euiColorDanger": "#ff6666",
-        "euiColorDangerText": "#ff7575",
+        "euiColorDangerText": "#ff6666",
         "euiColorDarkShade": "#98a2b3",
         "euiColorDarkestShade": "#d4dae5",
+        "euiColorDisabled": "#434548",
+        "euiColorDisabledText": "#4c4e51",
         "euiColorEmptyShade": "#1d1e24",
         "euiColorFullShade": "#ffffff",
         "euiColorGhost": "#ffffff",
@@ -159,6 +164,11 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         "euiColorLightShade": "#343741",
         "euiColorLightestShade": "#25262e",
         "euiColorMediumShade": "#535966",
+        "euiColorPaletteDisplaySizes": Object {
+          "sizeExtraSmall": "4px",
+          "sizeMedium": "16px",
+          "sizeSmall": "8px",
+        },
         "euiColorPickerIndicatorSize": "12px",
         "euiColorPickerSaturationRange0": "#000000",
         "euiColorPickerSaturationRange1": "rgba(0, 0, 0, 0)",
@@ -220,7 +230,7 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         },
         "euiExpressionColors": Object {
           "accent": "#f990c0",
-          "danger": "#ff7575",
+          "danger": "#ff6666",
           "primary": "#1ba9f5",
           "secondary": "#7de2d1",
           "subdued": "#81858f",
@@ -234,13 +244,14 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         },
         "euiFilePickerTallHeight": "128px",
         "euiFlyoutBorder": "1px solid #343741",
-        "euiFocusBackgroundColor": "#232635",
+        "euiFocusBackgroundColor": "#08334a",
         "euiFocusRingAnimStartColor": "rgba(27, 169, 245, 0)",
         "euiFocusRingAnimStartSize": "6px",
         "euiFocusRingAnimStartSizeLarge": "10px",
         "euiFocusRingColor": "rgba(27, 169, 245, 0.3)",
         "euiFocusRingSize": "3px",
         "euiFocusRingSizeLarge": "4px",
+        "euiFocusTransparency": 0.3,
         "euiFontFamily": "'Inter UI', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
         "euiFontFeatureSettings": "calt 1 kern 1 liga 1",
         "euiFontSize": "16px",
@@ -314,6 +325,16 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         "euiKeyPadMenuSize": "96px",
         "euiLineHeight": 1.5,
         "euiLinkColor": "#1ba9f5",
+        "euiLinkColors": Object {
+          "accent": "#f990c0",
+          "danger": "#ff6666",
+          "ghost": "#ffffff",
+          "primary": "#1ba9f5",
+          "secondary": "#7de2d1",
+          "subdued": "#81858f",
+          "text": "#dfe5ef",
+          "warning": "#ffce7a",
+        },
         "euiListGroupGutterTypes": Object {
           "gutterMedium": "16px",
           "gutterSmall": "8px",
@@ -524,8 +545,8 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         "euiTableFocusClickableColor": "rgba(27, 169, 245, 0.09999999999999998)",
         "euiTableHoverClickableColor": "rgba(27, 169, 245, 0.050000000000000044)",
         "euiTableHoverColor": "#1e1e25",
-        "euiTableHoverSelectedColor": "#202230",
-        "euiTableSelectedColor": "#232635",
+        "euiTableHoverSelectedColor": "#072e43",
+        "euiTableSelectedColor": "#08334a",
         "euiTextColor": "#dfe5ef",
         "euiTextColors": Object {
           "accent": "#f990c0",
@@ -721,16 +742,6 @@ exports[`Paginated Table Component rendering it renders the default load more ta
           "xs": "4px",
           "xxl": "40px",
         },
-        "textColors": Object {
-          "accent": "#f990c0",
-          "danger": "#ff7575",
-          "ghost": "#ffffff",
-          "primary": "#1ba9f5",
-          "secondary": "#7de2d1",
-          "subdued": "#81858f",
-          "text": "#dfe5ef",
-          "warning": "#ffce7a",
-        },
         "textareaResizing": Object {
           "both": "resizeBoth",
           "horizontal": "resizeHorizontal",
diff --git a/x-pack/plugins/security_solution/public/common/components/subtitle/index.tsx b/x-pack/plugins/security_solution/public/common/components/subtitle/index.tsx
index 1b7e042e90dbf..a5e39860a7c0f 100644
--- a/x-pack/plugins/security_solution/public/common/components/subtitle/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/subtitle/index.tsx
@@ -12,7 +12,7 @@ const Wrapper = styled.div`
     margin-top: ${theme.eui.euiSizeS};
 
     .siemSubtitle__item {
-      color: ${theme.eui.textColors.subdued};
+      color: ${theme.eui.euiTextSubduedColor};
       font-size: ${theme.eui.euiFontSizeXS};
       line-height: ${theme.eui.euiLineHeight};
 
diff --git a/x-pack/plugins/security_solution/public/common/components/utility_bar/styles.tsx b/x-pack/plugins/security_solution/public/common/components/utility_bar/styles.tsx
index 0efd27c6ecbc6..ef1e36bd79e40 100644
--- a/x-pack/plugins/security_solution/public/common/components/utility_bar/styles.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/utility_bar/styles.tsx
@@ -115,7 +115,7 @@ export const BarText = styled.p.attrs({
   className: 'siemUtilityBar__text',
 })`
   ${({ theme }) => css`
-    color: ${theme.eui.textColors.subdued};
+    color: ${theme.eui.euiTextSubduedColor};
     font-size: ${theme.eui.euiFontSizeXS};
     line-height: ${theme.eui.euiLineHeight};
     white-space: nowrap;
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx
index a3d6cbea3ddc7..09c1fc1915d02 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx
@@ -67,7 +67,7 @@ const NO_WRAP_TRUNCATE_STYLE: CSSProperties = Object.freeze({
 });
 
 const DangerEuiContextMenuItem = styled(EuiContextMenuItem)`
-  color: ${(props) => props.theme.eui.textColors.danger};
+  color: ${(props) => props.theme.eui.euiColorDangerText};
 `;
 
 // eslint-disable-next-line react/display-name
diff --git a/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
index 03dc2afc625cd..58cf0ae1e9f8f 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
@@ -36,6 +36,7 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
           "gutterExtraSmall": "4px",
           "gutterSmall": "8px",
         },
+        "euiBodyLineHeight": 1,
         "euiBorderColor": "#343741",
         "euiBorderEditable": "2px dotted #343741",
         "euiBorderRadius": "4px",
@@ -68,7 +69,7 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         "euiButtonHeightSmall": "32px",
         "euiButtonIconTypes": Object {
           "accent": "#f990c0",
-          "danger": "#ff7575",
+          "danger": "#ff6666",
           "disabled": "#4c4e51",
           "ghost": "#ffffff",
           "primary": "#1ba9f5",
@@ -139,6 +140,8 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         "euiCodeBlockTitleColor": "#da8b45",
         "euiCodeBlockTypeColor": "#6092c0",
         "euiCodeFontFamily": "'Roboto Mono', 'Consolas', 'Menlo', 'Courier', monospace",
+        "euiCodeFontWeightBold": 700,
+        "euiCodeFontWeightRegular": 400,
         "euiCollapsibleNavGroupDarkBackgroundColor": "#131317",
         "euiCollapsibleNavGroupDarkHighContrastColor": "#1ba9f5",
         "euiCollapsibleNavGroupLightBackgroundColor": "#1a1b20",
@@ -148,9 +151,11 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         "euiColorChartBand": "#2a2b33",
         "euiColorChartLines": "#343741",
         "euiColorDanger": "#ff6666",
-        "euiColorDangerText": "#ff7575",
+        "euiColorDangerText": "#ff6666",
         "euiColorDarkShade": "#98a2b3",
         "euiColorDarkestShade": "#d4dae5",
+        "euiColorDisabled": "#434548",
+        "euiColorDisabledText": "#4c4e51",
         "euiColorEmptyShade": "#1d1e24",
         "euiColorFullShade": "#ffffff",
         "euiColorGhost": "#ffffff",
@@ -159,6 +164,11 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         "euiColorLightShade": "#343741",
         "euiColorLightestShade": "#25262e",
         "euiColorMediumShade": "#535966",
+        "euiColorPaletteDisplaySizes": Object {
+          "sizeExtraSmall": "4px",
+          "sizeMedium": "16px",
+          "sizeSmall": "8px",
+        },
         "euiColorPickerIndicatorSize": "12px",
         "euiColorPickerSaturationRange0": "#000000",
         "euiColorPickerSaturationRange1": "rgba(0, 0, 0, 0)",
@@ -220,7 +230,7 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         },
         "euiExpressionColors": Object {
           "accent": "#f990c0",
-          "danger": "#ff7575",
+          "danger": "#ff6666",
           "primary": "#1ba9f5",
           "secondary": "#7de2d1",
           "subdued": "#81858f",
@@ -234,13 +244,14 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         },
         "euiFilePickerTallHeight": "128px",
         "euiFlyoutBorder": "1px solid #343741",
-        "euiFocusBackgroundColor": "#232635",
+        "euiFocusBackgroundColor": "#08334a",
         "euiFocusRingAnimStartColor": "rgba(27, 169, 245, 0)",
         "euiFocusRingAnimStartSize": "6px",
         "euiFocusRingAnimStartSizeLarge": "10px",
         "euiFocusRingColor": "rgba(27, 169, 245, 0.3)",
         "euiFocusRingSize": "3px",
         "euiFocusRingSizeLarge": "4px",
+        "euiFocusTransparency": 0.3,
         "euiFontFamily": "'Inter UI', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
         "euiFontFeatureSettings": "calt 1 kern 1 liga 1",
         "euiFontSize": "16px",
@@ -314,6 +325,16 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         "euiKeyPadMenuSize": "96px",
         "euiLineHeight": 1.5,
         "euiLinkColor": "#1ba9f5",
+        "euiLinkColors": Object {
+          "accent": "#f990c0",
+          "danger": "#ff6666",
+          "ghost": "#ffffff",
+          "primary": "#1ba9f5",
+          "secondary": "#7de2d1",
+          "subdued": "#81858f",
+          "text": "#dfe5ef",
+          "warning": "#ffce7a",
+        },
         "euiListGroupGutterTypes": Object {
           "gutterMedium": "16px",
           "gutterSmall": "8px",
@@ -524,8 +545,8 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         "euiTableFocusClickableColor": "rgba(27, 169, 245, 0.09999999999999998)",
         "euiTableHoverClickableColor": "rgba(27, 169, 245, 0.050000000000000044)",
         "euiTableHoverColor": "#1e1e25",
-        "euiTableHoverSelectedColor": "#202230",
-        "euiTableSelectedColor": "#232635",
+        "euiTableHoverSelectedColor": "#072e43",
+        "euiTableSelectedColor": "#08334a",
         "euiTextColor": "#dfe5ef",
         "euiTextColors": Object {
           "accent": "#f990c0",
@@ -721,16 +742,6 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
           "xs": "4px",
           "xxl": "40px",
         },
-        "textColors": Object {
-          "accent": "#f990c0",
-          "danger": "#ff7575",
-          "ghost": "#ffffff",
-          "primary": "#1ba9f5",
-          "secondary": "#7de2d1",
-          "subdued": "#81858f",
-          "text": "#dfe5ef",
-          "warning": "#ffce7a",
-        },
         "textareaResizing": Object {
           "both": "resizeBoth",
           "horizontal": "resizeHorizontal",
diff --git a/x-pack/plugins/spaces/public/copy_saved_objects_to_space/components/resolve_all_conflicts.test.tsx b/x-pack/plugins/spaces/public/copy_saved_objects_to_space/components/resolve_all_conflicts.test.tsx
index f2d5009cb9f44..5123b10b06084 100644
--- a/x-pack/plugins/spaces/public/copy_saved_objects_to_space/components/resolve_all_conflicts.test.tsx
+++ b/x-pack/plugins/spaces/public/copy_saved_objects_to_space/components/resolve_all_conflicts.test.tsx
@@ -101,7 +101,7 @@ describe('ResolveAllConflicts', () => {
         hasArrow={true}
         id="resolveAllConflictsVisibilityPopover"
         isOpen={false}
-        ownFocus={false}
+        ownFocus={true}
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx
index eec3696a5a8cc..dab28fb03f4e0 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx
@@ -21,6 +21,10 @@ import { coreMock } from '../../../../../../../src/core/public/mocks';
 import { NotificationsStart } from 'kibana/public';
 import { toastDrilldownsCRUDError } from '../../hooks/i18n';
 
+jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
+  htmlIdGenerator: () => () => `id-${Math.random()}`,
+}));
+
 const storage = new Storage(new StubBrowserStorage());
 const toasts = coreMock.createStart().notifications.toasts;
 const FlyoutManageDrilldowns = createFlyoutManageDrilldowns({
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.test.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.test.tsx
index a30c880c3d430..a6fcd77d75040 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.test.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.test.tsx
@@ -8,6 +8,10 @@ import { Demo } from './test_samples/demo';
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 
+jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
+  htmlIdGenerator: () => () => `id-${Math.random()}`,
+}));
+
 test('configure valid URL template', () => {
   const screen = render(<Demo />);
 
diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/__tests__/__snapshots__/location_missing.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/__tests__/__snapshots__/location_missing.test.tsx.snap
index f8a9bbb16cfa5..5e3e2e1a6db46 100644
--- a/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/__tests__/__snapshots__/location_missing.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/__tests__/__snapshots__/location_missing.test.tsx.snap
@@ -75,7 +75,7 @@ exports[`LocationMissingWarning component shallow render correctly against snaps
       hasArrow={true}
       id="popover"
       isOpen={false}
-      ownFocus={false}
+      ownFocus={true}
       panelPaddingSize="m"
     >
       <EuiText
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/step_screenshot_display.test.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/step_screenshot_display.test.tsx
index 735e79f565797..97dfee949101c 100644
--- a/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/step_screenshot_display.test.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/step_screenshot_display.test.tsx
@@ -52,43 +52,33 @@ describe('StepScreenshotDisplayProps', () => {
         display="inlineBlock"
         hasArrow={true}
         isOpen={false}
-        ownFocus={false}
+        ownFocus={true}
         panelPaddingSize="m"
       >
-        <EuiOutsideClickDetector
-          isDisabled={true}
-          onOutsideClick={[Function]}
+        <div
+          className="euiPopover euiPopover--anchorRightCenter"
         >
           <div
-            className="euiPopover euiPopover--anchorRightCenter"
-            onKeyDown={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
+            className="euiPopover__anchor"
           >
-            <div
-              className="euiPopover__anchor"
-            >
-              <input
-                alt="Screenshot for step with name \\"STEP_NAME\\""
-                onClick={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                src="/api/uptime/journey/screenshot/check_group/1"
-                style={
-                  Object {
-                    "height": 180,
-                    "objectFit": "cover",
-                    "objectPosition": "center top",
-                    "width": 320,
-                  }
+            <input
+              alt="Screenshot for step with name \\"STEP_NAME\\""
+              onClick={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              src="/api/uptime/journey/screenshot/check_group/1"
+              style={
+                Object {
+                  "height": 180,
+                  "objectFit": "cover",
+                  "objectPosition": "center top",
+                  "width": 320,
                 }
-                type="image"
-              />
-            </div>
+              }
+              type="image"
+            />
           </div>
-        </EuiOutsideClickDetector>
+        </div>
       </EuiPopover>
     `);
   });
@@ -125,43 +115,33 @@ describe('StepScreenshotDisplayProps', () => {
         display="inlineBlock"
         hasArrow={true}
         isOpen={false}
-        ownFocus={false}
+        ownFocus={true}
         panelPaddingSize="m"
       >
-        <EuiOutsideClickDetector
-          isDisabled={true}
-          onOutsideClick={[Function]}
+        <div
+          className="euiPopover euiPopover--anchorRightCenter"
         >
           <div
-            className="euiPopover euiPopover--anchorRightCenter"
-            onKeyDown={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
+            className="euiPopover__anchor"
           >
-            <div
-              className="euiPopover__anchor"
-            >
-              <input
-                alt="Screenshot"
-                onClick={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                src="/api/uptime/journey/screenshot/check_group/1"
-                style={
-                  Object {
-                    "height": 180,
-                    "objectFit": "cover",
-                    "objectPosition": "center top",
-                    "width": 320,
-                  }
+            <input
+              alt="Screenshot"
+              onClick={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              src="/api/uptime/journey/screenshot/check_group/1"
+              style={
+                Object {
+                  "height": 180,
+                  "objectFit": "cover",
+                  "objectPosition": "center top",
+                  "width": 320,
                 }
-                type="image"
-              />
-            </div>
+              }
+              type="image"
+            />
           </div>
-        </EuiOutsideClickDetector>
+        </div>
       </EuiPopover>
     `);
   });
diff --git a/x-pack/plugins/uptime/public/components/overview/alerts/__tests__/add_filter_btn.test.tsx b/x-pack/plugins/uptime/public/components/overview/alerts/__tests__/add_filter_btn.test.tsx
index e8ac7cd4898ed..5b299e57f74f3 100644
--- a/x-pack/plugins/uptime/public/components/overview/alerts/__tests__/add_filter_btn.test.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/alerts/__tests__/add_filter_btn.test.tsx
@@ -32,7 +32,7 @@ describe('AddFilterButton component', () => {
         hasArrow={true}
         id="singlePanel"
         isOpen={false}
-        ownFocus={false}
+        ownFocus={true}
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
@@ -96,7 +96,7 @@ describe('AddFilterButton component', () => {
         hasArrow={true}
         id="singlePanel"
         isOpen={false}
-        ownFocus={false}
+        ownFocus={true}
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
@@ -147,7 +147,7 @@ describe('AddFilterButton component', () => {
         hasArrow={true}
         id="singlePanel"
         isOpen={false}
-        ownFocus={false}
+        ownFocus={true}
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
diff --git a/yarn.lock b/yarn.lock
index 355832d14e601..91b798bb6a938 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1433,10 +1433,10 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@30.2.0":
-  version "30.2.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-30.2.0.tgz#17bc630eb1a03e05d453b9934568cfbf3a82b736"
-  integrity sha512-VUmy7Qz49kN8a3f58bilfMwBo9zCJvHyBOUdDA1O77jFYv3+Hg7e/+uGb7Q1k6kSmCfv4r99eZWrcxVroYU4nQ==
+"@elastic/eui@30.4.1":
+  version "30.4.1"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-30.4.1.tgz#980026c981fe82264467d4228b2628a9b25821b0"
+  integrity sha512-DtdFdY4cu9lCHZty2Sc6oa8ocHfcyC29z0pdLZwUEIX2gcfY8JDnfc45iE6jB71GppVObm5ykwLytSvQo6SA9g==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"

From 4472aac4b73b497f5c9a5ce2a888a33d5eaeaef0 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Mon, 23 Nov 2020 11:48:08 -0700
Subject: [PATCH 2/8] Cleanup some imports

---
 .../components/sidebar/discover_field_search.test.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx
index a97416fa9da84..2328f91603038 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { EventHandler, MouseEvent as ReactMouseEvent } from 'react';
+import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { mountWithIntl } from '@kbn/test/jest';
 import { findTestSubject } from '@elastic/eui/lib/test';

From ee8f840869209f2adb2076679bb7c4eef862aa4a Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Mon, 23 Nov 2020 14:50:56 -0700
Subject: [PATCH 3/8] Fix a text color swap, now back to danger text

---
 .../agent_policy/components/danger_eui_context_menu_item.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/danger_eui_context_menu_item.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/danger_eui_context_menu_item.tsx
index 18a040bd56939..b90b2fd5441b5 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/danger_eui_context_menu_item.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/danger_eui_context_menu_item.tsx
@@ -8,5 +8,5 @@ import styled from 'styled-components';
 import { EuiContextMenuItem } from '@elastic/eui';
 
 export const DangerEuiContextMenuItem = styled(EuiContextMenuItem)`
-  color: ${(props) => props.theme.eui.euiTextSubduedColor};
+  color: ${(props) => props.theme.eui.euiTextColors.danger};
 `;

From 983ecac3b3bce3443a070497875d3e1b3d587509 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Wed, 25 Nov 2020 11:06:31 -0700
Subject: [PATCH 4/8] Bump EUI to v30.4.2

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 2b6a0f3b9f65d..c369f20747256 100644
--- a/package.json
+++ b/package.json
@@ -107,7 +107,7 @@
     "@elastic/datemath": "link:packages/elastic-datemath",
     "@elastic/elasticsearch": "7.10.0-rc.1",
     "@elastic/ems-client": "7.11.0",
-    "@elastic/eui": "30.4.1",
+    "@elastic/eui": "30.4.2",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/node-crypto": "1.2.1",
diff --git a/yarn.lock b/yarn.lock
index c6b073052e7c5..0801cc49f0d63 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1433,10 +1433,10 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@30.4.1":
-  version "30.4.1"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-30.4.1.tgz#980026c981fe82264467d4228b2628a9b25821b0"
-  integrity sha512-DtdFdY4cu9lCHZty2Sc6oa8ocHfcyC29z0pdLZwUEIX2gcfY8JDnfc45iE6jB71GppVObm5ykwLytSvQo6SA9g==
+"@elastic/eui@30.4.2":
+  version "30.4.2"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-30.4.2.tgz#997762e754cc931039c6f6cc4db02dff47389a09"
+  integrity sha512-A/68PMUfrW/djRJm8gqLnAyQXeyAuL8H4V4jNSzPUbpy2GmjdZma3GgpwavwM5eunty0Rjzv7ghVqDT62eycDA==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"

From b7ace13bad25fa9293e648a5aa16a5a79488a15c Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Wed, 25 Nov 2020 12:03:13 -0700
Subject: [PATCH 5/8] Revert snapshot changes from ownFocus modification

---
 .../header/__snapshots__/header.test.tsx.snap |  57 +++++----
 .../sample_data_view_data_button.test.js.snap |   2 +-
 .../__snapshots__/indices_list.test.tsx.snap  |  10 +-
 .../inspector_panel.test.tsx.snap             | 111 ++++++++--------
 .../__snapshots__/table.test.tsx.snap         |   4 +-
 .../__snapshots__/canvas.stories.storyshot    |  15 +++
 .../__snapshots__/footer.stories.storyshot    |  10 ++
 .../__snapshots__/settings.stories.storyshot  |  10 ++
 .../__snapshots__/settings.test.tsx.snap      |  42 +-----
 .../settings/__tests__/settings.test.tsx      |   4 +-
 .../extend_index_management.test.tsx.snap     | 120 ++++++++++--------
 .../tooltip_popover.test.js.snap              |   4 +-
 .../__snapshots__/tools_control.test.tsx.snap |   4 +-
 .../toc_entry_actions_popover.test.tsx.snap   |   8 +-
 .../__snapshots__/anomaly_score.test.tsx.snap |   2 +-
 .../components/resolve_all_conflicts.test.tsx |   2 +-
 .../location_missing.test.tsx.snap            |   2 +-
 .../step_screenshot_display.test.tsx          |  98 ++++++++------
 .../alerts/__tests__/add_filter_btn.test.tsx  |   6 +-
 19 files changed, 283 insertions(+), 228 deletions(-)

diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index 299a11ae1fc9c..16f48836cab54 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -4753,45 +4753,54 @@ exports[`Header renders 1`] = `
                         hasArrow={true}
                         id="headerHelpMenu"
                         isOpen={false}
-                        ownFocus={true}
+                        ownFocus={false}
                         panelPaddingSize="m"
                         repositionOnScroll={true}
                       >
-                        <div
-                          className="euiPopover euiPopover--anchorDownRight"
-                          data-test-subj="helpMenuButton"
-                          id="headerHelpMenu"
+                        <EuiOutsideClickDetector
+                          onOutsideClick={[Function]}
                         >
                           <div
-                            className="euiPopover__anchor"
+                            className="euiPopover euiPopover--anchorDownRight"
+                            data-test-subj="helpMenuButton"
+                            id="headerHelpMenu"
+                            onKeyDown={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseUp={[Function]}
+                            onTouchEnd={[Function]}
+                            onTouchStart={[Function]}
                           >
-                            <EuiHeaderSectionItemButton
-                              aria-expanded={false}
-                              aria-haspopup="true"
-                              aria-label="Help menu"
-                              onClick={[Function]}
+                            <div
+                              className="euiPopover__anchor"
                             >
-                              <button
+                              <EuiHeaderSectionItemButton
                                 aria-expanded={false}
                                 aria-haspopup="true"
                                 aria-label="Help menu"
-                                className="euiHeaderSectionItem__button"
                                 onClick={[Function]}
-                                type="button"
                               >
-                                <EuiIcon
-                                  size="m"
-                                  type="help"
+                                <button
+                                  aria-expanded={false}
+                                  aria-haspopup="true"
+                                  aria-label="Help menu"
+                                  className="euiHeaderSectionItem__button"
+                                  onClick={[Function]}
+                                  type="button"
                                 >
-                                  <span
-                                    data-euiicon-type="help"
+                                  <EuiIcon
                                     size="m"
-                                  />
-                                </EuiIcon>
-                              </button>
-                            </EuiHeaderSectionItemButton>
+                                    type="help"
+                                  >
+                                    <span
+                                      data-euiicon-type="help"
+                                      size="m"
+                                    />
+                                  </EuiIcon>
+                                </button>
+                              </EuiHeaderSectionItemButton>
+                            </div>
                           </div>
-                        </div>
+                        </EuiOutsideClickDetector>
                       </EuiPopover>
                     </HeaderHelpMenuUI>
                   </InjectIntl(HeaderHelpMenuUI)>
diff --git a/src/plugins/home/public/application/components/__snapshots__/sample_data_view_data_button.test.js.snap b/src/plugins/home/public/application/components/__snapshots__/sample_data_view_data_button.test.js.snap
index 1889d14238cac..1484ce6b1a81f 100644
--- a/src/plugins/home/public/application/components/__snapshots__/sample_data_view_data_button.test.js.snap
+++ b/src/plugins/home/public/application/components/__snapshots__/sample_data_view_data_button.test.js.snap
@@ -19,7 +19,7 @@ exports[`should render popover when appLinks is not empty 1`] = `
   hasArrow={true}
   id="sampleDataLinksecommerce"
   isOpen={false}
-  ownFocus={true}
+  ownFocus={false}
   panelPaddingSize="none"
 >
   <EuiContextMenu
diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/__snapshots__/indices_list.test.tsx.snap b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/__snapshots__/indices_list.test.tsx.snap
index ca41dddf6197e..db527ea81b2cb 100644
--- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/__snapshots__/indices_list.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/__snapshots__/indices_list.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`IndicesList should change pages 1`] = `
         hasArrow={true}
         id="customizablePagination"
         isOpen={false}
-        ownFocus={true}
+        ownFocus={false}
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
@@ -154,7 +154,7 @@ exports[`IndicesList should change per page 1`] = `
         hasArrow={true}
         id="customizablePagination"
         isOpen={false}
-        ownFocus={true}
+        ownFocus={false}
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
@@ -269,7 +269,7 @@ exports[`IndicesList should highlight the query in the matches 1`] = `
         hasArrow={true}
         id="customizablePagination"
         isOpen={false}
-        ownFocus={true}
+        ownFocus={false}
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
@@ -370,7 +370,7 @@ exports[`IndicesList should render normally 1`] = `
         hasArrow={true}
         id="customizablePagination"
         isOpen={false}
-        ownFocus={true}
+        ownFocus={false}
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
@@ -535,7 +535,7 @@ exports[`IndicesList updating props should render all new indices 1`] = `
         hasArrow={true}
         id="customizablePagination"
         isOpen={false}
-        ownFocus={true}
+        ownFocus={false}
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
diff --git a/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap b/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap
index cd5a23ceb1169..1d110c235d5f9 100644
--- a/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap
+++ b/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap
@@ -240,75 +240,84 @@ exports[`InspectorPanel should render as expected 1`] = `
                     hasArrow={true}
                     id="inspectorViewChooser"
                     isOpen={false}
-                    ownFocus={true}
+                    ownFocus={false}
                     panelPaddingSize="none"
                     repositionOnScroll={true}
                   >
-                    <div
-                      className="euiPopover euiPopover--anchorDownRight"
-                      id="inspectorViewChooser"
+                    <EuiOutsideClickDetector
+                      onOutsideClick={[Function]}
                     >
                       <div
-                        className="euiPopover__anchor"
+                        className="euiPopover euiPopover--anchorDownRight"
+                        id="inspectorViewChooser"
+                        onKeyDown={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseUp={[Function]}
+                        onTouchEnd={[Function]}
+                        onTouchStart={[Function]}
                       >
-                        <EuiButtonEmpty
-                          data-test-subj="inspectorViewChooser"
-                          iconSide="right"
-                          iconType="arrowDown"
-                          onClick={[Function]}
-                          size="s"
+                        <div
+                          className="euiPopover__anchor"
                         >
-                          <button
-                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
+                          <EuiButtonEmpty
                             data-test-subj="inspectorViewChooser"
+                            iconSide="right"
+                            iconType="arrowDown"
                             onClick={[Function]}
-                            type="button"
+                            size="s"
                           >
-                            <EuiButtonContent
-                              className="euiButtonEmpty__content"
-                              iconSide="right"
-                              iconType="arrowDown"
-                              textProps={
-                                Object {
-                                  "className": "euiButtonEmpty__text",
-                                }
-                              }
+                            <button
+                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
+                              data-test-subj="inspectorViewChooser"
+                              onClick={[Function]}
+                              type="button"
                             >
-                              <span
-                                className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                              <EuiButtonContent
+                                className="euiButtonEmpty__content"
+                                iconSide="right"
+                                iconType="arrowDown"
+                                textProps={
+                                  Object {
+                                    "className": "euiButtonEmpty__text",
+                                  }
+                                }
                               >
-                                <EuiIcon
-                                  className="euiButtonContent__icon"
-                                  size="m"
-                                  type="arrowDown"
+                                <span
+                                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                                 >
-                                  <span
+                                  <EuiIcon
                                     className="euiButtonContent__icon"
-                                    data-euiicon-type="arrowDown"
                                     size="m"
-                                  />
-                                </EuiIcon>
-                                <span
-                                  className="euiButtonEmpty__text"
-                                >
-                                  <FormattedMessage
-                                    defaultMessage="View: {viewName}"
-                                    id="inspector.view"
-                                    values={
-                                      Object {
-                                        "viewName": "View 1",
-                                      }
-                                    }
+                                    type="arrowDown"
                                   >
-                                    View: View 1
-                                  </FormattedMessage>
+                                    <span
+                                      className="euiButtonContent__icon"
+                                      data-euiicon-type="arrowDown"
+                                      size="m"
+                                    />
+                                  </EuiIcon>
+                                  <span
+                                    className="euiButtonEmpty__text"
+                                  >
+                                    <FormattedMessage
+                                      defaultMessage="View: {viewName}"
+                                      id="inspector.view"
+                                      values={
+                                        Object {
+                                          "viewName": "View 1",
+                                        }
+                                      }
+                                    >
+                                      View: View 1
+                                    </FormattedMessage>
+                                  </span>
                                 </span>
-                              </span>
-                            </EuiButtonContent>
-                          </button>
-                        </EuiButtonEmpty>
+                              </EuiButtonContent>
+                            </button>
+                          </EuiButtonEmpty>
+                        </div>
                       </div>
-                    </div>
+                    </EuiOutsideClickDetector>
                   </EuiPopover>
                 </InspectorViewChooser>
               </div>
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/table.test.tsx.snap b/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/table.test.tsx.snap
index bb426c91e827c..67bbb46cfb607 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/table.test.tsx.snap
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/table.test.tsx.snap
@@ -60,7 +60,7 @@ exports[`Table prevents saved objects from being deleted 1`] = `
           display="inlineBlock"
           hasArrow={true}
           isOpen={false}
-          ownFocus={true}
+          ownFocus={false}
           panelPaddingSize="m"
         >
           <EuiFormRow
@@ -276,7 +276,7 @@ exports[`Table should render normally 1`] = `
           display="inlineBlock"
           hasArrow={true}
           isOpen={false}
-          ownFocus={true}
+          ownFocus={false}
           panelPaddingSize="m"
         >
           <EuiFormRow
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/__stories__/__snapshots__/canvas.stories.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/__stories__/__snapshots__/canvas.stories.storyshot
index 869f44488e902..7d7b2a0ae9341 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/__stories__/__snapshots__/canvas.stories.storyshot
+++ b/x-pack/plugins/canvas/shareable_runtime/components/__stories__/__snapshots__/canvas.stories.storyshot
@@ -1447,6 +1447,11 @@ exports[`Storyshots shareables/Canvas component 1`] = `
                   <div
                     className="euiPopover euiPopover--anchorUpRight"
                     id="settings"
+                    onKeyDown={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchStart={[Function]}
                   >
                     <div
                       className="euiPopover__anchor"
@@ -2924,6 +2929,11 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
                   <div
                     className="euiPopover euiPopover--anchorUpRight"
                     id="settings"
+                    onKeyDown={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchStart={[Function]}
                   >
                     <div
                       className="euiPopover__anchor"
@@ -3216,6 +3226,11 @@ exports[`Storyshots shareables/Canvas contextual: hello 1`] = `
                   <div
                     className="euiPopover euiPopover--anchorUpRight"
                     id="settings"
+                    onKeyDown={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseUp={[Function]}
+                    onTouchEnd={[Function]}
+                    onTouchStart={[Function]}
                   >
                     <div
                       className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/__stories__/__snapshots__/footer.stories.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/footer/__stories__/__snapshots__/footer.stories.storyshot
index 7612e50a39047..28c01c3fba8e5 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/__stories__/__snapshots__/footer.stories.storyshot
+++ b/x-pack/plugins/canvas/shareable_runtime/components/footer/__stories__/__snapshots__/footer.stories.storyshot
@@ -1400,6 +1400,11 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
                 <div
                   className="euiPopover euiPopover--anchorUpRight"
                   id="settings"
+                  onKeyDown={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseUp={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
                 >
                   <div
                     className="euiPopover__anchor"
@@ -1646,6 +1651,11 @@ exports[`Storyshots shareables/Footer contextual: hello 1`] = `
                 <div
                   className="euiPopover euiPopover--anchorUpRight"
                   id="settings"
+                  onKeyDown={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseUp={[Function]}
+                  onTouchEnd={[Function]}
+                  onTouchStart={[Function]}
                 >
                   <div
                     className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__stories__/__snapshots__/settings.stories.storyshot b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__stories__/__snapshots__/settings.stories.storyshot
index 7bcbd247a9919..b7c3470cef653 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__stories__/__snapshots__/settings.stories.storyshot
+++ b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__stories__/__snapshots__/settings.stories.storyshot
@@ -23,6 +23,11 @@ exports[`Storyshots shareables/Footer/Settings component 1`] = `
       <div
         className="euiPopover euiPopover--anchorUpRight"
         id="settings"
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        onTouchEnd={[Function]}
+        onTouchStart={[Function]}
       >
         <div
           className="euiPopover__anchor"
@@ -70,6 +75,11 @@ exports[`Storyshots shareables/Footer/Settings contextual 1`] = `
       <div
         className="euiPopover euiPopover--anchorUpRight"
         id="settings"
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        onTouchEnd={[Function]}
+        onTouchStart={[Function]}
       >
         <div
           className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap
index eaedc2c3b5d61..b5049b7f1166a 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap
+++ b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap
@@ -6,24 +6,16 @@ exports[`<Settings /> can navigate Autoplay Settings 1`] = `
     data-eui="EuiFocusTrap"
   >
     <div
-      aria-describedby="generated-id"
-      aria-live="off"
+      aria-live="assertive"
       aria-modal="true"
       class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--top"
       role="dialog"
       style="top: -16px; left: -22px; z-index: 2000;"
-      tabindex="0"
     >
       <div
         class="euiPopover__panelArrow euiPopover__panelArrow--top"
         style="left: 10px; top: 0px;"
       />
-      <p
-        class="euiScreenReaderOnly"
-        id="generated-id"
-      >
-        You are in a dialog. To close this dialog, hit escape.
-      </p>
       <div>
         <div
           class="euiContextMenu"
@@ -104,24 +96,16 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
     data-eui="EuiFocusTrap"
   >
     <div
-      aria-describedby="generated-id"
-      aria-live="off"
+      aria-live="assertive"
       aria-modal="true"
       class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--top euiPopover__panel-isOpen"
       role="dialog"
       style="top: -16px; left: -22px; z-index: 2000;"
-      tabindex="0"
     >
       <div
         class="euiPopover__panelArrow euiPopover__panelArrow--top"
         style="left: 10px; top: 0px;"
       />
-      <p
-        class="euiScreenReaderOnly"
-        id="generated-id"
-      >
-        You are in a dialog. To close this dialog, hit escape.
-      </p>
       <div>
         <div
           class="euiContextMenu"
@@ -354,24 +338,16 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 1`] =
     data-eui="EuiFocusTrap"
   >
     <div
-      aria-describedby="generated-id"
-      aria-live="off"
+      aria-live="assertive"
       aria-modal="true"
       class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--top"
       role="dialog"
       style="top: -16px; left: -22px; z-index: 2000;"
-      tabindex="0"
     >
       <div
         class="euiPopover__panelArrow euiPopover__panelArrow--top"
         style="left: 10px; top: 0px;"
       />
-      <p
-        class="euiScreenReaderOnly"
-        id="generated-id"
-      >
-        You are in a dialog. To close this dialog, hit escape.
-      </p>
       <div>
         <div
           class="euiContextMenu"
@@ -452,24 +428,16 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
     data-eui="EuiFocusTrap"
   >
     <div
-      aria-describedby="generated-id"
-      aria-live="off"
+      aria-live="assertive"
       aria-modal="true"
       class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--top euiPopover__panel-isOpen"
       role="dialog"
       style="top: -16px; left: -22px; z-index: 2000;"
-      tabindex="0"
     >
       <div
         class="euiPopover__panelArrow euiPopover__panelArrow--top"
         style="left: 10px; top: 0px;"
       />
-      <p
-        class="euiScreenReaderOnly"
-        id="generated-id"
-      >
-        You are in a dialog. To close this dialog, hit escape.
-      </p>
       <div>
         <div
           class="euiContextMenu"
@@ -632,4 +600,4 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
 </div>
 `;
 
-exports[`<Settings /> can navigate Toolbar Settings, closes when activated 3`] = `"<div><div data-eui=\\"EuiFocusTrap\\"><div class=\\"euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--top\\" tabindex=\\"0\\" aria-live=\\"off\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-describedby=\\"generated-id\\" style=\\"top: -16px; left: -22px; z-index: 2000;\\"><div class=\\"euiPopover__panelArrow euiPopover__panelArrow--top\\" style=\\"left: 10px; top: 0px;\\"></div><p id=\\"generated-id\\" class=\\"euiScreenReaderOnly\\">You are in a dialog. To close this dialog, hit escape.</p><div><div class=\\"euiContextMenu\\" style=\\"height: 0px;\\"><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutLeft\\" tabindex=\\"0\\"><div class=\\"euiContextMenuPanelTitle\\"><span class=\\"euiContextMenu__itemLayout\\">Settings</span></div><div><div><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"play\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenuItem__text\\">Auto Play</span><span data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></span></span></button><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"boxesHorizontal\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenuItem__text\\">Toolbar</span><span data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></span></span></button></div></div></div><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInLeft\\" tabindex=\\"0\\"><button class=\\"euiContextMenuPanelTitle\\" type=\\"button\\" data-test-subj=\\"contextMenuPanelTitleButton\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenu__text\\">Toolbar</span></span></button><div><div><div style=\\"padding: 16px;\\"><div class=\\"euiFormRow\\" id=\\"generated-id-row\\"><div class=\\"euiFormRow__fieldWrapper\\"><div class=\\"euiSwitch\\"><button id=\\"generated-id\\" aria-checked=\\"true\\" class=\\"euiSwitch__button\\" role=\\"switch\\" type=\\"button\\" aria-labelledby=\\"generated-id\\" data-test-subj=\\"hideToolbarSwitch\\" name=\\"toolbarHide\\" aria-describedby=\\"generated-id-help\\"><span class=\\"euiSwitch__body\\"><span class=\\"euiSwitch__thumb\\"></span><span class=\\"euiSwitch__track\\"><span data-euiicon-type=\\"cross\\" class=\\"euiSwitch__icon\\"></span><span data-euiicon-type=\\"check\\" class=\\"euiSwitch__icon euiSwitch__icon--checked\\"></span></span></span></button><span class=\\"euiSwitch__label\\" id=\\"generated-id\\">Hide Toolbar</span></div><div class=\\"euiFormHelpText euiFormRow__text\\" id=\\"generated-id-help\\">Hide the toolbar when the mouse is not within the Canvas?</div></div></div></div></div></div></div></div></div></div></div></div>"`;
+exports[`<Settings /> can navigate Toolbar Settings, closes when activated 3`] = `"<div><div data-eui=\\"EuiFocusTrap\\"><div class=\\"euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPopover__panel euiPopover__panel--top\\" aria-live=\\"assertive\\" role=\\"dialog\\" aria-modal=\\"true\\" style=\\"top: -16px; left: -22px; z-index: 2000;\\"><div class=\\"euiPopover__panelArrow euiPopover__panelArrow--top\\" style=\\"left: 10px; top: 0px;\\"></div><div><div class=\\"euiContextMenu\\" style=\\"height: 0px;\\"><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutLeft\\" tabindex=\\"0\\"><div class=\\"euiContextMenuPanelTitle\\"><span class=\\"euiContextMenu__itemLayout\\">Settings</span></div><div><div><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"play\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenuItem__text\\">Auto Play</span><span data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></span></span></button><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"boxesHorizontal\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenuItem__text\\">Toolbar</span><span data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></span></span></button></div></div></div><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInLeft\\" tabindex=\\"0\\"><button class=\\"euiContextMenuPanelTitle\\" type=\\"button\\" data-test-subj=\\"contextMenuPanelTitleButton\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenu__text\\">Toolbar</span></span></button><div><div><div style=\\"padding: 16px;\\"><div class=\\"euiFormRow\\" id=\\"generated-id-row\\"><div class=\\"euiFormRow__fieldWrapper\\"><div class=\\"euiSwitch\\"><button id=\\"generated-id\\" aria-checked=\\"true\\" class=\\"euiSwitch__button\\" role=\\"switch\\" type=\\"button\\" aria-labelledby=\\"generated-id\\" data-test-subj=\\"hideToolbarSwitch\\" name=\\"toolbarHide\\" aria-describedby=\\"generated-id-help\\"><span class=\\"euiSwitch__body\\"><span class=\\"euiSwitch__thumb\\"></span><span class=\\"euiSwitch__track\\"><span data-euiicon-type=\\"cross\\" class=\\"euiSwitch__icon\\"></span><span data-euiicon-type=\\"check\\" class=\\"euiSwitch__icon euiSwitch__icon--checked\\"></span></span></span></button><span class=\\"euiSwitch__label\\" id=\\"generated-id\\">Hide Toolbar</span></div><div class=\\"euiFormHelpText euiFormRow__text\\" id=\\"generated-id-help\\">Hide the toolbar when the mouse is not within the Canvas?</div></div></div></div></div></div></div></div></div></div></div></div>"`;
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/settings.test.tsx b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/settings.test.tsx
index dc2248659ce46..a4f2aca9bd79c 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/settings.test.tsx
+++ b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/settings.test.tsx
@@ -56,9 +56,7 @@ describe('<Settings />', () => {
     expect(portal(wrapper).exists()).toEqual(true);
     expect(popover(wrapper).prop('isOpen')).toEqual(true);
     expect(menuItems(wrapper).length).toEqual(2);
-    expect(portal(wrapper).text()).toEqual(
-      'You are in a dialog. To close this dialog, hit escape.SettingsAuto PlayToolbar'
-    );
+    expect(portal(wrapper).text()).toEqual('SettingsAuto PlayToolbar');
     trigger(wrapper).simulate('click');
     expect(popover(wrapper).prop('isOpen')).toEqual(false);
   });
diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap
index 9dfcac033ead9..b7c1044754b31 100644
--- a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap
@@ -345,53 +345,62 @@ exports[`extend index management ilm summary extension should return extension w
             hasArrow={true}
             id="stackPopover"
             isOpen={false}
-            ownFocus={true}
+            ownFocus={false}
             panelPaddingSize="m"
           >
-            <div
-              className="euiPopover euiPopover--anchorDownCenter"
-              id="stackPopover"
+            <EuiOutsideClickDetector
+              onOutsideClick={[Function]}
             >
               <div
-                className="euiPopover__anchor"
+                className="euiPopover euiPopover--anchorDownCenter"
+                id="stackPopover"
+                onKeyDown={[Function]}
+                onMouseDown={[Function]}
+                onMouseUp={[Function]}
+                onTouchEnd={[Function]}
+                onTouchStart={[Function]}
               >
-                <EuiButtonEmpty
-                  onClick={[Function]}
+                <div
+                  className="euiPopover__anchor"
                 >
-                  <button
-                    className="euiButtonEmpty euiButtonEmpty--primary"
+                  <EuiButtonEmpty
                     onClick={[Function]}
-                    type="button"
                   >
-                    <EuiButtonContent
-                      className="euiButtonEmpty__content"
-                      iconSide="left"
-                      textProps={
-                        Object {
-                          "className": "euiButtonEmpty__text",
-                        }
-                      }
+                    <button
+                      className="euiButtonEmpty euiButtonEmpty--primary"
+                      onClick={[Function]}
+                      type="button"
                     >
-                      <span
-                        className="euiButtonContent euiButtonEmpty__content"
+                      <EuiButtonContent
+                        className="euiButtonEmpty__content"
+                        iconSide="left"
+                        textProps={
+                          Object {
+                            "className": "euiButtonEmpty__text",
+                          }
+                        }
                       >
                         <span
-                          className="euiButtonEmpty__text"
+                          className="euiButtonContent euiButtonEmpty__content"
                         >
-                          <FormattedMessage
-                            defaultMessage="Stack trace"
-                            id="xpack.indexLifecycleMgmt.indexLifecycleMgmtSummary.stackTraceButton"
-                            values={Object {}}
+                          <span
+                            className="euiButtonEmpty__text"
                           >
-                            Stack trace
-                          </FormattedMessage>
+                            <FormattedMessage
+                              defaultMessage="Stack trace"
+                              id="xpack.indexLifecycleMgmt.indexLifecycleMgmtSummary.stackTraceButton"
+                              values={Object {}}
+                            >
+                              Stack trace
+                            </FormattedMessage>
+                          </span>
                         </span>
-                      </span>
-                    </EuiButtonContent>
-                  </button>
-                </EuiButtonEmpty>
+                      </EuiButtonContent>
+                    </button>
+                  </EuiButtonEmpty>
+                </div>
               </div>
-            </div>
+            </EuiOutsideClickDetector>
           </EuiPopover>
         </div>
       </EuiText>
@@ -584,35 +593,44 @@ exports[`extend index management ilm summary extension should return extension w
                     id="phaseExecutionPopover"
                     isOpen={false}
                     key="phaseExecutionPopover"
-                    ownFocus={true}
+                    ownFocus={false}
                     panelPaddingSize="m"
                   >
-                    <div
-                      className="euiPopover euiPopover--anchorDownCenter"
-                      id="phaseExecutionPopover"
+                    <EuiOutsideClickDetector
+                      onOutsideClick={[Function]}
                     >
                       <div
-                        className="euiPopover__anchor"
+                        className="euiPopover euiPopover--anchorDownCenter"
+                        id="phaseExecutionPopover"
+                        onKeyDown={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseUp={[Function]}
+                        onTouchEnd={[Function]}
+                        onTouchStart={[Function]}
                       >
-                        <EuiLink
-                          onClick={[Function]}
+                        <div
+                          className="euiPopover__anchor"
                         >
-                          <button
-                            className="euiLink euiLink--primary"
+                          <EuiLink
                             onClick={[Function]}
-                            type="button"
                           >
-                            <FormattedMessage
-                              defaultMessage="Show definition"
-                              id="xpack.indexLifecycleMgmt.indexLifecycleMgmtSummary.showPhaseDefinitionButton"
-                              values={Object {}}
+                            <button
+                              className="euiLink euiLink--primary"
+                              onClick={[Function]}
+                              type="button"
                             >
-                              Show definition
-                            </FormattedMessage>
-                          </button>
-                        </EuiLink>
+                              <FormattedMessage
+                                defaultMessage="Show definition"
+                                id="xpack.indexLifecycleMgmt.indexLifecycleMgmtSummary.showPhaseDefinitionButton"
+                                values={Object {}}
+                              >
+                                Show definition
+                              </FormattedMessage>
+                            </button>
+                          </EuiLink>
+                        </div>
                       </div>
-                    </div>
+                    </EuiOutsideClickDetector>
                   </EuiPopover>
                 </dd>
               </EuiDescriptionListDescription>
diff --git a/x-pack/plugins/maps/public/connected_components/mb_map/tooltip_control/__snapshots__/tooltip_popover.test.js.snap b/x-pack/plugins/maps/public/connected_components/mb_map/tooltip_control/__snapshots__/tooltip_popover.test.js.snap
index a0ed4496c8281..d95a418988ae7 100644
--- a/x-pack/plugins/maps/public/connected_components/mb_map/tooltip_control/__snapshots__/tooltip_popover.test.js.snap
+++ b/x-pack/plugins/maps/public/connected_components/mb_map/tooltip_control/__snapshots__/tooltip_popover.test.js.snap
@@ -19,7 +19,7 @@ exports[`TooltipPopover render should render tooltip popover 1`] = `
   hasArrow={true}
   id="mapTooltip"
   isOpen={true}
-  ownFocus={true}
+  ownFocus={false}
   panelPaddingSize="m"
   style={
     Object {
@@ -83,7 +83,7 @@ exports[`TooltipPopover render should render tooltip popover with custom tooltip
   hasArrow={true}
   id="mapTooltip"
   isOpen={true}
-  ownFocus={true}
+  ownFocus={false}
   panelPaddingSize="m"
   style={
     Object {
diff --git a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/tools_control/__snapshots__/tools_control.test.tsx.snap b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/tools_control/__snapshots__/tools_control.test.tsx.snap
index 009403ba34637..a57fcaa393b89 100644
--- a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/tools_control/__snapshots__/tools_control.test.tsx.snap
+++ b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/tools_control/__snapshots__/tools_control.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`Should render cancel button when drawing 1`] = `
       hasArrow={true}
       id="toolsControlPopover"
       isOpen={false}
-      ownFocus={true}
+      ownFocus={false}
       panelPaddingSize="none"
     >
       <EuiContextMenu
@@ -147,7 +147,7 @@ exports[`renders 1`] = `
   hasArrow={true}
   id="toolsControlPopover"
   isOpen={false}
-  ownFocus={true}
+  ownFocus={false}
   panelPaddingSize="none"
 >
   <EuiContextMenu
diff --git a/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/__snapshots__/toc_entry_actions_popover.test.tsx.snap b/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/__snapshots__/toc_entry_actions_popover.test.tsx.snap
index b121f7a283e9a..ea37e76bc8494 100644
--- a/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/__snapshots__/toc_entry_actions_popover.test.tsx.snap
+++ b/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/__snapshots__/toc_entry_actions_popover.test.tsx.snap
@@ -41,7 +41,7 @@ exports[`TOCEntryActionsPopover is rendered 1`] = `
   hasArrow={true}
   id="testLayer"
   isOpen={false}
-  ownFocus={true}
+  ownFocus={false}
   panelPaddingSize="none"
 >
   <EuiContextMenu
@@ -154,7 +154,7 @@ exports[`TOCEntryActionsPopover should disable fit to data when supportsFitToBou
   hasArrow={true}
   id="testLayer"
   isOpen={false}
-  ownFocus={true}
+  ownFocus={false}
   panelPaddingSize="none"
 >
   <EuiContextMenu
@@ -268,7 +268,7 @@ exports[`TOCEntryActionsPopover should have "show layer" action when layer is no
   hasArrow={true}
   id="testLayer"
   isOpen={false}
-  ownFocus={true}
+  ownFocus={false}
   panelPaddingSize="none"
 >
   <EuiContextMenu
@@ -381,7 +381,7 @@ exports[`TOCEntryActionsPopover should not show edit actions in read only mode 1
   hasArrow={true}
   id="testLayer"
   isOpen={false}
-  ownFocus={true}
+  ownFocus={false}
   panelPaddingSize="none"
 >
   <EuiContextMenu
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
index 19f65b8d287e4..0abb94f6e92ff 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
@@ -93,7 +93,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
       id="anomaly-score-popover"
       isOpen={false}
       onClick={[Function]}
-      ownFocus={true}
+      ownFocus={false}
       panelPaddingSize="m"
       repositionOnScroll={true}
     >
diff --git a/x-pack/plugins/spaces/public/copy_saved_objects_to_space/components/resolve_all_conflicts.test.tsx b/x-pack/plugins/spaces/public/copy_saved_objects_to_space/components/resolve_all_conflicts.test.tsx
index 5123b10b06084..f2d5009cb9f44 100644
--- a/x-pack/plugins/spaces/public/copy_saved_objects_to_space/components/resolve_all_conflicts.test.tsx
+++ b/x-pack/plugins/spaces/public/copy_saved_objects_to_space/components/resolve_all_conflicts.test.tsx
@@ -101,7 +101,7 @@ describe('ResolveAllConflicts', () => {
         hasArrow={true}
         id="resolveAllConflictsVisibilityPopover"
         isOpen={false}
-        ownFocus={true}
+        ownFocus={false}
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/__tests__/__snapshots__/location_missing.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/__tests__/__snapshots__/location_missing.test.tsx.snap
index 5e3e2e1a6db46..f8a9bbb16cfa5 100644
--- a/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/__tests__/__snapshots__/location_missing.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/__tests__/__snapshots__/location_missing.test.tsx.snap
@@ -75,7 +75,7 @@ exports[`LocationMissingWarning component shallow render correctly against snaps
       hasArrow={true}
       id="popover"
       isOpen={false}
-      ownFocus={true}
+      ownFocus={false}
       panelPaddingSize="m"
     >
       <EuiText
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/step_screenshot_display.test.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/step_screenshot_display.test.tsx
index 97dfee949101c..3bec9116ef99f 100644
--- a/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/step_screenshot_display.test.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/step_screenshot_display.test.tsx
@@ -52,33 +52,42 @@ describe('StepScreenshotDisplayProps', () => {
         display="inlineBlock"
         hasArrow={true}
         isOpen={false}
-        ownFocus={true}
+        ownFocus={false}
         panelPaddingSize="m"
       >
-        <div
-          className="euiPopover euiPopover--anchorRightCenter"
+        <EuiOutsideClickDetector
+          onOutsideClick={[Function]}
         >
           <div
-            className="euiPopover__anchor"
+            className="euiPopover euiPopover--anchorRightCenter"
+            onKeyDown={[Function]}
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
+            onTouchEnd={[Function]}
+            onTouchStart={[Function]}
           >
-            <input
-              alt="Screenshot for step with name \\"STEP_NAME\\""
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-              src="/api/uptime/journey/screenshot/check_group/1"
-              style={
-                Object {
-                  "height": 180,
-                  "objectFit": "cover",
-                  "objectPosition": "center top",
-                  "width": 320,
+            <div
+              className="euiPopover__anchor"
+            >
+              <input
+                alt="Screenshot for step with name \\"STEP_NAME\\""
+                onClick={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                src="/api/uptime/journey/screenshot/check_group/1"
+                style={
+                  Object {
+                    "height": 180,
+                    "objectFit": "cover",
+                    "objectPosition": "center top",
+                    "width": 320,
+                  }
                 }
-              }
-              type="image"
-            />
+                type="image"
+              />
+            </div>
           </div>
-        </div>
+        </EuiOutsideClickDetector>
       </EuiPopover>
     `);
   });
@@ -115,33 +124,42 @@ describe('StepScreenshotDisplayProps', () => {
         display="inlineBlock"
         hasArrow={true}
         isOpen={false}
-        ownFocus={true}
+        ownFocus={false}
         panelPaddingSize="m"
       >
-        <div
-          className="euiPopover euiPopover--anchorRightCenter"
+        <EuiOutsideClickDetector
+          onOutsideClick={[Function]}
         >
           <div
-            className="euiPopover__anchor"
+            className="euiPopover euiPopover--anchorRightCenter"
+            onKeyDown={[Function]}
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
+            onTouchEnd={[Function]}
+            onTouchStart={[Function]}
           >
-            <input
-              alt="Screenshot"
-              onClick={[Function]}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-              src="/api/uptime/journey/screenshot/check_group/1"
-              style={
-                Object {
-                  "height": 180,
-                  "objectFit": "cover",
-                  "objectPosition": "center top",
-                  "width": 320,
+            <div
+              className="euiPopover__anchor"
+            >
+              <input
+                alt="Screenshot"
+                onClick={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                src="/api/uptime/journey/screenshot/check_group/1"
+                style={
+                  Object {
+                    "height": 180,
+                    "objectFit": "cover",
+                    "objectPosition": "center top",
+                    "width": 320,
+                  }
                 }
-              }
-              type="image"
-            />
+                type="image"
+              />
+            </div>
           </div>
-        </div>
+        </EuiOutsideClickDetector>
       </EuiPopover>
     `);
   });
diff --git a/x-pack/plugins/uptime/public/components/overview/alerts/__tests__/add_filter_btn.test.tsx b/x-pack/plugins/uptime/public/components/overview/alerts/__tests__/add_filter_btn.test.tsx
index 5b299e57f74f3..e8ac7cd4898ed 100644
--- a/x-pack/plugins/uptime/public/components/overview/alerts/__tests__/add_filter_btn.test.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/alerts/__tests__/add_filter_btn.test.tsx
@@ -32,7 +32,7 @@ describe('AddFilterButton component', () => {
         hasArrow={true}
         id="singlePanel"
         isOpen={false}
-        ownFocus={true}
+        ownFocus={false}
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
@@ -96,7 +96,7 @@ describe('AddFilterButton component', () => {
         hasArrow={true}
         id="singlePanel"
         isOpen={false}
-        ownFocus={true}
+        ownFocus={false}
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
@@ -147,7 +147,7 @@ describe('AddFilterButton component', () => {
         hasArrow={true}
         id="singlePanel"
         isOpen={false}
-        ownFocus={true}
+        ownFocus={false}
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel

From 540a493a631adcca74ffdd4f1a3d996ff4045e8d Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Mon, 30 Nov 2020 15:11:12 -0700
Subject: [PATCH 6/8] Clean up alert flyout test actions to better represent
 user actions

---
 x-pack/test/functional/services/uptime/alerts.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/x-pack/test/functional/services/uptime/alerts.ts b/x-pack/test/functional/services/uptime/alerts.ts
index 6ade7dc485a88..34778e04da4a9 100644
--- a/x-pack/test/functional/services/uptime/alerts.ts
+++ b/x-pack/test/functional/services/uptime/alerts.ts
@@ -46,7 +46,7 @@ export function UptimeAlertsProvider({ getService }: FtrProviderContext) {
     ) {
       await testSubjects.click(expressionAttribute);
       await testSubjects.setValue(fieldAttribute, value);
-      return browser.pressKeys(browser.keys.ESCAPE);
+      return await testSubjects.click(expressionAttribute);
     },
     async setAlertStatusNumTimes(value: string) {
       return this.setAlertExpressionValue(
@@ -72,7 +72,7 @@ export function UptimeAlertsProvider({ getService }: FtrProviderContext) {
       for (let i = 0; i < optionAttributes.length; i += 1) {
         await testSubjects.click(optionAttributes[i], 5000);
       }
-      return browser.pressKeys(browser.keys.ESCAPE);
+      return testSubjects.click(expressionAttribute, 5000);
     },
     async setMonitorStatusSelectableToHours() {
       return this.setAlertExpressionSelectable(
@@ -99,17 +99,17 @@ export function UptimeAlertsProvider({ getService }: FtrProviderContext) {
     async clickLocationExpression(filter: string) {
       await testSubjects.click('uptimeCreateStatusAlert.filter_location');
       await testSubjects.click(`filter-popover-item_${filter}`);
-      return browser.pressKeys(browser.keys.ESCAPE);
+      return testSubjects.click('uptimeCreateStatusAlert.filter_location');
     },
     async clickPortExpression(filter: string) {
       await testSubjects.click('uptimeCreateStatusAlert.filter_port');
       await testSubjects.click(`filter-popover-item_${filter}`);
-      return browser.pressKeys(browser.keys.ESCAPE);
+      return testSubjects.click('uptimeCreateStatusAlert.filter_port');
     },
     async clickTypeExpression(filter: string) {
       await testSubjects.click('uptimeCreateStatusAlert.filter_scheme');
       await testSubjects.click(`filter-popover-item_${filter}`);
-      return browser.pressKeys(browser.keys.ESCAPE);
+      return testSubjects.click('uptimeCreateStatusAlert.filter_scheme');
     },
     async clickSaveAlertButton() {
       return testSubjects.click('saveAlertButton');

From 5910e818d1be1ca9086621c0083ac02612a95e54 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Tue, 1 Dec 2020 09:19:39 -0700
Subject: [PATCH 7/8] Upgrade EUI to 30.5.1

---
 package.json                                  |   2 +-
 .../__snapshots__/palette.stories.storyshot   | 287 +-------
 .../font_picker.stories.storyshot             | 109 +--
 .../palette_picker.stories.storyshot          | 621 +-----------------
 .../text_style_picker.stories.storyshot       |  90 +--
 .../__snapshots__/edit_var.stories.storyshot  | 332 +---------
 .../extended_template.stories.storyshot       | 195 +-----
 .../public/components/search_bar.tsx          |   2 +-
 .../__snapshots__/icon_select.test.js.snap    |   1 +
 .../add_tooltip_field_popover.test.tsx.snap   |   2 +
 yarn.lock                                     |  17 +-
 11 files changed, 46 insertions(+), 1612 deletions(-)

diff --git a/package.json b/package.json
index 56a5e4c3c860d..9b4c99747c67f 100644
--- a/package.json
+++ b/package.json
@@ -107,7 +107,7 @@
     "@elastic/datemath": "link:packages/elastic-datemath",
     "@elastic/elasticsearch": "7.10.0-rc.1",
     "@elastic/ems-client": "7.11.0",
-    "@elastic/eui": "30.4.2",
+    "@elastic/eui": "30.5.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/node-crypto": "1.2.1",
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__stories__/__snapshots__/palette.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__stories__/__snapshots__/palette.stories.storyshot
index fccf5d2b56651..f0d673eaf316d 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__stories__/__snapshots__/palette.stories.storyshot
+++ b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__stories__/__snapshots__/palette.stories.storyshot
@@ -10,7 +10,7 @@ exports[`Storyshots arguments/Palette default 1`] = `
   }
 >
   <div
-    className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+    className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
     onKeyDown={[Function]}
     onMouseDown={[Function]}
     onMouseUp={[Function]}
@@ -19,290 +19,7 @@ exports[`Storyshots arguments/Palette default 1`] = `
   >
     <div
       className="euiPopover__anchor"
-    >
-      <input
-        type="hidden"
-        value="paul_tor_14"
-      />
-      <div
-        className="euiFormControlLayout euiFormControlLayout--compressed"
-      >
-        <div
-          className="euiFormControlLayout__childrenWrapper"
-        >
-          <span
-            className="euiScreenReaderOnly"
-            id="generated-id"
-          >
-            Select an option: 
-            <span
-              className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
-            >
-              <span
-                className="euiColorPaletteDisplayFixed__bleedArea"
-              >
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#882E72",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#B178A6",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#D6C1DE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#1965B0",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#5289C7",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#7BAFDE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#4EB265",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#90C987",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#CAE0AB",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F7EE55",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F6C141",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F1932D",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#E8601C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#DC050C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-              </span>
-            </span>
-            , is selected
-          </span>
-          <button
-            aria-haspopup="true"
-            aria-labelledby="undefined generated-id"
-            className="euiSuperSelectControl euiSuperSelectControl--compressed"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            readOnly={false}
-            type="button"
-          >
-            <span
-              className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
-            >
-              <span
-                className="euiColorPaletteDisplayFixed__bleedArea"
-              >
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#882E72",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#B178A6",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#D6C1DE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#1965B0",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#5289C7",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#7BAFDE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#4EB265",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#90C987",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#CAE0AB",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F7EE55",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F6C141",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F1932D",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#E8601C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#DC050C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-              </span>
-            </span>
-          </button>
-          <div
-            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-          >
-            <span
-              className="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                className="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="arrowDown"
-              />
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;
diff --git a/x-pack/plugins/canvas/public/components/font_picker/__stories__/__snapshots__/font_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/font_picker/__stories__/__snapshots__/font_picker.stories.storyshot
index 12daa9c98377d..560ac717913f7 100644
--- a/x-pack/plugins/canvas/public/components/font_picker/__stories__/__snapshots__/font_picker.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/font_picker/__stories__/__snapshots__/font_picker.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots components/FontPicker default 1`] = `
 <div
-  className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+  className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
   onKeyDown={[Function]}
   onMouseDown={[Function]}
   onMouseUp={[Function]}
@@ -11,54 +11,13 @@ exports[`Storyshots components/FontPicker default 1`] = `
 >
   <div
     className="euiPopover__anchor"
-  >
-    <input
-      defaultValue=""
-      type="hidden"
-    />
-    <div
-      className="euiFormControlLayout euiFormControlLayout--compressed"
-    >
-      <div
-        className="euiFormControlLayout__childrenWrapper"
-      >
-        <span
-          className="euiScreenReaderOnly"
-          id="generated-id"
-        >
-          Select an option: 
-          , is selected
-        </span>
-        <button
-          aria-haspopup="true"
-          aria-labelledby="undefined generated-id"
-          className="euiSuperSelectControl euiSuperSelectControl--compressed"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        />
-        <div
-          className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-        >
-          <span
-            className="euiFormControlLayoutCustomIcon"
-          >
-            <span
-              aria-hidden="true"
-              className="euiFormControlLayoutCustomIcon__icon"
-              data-euiicon-type="arrowDown"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
+  />
 </div>
 `;
 
 exports[`Storyshots components/FontPicker with value 1`] = `
 <div
-  className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+  className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
   onKeyDown={[Function]}
   onMouseDown={[Function]}
   onMouseUp={[Function]}
@@ -67,66 +26,6 @@ exports[`Storyshots components/FontPicker with value 1`] = `
 >
   <div
     className="euiPopover__anchor"
-  >
-    <input
-      type="hidden"
-      value="'American Typewriter', 'Courier New', Courier, Monaco, mono"
-    />
-    <div
-      className="euiFormControlLayout euiFormControlLayout--compressed"
-    >
-      <div
-        className="euiFormControlLayout__childrenWrapper"
-      >
-        <span
-          className="euiScreenReaderOnly"
-          id="generated-id"
-        >
-          Select an option: 
-          <div
-            style={
-              Object {
-                "fontFamily": "'American Typewriter', 'Courier New', Courier, Monaco, mono",
-              }
-            }
-          >
-            American Typewriter
-          </div>
-          , is selected
-        </span>
-        <button
-          aria-haspopup="true"
-          aria-labelledby="undefined generated-id"
-          className="euiSuperSelectControl euiSuperSelectControl--compressed"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          <div
-            style={
-              Object {
-                "fontFamily": "'American Typewriter', 'Courier New', Courier, Monaco, mono",
-              }
-            }
-          >
-            American Typewriter
-          </div>
-        </button>
-        <div
-          className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-        >
-          <span
-            className="euiFormControlLayoutCustomIcon"
-          >
-            <span
-              aria-hidden="true"
-              className="euiFormControlLayoutCustomIcon__icon"
-              data-euiicon-type="arrowDown"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
+  />
 </div>
 `;
diff --git a/x-pack/plugins/canvas/public/components/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot
index dc9c7f4c492cf..680f792f4d1b9 100644
--- a/x-pack/plugins/canvas/public/components/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot
@@ -9,7 +9,7 @@ exports[`Storyshots components/Color/PalettePicker clearable 1`] = `
   }
 >
   <div
-    className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+    className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
     onKeyDown={[Function]}
     onMouseDown={[Function]}
     onMouseUp={[Function]}
@@ -18,50 +18,7 @@ exports[`Storyshots components/Color/PalettePicker clearable 1`] = `
   >
     <div
       className="euiPopover__anchor"
-    >
-      <input
-        type="hidden"
-        value="clear"
-      />
-      <div
-        className="euiFormControlLayout euiFormControlLayout--compressed"
-      >
-        <div
-          className="euiFormControlLayout__childrenWrapper"
-        >
-          <span
-            className="euiScreenReaderOnly"
-            id="generated-id"
-          >
-            Select an option: None, is selected
-          </span>
-          <button
-            aria-haspopup="true"
-            aria-labelledby="undefined generated-id"
-            className="euiSuperSelectControl euiSuperSelectControl--compressed"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            readOnly={false}
-            type="button"
-          >
-            None
-          </button>
-          <div
-            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-          >
-            <span
-              className="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                className="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="arrowDown"
-              />
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;
@@ -75,7 +32,7 @@ exports[`Storyshots components/Color/PalettePicker default 1`] = `
   }
 >
   <div
-    className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+    className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
     onKeyDown={[Function]}
     onMouseDown={[Function]}
     onMouseUp={[Function]}
@@ -84,290 +41,7 @@ exports[`Storyshots components/Color/PalettePicker default 1`] = `
   >
     <div
       className="euiPopover__anchor"
-    >
-      <input
-        type="hidden"
-        value="paul_tor_14"
-      />
-      <div
-        className="euiFormControlLayout euiFormControlLayout--compressed"
-      >
-        <div
-          className="euiFormControlLayout__childrenWrapper"
-        >
-          <span
-            className="euiScreenReaderOnly"
-            id="generated-id"
-          >
-            Select an option: 
-            <span
-              className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
-            >
-              <span
-                className="euiColorPaletteDisplayFixed__bleedArea"
-              >
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#882E72",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#B178A6",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#D6C1DE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#1965B0",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#5289C7",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#7BAFDE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#4EB265",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#90C987",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#CAE0AB",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F7EE55",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F6C141",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F1932D",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#E8601C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#DC050C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-              </span>
-            </span>
-            , is selected
-          </span>
-          <button
-            aria-haspopup="true"
-            aria-labelledby="undefined generated-id"
-            className="euiSuperSelectControl euiSuperSelectControl--compressed"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            readOnly={false}
-            type="button"
-          >
-            <span
-              className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
-            >
-              <span
-                className="euiColorPaletteDisplayFixed__bleedArea"
-              >
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#882E72",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#B178A6",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#D6C1DE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#1965B0",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#5289C7",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#7BAFDE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#4EB265",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#90C987",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#CAE0AB",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F7EE55",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F6C141",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F1932D",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#E8601C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#DC050C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-              </span>
-            </span>
-          </button>
-          <div
-            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-          >
-            <span
-              className="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                className="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="arrowDown"
-              />
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;
@@ -381,7 +55,7 @@ exports[`Storyshots components/Color/PalettePicker interactive 1`] = `
   }
 >
   <div
-    className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+    className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
     onKeyDown={[Function]}
     onMouseDown={[Function]}
     onMouseUp={[Function]}
@@ -390,290 +64,7 @@ exports[`Storyshots components/Color/PalettePicker interactive 1`] = `
   >
     <div
       className="euiPopover__anchor"
-    >
-      <input
-        type="hidden"
-        value="paul_tor_14"
-      />
-      <div
-        className="euiFormControlLayout euiFormControlLayout--compressed"
-      >
-        <div
-          className="euiFormControlLayout__childrenWrapper"
-        >
-          <span
-            className="euiScreenReaderOnly"
-            id="generated-id"
-          >
-            Select an option: 
-            <span
-              className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
-            >
-              <span
-                className="euiColorPaletteDisplayFixed__bleedArea"
-              >
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#882E72",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#B178A6",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#D6C1DE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#1965B0",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#5289C7",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#7BAFDE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#4EB265",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#90C987",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#CAE0AB",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F7EE55",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F6C141",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F1932D",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#E8601C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#DC050C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-              </span>
-            </span>
-            , is selected
-          </span>
-          <button
-            aria-haspopup="true"
-            aria-labelledby="undefined generated-id"
-            className="euiSuperSelectControl euiSuperSelectControl--compressed"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            readOnly={false}
-            type="button"
-          >
-            <span
-              className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
-            >
-              <span
-                className="euiColorPaletteDisplayFixed__bleedArea"
-              >
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#882E72",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#B178A6",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#D6C1DE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#1965B0",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#5289C7",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#7BAFDE",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#4EB265",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#90C987",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#CAE0AB",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F7EE55",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F6C141",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#F1932D",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#E8601C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-                <span
-                  style={
-                    Object {
-                      "backgroundColor": "#DC050C",
-                      "width": "7.142857142857143%",
-                    }
-                  }
-                />
-              </span>
-            </span>
-          </button>
-          <div
-            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-          >
-            <span
-              className="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                className="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="arrowDown"
-              />
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;
diff --git a/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot
index 90f94b5141874..0dd682a534899 100644
--- a/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot
@@ -18,7 +18,7 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
         className="euiFlexItem"
       >
         <div
-          className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+          className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
           onKeyDown={[Function]}
           onMouseDown={[Function]}
           onMouseUp={[Function]}
@@ -27,48 +27,7 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
         >
           <div
             className="euiPopover__anchor"
-          >
-            <input
-              defaultValue=""
-              type="hidden"
-            />
-            <div
-              className="euiFormControlLayout euiFormControlLayout--compressed"
-            >
-              <div
-                className="euiFormControlLayout__childrenWrapper"
-              >
-                <span
-                  className="euiScreenReaderOnly"
-                  id="generated-id"
-                >
-                  Select an option: 
-                  , is selected
-                </span>
-                <button
-                  aria-haspopup="true"
-                  aria-labelledby="undefined generated-id"
-                  className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  type="button"
-                />
-                <div
-                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                >
-                  <span
-                    className="euiFormControlLayoutCustomIcon"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="euiFormControlLayoutCustomIcon__icon"
-                      data-euiicon-type="arrowDown"
-                    />
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -491,7 +450,7 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
         className="euiFlexItem"
       >
         <div
-          className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+          className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
           onKeyDown={[Function]}
           onMouseDown={[Function]}
           onMouseUp={[Function]}
@@ -500,48 +459,7 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
         >
           <div
             className="euiPopover__anchor"
-          >
-            <input
-              defaultValue=""
-              type="hidden"
-            />
-            <div
-              className="euiFormControlLayout euiFormControlLayout--compressed"
-            >
-              <div
-                className="euiFormControlLayout__childrenWrapper"
-              >
-                <span
-                  className="euiScreenReaderOnly"
-                  id="generated-id"
-                >
-                  Select an option: 
-                  , is selected
-                </span>
-                <button
-                  aria-haspopup="true"
-                  aria-labelledby="undefined generated-id"
-                  className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  type="button"
-                />
-                <div
-                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                >
-                  <span
-                    className="euiFormControlLayoutCustomIcon"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="euiFormControlLayoutCustomIcon__icon"
-                      data-euiicon-type="arrowDown"
-                    />
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
diff --git a/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot b/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot
index 8b0d2e84cff11..4779c2e217dda 100644
--- a/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot
@@ -79,7 +79,7 @@ Array [
           className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+            className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
             onKeyDown={[Function]}
             onMouseDown={[Function]}
             onMouseUp={[Function]}
@@ -88,86 +88,7 @@ Array [
           >
             <div
               className="euiPopover__anchor"
-            >
-              <input
-                id="generated-id"
-                type="hidden"
-                value="boolean"
-              />
-              <div
-                className="euiFormControlLayout euiFormControlLayout--compressed"
-              >
-                <div
-                  className="euiFormControlLayout__childrenWrapper"
-                >
-                  <span
-                    className="euiScreenReaderOnly"
-                    id="generated-id"
-                  >
-                    Select an option: 
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis7 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenBoolean"
-                          size="m"
-                        />
-                      </span>
-                       
-                      <span>
-                        Boolean
-                      </span>
-                    </div>
-                    , is selected
-                  </span>
-                  <button
-                    aria-haspopup="true"
-                    aria-labelledby="generated-id generated-id"
-                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    type="button"
-                  >
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis7 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenBoolean"
-                          size="m"
-                        />
-                      </span>
-                       
-                      <span>
-                        Boolean
-                      </span>
-                    </div>
-                  </button>
-                  <div
-                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                  >
-                    <span
-                      className="euiFormControlLayoutCustomIcon"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="euiFormControlLayoutCustomIcon__icon"
-                        data-euiicon-type="arrowDown"
-                      />
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
+            />
           </div>
         </div>
       </div>
@@ -442,7 +363,7 @@ Array [
           className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+            className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
             onKeyDown={[Function]}
             onMouseDown={[Function]}
             onMouseUp={[Function]}
@@ -451,86 +372,7 @@ Array [
           >
             <div
               className="euiPopover__anchor"
-            >
-              <input
-                id="generated-id"
-                type="hidden"
-                value="number"
-              />
-              <div
-                className="euiFormControlLayout euiFormControlLayout--compressed"
-              >
-                <div
-                  className="euiFormControlLayout__childrenWrapper"
-                >
-                  <span
-                    className="euiScreenReaderOnly"
-                    id="generated-id"
-                  >
-                    Select an option: 
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis0 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenNumber"
-                          size="m"
-                        />
-                      </span>
-                       
-                      <span>
-                        Number
-                      </span>
-                    </div>
-                    , is selected
-                  </span>
-                  <button
-                    aria-haspopup="true"
-                    aria-labelledby="generated-id generated-id"
-                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    type="button"
-                  >
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis0 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenNumber"
-                          size="m"
-                        />
-                      </span>
-                       
-                      <span>
-                        Number
-                      </span>
-                    </div>
-                  </button>
-                  <div
-                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                  >
-                    <span
-                      className="euiFormControlLayoutCustomIcon"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="euiFormControlLayoutCustomIcon__icon"
-                        data-euiicon-type="arrowDown"
-                      />
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
+            />
           </div>
         </div>
       </div>
@@ -746,7 +588,7 @@ Array [
           className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+            className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
             onKeyDown={[Function]}
             onMouseDown={[Function]}
             onMouseUp={[Function]}
@@ -755,86 +597,7 @@ Array [
           >
             <div
               className="euiPopover__anchor"
-            >
-              <input
-                id="generated-id"
-                type="hidden"
-                value="string"
-              />
-              <div
-                className="euiFormControlLayout euiFormControlLayout--compressed"
-              >
-                <div
-                  className="euiFormControlLayout__childrenWrapper"
-                >
-                  <span
-                    className="euiScreenReaderOnly"
-                    id="generated-id"
-                  >
-                    Select an option: 
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenString"
-                          size="m"
-                        />
-                      </span>
-                       
-                      <span>
-                        String
-                      </span>
-                    </div>
-                    , is selected
-                  </span>
-                  <button
-                    aria-haspopup="true"
-                    aria-labelledby="generated-id generated-id"
-                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    type="button"
-                  >
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenString"
-                          size="m"
-                        />
-                      </span>
-                       
-                      <span>
-                        String
-                      </span>
-                    </div>
-                  </button>
-                  <div
-                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                  >
-                    <span
-                      className="euiFormControlLayoutCustomIcon"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="euiFormControlLayoutCustomIcon__icon"
-                        data-euiicon-type="arrowDown"
-                      />
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
+            />
           </div>
         </div>
       </div>
@@ -1026,7 +789,7 @@ Array [
           className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+            className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
             onKeyDown={[Function]}
             onMouseDown={[Function]}
             onMouseUp={[Function]}
@@ -1035,86 +798,7 @@ Array [
           >
             <div
               className="euiPopover__anchor"
-            >
-              <input
-                id="generated-id"
-                type="hidden"
-                value="string"
-              />
-              <div
-                className="euiFormControlLayout euiFormControlLayout--compressed"
-              >
-                <div
-                  className="euiFormControlLayout__childrenWrapper"
-                >
-                  <span
-                    className="euiScreenReaderOnly"
-                    id="generated-id"
-                  >
-                    Select an option: 
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenString"
-                          size="m"
-                        />
-                      </span>
-                       
-                      <span>
-                        String
-                      </span>
-                    </div>
-                    , is selected
-                  </span>
-                  <button
-                    aria-haspopup="true"
-                    aria-labelledby="generated-id generated-id"
-                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    type="button"
-                  >
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenString"
-                          size="m"
-                        />
-                      </span>
-                       
-                      <span>
-                        String
-                      </span>
-                    </div>
-                  </button>
-                  <div
-                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                  >
-                    <span
-                      className="euiFormControlLayoutCustomIcon"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="euiFormControlLayoutCustomIcon__icon"
-                        data-euiicon-type="arrowDown"
-                      />
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
+            />
           </div>
         </div>
       </div>
diff --git a/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot b/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot
index e41e48b9d199f..9e0e5544fa7a0 100644
--- a/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot
+++ b/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot
@@ -293,7 +293,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
             className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+              className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onMouseUp={[Function]}
@@ -302,68 +302,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
             >
               <div
                 className="euiPopover__anchor"
-              >
-                <input
-                  id="generated-id"
-                  type="hidden"
-                  value="solid"
-                />
-                <div
-                  className="euiFormControlLayout euiFormControlLayout--compressed"
-                >
-                  <div
-                    className="euiFormControlLayout__childrenWrapper"
-                  >
-                    <span
-                      className="euiScreenReaderOnly"
-                      id="generated-id"
-                    >
-                      Select an option: 
-                      <div
-                        style={
-                          Object {
-                            "border": "4px solid",
-                            "height": 16,
-                          }
-                        }
-                      />
-                      , is selected
-                    </span>
-                    <button
-                      aria-haspopup="true"
-                      aria-labelledby="generated-id generated-id"
-                      className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      type="button"
-                    >
-                      <div
-                        style={
-                          Object {
-                            "border": "4px solid",
-                            "height": 16,
-                          }
-                        }
-                      />
-                    </button>
-                    <div
-                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                    >
-                      <span
-                        className="euiFormControlLayoutCustomIcon"
-                      >
-                        <span
-                          aria-hidden="true"
-                          className="euiFormControlLayoutCustomIcon__icon"
-                          data-euiicon-type="arrowDown"
-                        />
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              />
             </div>
           </div>
         </div>
@@ -757,7 +696,7 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
           className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+            className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
             onKeyDown={[Function]}
             onMouseDown={[Function]}
             onMouseUp={[Function]}
@@ -766,68 +705,7 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
           >
             <div
               className="euiPopover__anchor"
-            >
-              <input
-                id="generated-id"
-                type="hidden"
-                value="dotted"
-              />
-              <div
-                className="euiFormControlLayout euiFormControlLayout--compressed"
-              >
-                <div
-                  className="euiFormControlLayout__childrenWrapper"
-                >
-                  <span
-                    className="euiScreenReaderOnly"
-                    id="generated-id"
-                  >
-                    Select an option: 
-                    <div
-                      style={
-                        Object {
-                          "border": "4px dotted",
-                          "height": 16,
-                        }
-                      }
-                    />
-                    , is selected
-                  </span>
-                  <button
-                    aria-haspopup="true"
-                    aria-labelledby="generated-id generated-id"
-                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    type="button"
-                  >
-                    <div
-                      style={
-                        Object {
-                          "border": "4px dotted",
-                          "height": 16,
-                        }
-                      }
-                    />
-                  </button>
-                  <div
-                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                  >
-                    <span
-                      className="euiFormControlLayoutCustomIcon"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="euiFormControlLayoutCustomIcon__icon"
-                        data-euiicon-type="arrowDown"
-                      />
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
+            />
           </div>
         </div>
       </div>
@@ -1233,7 +1111,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
             className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+              className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onMouseUp={[Function]}
@@ -1242,68 +1120,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
             >
               <div
                 className="euiPopover__anchor"
-              >
-                <input
-                  id="generated-id"
-                  type="hidden"
-                  value="solid"
-                />
-                <div
-                  className="euiFormControlLayout euiFormControlLayout--compressed"
-                >
-                  <div
-                    className="euiFormControlLayout__childrenWrapper"
-                  >
-                    <span
-                      className="euiScreenReaderOnly"
-                      id="generated-id"
-                    >
-                      Select an option: 
-                      <div
-                        style={
-                          Object {
-                            "border": "4px solid",
-                            "height": 16,
-                          }
-                        }
-                      />
-                      , is selected
-                    </span>
-                    <button
-                      aria-haspopup="true"
-                      aria-labelledby="generated-id generated-id"
-                      className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onKeyDown={[Function]}
-                      type="button"
-                    >
-                      <div
-                        style={
-                          Object {
-                            "border": "4px solid",
-                            "height": 16,
-                          }
-                        }
-                      />
-                    </button>
-                    <div
-                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                    >
-                      <span
-                        className="euiFormControlLayoutCustomIcon"
-                      >
-                        <span
-                          aria-hidden="true"
-                          className="euiFormControlLayoutCustomIcon__icon"
-                          data-euiicon-type="arrowDown"
-                        />
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              />
             </div>
           </div>
         </div>
diff --git a/x-pack/plugins/global_search_bar/public/components/search_bar.tsx b/x-pack/plugins/global_search_bar/public/components/search_bar.tsx
index 3746e636066a9..e6ca328966023 100644
--- a/x-pack/plugins/global_search_bar/public/components/search_bar.tsx
+++ b/x-pack/plugins/global_search_bar/public/components/search_bar.tsx
@@ -252,6 +252,7 @@ export function SearchBar({
 
   return (
     <EuiSelectableTemplateSitewide
+      isPreFiltered
       onChange={onChange}
       options={options}
       popoverButtonBreakpoints={['xs', 's']}
@@ -267,7 +268,6 @@ export function SearchBar({
         </EuiHeaderSectionItemButton>
       }
       searchProps={{
-        onSearch: () => undefined,
         onKeyUpCapture: (e: React.KeyboardEvent<HTMLInputElement>) =>
           setSearchValue(e.currentTarget.value),
         'data-test-subj': 'nav-search-input',
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap
index 8fa69e1a5b467..c0505426d1f63 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap
@@ -44,6 +44,7 @@ exports[`Should render icon select 1`] = `
     clickOutsideDisables={true}
   >
     <EuiSelectable
+      isPreFiltered={false}
       onChange={[Function]}
       options={
         Array [
diff --git a/x-pack/plugins/maps/public/components/tooltip_selector/__snapshots__/add_tooltip_field_popover.test.tsx.snap b/x-pack/plugins/maps/public/components/tooltip_selector/__snapshots__/add_tooltip_field_popover.test.tsx.snap
index be362c2ae0422..84534515dfa57 100644
--- a/x-pack/plugins/maps/public/components/tooltip_selector/__snapshots__/add_tooltip_field_popover.test.tsx.snap
+++ b/x-pack/plugins/maps/public/components/tooltip_selector/__snapshots__/add_tooltip_field_popover.test.tsx.snap
@@ -26,6 +26,7 @@ exports[`Should remove selected fields from selectable 1`] = `
   panelPaddingSize="none"
 >
   <EuiSelectable
+    isPreFiltered={false}
     onChange={[Function]}
     options={
       Array [
@@ -96,6 +97,7 @@ exports[`Should render 1`] = `
   panelPaddingSize="none"
 >
   <EuiSelectable
+    isPreFiltered={false}
     onChange={[Function]}
     options={
       Array [
diff --git a/yarn.lock b/yarn.lock
index c22e7e891c6dd..7041759fdc807 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1433,10 +1433,10 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@30.4.2":
-  version "30.4.2"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-30.4.2.tgz#997762e754cc931039c6f6cc4db02dff47389a09"
-  integrity sha512-A/68PMUfrW/djRJm8gqLnAyQXeyAuL8H4V4jNSzPUbpy2GmjdZma3GgpwavwM5eunty0Rjzv7ghVqDT62eycDA==
+"@elastic/eui@30.5.1":
+  version "30.5.1"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-30.5.1.tgz#c9782c2f4763d563de6afcc2fc56d81c1e5b183c"
+  integrity sha512-W8rW49prYG0XHNdMWGTxNW50Kef3/fh+IL5mzMOKLao1W4h0F45efIDbnIHyjGl//akknIIEa6bwdTU4dmLBgA==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"
@@ -1448,7 +1448,7 @@
     "@types/vfile-message" "^2.0.0"
     chroma-js "^2.1.0"
     classnames "^2.2.6"
-    highlight.js "^9.12.0"
+    highlight.js "^9.18.5"
     lodash "^4.17.20"
     numeral "^2.0.6"
     prop-types "^15.6.0"
@@ -15636,11 +15636,16 @@ heap@^0.2.6:
   resolved "https://registry.yarnpkg.com/heap/-/heap-0.2.6.tgz#087e1f10b046932fc8594dd9e6d378afc9d1e5ac"
   integrity sha1-CH4fELBGky/IWU3Z5tN4r8nR5aw=
 
-highlight.js@9.15.10, highlight.js@^9.12.0, highlight.js@~9.15.0, highlight.js@~9.15.1:
+highlight.js@9.15.10, highlight.js@~9.15.0, highlight.js@~9.15.1:
   version "9.15.10"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.15.10.tgz#7b18ed75c90348c045eef9ed08ca1319a2219ad2"
   integrity sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw==
 
+highlight.js@^9.18.5:
+  version "9.18.5"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
+  integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
+
 highlight.js@~9.12.0:
   version "9.12.0"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"

From cac53b1c4d8609e3db3c084f4ac091c4dcc7b368 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Tue, 1 Dec 2020 11:59:02 -0700
Subject: [PATCH 8/8] More accurate test interaction

---
 x-pack/test/functional/services/uptime/alerts.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/x-pack/test/functional/services/uptime/alerts.ts b/x-pack/test/functional/services/uptime/alerts.ts
index 34778e04da4a9..fa0c035b9183e 100644
--- a/x-pack/test/functional/services/uptime/alerts.ts
+++ b/x-pack/test/functional/services/uptime/alerts.ts
@@ -8,6 +8,7 @@ import { FtrProviderContext } from '../../ftr_provider_context';
 
 export function UptimeAlertsProvider({ getService }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
+  const find = getService('find');
   const browser = getService('browser');
 
   return {
@@ -99,17 +100,17 @@ export function UptimeAlertsProvider({ getService }: FtrProviderContext) {
     async clickLocationExpression(filter: string) {
       await testSubjects.click('uptimeCreateStatusAlert.filter_location');
       await testSubjects.click(`filter-popover-item_${filter}`);
-      return testSubjects.click('uptimeCreateStatusAlert.filter_location');
+      return find.clickByCssSelector('body');
     },
     async clickPortExpression(filter: string) {
       await testSubjects.click('uptimeCreateStatusAlert.filter_port');
       await testSubjects.click(`filter-popover-item_${filter}`);
-      return testSubjects.click('uptimeCreateStatusAlert.filter_port');
+      return find.clickByCssSelector('body');
     },
     async clickTypeExpression(filter: string) {
       await testSubjects.click('uptimeCreateStatusAlert.filter_scheme');
       await testSubjects.click(`filter-popover-item_${filter}`);
-      return testSubjects.click('uptimeCreateStatusAlert.filter_scheme');
+      return find.clickByCssSelector('body');
     },
     async clickSaveAlertButton() {
       return testSubjects.click('saveAlertButton');