From 8e97838dcf6aa3538b41ce0b51208c6aa4bbf991 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 10 Feb 2020 12:17:33 -0600
Subject: [PATCH 01/10] eui to v19.0.0

---
 package.json                                   |  2 +-
 packages/kbn-ui-shared-deps/package.json       |  2 +-
 .../plugins/kbn_tp_run_pipeline/package.json   |  2 +-
 .../kbn_tp_custom_visualizations/package.json  |  2 +-
 .../kbn_tp_embeddable_explorer/package.json    |  2 +-
 .../kbn_tp_sample_panel_action/package.json    |  2 +-
 x-pack/package.json                            |  2 +-
 yarn.lock                                      | 18 ++++++++++++++----
 8 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index a79d41a67f580..e1f7c0b8b1909 100644
--- a/package.json
+++ b/package.json
@@ -120,7 +120,7 @@
     "@elastic/charts": "^17.0.2",
     "@elastic/datemath": "5.0.2",
     "@elastic/ems-client": "7.6.0",
-    "@elastic/eui": "18.3.0",
+    "@elastic/eui": "19.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "2.3.5",
diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json
index fc9d159ea9b95..a92cea560c210 100644
--- a/packages/kbn-ui-shared-deps/package.json
+++ b/packages/kbn-ui-shared-deps/package.json
@@ -11,7 +11,7 @@
   "devDependencies": {
     "@elastic/charts": "^17.0.2",
     "abort-controller": "^3.0.0",
-    "@elastic/eui": "18.3.0",
+    "@elastic/eui": "19.0.0",
     "@kbn/dev-utils": "1.0.0",
     "@kbn/i18n": "1.0.0",
     "@yarnpkg/lockfile": "^1.1.0",
diff --git a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
index d320b57ee59e6..cb0b9de01c4ed 100644
--- a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
+++ b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "18.3.0",
+    "@elastic/eui": "19.0.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   }
diff --git a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
index 27a8c1fab6c8e..c68ef6dcd0202 100644
--- a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "18.3.0",
+    "@elastic/eui": "19.0.0",
     "react": "^16.12.0"
   }
 }
diff --git a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
index 51bb7240dd7c4..d4e4c6bf2fee0 100644
--- a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "18.3.0",
+    "@elastic/eui": "19.0.0",
     "react": "^16.12.0"
   },
   "scripts": {
diff --git a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
index 9ee0e3de51d8b..3ade079419a55 100644
--- a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "18.3.0",
+    "@elastic/eui": "19.0.0",
     "react": "^16.12.0"
   },
   "scripts": {
diff --git a/x-pack/package.json b/x-pack/package.json
index 921f6ad991188..7d2343e2d2991 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -176,7 +176,7 @@
     "@elastic/apm-rum-react": "^0.3.2",
     "@elastic/datemath": "5.0.2",
     "@elastic/ems-client": "7.6.0",
-    "@elastic/eui": "18.3.0",
+    "@elastic/eui": "19.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/maki": "6.1.0",
     "@elastic/node-crypto": "^1.0.0",
diff --git a/yarn.lock b/yarn.lock
index 5dc4db12c5db4..09764950151df 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1955,15 +1955,17 @@
     tabbable "^1.1.0"
     uuid "^3.1.0"
 
-"@elastic/eui@18.3.0":
-  version "18.3.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-18.3.0.tgz#e21c6246624f694e2ae1c7c1f1a11b612faf260a"
-  integrity sha512-Rkj1rTtDa6iZMUF7pxYRojku1sLXzTU0FK1D9i0XE3H//exy3VyTV6qUlbdkiKXjO7emrgQqfzKDeXT+ZYztgg==
+"@elastic/eui@19.0.0":
+  version "19.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-19.0.0.tgz#cf7d644945c95997d442585cf614e853f173746e"
+  integrity sha512-8/USz56MYhu6bV4oecJct7tsdi0ktErOIFLobNmQIKdxDOni/KpttX6IHqxM7OuIWi1AEMXoIozw68+oyL/uKQ==
   dependencies:
     "@types/chroma-js" "^1.4.3"
+    "@types/enzyme" "^3.1.13"
     "@types/lodash" "^4.14.116"
     "@types/numeral" "^0.0.25"
     "@types/react-beautiful-dnd" "^10.1.0"
+    "@types/react-virtualized" "^9.18.7"
     chroma-js "^2.0.4"
     classnames "^2.2.5"
     highlight.js "^9.12.0"
@@ -4359,6 +4361,14 @@
   resolved "https://registry.yarnpkg.com/@types/elasticsearch/-/elasticsearch-5.0.33.tgz#b0fd37dc674f498223b6d68c313bdfd71f4d812b"
   integrity sha512-n/g9pqJEpE4fyUE8VvHNGtl7E2Wv8TCroNwfgAeJKRV4ghDENahtrAo1KMsFNIejBD2gDAlEUa4CM4oEEd8p9Q==
 
+"@types/enzyme@^3.1.13":
+  version "3.10.5"
+  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.5.tgz#fe7eeba3550369eed20e7fb565bfb74eec44f1f0"
+  integrity sha512-R+phe509UuUYy9Tk0YlSbipRpfVtIzb/9BHn5pTEtjJTF5LXvUjrIQcZvNyANNEyFrd2YGs196PniNT1fgvOQA==
+  dependencies:
+    "@types/cheerio" "*"
+    "@types/react" "*"
+
 "@types/enzyme@^3.9.0":
   version "3.9.3"
   resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.9.3.tgz#d1029c0edd353d7b00f3924803eb88216460beed"

From 663deb3f3c9b133a87a6db26fe0fd206e379ee68 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 10 Feb 2020 14:15:51 -0600
Subject: [PATCH 02/10] typescript updates; idAria removal

---
 .../np_ready/angular/directives/histogram.tsx |  2 +-
 .../settings/components/field/field.tsx       |  2 --
 .../static/forms/components/field.tsx         |  1 -
 .../static/forms/components/form_row.tsx      | 16 ++++++++-----
 .../public/components/share_context_menu.tsx  |  3 +--
 src/plugins/share/public/types.ts             |  8 +++----
 typings/@elastic/eui/index.d.ts               |  2 --
 .../dense_vector_type.tsx                     |  1 -
 .../scaled_float_type.tsx                     |  1 -
 .../token_count_type.tsx                      |  1 -
 .../template_form/steps/step_logistics.tsx    | 20 ++++------------
 .../analysis_setup_indices_form.tsx           |  9 +------
 .../analysis_setup_timerange_form.tsx         | 17 ++-----------
 .../fields_configuration_panel.tsx            | 10 --------
 .../indices_configuration_panel.tsx           |  4 ----
 .../name_configuration_panel.tsx              |  2 --
 x-pack/legacy/plugins/infra/types/eui.d.ts    | 17 -------------
 .../dimension_panel/dimension_panel.test.tsx  |  2 +-
 .../common/model_memory_limit/description.tsx |  8 +------
 .../components/frequency/description.tsx      |  8 +------
 .../components/query_delay/description.tsx    |  8 +------
 .../components/scroll_size/description.tsx    |  8 +------
 .../components/time_field/description.tsx     |  3 +--
 .../components/calendars/description.tsx      |  3 +--
 .../components/custom_urls/description.tsx    |  3 +--
 .../dedicated_index/description.tsx           |  3 +--
 .../components/model_plot/description.tsx     |  3 +--
 .../components/groups/description.tsx         |  8 +------
 .../job_description/description.tsx           |  3 +--
 .../components/job_id/description.tsx         |  9 ++-----
 .../advanced_detector_modal/descriptions.tsx  | 21 ++++++----------
 .../components/bucket_span/description.tsx    |  8 +------
 .../categorization_field/description.tsx      |  3 +--
 .../components/influencers/description.tsx    |  3 +--
 .../components/sparse_data/description.tsx    |  3 +--
 .../components/split_field/description.tsx    |  6 ++---
 .../summary_count_field/description.tsx       |  3 +--
 .../components/job_settings_form.tsx          |  7 ++----
 .../policy_form/steps/step_logistics.tsx      |  8 -------
 .../policy_form/steps/step_retention.tsx      |  5 ----
 .../policy_form/steps/step_settings.tsx       | 20 ++++------------
 .../components/repository_form/step_one.tsx   |  5 +---
 .../type_settings/azure_settings.tsx          | 18 --------------
 .../type_settings/fs_settings.tsx             | 12 ----------
 .../type_settings/gcs_settings.tsx            | 16 -------------
 .../type_settings/hdfs_settings.tsx           | 22 +----------------
 .../type_settings/readonly_settings.tsx       |  4 +---
 .../type_settings/s3_settings.tsx             | 24 -------------------
 .../steps/step_logistics.tsx                  | 23 +++---------------
 .../steps/step_settings.tsx                   | 15 ++----------
 .../json_watch_edit_simulate.tsx              |  4 ----
 x-pack/typings/@elastic/eui/index.d.ts        |  1 -
 52 files changed, 64 insertions(+), 352 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx
index 77bbab97d95c7..8db3c77ba0f47 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx
@@ -41,7 +41,7 @@ import {
 } from '@elastic/charts';
 
 import { i18n } from '@kbn/i18n';
-import { EuiChartThemeType } from '@elastic/eui/src/themes/charts/themes';
+import { EuiChartThemeType } from '@elastic/eui/dist/eui_charts_theme';
 import { Subscription } from 'rxjs';
 import { getServices, timezoneProvider } from '../../../kibana_services';
 
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.tsx b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.tsx
index 524160191d8f0..666efc0762aed 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.tsx
+++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.tsx
@@ -824,7 +824,6 @@ export class Field extends PureComponent<FieldProps, FieldState> {
             className="mgtAdvancedSettings__fieldWrapper"
             title={this.renderTitle(setting)}
             description={this.renderDescription(setting)}
-            idAria={`${setting.name}-aria`}
           >
             <EuiFormRow
               isInvalid={isInvalid}
@@ -833,7 +832,6 @@ export class Field extends PureComponent<FieldProps, FieldState> {
               helpText={this.renderHelpText(setting)}
               describedByIds={[`${setting.name}-aria`]}
               className="mgtAdvancedSettings__fieldRow"
-              // @ts-ignore
               hasChildLabel={setting.type !== 'boolean'}
             >
               {this.renderField(setting)}
diff --git a/src/plugins/es_ui_shared/static/forms/components/field.tsx b/src/plugins/es_ui_shared/static/forms/components/field.tsx
index 07fca1a7f7595..78702e902ecf6 100644
--- a/src/plugins/es_ui_shared/static/forms/components/field.tsx
+++ b/src/plugins/es_ui_shared/static/forms/components/field.tsx
@@ -23,7 +23,6 @@ import { FieldHook, FIELD_TYPES } from '../hook_form_lib';
 interface Props {
   field: FieldHook;
   euiFieldProps?: { [key: string]: any };
-  idAria?: string;
   [key: string]: any;
 }
 
diff --git a/src/plugins/es_ui_shared/static/forms/components/form_row.tsx b/src/plugins/es_ui_shared/static/forms/components/form_row.tsx
index 4fc9a5d41ddff..ad5a517e40cfb 100644
--- a/src/plugins/es_ui_shared/static/forms/components/form_row.tsx
+++ b/src/plugins/es_ui_shared/static/forms/components/form_row.tsx
@@ -28,12 +28,15 @@ interface Props {
   description?: string | JSX.Element;
   field?: FieldHook;
   euiFieldProps?: Record<string, any>;
-  idAria?: string;
   titleTag?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   children?: React.ReactNode;
   [key: string]: any;
 }
 
+function isTitleString(title: any): title is string {
+  return typeof title === 'string' || title.type.name === 'FormattedMessage';
+}
+
 export const FormRow = ({
   title,
   idAria,
@@ -43,14 +46,15 @@ export const FormRow = ({
   titleTag = 'h4',
   ...rest
 }: Props) => {
-  let titleWrapped = title;
+  let titleWrapped;
 
   // If a string is provided, create a default Euititle of size "m"
-  const isTitleString = typeof title === 'string' || title.type.name === 'FormattedMessage';
-  if (isTitleString) {
+  if (isTitleString(title)) {
     // Create the correct title tag
     const titleWithHTag = React.createElement(titleTag, undefined, title);
     titleWrapped = <EuiTitle size="s">{titleWithHTag}</EuiTitle>;
+  } else {
+    titleWrapped = title;
   }
 
   if (!children && !field) {
@@ -58,8 +62,8 @@ export const FormRow = ({
   }
 
   return (
-    <EuiDescribedFormGroup title={titleWrapped} description={description} idAria={idAria} fullWidth>
-      {children ? children : <Field field={field!} idAria={idAria} {...rest} />}
+    <EuiDescribedFormGroup title={titleWrapped} description={description} fullWidth>
+      {children ? children : <Field field={field!} {...rest} />}
     </EuiDescribedFormGroup>
   );
 };
diff --git a/src/plugins/share/public/components/share_context_menu.tsx b/src/plugins/share/public/components/share_context_menu.tsx
index 8676a07bc10c4..1669791da23c2 100644
--- a/src/plugins/share/public/components/share_context_menu.tsx
+++ b/src/plugins/share/public/components/share_context_menu.tsx
@@ -21,8 +21,7 @@ import React, { Component } from 'react';
 
 import { I18nProvider } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import { EuiContextMenuPanelDescriptor } from '@elastic/eui';
-import { EuiContextMenu } from '@elastic/eui';
+import { EuiContextMenu, EuiContextMenuPanelDescriptor } from '@elastic/eui';
 
 import { HttpStart } from 'kibana/public';
 
diff --git a/src/plugins/share/public/types.ts b/src/plugins/share/public/types.ts
index 2472129757133..6b20f1f53a28c 100644
--- a/src/plugins/share/public/types.ts
+++ b/src/plugins/share/public/types.ts
@@ -17,10 +17,7 @@
  * under the License.
  */
 
-import {
-  EuiContextMenuPanelDescriptor,
-  EuiContextMenuPanelItemDescriptor,
-} from '@elastic/eui/src/components/context_menu/context_menu';
+import { EuiContextMenuPanelDescriptor, EuiContextMenuPanelItemDescriptor } from '@elastic/eui';
 
 /**
  * @public
@@ -55,7 +52,8 @@ export interface ShareContext {
  * used to order the individual items in a flat list returned by all registered
  * menu providers.
  * */
-export interface ShareContextMenuPanelItem extends EuiContextMenuPanelItemDescriptor {
+export interface ShareContextMenuPanelItem extends Omit<EuiContextMenuPanelItemDescriptor, 'name'> {
+  name: string; // EUI will accept a `ReactNode` for the `name` prop, but `ShareContentMenu` assumes a `string`.
   sortOrder: number;
 }
 
diff --git a/typings/@elastic/eui/index.d.ts b/typings/@elastic/eui/index.d.ts
index 716dbc075d798..9268f72724141 100644
--- a/typings/@elastic/eui/index.d.ts
+++ b/typings/@elastic/eui/index.d.ts
@@ -21,8 +21,6 @@ import { Direction } from '@elastic/eui/src/services/sort/sort_direction';
 // TODO: Remove once typescript definitions are in EUI
 
 declare module '@elastic/eui' {
-  export const EuiSideNav: React.FC<any>;
-  export const EuiDescribedFormGroup: React.FC<any>;
   export const EuiCodeEditor: React.FC<any>;
   export const Query: any;
 }
diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/dense_vector_type.tsx b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/dense_vector_type.tsx
index 2f094dd9e0cc8..03bafcf37368d 100644
--- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/dense_vector_type.tsx
+++ b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/dense_vector_type.tsx
@@ -21,7 +21,6 @@ export const DenseVectorRequiredParameters = () => {
         defaultMessage:
           'Each document’s dense vector is encoded as a binary doc value. Its size in bytes is equal to 4 * dimensions + 4.',
       })}
-      idAria="mappingsEditorDimsParameter"
     >
       <UseField path="dims" config={getFieldConfig('dims')} component={Field} />
     </FormRow>
diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/scaled_float_type.tsx b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/scaled_float_type.tsx
index 04378a8c63af8..d73ee06b06f13 100644
--- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/scaled_float_type.tsx
+++ b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/scaled_float_type.tsx
@@ -15,7 +15,6 @@ export const ScaledFloatTypeRequiredParameters = () => {
     <FormRow
       title={<h3>{PARAMETERS_DEFINITION.scaling_factor.title}</h3>}
       description={PARAMETERS_DEFINITION.scaling_factor.description}
-      idAria="mappingsEditorScalingFactorParameter"
     >
       <UseField path="scaling_factor" config={getFieldConfig('scaling_factor')} component={Field} />
     </FormRow>
diff --git a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/token_count_type.tsx b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/token_count_type.tsx
index c113c57a37fcb..f21bfc66bfbca 100644
--- a/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/token_count_type.tsx
+++ b/x-pack/legacy/plugins/index_management/public/app/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/token_count_type.tsx
@@ -29,7 +29,6 @@ export const TokenCountTypeRequiredParameters = () => {
             'The analyzer which should be used to analyze the string value. For best performance, use an analyzer without token filters.',
         }
       )}
-      idAria="mappingsEditorAnalyzerParameter"
     >
       <AnalyzerParameter
         path="analyzer"
diff --git a/x-pack/legacy/plugins/index_management/public/app/components/template_form/steps/step_logistics.tsx b/x-pack/legacy/plugins/index_management/public/app/components/template_form/steps/step_logistics.tsx
index d2134837c15e5..dd8d49a569042 100644
--- a/x-pack/legacy/plugins/index_management/public/app/components/template_form/steps/step_logistics.tsx
+++ b/x-pack/legacy/plugins/index_management/public/app/components/template_form/steps/step_logistics.tsx
@@ -32,7 +32,6 @@ const fieldsMeta = {
     description: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.nameDescription', {
       defaultMessage: 'A unique identifier for this template.',
     }),
-    idAria: 'stepLogisticsNameDescription',
     testSubject: 'nameField',
   },
   indexPatterns: {
@@ -45,7 +44,6 @@ const fieldsMeta = {
         defaultMessage: 'The index patterns to apply to the template.',
       }
     ),
-    idAria: 'stepLogisticsIndexPatternsDescription',
     testSubject: 'indexPatternsField',
   },
   order: {
@@ -55,7 +53,6 @@ const fieldsMeta = {
     description: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.orderDescription', {
       defaultMessage: 'The merge order when multiple templates match an index.',
     }),
-    idAria: 'stepLogisticsOrderDescription',
     testSubject: 'orderField',
   },
   version: {
@@ -65,7 +62,6 @@ const fieldsMeta = {
     description: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.versionDescription', {
       defaultMessage: 'A number that identifies the template to external management systems.',
     }),
-    idAria: 'stepLogisticsVersionDescription',
     testSubject: 'versionField',
   },
 };
@@ -123,11 +119,10 @@ export const StepLogistics: React.FunctionComponent<StepProps> = ({
       </EuiFlexGroup>
       <EuiSpacer size="l" />
       {/* Name */}
-      <FormRow title={name.title} description={name.description} idAria={name.idAria}>
+      <FormRow title={name.title} description={name.description}>
         <UseField
           path="name"
           componentProps={{
-            idAria: name.idAria,
             ['data-test-subj']: name.testSubject,
             euiFieldProps: { disabled: isEditing },
           }}
@@ -135,35 +130,28 @@ export const StepLogistics: React.FunctionComponent<StepProps> = ({
         />
       </FormRow>
       {/* Index patterns */}
-      <FormRow
-        title={indexPatterns.title}
-        description={indexPatterns.description}
-        idAria={indexPatterns.idAria}
-      >
+      <FormRow title={indexPatterns.title} description={indexPatterns.description}>
         <UseField
           path="indexPatterns"
           componentProps={{
-            idAria: indexPatterns.idAria,
             ['data-test-subj']: indexPatterns.testSubject,
           }}
         />
       </FormRow>
       {/* Order */}
-      <FormRow title={order.title} description={order.description} idAria={order.idAria}>
+      <FormRow title={order.title} description={order.description}>
         <UseField
           path="order"
           componentProps={{
-            idAria: order.idAria,
             ['data-test-subj']: order.testSubject,
           }}
         />
       </FormRow>
       {/* Version */}
-      <FormRow title={version.title} description={version.description} idAria={version.idAria}>
+      <FormRow title={version.title} description={version.description}>
         <UseField
           path="version"
           componentProps={{
-            idAria: version.idAria,
             ['data-test-subj']: version.testSubject,
           }}
         />
diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/analysis_setup_indices_form.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/analysis_setup_indices_form.tsx
index 89f8d77bd5f63..649858f657bfe 100644
--- a/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/analysis_setup_indices_form.tsx
+++ b/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/analysis_setup_indices_form.tsx
@@ -58,7 +58,6 @@ export const AnalysisSetupIndicesForm: React.FunctionComponent<{
 
   return (
     <EuiDescribedFormGroup
-      idAria="indices"
       title={
         <h3>
           <FormattedMessage
@@ -75,13 +74,7 @@ export const AnalysisSetupIndicesForm: React.FunctionComponent<{
       }
     >
       <LoadingOverlayWrapper isLoading={isValidating}>
-        <EuiFormRow
-          describedByIds={['indices']}
-          fullWidth
-          isInvalid={!valid}
-          label={indicesSelectionLabel}
-          labelType="legend"
-        >
+        <EuiFormRow fullWidth isInvalid={!valid} label={indicesSelectionLabel} labelType="legend">
           <>{choices}</>
         </EuiFormRow>
       </LoadingOverlayWrapper>
diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/analysis_setup_timerange_form.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/analysis_setup_timerange_form.tsx
index 02119fd1c09dd..9027063ad8dc7 100644
--- a/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/analysis_setup_timerange_form.tsx
+++ b/x-pack/legacy/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/analysis_setup_timerange_form.tsx
@@ -59,7 +59,6 @@ export const AnalysisSetupTimerangeForm: React.FunctionComponent<{
   }, [endTime]);
   return (
     <EuiDescribedFormGroup
-      idAria="timeRange"
       title={
         <h3>
           <FormattedMessage
@@ -75,13 +74,7 @@ export const AnalysisSetupTimerangeForm: React.FunctionComponent<{
         />
       }
     >
-      <EuiFormRow
-        describedByIds={['timeRange']}
-        error={false}
-        fullWidth
-        isInvalid={false}
-        label={startTimeLabel}
-      >
+      <EuiFormRow error={false} fullWidth isInvalid={false} label={startTimeLabel}>
         <EuiFlexGroup gutterSize="s">
           <EuiFormControlLayout
             clear={startTime && !disabled ? { onClick: () => setStartTime(undefined) } : undefined}
@@ -98,13 +91,7 @@ export const AnalysisSetupTimerangeForm: React.FunctionComponent<{
           </EuiFormControlLayout>
         </EuiFlexGroup>
       </EuiFormRow>
-      <EuiFormRow
-        describedByIds={['timeRange']}
-        error={false}
-        fullWidth
-        isInvalid={false}
-        label={endTimeLabel}
-      >
+      <EuiFormRow error={false} fullWidth isInvalid={false} label={endTimeLabel}>
         <EuiFlexGroup gutterSize="s">
           <EuiFormControlLayout
             clear={endTime && !disabled ? { onClick: () => setEndTime(undefined) } : undefined}
diff --git a/x-pack/legacy/plugins/infra/public/components/source_configuration/fields_configuration_panel.tsx b/x-pack/legacy/plugins/infra/public/components/source_configuration/fields_configuration_panel.tsx
index e80b1489728cc..369f07be67bf4 100644
--- a/x-pack/legacy/plugins/infra/public/components/source_configuration/fields_configuration_panel.tsx
+++ b/x-pack/legacy/plugins/infra/public/components/source_configuration/fields_configuration_panel.tsx
@@ -95,7 +95,6 @@ export const FieldsConfigurationPanel = ({
       </EuiCallOut>
       <EuiSpacer size="m" />
       <EuiDescribedFormGroup
-        idAria="timestampField"
         title={
           <h4>
             <FormattedMessage
@@ -112,7 +111,6 @@ export const FieldsConfigurationPanel = ({
         }
       >
         <EuiFormRow
-          describedByIds={['timestampField']}
           error={timestampFieldProps.error}
           fullWidth
           helpText={
@@ -144,7 +142,6 @@ export const FieldsConfigurationPanel = ({
       {displaySettings === 'logs' && (
         <>
           <EuiDescribedFormGroup
-            idAria="tiebreakerField"
             title={
               <h4>
                 <FormattedMessage
@@ -161,7 +158,6 @@ export const FieldsConfigurationPanel = ({
             }
           >
             <EuiFormRow
-              describedByIds={['tiebreakerField']}
               error={tiebreakerFieldProps.error}
               fullWidth
               helpText={
@@ -195,7 +191,6 @@ export const FieldsConfigurationPanel = ({
       {displaySettings === 'metrics' && (
         <>
           <EuiDescribedFormGroup
-            idAria="containerField"
             title={
               <h4>
                 <FormattedMessage
@@ -212,7 +207,6 @@ export const FieldsConfigurationPanel = ({
             }
           >
             <EuiFormRow
-              describedByIds={['containerField']}
               error={containerFieldProps.error}
               fullWidth
               helpText={
@@ -242,7 +236,6 @@ export const FieldsConfigurationPanel = ({
             </EuiFormRow>
           </EuiDescribedFormGroup>
           <EuiDescribedFormGroup
-            idAria="hostNameField"
             title={
               <h4>
                 <FormattedMessage
@@ -259,7 +252,6 @@ export const FieldsConfigurationPanel = ({
             }
           >
             <EuiFormRow
-              describedByIds={['hostNameField']}
               error={hostFieldProps.error}
               fullWidth
               helpText={
@@ -289,7 +281,6 @@ export const FieldsConfigurationPanel = ({
             </EuiFormRow>
           </EuiDescribedFormGroup>
           <EuiDescribedFormGroup
-            idAria="podField"
             title={
               <h4>
                 <FormattedMessage
@@ -306,7 +297,6 @@ export const FieldsConfigurationPanel = ({
             }
           >
             <EuiFormRow
-              describedByIds={['podField']}
               error={podFieldProps.error}
               fullWidth
               helpText={
diff --git a/x-pack/legacy/plugins/infra/public/components/source_configuration/indices_configuration_panel.tsx b/x-pack/legacy/plugins/infra/public/components/source_configuration/indices_configuration_panel.tsx
index eed6768c8846c..1d634b781bd34 100644
--- a/x-pack/legacy/plugins/infra/public/components/source_configuration/indices_configuration_panel.tsx
+++ b/x-pack/legacy/plugins/infra/public/components/source_configuration/indices_configuration_panel.tsx
@@ -45,7 +45,6 @@ export const IndicesConfigurationPanel = ({
     <EuiSpacer size="m" />
     {displaySettings === 'metrics' && (
       <EuiDescribedFormGroup
-        idAria="metricIndices"
         title={
           <h4>
             <FormattedMessage
@@ -62,7 +61,6 @@ export const IndicesConfigurationPanel = ({
         }
       >
         <EuiFormRow
-          describedByIds={['metricIndices']}
           error={metricAliasFieldProps.error}
           fullWidth
           helpText={
@@ -95,7 +93,6 @@ export const IndicesConfigurationPanel = ({
     )}
     {displaySettings === 'logs' && (
       <EuiDescribedFormGroup
-        idAria="logIndices"
         title={
           <h4>
             <FormattedMessage
@@ -112,7 +109,6 @@ export const IndicesConfigurationPanel = ({
         }
       >
         <EuiFormRow
-          describedByIds={['logIndices']}
           error={logAliasFieldProps.error}
           fullWidth
           helpText={
diff --git a/x-pack/legacy/plugins/infra/public/components/source_configuration/name_configuration_panel.tsx b/x-pack/legacy/plugins/infra/public/components/source_configuration/name_configuration_panel.tsx
index 130f30717268c..b5236f8a6db8f 100644
--- a/x-pack/legacy/plugins/infra/public/components/source_configuration/name_configuration_panel.tsx
+++ b/x-pack/legacy/plugins/infra/public/components/source_configuration/name_configuration_panel.tsx
@@ -39,7 +39,6 @@ export const NameConfigurationPanel = ({
     </EuiTitle>
     <EuiSpacer size="m" />
     <EuiDescribedFormGroup
-      idAria="name"
       title={
         <h4>
           <FormattedMessage id="xpack.infra.sourceConfiguration.nameLabel" defaultMessage="Name" />
@@ -53,7 +52,6 @@ export const NameConfigurationPanel = ({
       }
     >
       <EuiFormRow
-        describedByIds={['name']}
         error={nameFieldProps.error}
         fullWidth
         isInvalid={nameFieldProps.isInvalid}
diff --git a/x-pack/legacy/plugins/infra/types/eui.d.ts b/x-pack/legacy/plugins/infra/types/eui.d.ts
index e73a73076923d..802e11dd8fc84 100644
--- a/x-pack/legacy/plugins/infra/types/eui.d.ts
+++ b/x-pack/legacy/plugins/infra/types/eui.d.ts
@@ -26,23 +26,6 @@ declare module '@elastic/eui' {
     onClick?: React.MouseEventHandler<Element>;
   }
 
-  type EuiSideNavProps = CommonProps & {
-    style?: any;
-    items: Array<{
-      id: string | number;
-      name: string;
-      items: Array<{
-        id: string;
-        name: string;
-        onClick?: () => void;
-      }>;
-    }>;
-    mobileTitle?: React.ReactNode;
-    toggleOpenOnMobile?: () => void;
-    isOpenOnMobile?: boolean;
-  };
-  export const EuiSideNav: React.FC<EuiSideNavProps>;
-
   type EuiSizesResponsive = 'xs' | 's' | 'm' | 'l' | 'xl';
   type EuiResponsiveProps = CommonProps & {
     children: React.ReactNode;
diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx
index 626ef99ac13aa..d7e6c6f2d0511 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx
@@ -887,7 +887,7 @@ describe('IndexPatternDimensionPanel', () => {
       wrapper
         .find(EuiSideNav)
         .prop('items')[0]
-        .items.map(({ name }) => name)
+        .items.map(({ name }: { name: React.ReactNode }) => name)
     ).toEqual(['Unique count', 'Average', 'Count', 'Maximum', 'Minimum', 'Sum']);
   });
 
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/common/model_memory_limit/description.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/common/model_memory_limit/description.tsx
index df095f4fbdf56..8669b37595af7 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/common/model_memory_limit/description.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/common/model_memory_limit/description.tsx
@@ -23,7 +23,6 @@ export const Description: FC<Props> = memo(({ children, validation }) => {
   );
   return (
     <EuiDescribedFormGroup
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -32,12 +31,7 @@ export const Description: FC<Props> = memo(({ children, validation }) => {
         />
       }
     >
-      <EuiFormRow
-        label={title}
-        describedByIds={['description']}
-        error={validation.message}
-        isInvalid={validation.valid === false}
-      >
+      <EuiFormRow label={title} error={validation.message} isInvalid={validation.valid === false}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/frequency/description.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/frequency/description.tsx
index 792a3f20cfbbe..25f4bb029450c 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/frequency/description.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/frequency/description.tsx
@@ -20,7 +20,6 @@ export const Description: FC<Props> = memo(({ children, validation }) => {
   });
   return (
     <EuiDescribedFormGroup
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -29,12 +28,7 @@ export const Description: FC<Props> = memo(({ children, validation }) => {
         />
       }
     >
-      <EuiFormRow
-        label={title}
-        describedByIds={['description']}
-        error={validation.message}
-        isInvalid={validation.valid === false}
-      >
+      <EuiFormRow label={title} error={validation.message} isInvalid={validation.valid === false}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/query_delay/description.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/query_delay/description.tsx
index 6ee43908aaf3d..683336dde86c3 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/query_delay/description.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/query_delay/description.tsx
@@ -20,7 +20,6 @@ export const Description: FC<Props> = memo(({ children, validation }) => {
   });
   return (
     <EuiDescribedFormGroup
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -29,12 +28,7 @@ export const Description: FC<Props> = memo(({ children, validation }) => {
         />
       }
     >
-      <EuiFormRow
-        label={title}
-        describedByIds={['description']}
-        error={validation.message}
-        isInvalid={validation.valid === false}
-      >
+      <EuiFormRow label={title} error={validation.message} isInvalid={validation.valid === false}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/scroll_size/description.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/scroll_size/description.tsx
index d3dcd838a33bd..4f04ff693e7d9 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/scroll_size/description.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/scroll_size/description.tsx
@@ -20,7 +20,6 @@ export const Description: FC<Props> = memo(({ children, validation }) => {
   });
   return (
     <EuiDescribedFormGroup
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -29,12 +28,7 @@ export const Description: FC<Props> = memo(({ children, validation }) => {
         />
       }
     >
-      <EuiFormRow
-        label={title}
-        describedByIds={['description']}
-        error={validation.message}
-        isInvalid={validation.valid === false}
-      >
+      <EuiFormRow label={title} error={validation.message} isInvalid={validation.valid === false}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/time_field/description.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/time_field/description.tsx
index 6922a3bfe8e6f..80eb084c156b0 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/time_field/description.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/datafeed_step/components/time_field/description.tsx
@@ -15,7 +15,6 @@ export const Description: FC = memo(({ children }) => {
   });
   return (
     <EuiDescribedFormGroup
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -24,7 +23,7 @@ export const Description: FC = memo(({ children }) => {
         />
       }
     >
-      <EuiFormRow label={title} describedByIds={['description']}>
+      <EuiFormRow label={title}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/calendars/description.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/calendars/description.tsx
index 828c91052b30b..3b49ee0f8c11f 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/calendars/description.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/calendars/description.tsx
@@ -21,7 +21,6 @@ export const Description: FC = memo(({ children }) => {
   );
   return (
     <EuiDescribedFormGroup
-      idAria="calendars_description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -40,7 +39,7 @@ export const Description: FC = memo(({ children }) => {
         />
       }
     >
-      <EuiFormRow describedByIds={['calendars_description']}>
+      <EuiFormRow>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/custom_urls/description.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/custom_urls/description.tsx
index 566bd313dbc6e..0a667ab9c5b9c 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/custom_urls/description.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/custom_urls/description.tsx
@@ -23,7 +23,6 @@ export const Description: FC = memo(({ children }) => {
     <EuiDescribedFormGroup
       fullWidth
       className="ml-custom-urls-selection"
-      idAria="custom_urls_description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -42,7 +41,7 @@ export const Description: FC = memo(({ children }) => {
         />
       }
     >
-      <EuiFormRow describedByIds={['custom_urls_description']} fullWidth>
+      <EuiFormRow fullWidth>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/advanced_section/components/dedicated_index/description.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/advanced_section/components/dedicated_index/description.tsx
index eea123e2315b8..2a898843dda57 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/advanced_section/components/dedicated_index/description.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/advanced_section/components/dedicated_index/description.tsx
@@ -18,7 +18,6 @@ export const Description: FC = memo(({ children }) => {
   );
   return (
     <EuiDescribedFormGroup
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -27,7 +26,7 @@ export const Description: FC = memo(({ children }) => {
         />
       }
     >
-      <EuiFormRow label={title} describedByIds={['description']}>
+      <EuiFormRow label={title}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/advanced_section/components/model_plot/description.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/advanced_section/components/model_plot/description.tsx
index 1ad4ce7fdaa44..099bdef878306 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/advanced_section/components/model_plot/description.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/advanced_section/components/model_plot/description.tsx
@@ -18,7 +18,6 @@ export const Description: FC = memo(({ children }) => {
   );
   return (
     <EuiDescribedFormGroup
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -27,7 +26,7 @@ export const Description: FC = memo(({ children }) => {
         />
       }
     >
-      <EuiFormRow label={title} describedByIds={['description']}>
+      <EuiFormRow label={title}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/groups/description.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/groups/description.tsx
index ea30fcbf79385..164be0b75e4a0 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/groups/description.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/groups/description.tsx
@@ -20,7 +20,6 @@ export const Description: FC<Props> = memo(({ children, validation }) => {
   });
   return (
     <EuiDescribedFormGroup
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -29,12 +28,7 @@ export const Description: FC<Props> = memo(({ children, validation }) => {
         />
       }
     >
-      <EuiFormRow
-        label={title}
-        describedByIds={['description']}
-        error={validation.message}
-        isInvalid={validation.valid === false}
-      >
+      <EuiFormRow label={title} error={validation.message} isInvalid={validation.valid === false}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/job_description/description.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/job_description/description.tsx
index 24adf0587f53b..bef8c166e0550 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/job_description/description.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/job_description/description.tsx
@@ -15,7 +15,6 @@ export const Description: FC = memo(({ children }) => {
   });
   return (
     <EuiDescribedFormGroup
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -24,7 +23,7 @@ export const Description: FC = memo(({ children }) => {
         />
       }
     >
-      <EuiFormRow label={title} describedByIds={['description']}>
+      <EuiFormRow label={title}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/job_id/description.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/job_id/description.tsx
index 4571f7ce5cc83..4292b46f3a357 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/job_id/description.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/job_id/description.tsx
@@ -22,13 +22,8 @@ export const Description: FC<Props> = memo(({ children, validation }) => {
       'A unique identifier for the job. Spaces and the characters  / ? , " < > | * are not allowed',
   });
   return (
-    <EuiDescribedFormGroup idAria="description" title={<h3>{title}</h3>} description={description}>
-      <EuiFormRow
-        label={title}
-        describedByIds={['description']}
-        error={validation.message}
-        isInvalid={validation.valid === false}
-      >
+    <EuiDescribedFormGroup title={<h3>{title}</h3>} description={description}>
+      <EuiFormRow label={title} error={validation.message} isInvalid={validation.valid === false}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/descriptions.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/descriptions.tsx
index e7a306decfbef..54fd8ba035958 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/descriptions.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/advanced_detector_modal/descriptions.tsx
@@ -18,7 +18,6 @@ export const AggDescription: FC = memo(({ children }) => {
   );
   return (
     <EuiDescribedFormGroup
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -27,7 +26,7 @@ export const AggDescription: FC = memo(({ children }) => {
         />
       }
     >
-      <EuiFormRow label={title} describedByIds={['description']}>
+      <EuiFormRow label={title}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
@@ -43,7 +42,6 @@ export const FieldDescription: FC = memo(({ children }) => {
   );
   return (
     <EuiDescribedFormGroup
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -52,7 +50,7 @@ export const FieldDescription: FC = memo(({ children }) => {
         />
       }
     >
-      <EuiFormRow label={title} describedByIds={['description']}>
+      <EuiFormRow label={title}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
@@ -68,7 +66,6 @@ export const ByFieldDescription: FC = memo(({ children }) => {
   );
   return (
     <EuiDescribedFormGroup
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -77,7 +74,7 @@ export const ByFieldDescription: FC = memo(({ children }) => {
         />
       }
     >
-      <EuiFormRow label={title} describedByIds={['description']}>
+      <EuiFormRow label={title}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
@@ -93,7 +90,6 @@ export const OverFieldDescription: FC = memo(({ children }) => {
   );
   return (
     <EuiDescribedFormGroup
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -102,7 +98,7 @@ export const OverFieldDescription: FC = memo(({ children }) => {
         />
       }
     >
-      <EuiFormRow label={title} describedByIds={['description']}>
+      <EuiFormRow label={title}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
@@ -118,7 +114,6 @@ export const PartitionFieldDescription: FC = memo(({ children }) => {
   );
   return (
     <EuiDescribedFormGroup
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -127,7 +122,7 @@ export const PartitionFieldDescription: FC = memo(({ children }) => {
         />
       }
     >
-      <EuiFormRow label={title} describedByIds={['description']}>
+      <EuiFormRow label={title}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
@@ -143,7 +138,6 @@ export const ExcludeFrequentDescription: FC = memo(({ children }) => {
   );
   return (
     <EuiDescribedFormGroup
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -152,7 +146,7 @@ export const ExcludeFrequentDescription: FC = memo(({ children }) => {
         />
       }
     >
-      <EuiFormRow label={title} describedByIds={['description']}>
+      <EuiFormRow label={title}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
@@ -169,7 +163,6 @@ export const DescriptionDescription: FC = memo(({ children }) => {
   return (
     <EuiDescribedFormGroup
       fullWidth={true}
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -178,7 +171,7 @@ export const DescriptionDescription: FC = memo(({ children }) => {
         />
       }
     >
-      <EuiFormRow label={title} describedByIds={['description']} fullWidth={true}>
+      <EuiFormRow label={title} fullWidth={true}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/bucket_span/description.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/bucket_span/description.tsx
index 140d40bbe0a31..2809d9665dee2 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/bucket_span/description.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/bucket_span/description.tsx
@@ -20,7 +20,6 @@ export const Description: FC<Props> = memo(({ children, validation }) => {
   });
   return (
     <EuiDescribedFormGroup
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -29,12 +28,7 @@ export const Description: FC<Props> = memo(({ children, validation }) => {
         />
       }
     >
-      <EuiFormRow
-        label={title}
-        describedByIds={['description']}
-        error={validation.message}
-        isInvalid={validation.valid === false}
-      >
+      <EuiFormRow label={title} error={validation.message} isInvalid={validation.valid === false}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/categorization_field/description.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/categorization_field/description.tsx
index bd0c3b15e43e0..dfdf3c5793623 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/categorization_field/description.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/categorization_field/description.tsx
@@ -18,7 +18,6 @@ export const Description: FC<Props> = memo(({ children, isOptional }) => {
   });
   return (
     <EuiDescribedFormGroup
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <>
@@ -36,7 +35,7 @@ export const Description: FC<Props> = memo(({ children, isOptional }) => {
         </>
       }
     >
-      <EuiFormRow label={title} describedByIds={['description']}>
+      <EuiFormRow label={title}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/influencers/description.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/influencers/description.tsx
index 00fdddcd04771..3706743549229 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/influencers/description.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/influencers/description.tsx
@@ -15,7 +15,6 @@ export const Description: FC = memo(({ children }) => {
   });
   return (
     <EuiDescribedFormGroup
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -24,7 +23,7 @@ export const Description: FC = memo(({ children }) => {
         />
       }
     >
-      <EuiFormRow label={title} describedByIds={['description']}>
+      <EuiFormRow label={title}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/sparse_data/description.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/sparse_data/description.tsx
index c2cc94eb6d69c..44fb69e744f5d 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/sparse_data/description.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/sparse_data/description.tsx
@@ -15,7 +15,6 @@ export const Description: FC = memo(({ children }) => {
   });
   return (
     <EuiDescribedFormGroup
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -24,7 +23,7 @@ export const Description: FC = memo(({ children }) => {
         />
       }
     >
-      <EuiFormRow label={title} describedByIds={['description']}>
+      <EuiFormRow label={title}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/split_field/description.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/split_field/description.tsx
index 6d4eeff2a5475..b7a85fecaeb2d 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/split_field/description.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/split_field/description.tsx
@@ -22,7 +22,6 @@ export const Description: FC<Props> = memo(({ children, jobType }) => {
     });
     return (
       <EuiDescribedFormGroup
-        idAria="description"
         title={<h3>{title}</h3>}
         description={
           <FormattedMessage
@@ -31,7 +30,7 @@ export const Description: FC<Props> = memo(({ children, jobType }) => {
           />
         }
       >
-        <EuiFormRow label={title} describedByIds={['description']}>
+        <EuiFormRow label={title}>
           <>{children}</>
         </EuiFormRow>
       </EuiDescribedFormGroup>
@@ -42,7 +41,6 @@ export const Description: FC<Props> = memo(({ children, jobType }) => {
     });
     return (
       <EuiDescribedFormGroup
-        idAria="description"
         title={<h3>{title}</h3>}
         description={
           <FormattedMessage
@@ -51,7 +49,7 @@ export const Description: FC<Props> = memo(({ children, jobType }) => {
           />
         }
       >
-        <EuiFormRow label={title} describedByIds={['description']}>
+        <EuiFormRow label={title}>
           <>{children}</>
         </EuiFormRow>
       </EuiDescribedFormGroup>
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/summary_count_field/description.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/summary_count_field/description.tsx
index 14795d6110a7e..5109718268ac3 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/summary_count_field/description.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/summary_count_field/description.tsx
@@ -15,7 +15,6 @@ export const Description: FC = memo(({ children }) => {
   });
   return (
     <EuiDescribedFormGroup
-      idAria="description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -24,7 +23,7 @@ export const Description: FC = memo(({ children }) => {
         />
       }
     >
-      <EuiFormRow label={title} describedByIds={['description']}>
+      <EuiFormRow label={title}>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>
diff --git a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/recognize/components/job_settings_form.tsx b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/recognize/components/job_settings_form.tsx
index 4046bd8b09afa..22b7d25abeae4 100644
--- a/x-pack/legacy/plugins/ml/public/application/jobs/new_job/recognize/components/job_settings_form.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/jobs/new_job/recognize/components/job_settings_form.tsx
@@ -98,7 +98,6 @@ export const JobSettingsForm: FC<JobSettingsFormProps> = ({
     <>
       <EuiForm>
         <EuiDescribedFormGroup
-          idAria="ml_aria_label_new_job_recognizer_job_prefix"
           title={
             <h4>
               <FormattedMessage
@@ -121,7 +120,6 @@ export const JobSettingsForm: FC<JobSettingsFormProps> = ({
                 defaultMessage="Job ID prefix"
               />
             }
-            describedByIds={['ml_aria_label_new_job_recognizer_job_prefix']}
             isInvalid={!!validationResult.jobPrefix}
             error={
               <>
@@ -209,7 +207,7 @@ export const JobSettingsForm: FC<JobSettingsFormProps> = ({
         <EuiSpacer size="l" />
         <EuiAccordion
           id="advancedOptions"
-          area-label={i18n.translate('xpack.ml.newJob.recognize.advancedSettingsAriaLabel', {
+          aria-label={i18n.translate('xpack.ml.newJob.recognize.advancedSettingsAriaLabel', {
             defaultMessage: 'Advanced settings',
           })}
           buttonContent={
@@ -221,7 +219,6 @@ export const JobSettingsForm: FC<JobSettingsFormProps> = ({
           paddingSize="l"
         >
           <EuiDescribedFormGroup
-            idAria="ml_aria_label_new_job_dedicated_index"
             title={
               <h4>
                 <FormattedMessage
@@ -265,7 +262,7 @@ export const JobSettingsForm: FC<JobSettingsFormProps> = ({
           onClick={() => {
             onSubmit(formState);
           }}
-          area-label={i18n.translate('xpack.ml.newJob.recognize.createJobButtonAriaLabel', {
+          aria-label={i18n.translate('xpack.ml.newJob.recognize.createJobButtonAriaLabel', {
             defaultMessage: 'Create Job',
           })}
         >
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_logistics.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_logistics.tsx
index 111b46d596e56..ef92edcfaeb35 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_logistics.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_logistics.tsx
@@ -94,7 +94,6 @@ export const PolicyStepLogistics: React.FunctionComponent<StepProps> = ({
           defaultMessage="A unique identifier for this policy."
         />
       }
-      idAria="nameDescription"
       fullWidth
     >
       <EuiFormRow
@@ -104,7 +103,6 @@ export const PolicyStepLogistics: React.FunctionComponent<StepProps> = ({
             defaultMessage="Name"
           />
         }
-        describedByIds={['nameDescription']}
         isInvalid={touched.name && Boolean(errors.name)}
         error={errors.name}
         fullWidth
@@ -158,7 +156,6 @@ export const PolicyStepLogistics: React.FunctionComponent<StepProps> = ({
           defaultMessage="The repository where you want to store the snapshots."
         />
       }
-      idAria="policyRepositoryDescription"
       fullWidth
     >
       <EuiFormRow
@@ -168,7 +165,6 @@ export const PolicyStepLogistics: React.FunctionComponent<StepProps> = ({
             defaultMessage="Repository"
           />
         }
-        describedByIds={['policyRepositoryDescription']}
         isInvalid={touched.repository && Boolean(errors.repository)}
         error={errors.repository}
         fullWidth
@@ -307,7 +303,6 @@ export const PolicyStepLogistics: React.FunctionComponent<StepProps> = ({
           defaultMessage="The name for the snapshots. A unique identifier is automatically added to each name."
         />
       }
-      idAria="policySnapshotNameDescription"
       fullWidth
     >
       <EuiFormRow
@@ -317,7 +312,6 @@ export const PolicyStepLogistics: React.FunctionComponent<StepProps> = ({
             defaultMessage="Snapshot name"
           />
         }
-        describedByIds={['policySnapshotNameDescription']}
         isInvalid={touched.snapshotName && Boolean(errors.snapshotName)}
         error={errors.snapshotName}
         helpText={
@@ -389,7 +383,6 @@ export const PolicyStepLogistics: React.FunctionComponent<StepProps> = ({
           defaultMessage="The frequency at which to take the snapshots."
         />
       }
-      idAria="policyScheduleDescription"
       fullWidth
     >
       {isAdvancedCronVisible ? (
@@ -401,7 +394,6 @@ export const PolicyStepLogistics: React.FunctionComponent<StepProps> = ({
                 defaultMessage="Schedule"
               />
             }
-            describedByIds={['policyScheduleDescription']}
             isInvalid={touched.schedule && Boolean(errors.schedule)}
             error={errors.schedule}
             helpText={
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_retention.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_retention.tsx
index df7e2c8807d9f..ec01885e76ff1 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_retention.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_retention.tsx
@@ -73,7 +73,6 @@ export const PolicyStepRetention: React.FunctionComponent<StepProps> = ({
           defaultMessage="The time to wait before deleting snapshots."
         />
       }
-      idAria="expirationDescription"
       fullWidth
     >
       <EuiFormRow
@@ -83,7 +82,6 @@ export const PolicyStepRetention: React.FunctionComponent<StepProps> = ({
             defaultMessage="Delete after"
           />
         }
-        describedByIds={['expirationDescription']}
         isInvalid={touched.expireAfterValue && Boolean(errors.expireAfterValue)}
         error={errors.expireAfterValue}
         fullWidth
@@ -140,7 +138,6 @@ export const PolicyStepRetention: React.FunctionComponent<StepProps> = ({
           defaultMessage="The minimum and maximum number of snapshots to store in your cluster."
         />
       }
-      idAria="countDescription"
       fullWidth
     >
       <EuiFlexGroup>
@@ -152,7 +149,6 @@ export const PolicyStepRetention: React.FunctionComponent<StepProps> = ({
                 defaultMessage="Mininum count"
               />
             }
-            describedByIds={['countDescription']}
             isInvalid={touched.minCount && Boolean(errors.minCount)}
             error={errors.minCount}
             fullWidth
@@ -180,7 +176,6 @@ export const PolicyStepRetention: React.FunctionComponent<StepProps> = ({
                 defaultMessage="Maximum count"
               />
             }
-            describedByIds={['countDescription']}
             isInvalid={touched.maxCount && Boolean(errors.maxCount)}
             error={errors.maxCount}
             fullWidth
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_settings.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_settings.tsx
index 0e3b6e030d1c6..552dbff8e7441 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_settings.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_settings.tsx
@@ -126,10 +126,9 @@ export const PolicyStepSettings: React.FunctionComponent<StepProps> = ({
             defaultMessage="Indices to back up."
           />
         }
-        idAria="indicesDescription"
         fullWidth
       >
-        <EuiFormRow hasEmptyLabelSpace fullWidth describedByIds={['indicesDescription']}>
+        <EuiFormRow hasEmptyLabelSpace fullWidth>
           <Fragment>
             {isManagedPolicy ? (
               <EuiToolTip
@@ -331,14 +330,9 @@ export const PolicyStepSettings: React.FunctionComponent<StepProps> = ({
           defaultMessage="Ignores indices that are unavailable when taking the snapshot. Otherwise, the entire snapshot will fail."
         />
       }
-      idAria="policyIgnoreUnavailableDescription"
       fullWidth
     >
-      <EuiFormRow
-        hasEmptyLabelSpace
-        describedByIds={['policyIgnoreUnavailableDescription']}
-        fullWidth
-      >
+      <EuiFormRow hasEmptyLabelSpace fullWidth>
         <EuiSwitch
           data-test-subj="ignoreUnavailableIndicesToggle"
           label={
@@ -376,10 +370,9 @@ export const PolicyStepSettings: React.FunctionComponent<StepProps> = ({
           defaultMessage="Allows snapshots of indices with primary shards that are unavailable. Otherwise, the entire snapshot will fail."
         />
       }
-      idAria="policyPartialDescription"
       fullWidth
     >
-      <EuiFormRow hasEmptyLabelSpace describedByIds={['policyPartialDescription']} fullWidth>
+      <EuiFormRow hasEmptyLabelSpace fullWidth>
         <EuiSwitch
           data-test-subj="partialIndicesToggle"
           label={
@@ -417,14 +410,9 @@ export const PolicyStepSettings: React.FunctionComponent<StepProps> = ({
           defaultMessage="Stores the global state of the cluster as part of the snapshot."
         />
       }
-      idAria="policyIncludeGlobalStateDescription"
       fullWidth
     >
-      <EuiFormRow
-        hasEmptyLabelSpace
-        describedByIds={['policyIncludeGlobalStateDescription']}
-        fullWidth
-      >
+      <EuiFormRow hasEmptyLabelSpace fullWidth>
         <EuiSwitch
           data-test-subj="globalStateToggle"
           label={
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/step_one.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/step_one.tsx
index 8f6b465b2fe5f..a52b96ae35c58 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/step_one.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/step_one.tsx
@@ -102,7 +102,6 @@ export const RepositoryFormStepOne: React.FunctionComponent<Props> = ({
           defaultMessage="A unique name for the repository."
         />
       }
-      idAria="repositoryNameDescription"
       fullWidth
     >
       <EuiFormRow
@@ -112,7 +111,6 @@ export const RepositoryFormStepOne: React.FunctionComponent<Props> = ({
             defaultMessage="Name"
           />
         }
-        describedByIds={['repositoryNameDescription']}
         isInvalid={Boolean(hasValidationErrors && validation.errors.name)}
         error={validation.errors.name}
         fullWidth
@@ -303,10 +301,9 @@ export const RepositoryFormStepOne: React.FunctionComponent<Props> = ({
           />
         </Fragment>
       }
-      idAria="sourceOnlyDescription"
       fullWidth
     >
-      <EuiFormRow hasEmptyLabelSpace={true} fullWidth describedByIds={['sourceOnlyDescription']}>
+      <EuiFormRow hasEmptyLabelSpace={true} fullWidth>
         <EuiSwitch
           label={
             <FormattedMessage
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/azure_settings.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/azure_settings.tsx
index aee913f2c2f76..a595463bd3723 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/azure_settings.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/azure_settings.tsx
@@ -77,7 +77,6 @@ export const AzureSettings: React.FunctionComponent<Props> = ({
             defaultMessage="The name of the Azure client."
           />
         }
-        idAria="azureRepositoryClientDescription"
         fullWidth
       >
         <EuiFormRow
@@ -88,7 +87,6 @@ export const AzureSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['azureRepositoryClientDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.client)}
           error={settingErrors.client}
         >
@@ -123,7 +121,6 @@ export const AzureSettings: React.FunctionComponent<Props> = ({
             defaultMessage="The name of the Azure container to use for snapshots."
           />
         }
-        idAria="azureRepositoryContainerDescription"
         fullWidth
       >
         <EuiFormRow
@@ -134,7 +131,6 @@ export const AzureSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['azureRepositoryContainerDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.container)}
           error={settingErrors.container}
         >
@@ -169,7 +165,6 @@ export const AzureSettings: React.FunctionComponent<Props> = ({
             defaultMessage="The container path to the repository data."
           />
         }
-        idAria="azureRepositoryBasePathDescription"
         fullWidth
       >
         <EuiFormRow
@@ -180,7 +175,6 @@ export const AzureSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['azureRepositoryBasePathDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.basePath)}
           error={settingErrors.basePath}
         >
@@ -215,13 +209,11 @@ export const AzureSettings: React.FunctionComponent<Props> = ({
             defaultMessage="Compresses the index mapping and setting files for snapshots. Data files are not compressed."
           />
         }
-        idAria="azureRepositoryCompressDescription"
         fullWidth
       >
         <EuiFormRow
           hasEmptyLabelSpace={true}
           fullWidth
-          describedByIds={['azureRepositoryCompressDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.compress)}
           error={settingErrors.compress}
         >
@@ -261,7 +253,6 @@ export const AzureSettings: React.FunctionComponent<Props> = ({
             defaultMessage="Breaks files into smaller units when taking snapshots."
           />
         }
-        idAria="azureRepositoryChunkSizeDescription"
         fullWidth
       >
         <EuiFormRow
@@ -272,7 +263,6 @@ export const AzureSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['azureRepositoryChunkSizeDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.chunkSize)}
           error={settingErrors.chunkSize}
           helpText={textService.getSizeNotationHelpText()}
@@ -308,7 +298,6 @@ export const AzureSettings: React.FunctionComponent<Props> = ({
             defaultMessage="The rate for creating snapshots for each node."
           />
         }
-        idAria="azureRepositoryMaxSnapshotBytesDescription"
         fullWidth
       >
         <EuiFormRow
@@ -319,7 +308,6 @@ export const AzureSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['azureRepositoryMaxSnapshotBytesDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.maxSnapshotBytesPerSec)}
           error={settingErrors.maxSnapshotBytesPerSec}
           helpText={textService.getSizeNotationHelpText()}
@@ -355,7 +343,6 @@ export const AzureSettings: React.FunctionComponent<Props> = ({
             defaultMessage="The snapshot restore rate for each node."
           />
         }
-        idAria="azureRepositoryMaxRestoreBytesDescription"
         fullWidth
       >
         <EuiFormRow
@@ -366,7 +353,6 @@ export const AzureSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['azureRepositoryMaxRestoreBytesDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.maxRestoreBytesPerSec)}
           error={settingErrors.maxRestoreBytesPerSec}
           helpText={textService.getSizeNotationHelpText()}
@@ -402,7 +388,6 @@ export const AzureSettings: React.FunctionComponent<Props> = ({
             defaultMessage="The primary or secondary location. If secondary, read-only is true."
           />
         }
-        idAria="azureRepositoryLocationModeDescription"
         fullWidth
       >
         <EuiFormRow
@@ -413,7 +398,6 @@ export const AzureSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['azureRepositoryLocationModeDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.locationMode)}
           error={settingErrors.locationMode}
         >
@@ -450,13 +434,11 @@ export const AzureSettings: React.FunctionComponent<Props> = ({
             defaultMessage="Only one cluster should have write access to this repository. All other clusters should be read-only."
           />
         }
-        idAria="azureRepositoryReadonlyDescription"
         fullWidth
       >
         <EuiFormRow
           hasEmptyLabelSpace={true}
           fullWidth
-          describedByIds={['azureRepositoryReadonlyDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.readonly)}
           error={settingErrors.readonly}
         >
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/fs_settings.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/fs_settings.tsx
index 2e2238ac93e3c..711db1ee300cb 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/fs_settings.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/fs_settings.tsx
@@ -73,7 +73,6 @@ export const FSSettings: React.FunctionComponent<Props> = ({
             />
           </Fragment>
         }
-        idAria="fsRepositoryLocationDescription"
         fullWidth
       >
         <EuiFormRow
@@ -84,7 +83,6 @@ export const FSSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['fsRepositoryLocationDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.location)}
           error={settingErrors.location}
         >
@@ -119,13 +117,11 @@ export const FSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="Compresses the index mapping and setting files for snapshots. Data files are not compressed."
           />
         }
-        idAria="fsRepositoryCompressDescription"
         fullWidth
       >
         <EuiFormRow
           hasEmptyLabelSpace={true}
           fullWidth
-          describedByIds={['fsRepositoryCompressDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.compress)}
           error={settingErrors.compress}
         >
@@ -165,7 +161,6 @@ export const FSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="Breaks files into smaller units when taking snapshots."
           />
         }
-        idAria="fsRepositoryChunkSizeDescription"
         fullWidth
       >
         <EuiFormRow
@@ -176,7 +171,6 @@ export const FSSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['fsRepositoryChunkSizeDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.chunkSize)}
           error={settingErrors.chunkSize}
           helpText={textService.getSizeNotationHelpText()}
@@ -212,7 +206,6 @@ export const FSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="The rate for creating snapshots for each node."
           />
         }
-        idAria="fsRepositoryMaxSnapshotBytesDescription"
         fullWidth
       >
         <EuiFormRow
@@ -223,7 +216,6 @@ export const FSSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['fsRepositoryMaxSnapshotBytesDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.maxSnapshotBytesPerSec)}
           error={settingErrors.maxSnapshotBytesPerSec}
           helpText={textService.getSizeNotationHelpText()}
@@ -259,7 +251,6 @@ export const FSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="The snapshot restore rate for each node."
           />
         }
-        idAria="fsRepositoryMaxRestoreBytesDescription"
         fullWidth
       >
         <EuiFormRow
@@ -270,7 +261,6 @@ export const FSSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['fsRepositoryMaxRestoreBytesDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.maxRestoreBytesPerSec)}
           error={settingErrors.maxRestoreBytesPerSec}
           helpText={textService.getSizeNotationHelpText()}
@@ -306,13 +296,11 @@ export const FSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="Only one cluster should have write access to this repository. All other clusters should be read-only."
           />
         }
-        idAria="fsRepositoryReadonlyDescription"
         fullWidth
       >
         <EuiFormRow
           hasEmptyLabelSpace={true}
           fullWidth
-          describedByIds={['fsRepositoryReadonlyDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.readonly)}
           error={settingErrors.readonly}
         >
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/gcs_settings.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/gcs_settings.tsx
index d15e0043b8c81..5a34d3aac6f6b 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/gcs_settings.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/gcs_settings.tsx
@@ -64,7 +64,6 @@ export const GCSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="The name of the Google Cloud Storage client."
           />
         }
-        idAria="gcsRepositoryClientDescription"
         fullWidth
       >
         <EuiFormRow
@@ -75,7 +74,6 @@ export const GCSSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['gcsRepositoryClientDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.client)}
           error={settingErrors.client}
         >
@@ -110,7 +108,6 @@ export const GCSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="The name of the Google Cloud Storage bucket to use for snapshots."
           />
         }
-        idAria="gcsRepositoryBucketDescription"
         fullWidth
       >
         <EuiFormRow
@@ -121,7 +118,6 @@ export const GCSSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['gcsRepositoryBucketDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.bucket)}
           error={settingErrors.bucket}
         >
@@ -156,7 +152,6 @@ export const GCSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="The bucket path to the repository data."
           />
         }
-        idAria="gcsRepositoryBasePathDescription"
         fullWidth
       >
         <EuiFormRow
@@ -167,7 +162,6 @@ export const GCSSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['gcsRepositoryBasePathDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.basePath)}
           error={settingErrors.basePath}
         >
@@ -202,13 +196,11 @@ export const GCSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="Compresses the index mapping and setting files for snapshots. Data files are not compressed."
           />
         }
-        idAria="gcsRepositoryCompressDescription"
         fullWidth
       >
         <EuiFormRow
           hasEmptyLabelSpace={true}
           fullWidth
-          describedByIds={['gcsRepositoryCompressDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.compress)}
           error={settingErrors.compress}
         >
@@ -248,7 +240,6 @@ export const GCSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="Breaks files into smaller units when taking snapshots."
           />
         }
-        idAria="gcsRepositoryChunkSizeDescription"
         fullWidth
       >
         <EuiFormRow
@@ -259,7 +250,6 @@ export const GCSSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['gcsRepositoryChunkSizeDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.chunkSize)}
           error={settingErrors.chunkSize}
           helpText={textService.getSizeNotationHelpText()}
@@ -295,7 +285,6 @@ export const GCSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="The rate for creating snapshots for each node."
           />
         }
-        idAria="gcsRepositoryMaxSnapshotBytesDescription"
         fullWidth
       >
         <EuiFormRow
@@ -306,7 +295,6 @@ export const GCSSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['gcsRepositoryMaxSnapshotBytesDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.maxSnapshotBytesPerSec)}
           error={settingErrors.maxSnapshotBytesPerSec}
           helpText={textService.getSizeNotationHelpText()}
@@ -342,7 +330,6 @@ export const GCSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="The snapshot restore rate for each node."
           />
         }
-        idAria="gcsRepositoryMaxRestoreBytesDescription"
         fullWidth
       >
         <EuiFormRow
@@ -353,7 +340,6 @@ export const GCSSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['gcsRepositoryMaxRestoreBytesDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.maxRestoreBytesPerSec)}
           error={settingErrors.maxRestoreBytesPerSec}
           helpText={textService.getSizeNotationHelpText()}
@@ -389,13 +375,11 @@ export const GCSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="Only one cluster should have write access to this repository. All other clusters should be read-only."
           />
         }
-        idAria="gcsRepositoryReadonlyDescription"
         fullWidth
       >
         <EuiFormRow
           hasEmptyLabelSpace={true}
           fullWidth
-          describedByIds={['gcsRepositoryReadonlyDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.readonly)}
           error={settingErrors.readonly}
         >
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/hdfs_settings.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/hdfs_settings.tsx
index ae42b810bf059..4ef662d645bea 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/hdfs_settings.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/hdfs_settings.tsx
@@ -79,7 +79,6 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="The URI address for HDFS."
           />
         }
-        idAria="hdfsRepositoryUriDescription"
         fullWidth
       >
         <EuiFormRow
@@ -90,7 +89,6 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['hdfsRepositoryUriDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.uri)}
           error={settingErrors.uri}
         >
@@ -108,7 +106,7 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
                 uri: e.target.value ? `hdfs://${e.target.value}` : '',
               });
             }}
-            aria-describedby="hdfsRepositoryUriDescription hdfsRepositoryUriProtocolDescription"
+            aria-describedby="hdfsRepositoryUriProtocolDescription"
             data-test-subj="uriInput"
           />
         </EuiFormRow>
@@ -132,7 +130,6 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="The file path where data is stored."
           />
         }
-        idAria="hdfsRepositoryPathDescription"
         fullWidth
       >
         <EuiFormRow
@@ -143,7 +140,6 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['hdfsRepositoryPathDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.path)}
           error={settingErrors.path}
         >
@@ -178,13 +174,11 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="Loads the default Hadoop configuration."
           />
         }
-        idAria="hdfsRepositoryLoadDefaultsDescription"
         fullWidth
       >
         <EuiFormRow
           hasEmptyLabelSpace={true}
           fullWidth
-          describedByIds={['hdfsRepositoryLoadDefaultsDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.loadDefaults)}
           error={settingErrors.loadDefaults}
         >
@@ -224,13 +218,11 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="Compresses the index mapping and setting files for snapshots. Data files are not compressed."
           />
         }
-        idAria="hdfsRepositoryCompressDescription"
         fullWidth
       >
         <EuiFormRow
           hasEmptyLabelSpace={true}
           fullWidth
-          describedByIds={['hdfsRepositoryCompressDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.compress)}
           error={settingErrors.compress}
         >
@@ -270,7 +262,6 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="Breaks files into smaller units when taking snapshots."
           />
         }
-        idAria="hdfsRepositoryChunkSizeDescription"
         fullWidth
       >
         <EuiFormRow
@@ -281,7 +272,6 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['hdfsRepositoryChunkSizeDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.chunkSize)}
           error={settingErrors.chunkSize}
           helpText={textService.getSizeNotationHelpText()}
@@ -317,7 +307,6 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="The Kerberos principal to use when connecting to a secured HDFS cluster."
           />
         }
-        idAria="hdfsRepositorySecurityPrincipalDescription"
         fullWidth
       >
         <EuiFormRow
@@ -328,7 +317,6 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['hdfsRepositorySecurityPrincipalDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.securityPrincipal)}
           error={settingErrors.securityPrincipal}
         >
@@ -365,7 +353,6 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             />
           </Fragment>
         }
-        idAria="hdfsRepositoryConfigurationDescription"
         fullWidth
       >
         <EuiFormRow
@@ -376,7 +363,6 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['hdfsRepositoryConfigurationDescription']}
           isInvalid={isConfInvalid}
           error={
             <FormattedMessage
@@ -463,7 +449,6 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="The rate for creating snapshots for each node."
           />
         }
-        idAria="hdfsRepositoryMaxSnapshotBytesDescription"
         fullWidth
       >
         <EuiFormRow
@@ -474,7 +459,6 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['hdfsRepositoryMaxSnapshotBytesDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.maxSnapshotBytesPerSec)}
           error={settingErrors.maxSnapshotBytesPerSec}
           helpText={textService.getSizeNotationHelpText()}
@@ -510,7 +494,6 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="The snapshot restore rate for each node."
           />
         }
-        idAria="hdfsRepositoryMaxRestoreBytesDescription"
         fullWidth
       >
         <EuiFormRow
@@ -521,7 +504,6 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['hdfsRepositoryMaxRestoreBytesDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.maxRestoreBytesPerSec)}
           error={settingErrors.maxRestoreBytesPerSec}
           helpText={textService.getSizeNotationHelpText()}
@@ -557,13 +539,11 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             defaultMessage="Only one cluster should have write access to this repository. All other clusters should be read-only."
           />
         }
-        idAria="hdfsRepositoryReadonlyDescription"
         fullWidth
       >
         <EuiFormRow
           hasEmptyLabelSpace={true}
           fullWidth
-          describedByIds={['hdfsRepositoryReadonlyDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.readonly)}
           error={settingErrors.readonly}
         >
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/readonly_settings.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/readonly_settings.tsx
index 5241a55455395..a0cc076465990 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/readonly_settings.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/readonly_settings.tsx
@@ -116,7 +116,6 @@ export const ReadonlySettings: React.FunctionComponent<Props> = ({
             />
           </Fragment>
         }
-        idAria="readonlyRepositoryUrlDescription"
         fullWidth
       >
         <div>
@@ -130,7 +129,6 @@ export const ReadonlySettings: React.FunctionComponent<Props> = ({
                   />
                 }
                 fullWidth
-                describedByIds={['readonlyRepositoryUrlDescription']}
               >
                 <EuiSelect
                   options={schemeOptions}
@@ -151,7 +149,7 @@ export const ReadonlySettings: React.FunctionComponent<Props> = ({
                   />
                 }
                 fullWidth
-                describedByIds={['readonlyRepositoryUrlDescription readonlyRepositoryUrlHelp']}
+                describedByIds={['readonlyRepositoryUrlHelp']}
                 isInvalid={Boolean(hasErrors && settingErrors.url)}
                 error={settingErrors.url}
               >
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/s3_settings.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/s3_settings.tsx
index a897368ae7ca3..1a9902b42a931 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/s3_settings.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/type_settings/s3_settings.tsx
@@ -93,7 +93,6 @@ export const S3Settings: React.FunctionComponent<Props> = ({
             defaultMessage="The name of the AWS S3 client."
           />
         }
-        idAria="s3RepositoryClientDescription"
         fullWidth
       >
         <EuiFormRow
@@ -104,7 +103,6 @@ export const S3Settings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['s3RepositoryClientDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.client)}
           error={settingErrors.client}
         >
@@ -139,7 +137,6 @@ export const S3Settings: React.FunctionComponent<Props> = ({
             defaultMessage="The name of the AWS S3 bucket to use for snapshots."
           />
         }
-        idAria="s3RepositoryBucketDescription"
         fullWidth
       >
         <EuiFormRow
@@ -150,7 +147,6 @@ export const S3Settings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['s3RepositoryBucketDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.bucket)}
           error={settingErrors.bucket}
         >
@@ -185,7 +181,6 @@ export const S3Settings: React.FunctionComponent<Props> = ({
             defaultMessage="The bucket path to the repository data."
           />
         }
-        idAria="s3RepositoryBasePathDescription"
         fullWidth
       >
         <EuiFormRow
@@ -196,7 +191,6 @@ export const S3Settings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['s3RepositoryBasePathDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.basePath)}
           error={settingErrors.basePath}
         >
@@ -231,13 +225,11 @@ export const S3Settings: React.FunctionComponent<Props> = ({
             defaultMessage="Compresses the index mapping and setting files for snapshots. Data files are not compressed."
           />
         }
-        idAria="s3RepositoryCompressDescription"
         fullWidth
       >
         <EuiFormRow
           hasEmptyLabelSpace={true}
           fullWidth
-          describedByIds={['s3RepositoryCompressDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.compress)}
           error={settingErrors.compress}
         >
@@ -277,7 +269,6 @@ export const S3Settings: React.FunctionComponent<Props> = ({
             defaultMessage="Breaks files into smaller units when taking snapshots."
           />
         }
-        idAria="s3RepositoryChunkSizeDescription"
         fullWidth
       >
         <EuiFormRow
@@ -288,7 +279,6 @@ export const S3Settings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['s3RepositoryChunkSizeDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.chunkSize)}
           error={settingErrors.chunkSize}
           helpText={textService.getSizeNotationHelpText()}
@@ -324,13 +314,11 @@ export const S3Settings: React.FunctionComponent<Props> = ({
             defaultMessage="Encrypts files on the server using AES256 algorithm."
           />
         }
-        idAria="s3RepositoryServerSideEncryptionDescription"
         fullWidth
       >
         <EuiFormRow
           hasEmptyLabelSpace={true}
           fullWidth
-          describedByIds={['s3RepositoryServerSideEncryptionDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.serverSideEncryption)}
           error={settingErrors.serverSideEncryption}
         >
@@ -371,7 +359,6 @@ export const S3Settings: React.FunctionComponent<Props> = ({
               to split the chunk into several parts and upload each in its own request."
           />
         }
-        idAria="s3RepositoryBufferSizeDescription"
         fullWidth
       >
         <EuiFormRow
@@ -382,7 +369,6 @@ export const S3Settings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['s3RepositoryBufferSizeDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.bufferSize)}
           error={settingErrors.bufferSize}
           helpText={textService.getSizeNotationHelpText()}
@@ -418,7 +404,6 @@ export const S3Settings: React.FunctionComponent<Props> = ({
             defaultMessage="The canned ACL to add to new S3 buckets and objects."
           />
         }
-        idAria="s3RepositoryCannedAclDescription"
         fullWidth
       >
         <EuiFormRow
@@ -429,7 +414,6 @@ export const S3Settings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['s3RepositoryCannedAclDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.cannedAcl)}
           error={settingErrors.cannedAcl}
         >
@@ -465,7 +449,6 @@ export const S3Settings: React.FunctionComponent<Props> = ({
             defaultMessage="The storage class for new objects in the S3 repository."
           />
         }
-        idAria="s3RepositoryStorageClassDescription"
         fullWidth
       >
         <EuiFormRow
@@ -476,7 +459,6 @@ export const S3Settings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['s3RepositoryStorageClassDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.storageClass)}
           error={settingErrors.storageClass}
         >
@@ -512,7 +494,6 @@ export const S3Settings: React.FunctionComponent<Props> = ({
             defaultMessage="The rate for creating snapshots for each node."
           />
         }
-        idAria="s3RepositoryMaxSnapshotBytesDescription"
         fullWidth
       >
         <EuiFormRow
@@ -523,7 +504,6 @@ export const S3Settings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['s3RepositoryMaxSnapshotBytesDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.maxSnapshotBytesPerSec)}
           error={settingErrors.maxSnapshotBytesPerSec}
           helpText={textService.getSizeNotationHelpText()}
@@ -559,7 +539,6 @@ export const S3Settings: React.FunctionComponent<Props> = ({
             defaultMessage="The snapshot restore rate for each node."
           />
         }
-        idAria="s3RepositoryMaxRestoreBytesDescription"
         fullWidth
       >
         <EuiFormRow
@@ -570,7 +549,6 @@ export const S3Settings: React.FunctionComponent<Props> = ({
             />
           }
           fullWidth
-          describedByIds={['s3RepositoryMaxRestoreBytesDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.maxRestoreBytesPerSec)}
           error={settingErrors.maxRestoreBytesPerSec}
           helpText={textService.getSizeNotationHelpText()}
@@ -606,13 +584,11 @@ export const S3Settings: React.FunctionComponent<Props> = ({
             defaultMessage="Only one cluster should have write access to this repository. All other clusters should be read-only."
           />
         }
-        idAria="s3RepositoryReadonlyDescription"
         fullWidth
       >
         <EuiFormRow
           hasEmptyLabelSpace={true}
           fullWidth
-          describedByIds={['s3RepositoryReadonlyDescription']}
           isInvalid={Boolean(hasErrors && settingErrors.readonly)}
           error={settingErrors.readonly}
         >
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_logistics.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_logistics.tsx
index f5a3180adbd6e..bd8a0650c087f 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_logistics.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_logistics.tsx
@@ -141,14 +141,9 @@ export const RestoreSnapshotStepLogistics: React.FunctionComponent<StepProps> =
               if they are closed and have the same number of shards as the snapshot index."
           />
         }
-        idAria="stepLogisticsIndicesDescription"
         fullWidth
       >
-        <EuiFormRow
-          hasEmptyLabelSpace
-          fullWidth
-          describedByIds={['stepLogisticsIndicesDescription']}
-        >
+        <EuiFormRow hasEmptyLabelSpace fullWidth>
           <Fragment>
             <EuiSwitch
               label={
@@ -361,14 +356,9 @@ export const RestoreSnapshotStepLogistics: React.FunctionComponent<StepProps> =
             defaultMessage="Renames indices on restore."
           />
         }
-        idAria="stepLogisticsRenameIndicesDescription"
         fullWidth
       >
-        <EuiFormRow
-          hasEmptyLabelSpace
-          fullWidth
-          describedByIds={['stepLogisticsRenameIndicesDescription']}
-        >
+        <EuiFormRow hasEmptyLabelSpace fullWidth>
           <Fragment>
             <EuiSwitch
               label={
@@ -481,14 +471,9 @@ export const RestoreSnapshotStepLogistics: React.FunctionComponent<StepProps> =
             defaultMessage="Allows restore of indices that don’t have snapshots of all shards."
           />
         }
-        idAria="stepLogisticsPartialDescription"
         fullWidth
       >
-        <EuiFormRow
-          hasEmptyLabelSpace={true}
-          fullWidth
-          describedByIds={['stepLogisticsPartialDescription']}
-        >
+        <EuiFormRow hasEmptyLabelSpace={true} fullWidth>
           <EuiSwitch
             label={
               <FormattedMessage
@@ -521,13 +506,11 @@ export const RestoreSnapshotStepLogistics: React.FunctionComponent<StepProps> =
               templates with the same name. Also restores persistent settings."
           />
         }
-        idAria="stepLogisticsIncludeGlobalStateDescription"
         fullWidth
       >
         <EuiFormRow
           hasEmptyLabelSpace={true}
           fullWidth
-          describedByIds={['stepLogisticsIncludeGlobalStateDescription']}
           helpText={
             snapshotIncludeGlobalState ? null : (
               <FormattedMessage
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_settings.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_settings.tsx
index adf0a1334bfce..57e86d1747858 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_settings.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_settings.tsx
@@ -121,14 +121,9 @@ export const RestoreSnapshotStepSettings: React.FunctionComponent<StepProps> = (
             }}
           />
         }
-        idAria="stepSettingsIndexSettingsDescription"
         fullWidth
       >
-        <EuiFormRow
-          hasEmptyLabelSpace
-          fullWidth
-          describedByIds={['stepSettingsIndexSettingsDescription']}
-        >
+        <EuiFormRow hasEmptyLabelSpace fullWidth>
           <Fragment>
             <EuiSwitch
               label={
@@ -162,7 +157,6 @@ export const RestoreSnapshotStepSettings: React.FunctionComponent<StepProps> = (
                     />
                   }
                   fullWidth
-                  describedByIds={['stepSettingsIndexSettingsDescription']}
                   isInvalid={Boolean(errors.indexSettings)}
                   error={errors.indexSettings}
                   helpText={
@@ -235,14 +229,9 @@ export const RestoreSnapshotStepSettings: React.FunctionComponent<StepProps> = (
             }}
           />
         }
-        idAria="stepSettingsIgnoreIndexSettingsDescription"
         fullWidth
       >
-        <EuiFormRow
-          hasEmptyLabelSpace
-          fullWidth
-          describedByIds={['stepSettingsIgnoreIndexSettingsDescription']}
-        >
+        <EuiFormRow hasEmptyLabelSpace fullWidth>
           <Fragment>
             <EuiSwitch
               label={
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit_simulate.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit_simulate.tsx
index 8bb1770d2f44d..9ac80ade89daa 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit_simulate.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit_simulate.tsx
@@ -294,7 +294,6 @@ export const JsonWatchEditSimulate = ({
 
         <EuiDescribedFormGroup
           fullWidth
-          idAria="simulateExecutionActionModesDescription"
           title={
             <h2>
               {i18n.translate(
@@ -323,7 +322,6 @@ export const JsonWatchEditSimulate = ({
           }
         >
           <EuiFormRow
-            describedByIds={['simulateExecutionActionModesDescription']}
             label={i18n.translate(
               'xpack.watcher.sections.watchEdit.simulate.form.actionModesFieldLabel',
               {
@@ -342,7 +340,6 @@ export const JsonWatchEditSimulate = ({
 
         <EuiDescribedFormGroup
           fullWidth
-          idAria="simulateExecutionInputOverridesDescription"
           title={
             <h2>
               {i18n.translate(
@@ -361,7 +358,6 @@ export const JsonWatchEditSimulate = ({
         >
           <ErrableFormRow
             id="executeWatchJson"
-            describedByIds={['simulateExecutionInputOverridesDescription']}
             label={i18n.translate(
               'xpack.watcher.sections.watchEdit.simulate.form.alternativeInputFieldLabel',
               {
diff --git a/x-pack/typings/@elastic/eui/index.d.ts b/x-pack/typings/@elastic/eui/index.d.ts
index de9697f859fd7..688d1a2fa127d 100644
--- a/x-pack/typings/@elastic/eui/index.d.ts
+++ b/x-pack/typings/@elastic/eui/index.d.ts
@@ -7,7 +7,6 @@
 // TODO: Remove once typescript definitions are in EUI
 
 declare module '@elastic/eui' {
-  export const EuiDescribedFormGroup: React.FC<any>;
   export const EuiCodeEditor: React.FC<any>;
   export const Query: any;
 }

From f255105fcfd5000d99c9bdd34f9c24183227ee27 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 10 Feb 2020 14:30:21 -0600
Subject: [PATCH 03/10] src snapshot updates

---
 .../field/__snapshots__/field.test.tsx.snap   | 180 ------------------
 src/legacy/server/sass/build.test.js          |  69 +------
 2 files changed, 3 insertions(+), 246 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/__snapshots__/field.test.tsx.snap b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/__snapshots__/field.test.tsx.snap
index 915ee021e9b60..6e42cc0320ccb 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/__snapshots__/field.test.tsx.snap
+++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/__snapshots__/field.test.tsx.snap
@@ -20,16 +20,12 @@ exports[`Field for array setting should render as read only if saving is disable
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="array:test:setting-aria"
       title={
         <h3>
           Array test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -108,16 +104,12 @@ exports[`Field for array setting should render as read only with help text if ov
           </React.Fragment>
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="array:test:setting-aria"
       title={
         <h3>
           Array test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -184,9 +176,6 @@ exports[`Field for array setting should render custom setting icon if it is cust
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="array:test:setting-aria"
       title={
         <h3>
           Array test setting
@@ -204,7 +193,6 @@ exports[`Field for array setting should render custom setting icon if it is cust
           />
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -261,16 +249,12 @@ exports[`Field for array setting should render default value if there is no user
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="array:test:setting-aria"
       title={
         <h3>
           Array test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -349,16 +333,12 @@ exports[`Field for array setting should render user value if there is user value
           </React.Fragment>
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="array:test:setting-aria"
       title={
         <h3>
           Array test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -432,16 +412,12 @@ exports[`Field for boolean setting should render as read only if saving is disab
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="boolean:test:setting-aria"
       title={
         <h3>
           Boolean test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -526,16 +502,12 @@ exports[`Field for boolean setting should render as read only with help text if
           </React.Fragment>
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="boolean:test:setting-aria"
       title={
         <h3>
           Boolean test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -608,9 +580,6 @@ exports[`Field for boolean setting should render custom setting icon if it is cu
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="boolean:test:setting-aria"
       title={
         <h3>
           Boolean test setting
@@ -628,7 +597,6 @@ exports[`Field for boolean setting should render custom setting icon if it is cu
           />
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -691,16 +659,12 @@ exports[`Field for boolean setting should render default value if there is no us
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="boolean:test:setting-aria"
       title={
         <h3>
           Boolean test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -785,16 +749,12 @@ exports[`Field for boolean setting should render user value if there is user val
           </React.Fragment>
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="boolean:test:setting-aria"
       title={
         <h3>
           Boolean test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -874,16 +834,12 @@ exports[`Field for image setting should render as read only if saving is disable
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="image:test:setting-aria"
       title={
         <h3>
           Image test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -963,16 +919,12 @@ exports[`Field for image setting should render as read only with help text if ov
           </React.Fragment>
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="image:test:setting-aria"
       title={
         <h3>
           Image test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -1036,9 +988,6 @@ exports[`Field for image setting should render custom setting icon if it is cust
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="image:test:setting-aria"
       title={
         <h3>
           Image test setting
@@ -1056,7 +1005,6 @@ exports[`Field for image setting should render custom setting icon if it is cust
           />
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -1114,16 +1062,12 @@ exports[`Field for image setting should render default value if there is no user
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="image:test:setting-aria"
       title={
         <h3>
           Image test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -1203,16 +1147,12 @@ exports[`Field for image setting should render user value if there is user value
           </React.Fragment>
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="image:test:setting-aria"
       title={
         <h3>
           Image test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -1321,16 +1261,12 @@ exports[`Field for json setting should render as read only if saving is disabled
           </React.Fragment>
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="json:test:setting-aria"
       title={
         <h3>
           Json test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -1431,16 +1367,12 @@ exports[`Field for json setting should render as read only with help text if ove
           </React.Fragment>
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="json:test:setting-aria"
       title={
         <h3>
           Json test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -1526,9 +1458,6 @@ exports[`Field for json setting should render custom setting icon if it is custo
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="json:test:setting-aria"
       title={
         <h3>
           Json test setting
@@ -1546,7 +1475,6 @@ exports[`Field for json setting should render custom setting icon if it is custo
           />
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -1647,16 +1575,12 @@ exports[`Field for json setting should render default value if there is no user
           </React.Fragment>
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="json:test:setting-aria"
       title={
         <h3>
           Json test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -1774,16 +1698,12 @@ exports[`Field for json setting should render user value if there is user value
           </React.Fragment>
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="json:test:setting-aria"
       title={
         <h3>
           Json test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -1876,16 +1796,12 @@ exports[`Field for markdown setting should render as read only if saving is disa
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="markdown:test:setting-aria"
       title={
         <h3>
           Markdown test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -1983,16 +1899,12 @@ exports[`Field for markdown setting should render as read only with help text if
           </React.Fragment>
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="markdown:test:setting-aria"
       title={
         <h3>
           Markdown test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -2078,9 +1990,6 @@ exports[`Field for markdown setting should render custom setting icon if it is c
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="markdown:test:setting-aria"
       title={
         <h3>
           Markdown test setting
@@ -2098,7 +2007,6 @@ exports[`Field for markdown setting should render custom setting icon if it is c
           />
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -2174,16 +2082,12 @@ exports[`Field for markdown setting should render default value if there is no u
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="markdown:test:setting-aria"
       title={
         <h3>
           Markdown test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -2281,16 +2185,12 @@ exports[`Field for markdown setting should render user value if there is user va
           </React.Fragment>
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="markdown:test:setting-aria"
       title={
         <h3>
           Markdown test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -2383,16 +2283,12 @@ exports[`Field for number setting should render as read only if saving is disabl
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="number:test:setting-aria"
       title={
         <h3>
           Number test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -2471,16 +2367,12 @@ exports[`Field for number setting should render as read only with help text if o
           </React.Fragment>
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="number:test:setting-aria"
       title={
         <h3>
           Number test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -2547,9 +2439,6 @@ exports[`Field for number setting should render custom setting icon if it is cus
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="number:test:setting-aria"
       title={
         <h3>
           Number test setting
@@ -2567,7 +2456,6 @@ exports[`Field for number setting should render custom setting icon if it is cus
           />
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -2624,16 +2512,12 @@ exports[`Field for number setting should render default value if there is no use
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="number:test:setting-aria"
       title={
         <h3>
           Number test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -2712,16 +2596,12 @@ exports[`Field for number setting should render user value if there is user valu
           </React.Fragment>
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="number:test:setting-aria"
       title={
         <h3>
           Number test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -2795,16 +2675,12 @@ exports[`Field for select setting should render as read only if saving is disabl
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="select:test:setting-aria"
       title={
         <h3>
           Select test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -2899,16 +2775,12 @@ exports[`Field for select setting should render as read only with help text if o
           </React.Fragment>
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="select:test:setting-aria"
       title={
         <h3>
           Select test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -2991,9 +2863,6 @@ exports[`Field for select setting should render custom setting icon if it is cus
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="select:test:setting-aria"
       title={
         <h3>
           Select test setting
@@ -3011,7 +2880,6 @@ exports[`Field for select setting should render custom setting icon if it is cus
           />
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -3084,16 +2952,12 @@ exports[`Field for select setting should render default value if there is no use
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="select:test:setting-aria"
       title={
         <h3>
           Select test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -3188,16 +3052,12 @@ exports[`Field for select setting should render user value if there is user valu
           </React.Fragment>
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="select:test:setting-aria"
       title={
         <h3>
           Select test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -3287,16 +3147,12 @@ exports[`Field for string setting should render as read only if saving is disabl
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="string:test:setting-aria"
       title={
         <h3>
           String test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -3375,16 +3231,12 @@ exports[`Field for string setting should render as read only with help text if o
           </React.Fragment>
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="string:test:setting-aria"
       title={
         <h3>
           String test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -3451,9 +3303,6 @@ exports[`Field for string setting should render custom setting icon if it is cus
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="string:test:setting-aria"
       title={
         <h3>
           String test setting
@@ -3471,7 +3320,6 @@ exports[`Field for string setting should render custom setting icon if it is cus
           />
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -3528,16 +3376,12 @@ exports[`Field for string setting should render default value if there is no use
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="string:test:setting-aria"
       title={
         <h3>
           String test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -3616,16 +3460,12 @@ exports[`Field for string setting should render user value if there is user valu
           </React.Fragment>
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="string:test:setting-aria"
       title={
         <h3>
           String test setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -3699,16 +3539,12 @@ exports[`Field for stringWithValidation setting should render as read only if sa
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="string:test-validation:setting-aria"
       title={
         <h3>
           String test validation setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -3787,16 +3623,12 @@ exports[`Field for stringWithValidation setting should render as read only with
           </React.Fragment>
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="string:test-validation:setting-aria"
       title={
         <h3>
           String test validation setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -3863,9 +3695,6 @@ exports[`Field for stringWithValidation setting should render custom setting ico
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="string:test-validation:setting-aria"
       title={
         <h3>
           String test validation setting
@@ -3883,7 +3712,6 @@ exports[`Field for stringWithValidation setting should render custom setting ico
           />
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -3940,16 +3768,12 @@ exports[`Field for stringWithValidation setting should render default value if t
           />
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="string:test-validation:setting-aria"
       title={
         <h3>
           String test validation setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
@@ -4028,16 +3852,12 @@ exports[`Field for stringWithValidation setting should render user value if ther
           </React.Fragment>
         </React.Fragment>
       }
-      fullWidth={false}
-      gutterSize="l"
-      idAria="string:test-validation:setting-aria"
       title={
         <h3>
           String test validation setting
           
         </h3>
       }
-      titleSize="xs"
     >
       <EuiFormRow
         className="mgtAdvancedSettings__fieldRow"
diff --git a/src/legacy/server/sass/build.test.js b/src/legacy/server/sass/build.test.js
index 7092f6ad12921..46a898c30f84e 100644
--- a/src/legacy/server/sass/build.test.js
+++ b/src/legacy/server/sass/build.test.js
@@ -47,28 +47,7 @@ it('builds light themed SASS', async () => {
 
   expect(readFileSync(targetPath, 'utf8').replace(/(\/\*# sourceMappingURL=).*( \*\/)/, '$1...$2'))
     .toMatchInlineSnapshot(`
-    "/* 1 */
-    /* 1 */
-    /**
-     * 1. Extend beta badges to at least 40% of the container's width
-     * 2. Fix for IE to ensure badges are visible outside of a <button> tag
-     */
-    /**
-     * 1. Apply margin to all but last item in the flex.
-     * 2. Margin gets flipped because of the row-reverse.
-     */
-    /**
-     * 3. Must supply both values to background-size or some browsers apply the single value to both directions
-     */
-    /**
-     * 4. Override invalid state with focus state.
-     */
-    /**
-     *  Mixin for use in:
-     *  - EuiCard
-     *  - EuiPageContent
-    */
-    foo bar {
+    "foo bar {
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;
@@ -93,28 +72,7 @@ it('builds dark themed SASS', async () => {
 
   expect(readFileSync(targetPath, 'utf8').replace(/(\/\*# sourceMappingURL=).*( \*\/)/, '$1...$2'))
     .toMatchInlineSnapshot(`
-    "/* 1 */
-    /* 1 */
-    /**
-     * 1. Extend beta badges to at least 40% of the container's width
-     * 2. Fix for IE to ensure badges are visible outside of a <button> tag
-     */
-    /**
-     * 1. Apply margin to all but last item in the flex.
-     * 2. Margin gets flipped because of the row-reverse.
-     */
-    /**
-     * 3. Must supply both values to background-size or some browsers apply the single value to both directions
-     */
-    /**
-     * 4. Override invalid state with focus state.
-     */
-    /**
-     *  Mixin for use in:
-     *  - EuiCard
-     *  - EuiPageContent
-    */
-    foo bar {
+    "foo bar {
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;
@@ -143,28 +101,7 @@ it('rewrites url imports', async () => {
 
   expect(readFileSync(targetPath, 'utf8').replace(/(\/\*# sourceMappingURL=).*( \*\/)/, '$1...$2'))
     .toMatchInlineSnapshot(`
-    "/* 1 */
-    /* 1 */
-    /**
-     * 1. Extend beta badges to at least 40% of the container's width
-     * 2. Fix for IE to ensure badges are visible outside of a <button> tag
-     */
-    /**
-     * 1. Apply margin to all but last item in the flex.
-     * 2. Margin gets flipped because of the row-reverse.
-     */
-    /**
-     * 3. Must supply both values to background-size or some browsers apply the single value to both directions
-     */
-    /**
-     * 4. Override invalid state with focus state.
-     */
-    /**
-     *  Mixin for use in:
-     *  - EuiCard
-     *  - EuiPageContent
-    */
-    foo bar {
+    "foo bar {
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;

From 2c86e952c4b39e1d010e9916cf3ffcd87d688a24 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 10 Feb 2020 16:40:13 -0600
Subject: [PATCH 04/10] mock euicode and euicodeblock for jest

---
 .../angular/directives/no_results.test.js     | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/no_results.test.js b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/no_results.test.js
index 7de792c612993..98a4a926a282e 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/no_results.test.js
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/no_results.test.js
@@ -36,6 +36,31 @@ jest.mock('../../../kibana_services', () => {
   };
 });
 
+// Mocking to prevent errors with React portal.
+// Temporary until https://github.com/elastic/kibana/pull/55877 provides other alternatives.
+jest.mock('@elastic/eui/lib/components/code/code_block', () => {
+  const React = require.requireActual('react');
+  return {
+    EuiCodeBlock: ({ children }) => (
+      <div>
+        <pre>
+          <code>{children}</code>
+        </pre>
+      </div>
+    ),
+  };
+});
+jest.mock('@elastic/eui/lib/components/code/code', () => {
+  const React = require.requireActual('react');
+  return {
+    EuiCode: ({ children }) => (
+      <span>
+        <code>{children}</code>
+      </span>
+    ),
+  };
+});
+
 beforeEach(() => {
   jest.clearAllMocks();
 });

From c3d18b70527d44cc4266b8d99f30e0eedba7f7a3 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 10 Feb 2020 16:41:02 -0600
Subject: [PATCH 05/10] x-pack snapshot updates

---
 .../__test__/__snapshots__/List.test.tsx.snap |  6 --
 .../collection_enabled.test.js.snap           | 26 +++++--
 .../collection_interval.test.js.snap          | 52 ++++++++++---
 .../remote_cluster_form.test.js.snap          | 75 ++++++++++---------
 .../report_listing.test.tsx.snap              |  6 --
 .../note_card_body.test.tsx.snap              | 63 ++++++++++++----
 .../__snapshots__/index.test.tsx.snap         | 63 ++++++++++++----
 .../__snapshots__/monitor_list.test.tsx.snap  |  3 -
 .../elasticsearch_privileges.test.tsx.snap    |  6 --
 .../simple_privilege_section.test.tsx.snap    |  3 -
 10 files changed, 197 insertions(+), 106 deletions(-)

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap b/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
index a45357121354f..a609bf96a8c7e 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
+++ b/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
@@ -120,10 +120,7 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
         className="euiTable euiTable--responsive"
       >
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiScreenReaderOnly euiTableCaption"
-          role="status"
         />
         <thead>
           <tr>
@@ -478,10 +475,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
         className="euiTable euiTable--responsive"
       >
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiScreenReaderOnly euiTableCaption"
-          role="status"
         />
         <thead>
           <tr>
diff --git a/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/collection_enabled/__tests__/__snapshots__/collection_enabled.test.js.snap b/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/collection_enabled/__tests__/__snapshots__/collection_enabled.test.js.snap
index 8fb84982c8665..43ff42b6a80e8 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/collection_enabled/__tests__/__snapshots__/collection_enabled.test.js.snap
+++ b/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/collection_enabled/__tests__/__snapshots__/collection_enabled.test.js.snap
@@ -193,15 +193,22 @@ exports[`ExplainCollectionEnabled should explain about xpack.monitoring.collecti
               paddingSize="l"
               transparentBackground={false}
             >
+              <Portal
+                containerInfo={
+                  <div>
+                    xpack.monitoring.collection.enabled
+                  </div>
+                }
+              >
+                xpack.monitoring.collection.enabled
+              </Portal>
               <span
                 className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
                 style={Object {}}
               >
                 <code
                   className="euiCodeBlock__code"
-                >
-                  xpack.monitoring.collection.enabled
-                </code>
+                />
               </span>
             </EuiCodeBlockImpl>
           </EuiCode>
@@ -214,15 +221,22 @@ exports[`ExplainCollectionEnabled should explain about xpack.monitoring.collecti
               paddingSize="l"
               transparentBackground={false}
             >
+              <Portal
+                containerInfo={
+                  <div>
+                    -1
+                  </div>
+                }
+              >
+                -1
+              </Portal>
               <span
                 className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
                 style={Object {}}
               >
                 <code
                   className="euiCodeBlock__code"
-                >
-                  -1
-                </code>
+                />
               </span>
             </EuiCodeBlockImpl>
           </EuiCode>
diff --git a/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/collection_interval/__tests__/__snapshots__/collection_interval.test.js.snap b/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/collection_interval/__tests__/__snapshots__/collection_interval.test.js.snap
index ac3dce3bfaef6..3cf35609acd07 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/collection_interval/__tests__/__snapshots__/collection_interval.test.js.snap
+++ b/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/collection_interval/__tests__/__snapshots__/collection_interval.test.js.snap
@@ -366,15 +366,22 @@ exports[`ExplainCollectionInterval collection interval setting updates should sh
               paddingSize="l"
               transparentBackground={false}
             >
+              <Portal
+                containerInfo={
+                  <div>
+                    xpack.monitoring.collection.interval
+                  </div>
+                }
+              >
+                xpack.monitoring.collection.interval
+              </Portal>
               <span
                 className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
                 style={Object {}}
               >
                 <code
                   className="euiCodeBlock__code"
-                >
-                  xpack.monitoring.collection.interval
-                </code>
+                />
               </span>
             </EuiCodeBlockImpl>
           </EuiCode>
@@ -387,15 +394,22 @@ exports[`ExplainCollectionInterval collection interval setting updates should sh
               paddingSize="l"
               transparentBackground={false}
             >
+              <Portal
+                containerInfo={
+                  <div>
+                    -1
+                  </div>
+                }
+              >
+                -1
+              </Portal>
               <span
                 className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
                 style={Object {}}
               >
                 <code
                   className="euiCodeBlock__code"
-                >
-                  -1
-                </code>
+                />
               </span>
             </EuiCodeBlockImpl>
           </EuiCode>
@@ -682,15 +696,22 @@ exports[`ExplainCollectionInterval should explain about xpack.monitoring.collect
               paddingSize="l"
               transparentBackground={false}
             >
+              <Portal
+                containerInfo={
+                  <div>
+                    xpack.monitoring.collection.interval
+                  </div>
+                }
+              >
+                xpack.monitoring.collection.interval
+              </Portal>
               <span
                 className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
                 style={Object {}}
               >
                 <code
                   className="euiCodeBlock__code"
-                >
-                  xpack.monitoring.collection.interval
-                </code>
+                />
               </span>
             </EuiCodeBlockImpl>
           </EuiCode>
@@ -703,15 +724,22 @@ exports[`ExplainCollectionInterval should explain about xpack.monitoring.collect
               paddingSize="l"
               transparentBackground={false}
             >
+              <Portal
+                containerInfo={
+                  <div>
+                    -1
+                  </div>
+                }
+              >
+                -1
+              </Portal>
               <span
                 className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
                 style={Object {}}
               >
                 <code
                   className="euiCodeBlock__code"
-                >
-                  -1
-                </code>
+                />
               </span>
             </EuiCodeBlockImpl>
           </EuiCode>
diff --git a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
index 65fc455417fe3..45751997eb0d5 100644
--- a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
+++ b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
@@ -5,27 +5,28 @@ Array [
   <div
     class="euiForm"
   >
-    <div
-      aria-describedby="mockId"
-      aria-labelledby="mockId-title"
+    <fieldset
       class="euiDescribedFormGroup euiDescribedFormGroup--fullWidth"
-      role="group"
     >
+      <legend
+        class="euiScreenReaderOnly"
+      />
       <div
         class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
         <div
           class="euiFlexItem"
         >
-          <h2
-            class="euiTitle euiTitle--small euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
-            id="mockId-title"
-          >
-            Name
-          </h2>
+          <span>
+            <h2
+              aria-hidden="true"
+              class="euiTitle euiTitle--small euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
+            >
+              Name
+            </h2>
+          </span>
           <div
             class="euiText euiText--small euiDescribedFormGroup__description"
-            id="mockId"
           >
             <div
               class="euiTextColor euiTextColor--subdued"
@@ -82,28 +83,29 @@ Array [
           </div>
         </div>
       </div>
-    </div>
-    <div
-      aria-describedby="mockId"
-      aria-labelledby="mockId-title"
+    </fieldset>
+    <fieldset
       class="euiDescribedFormGroup euiDescribedFormGroup--fullWidth"
-      role="group"
     >
+      <legend
+        class="euiScreenReaderOnly"
+      />
       <div
         class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
         <div
           class="euiFlexItem"
         >
-          <h2
-            class="euiTitle euiTitle--small euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
-            id="mockId-title"
-          >
-            Seed nodes for cluster discovery
-          </h2>
+          <span>
+            <h2
+              aria-hidden="true"
+              class="euiTitle euiTitle--small euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
+            >
+              Seed nodes for cluster discovery
+            </h2>
+          </span>
           <div
             class="euiText euiText--small euiDescribedFormGroup__description"
-            id="mockId"
           >
             <div
               class="euiTextColor euiTextColor--subdued"
@@ -194,28 +196,29 @@ Array [
           </div>
         </div>
       </div>
-    </div>
-    <div
-      aria-describedby="mockId"
-      aria-labelledby="mockId-title"
+    </fieldset>
+    <fieldset
       class="euiDescribedFormGroup euiDescribedFormGroup--fullWidth"
-      role="group"
     >
+      <legend
+        class="euiScreenReaderOnly"
+      />
       <div
         class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
         <div
           class="euiFlexItem"
         >
-          <h2
-            class="euiTitle euiTitle--small euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
-            id="mockId-title"
-          >
-            Make remote cluster optional
-          </h2>
+          <span>
+            <h2
+              aria-hidden="true"
+              class="euiTitle euiTitle--small euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
+            >
+              Make remote cluster optional
+            </h2>
+          </span>
           <div
             class="euiText euiText--small euiDescribedFormGroup__description"
-            id="mockId"
           >
             <div
               class="euiTextColor euiTextColor--subdued"
@@ -302,7 +305,7 @@ Array [
           </div>
         </div>
       </div>
-    </div>
+    </fieldset>
   </div>,
   <div
     class="euiSpacer euiSpacer--l"
diff --git a/x-pack/legacy/plugins/reporting/public/components/__snapshots__/report_listing.test.tsx.snap b/x-pack/legacy/plugins/reporting/public/components/__snapshots__/report_listing.test.tsx.snap
index 3b6d7a0b5f003..b5304c6020c43 100644
--- a/x-pack/legacy/plugins/reporting/public/components/__snapshots__/report_listing.test.tsx.snap
+++ b/x-pack/legacy/plugins/reporting/public/components/__snapshots__/report_listing.test.tsx.snap
@@ -91,10 +91,7 @@ Array [
           >
             <EuiScreenReaderOnly>
               <caption
-                aria-live="polite"
-                aria-relevant="text"
                 className="euiScreenReaderOnly euiTableCaption"
-                role="status"
               >
                 <EuiDelayRender
                   delay={500}
@@ -297,10 +294,7 @@ Array [
         >
           <EuiScreenReaderOnly>
             <caption
-              aria-live="polite"
-              aria-relevant="text"
               className="euiScreenReaderOnly euiTableCaption"
-              role="status"
             >
               <EuiDelayRender
                 delay={500}
diff --git a/x-pack/legacy/plugins/siem/public/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
index ba35940ff0e5f..bbacc86dcca2c 100644
--- a/x-pack/legacy/plugins/siem/public/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
@@ -333,6 +333,7 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
             "graphic": "#e7664c",
           },
         },
+        "euiPaletteColorBlindKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9'",
         "euiPanelPaddingModifiers": Object {
           "paddingLarge": "24px",
           "paddingMedium": "16px",
@@ -437,6 +438,54 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         "euiTextScale": "2.25 1.75 1.25 1.125 1 0.875 0.75",
         "euiTitleColor": "#dfe5ef",
         "euiToastWidth": "320px",
+        "euiTokenGrayColor": "#535966",
+        "euiTokenTypeKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9', 'gray'",
+        "euiTokenTypes": Object {
+          "euiColorVis0": Object {
+            "behindText": "#6dccb1",
+            "graphic": "#54b399",
+          },
+          "euiColorVis1": Object {
+            "behindText": "#79aad9",
+            "graphic": "#6092c0",
+          },
+          "euiColorVis2": Object {
+            "behindText": "#ee789d",
+            "graphic": "#d36086",
+          },
+          "euiColorVis3": Object {
+            "behindText": "#a987d1",
+            "graphic": "#9170b8",
+          },
+          "euiColorVis4": Object {
+            "behindText": "#e4a6c7",
+            "graphic": "#ca8eae",
+          },
+          "euiColorVis5": Object {
+            "behindText": "#f1d86f",
+            "graphic": "#d6bf57",
+          },
+          "euiColorVis6": Object {
+            "behindText": "#d2c0a0",
+            "graphic": "#b9a888",
+          },
+          "euiColorVis7": Object {
+            "behindText": "#f5a35c",
+            "graphic": "#da8b45",
+          },
+          "euiColorVis8": Object {
+            "behindText": "#c47c6c",
+            "graphic": "#aa6556",
+          },
+          "euiColorVis9": Object {
+            "behindText": "#ff7e62",
+            "graphic": "#e7664c",
+          },
+          "gray": Object {
+            "behindText": "#535966",
+            "graphic": "#535966",
+          },
+        },
         "euiTooltipAnimations": Object {
           "bottom": "euiToolTipLeft",
           "left": "euiToolTipBottom",
@@ -548,20 +597,6 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
           "success": "#7de2d1",
           "warning": "#ffce7a",
         },
-        "tokenTypes": Object {
-          "tokenTint01": "#1ba9f5",
-          "tokenTint02": "#f990c0",
-          "tokenTint03": "#9170b8",
-          "tokenTint04": "#da8b45",
-          "tokenTint05": "#6092c0",
-          "tokenTint06": "#e6c220",
-          "tokenTint07": "#54b399",
-          "tokenTint08": "#920000",
-          "tokenTint09": "#ff00ff",
-          "tokenTint10": "#26ab00",
-          "tokenTint11": "#4c1604",
-          "tokenTint12": "#666666",
-        },
       },
     }
   }
diff --git a/x-pack/legacy/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap
index 59d2d91897254..86a3c67227119 100644
--- a/x-pack/legacy/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap
@@ -333,6 +333,7 @@ exports[`Paginated Table Component rendering it renders the default load more ta
             "graphic": "#e7664c",
           },
         },
+        "euiPaletteColorBlindKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9'",
         "euiPanelPaddingModifiers": Object {
           "paddingLarge": "24px",
           "paddingMedium": "16px",
@@ -437,6 +438,54 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         "euiTextScale": "2.25 1.75 1.25 1.125 1 0.875 0.75",
         "euiTitleColor": "#dfe5ef",
         "euiToastWidth": "320px",
+        "euiTokenGrayColor": "#535966",
+        "euiTokenTypeKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9', 'gray'",
+        "euiTokenTypes": Object {
+          "euiColorVis0": Object {
+            "behindText": "#6dccb1",
+            "graphic": "#54b399",
+          },
+          "euiColorVis1": Object {
+            "behindText": "#79aad9",
+            "graphic": "#6092c0",
+          },
+          "euiColorVis2": Object {
+            "behindText": "#ee789d",
+            "graphic": "#d36086",
+          },
+          "euiColorVis3": Object {
+            "behindText": "#a987d1",
+            "graphic": "#9170b8",
+          },
+          "euiColorVis4": Object {
+            "behindText": "#e4a6c7",
+            "graphic": "#ca8eae",
+          },
+          "euiColorVis5": Object {
+            "behindText": "#f1d86f",
+            "graphic": "#d6bf57",
+          },
+          "euiColorVis6": Object {
+            "behindText": "#d2c0a0",
+            "graphic": "#b9a888",
+          },
+          "euiColorVis7": Object {
+            "behindText": "#f5a35c",
+            "graphic": "#da8b45",
+          },
+          "euiColorVis8": Object {
+            "behindText": "#c47c6c",
+            "graphic": "#aa6556",
+          },
+          "euiColorVis9": Object {
+            "behindText": "#ff7e62",
+            "graphic": "#e7664c",
+          },
+          "gray": Object {
+            "behindText": "#535966",
+            "graphic": "#535966",
+          },
+        },
         "euiTooltipAnimations": Object {
           "bottom": "euiToolTipLeft",
           "left": "euiToolTipBottom",
@@ -548,20 +597,6 @@ exports[`Paginated Table Component rendering it renders the default load more ta
           "success": "#7de2d1",
           "warning": "#ffce7a",
         },
-        "tokenTypes": Object {
-          "tokenTint01": "#1ba9f5",
-          "tokenTint02": "#f990c0",
-          "tokenTint03": "#9170b8",
-          "tokenTint04": "#da8b45",
-          "tokenTint05": "#6092c0",
-          "tokenTint06": "#e6c220",
-          "tokenTint07": "#54b399",
-          "tokenTint08": "#920000",
-          "tokenTint09": "#ff00ff",
-          "tokenTint10": "#26ab00",
-          "tokenTint11": "#4c1604",
-          "tokenTint12": "#666666",
-        },
       },
     }
   }
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
index 3655db5aaff1e..fa536ce53533a 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
@@ -156,10 +156,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
         class="euiTable euiTable--responsive"
       >
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           class="euiScreenReaderOnly euiTableCaption"
-          role="status"
         />
         <thead>
           <tr>
diff --git a/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap b/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap
index 323629de7578d..2a00c7ca5c347 100644
--- a/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap
+++ b/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap
@@ -26,8 +26,6 @@ exports[`it renders without crashing 1`] = `
         </ForwardRef>
       </p>
     }
-    fullWidth={false}
-    gutterSize="l"
     title={
       <h3>
         <FormattedMessage
@@ -37,7 +35,6 @@ exports[`it renders without crashing 1`] = `
         />
       </h3>
     }
-    titleSize="xs"
   >
     <EuiFormRow
       describedByIds={Array []}
@@ -92,8 +89,6 @@ exports[`it renders without crashing 1`] = `
         </ForwardRef>
       </p>
     }
-    fullWidth={false}
-    gutterSize="l"
     title={
       <h3>
         <FormattedMessage
@@ -103,7 +98,6 @@ exports[`it renders without crashing 1`] = `
         />
       </h3>
     }
-    titleSize="xs"
   >
     <EuiFormRow
       describedByIds={Array []}
diff --git a/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap b/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap
index a2741773f183b..4d8f590f286ae 100644
--- a/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap
+++ b/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap
@@ -12,8 +12,6 @@ exports[`<SimplePrivilegeForm> renders without crashing 1`] = `
         />
       </p>
     }
-    fullWidth={false}
-    gutterSize="l"
     title={
       <h3>
         <FormattedMessage
@@ -23,7 +21,6 @@ exports[`<SimplePrivilegeForm> renders without crashing 1`] = `
         />
       </h3>
     }
-    titleSize="xs"
   >
     <EuiFormRow
       describedByIds={Array []}

From e33a1844ec3a4e5d632388af002aa1be71b29d87 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 10 Feb 2020 17:23:08 -0600
Subject: [PATCH 06/10] mock euicode for jest

---
 .../__snapshots__/exporters.test.js.snap      |  64 +++--------
 .../exporters/__tests__/exporters.test.js     |  13 +++
 .../__snapshots__/plugin_enabled.test.js.snap |  24 +---
 .../__tests__/plugin_enabled.test.js          |  13 +++
 .../__snapshots__/reason_found.test.js.snap   | 104 +++++-------------
 .../reasons/__tests__/reason_found.test.js    |  13 +++
 6 files changed, 87 insertions(+), 144 deletions(-)

diff --git a/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/exporters/__tests__/__snapshots__/exporters.test.js.snap b/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/exporters/__tests__/__snapshots__/exporters.test.js.snap
index 89cd3e5852f82..fb06ff2d866bb 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/exporters/__tests__/__snapshots__/exporters.test.js.snap
+++ b/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/exporters/__tests__/__snapshots__/exporters.test.js.snap
@@ -26,32 +26,20 @@ Array [
   >
     <p>
       We checked the 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           esProd001
         </code>
       </span>
        settings for 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           xpack.monitoring.exporters
         </code>
       </span>
       , and found the reason: 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           myMonitoringClusterExporter1
         </code>
       </span>
@@ -59,32 +47,20 @@ Array [
     </p>
     <p>
       Using monitoring exporters to ship the monitoring data to a remote monitoring cluster is highly recommended as it keeps the integrity of the monitoring data safe no matter what the state of the production cluster. However, as this instance of Kibana could not find any monitoring data, there seems to be a problem with the 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           xpack.monitoring.exporters
         </code>
       </span>
        configuration, or the 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           xpack.monitoring.elasticsearch
         </code>
       </span>
        settings in 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           kibana.yml
         </code>
       </span>
@@ -92,22 +68,14 @@ Array [
     </p>
     <p>
       Check that the intended exporters are enabled for sending statistics to the monitoring cluster, and that the monitoring cluster host matches the 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           xpack.monitoring.elasticsearch
         </code>
       </span>
        setting in 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           kibana.yml
         </code>
       </span>
diff --git a/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/exporters/__tests__/exporters.test.js b/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/exporters/__tests__/exporters.test.js
index bdeb469daee46..c9147037f0022 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/exporters/__tests__/exporters.test.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/exporters/__tests__/exporters.test.js
@@ -8,6 +8,19 @@ import React from 'react';
 import { renderWithIntl } from '../../../../../../../../../test_utils/enzyme_helpers';
 import { ExplainExporters, ExplainExportersCloud } from '../exporters';
 
+// Mocking to prevent errors with React portal.
+// Temporary until https://github.com/elastic/kibana/pull/55877 provides other alternatives.
+jest.mock('@elastic/eui/lib/components/code/code', () => {
+  const React = require.requireActual('react');
+  return {
+    EuiCode: ({ children }) => (
+      <span>
+        <code>{children}</code>
+      </span>
+    ),
+  };
+});
+
 describe('ExplainExporters', () => {
   test('should explain about xpack.monitoring.exporters setting', () => {
     const reason = {
diff --git a/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/plugin_enabled/__tests__/__snapshots__/plugin_enabled.test.js.snap b/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/plugin_enabled/__tests__/__snapshots__/plugin_enabled.test.js.snap
index 8871d8caadd1c..63053c3f7c0cd 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/plugin_enabled/__tests__/__snapshots__/plugin_enabled.test.js.snap
+++ b/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/plugin_enabled/__tests__/__snapshots__/plugin_enabled.test.js.snap
@@ -26,32 +26,20 @@ Array [
   >
     <p>
       We checked the cluster settings and found that 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           xpack.monitoring.enabled
         </code>
       </span>
        is set to 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           false
         </code>
       </span>
        set, which disables monitoring. Removing the 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           xpack.monitoring.enabled: false
         </code>
       </span>
diff --git a/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/plugin_enabled/__tests__/plugin_enabled.test.js b/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/plugin_enabled/__tests__/plugin_enabled.test.js
index b962d136ba642..56536a8e4270b 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/plugin_enabled/__tests__/plugin_enabled.test.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/plugin_enabled/__tests__/plugin_enabled.test.js
@@ -8,6 +8,19 @@ import React from 'react';
 import { renderWithIntl } from '../../../../../../../../../test_utils/enzyme_helpers';
 import { ExplainPluginEnabled } from '../plugin_enabled';
 
+// Mocking to prevent errors with React portal.
+// Temporary until https://github.com/elastic/kibana/pull/55877 provides other alternatives.
+jest.mock('@elastic/eui/lib/components/code/code', () => {
+  const React = require.requireActual('react');
+  return {
+    EuiCode: ({ children }) => (
+      <span>
+        <code>{children}</code>
+      </span>
+    ),
+  };
+});
+
 describe('ExplainPluginEnabled', () => {
   test('should explain about xpack.monitoring.enabled setting', () => {
     const reason = {
diff --git a/x-pack/legacy/plugins/monitoring/public/components/no_data/reasons/__tests__/__snapshots__/reason_found.test.js.snap b/x-pack/legacy/plugins/monitoring/public/components/no_data/reasons/__tests__/__snapshots__/reason_found.test.js.snap
index fadf7c5757bf8..898be82b139d1 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/no_data/reasons/__tests__/__snapshots__/reason_found.test.js.snap
+++ b/x-pack/legacy/plugins/monitoring/public/components/no_data/reasons/__tests__/__snapshots__/reason_found.test.js.snap
@@ -26,22 +26,14 @@ Array [
   >
     <p>
       We checked the cluster settings and found that 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           xpack.monitoring.collection.interval
         </code>
       </span>
        is set to 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           -1
         </code>
       </span>
@@ -109,32 +101,20 @@ Array [
   >
     <p>
       We checked the 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           node001foo
         </code>
       </span>
        settings for 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           xpack.monitoring.exporters
         </code>
       </span>
       , and found the reason: 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           myMonitoringClusterExporter1
         </code>
       </span>
@@ -142,32 +122,20 @@ Array [
     </p>
     <p>
       Using monitoring exporters to ship the monitoring data to a remote monitoring cluster is highly recommended as it keeps the integrity of the monitoring data safe no matter what the state of the production cluster. However, as this instance of Kibana could not find any monitoring data, there seems to be a problem with the 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           xpack.monitoring.exporters
         </code>
       </span>
        configuration, or the 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           xpack.monitoring.elasticsearch
         </code>
       </span>
        settings in 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           kibana.yml
         </code>
       </span>
@@ -175,22 +143,14 @@ Array [
     </p>
     <p>
       Check that the intended exporters are enabled for sending statistics to the monitoring cluster, and that the monitoring cluster host matches the 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           xpack.monitoring.elasticsearch
         </code>
       </span>
        setting in 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           kibana.yml
         </code>
       </span>
@@ -277,32 +237,20 @@ Array [
   >
     <p>
       We checked the node001foo settings and found that 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           xpack.monitoring.enabled
         </code>
       </span>
        is set to 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           false
         </code>
       </span>
        set, which disables monitoring. Removing the 
-      <span
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
+      <span>
+        <code>
           xpack.monitoring.enabled: false
         </code>
       </span>
diff --git a/x-pack/legacy/plugins/monitoring/public/components/no_data/reasons/__tests__/reason_found.test.js b/x-pack/legacy/plugins/monitoring/public/components/no_data/reasons/__tests__/reason_found.test.js
index a51817db324b7..e9b2ff11538ab 100644
--- a/x-pack/legacy/plugins/monitoring/public/components/no_data/reasons/__tests__/reason_found.test.js
+++ b/x-pack/legacy/plugins/monitoring/public/components/no_data/reasons/__tests__/reason_found.test.js
@@ -8,6 +8,19 @@ import React from 'react';
 import { renderWithIntl } from '../../../../../../../../test_utils/enzyme_helpers';
 import { ReasonFound } from '../';
 
+// Mocking to prevent errors with React portal.
+// Temporary until https://github.com/elastic/kibana/pull/55877 provides other alternatives.
+jest.mock('@elastic/eui/lib/components/code/code', () => {
+  const React = require.requireActual('react');
+  return {
+    EuiCode: ({ children }) => (
+      <span>
+        <code>{children}</code>
+      </span>
+    ),
+  };
+});
+
 const enabler = {};
 
 describe('ReasonFound', () => {

From 4b31e804336c91f263d40ba3caa688875beb2dab Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 11 Feb 2020 09:26:45 -0600
Subject: [PATCH 07/10] more euicode snapshots

---
 .../__snapshots__/no_results.test.js.snap     | 64 +++++--------------
 1 file changed, 16 insertions(+), 48 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/__snapshots__/no_results.test.js.snap b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/__snapshots__/no_results.test.js.snap
index 98cb3ccf6dd91..4126bd9d27ffd 100644
--- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/__snapshots__/no_results.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/__snapshots__/no_results.test.js.snap
@@ -77,12 +77,8 @@ Array [
         <dd
           class="euiDescriptionList__description"
         >
-          <span
-            class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-          >
-            <code
-              class="euiCodeBlock__code"
-            >
+          <span>
+            <code>
               200
             </code>
           </span>
@@ -101,12 +97,8 @@ Array [
         <dd
           class="euiDescriptionList__description"
         >
-          <span
-            class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-          >
-            <code
-              class="euiCodeBlock__code"
-            >
+          <span>
+            <code>
               status:200
             </code>
           </span>
@@ -125,12 +117,8 @@ Array [
         <dd
           class="euiDescriptionList__description"
         >
-          <span
-            class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-          >
-            <code
-              class="euiCodeBlock__code"
-            >
+          <span>
+            <code>
               status:[400 TO 499]
             </code>
           </span>
@@ -149,12 +137,8 @@ Array [
         <dd
           class="euiDescriptionList__description"
         >
-          <span
-            class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-          >
-            <code
-              class="euiCodeBlock__code"
-            >
+          <span>
+            <code>
               status:[400 TO 499] AND extension:PHP
             </code>
           </span>
@@ -173,12 +157,8 @@ Array [
         <dd
           class="euiDescriptionList__description"
         >
-          <span
-            class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-          >
-            <code
-              class="euiCodeBlock__code"
-            >
+          <span>
+            <code>
               status:[400 TO 499] AND (extension:php OR extension:html)
             </code>
           </span>
@@ -291,15 +271,9 @@ Array [
           <div
             class="euiSpacer euiSpacer--s"
           />
-          <div
-            class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingSmall"
-          >
-            <pre
-              class="euiCodeBlock__pre"
-            >
-              <code
-                class="euiCodeBlock__code"
-              >
+          <div>
+            <pre>
+              <code>
                 {"reason":"Awful error"}
               </code>
             </pre>
@@ -320,15 +294,9 @@ Array [
           <div
             class="euiSpacer euiSpacer--s"
           />
-          <div
-            class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingSmall"
-          >
-            <pre
-              class="euiCodeBlock__pre"
-            >
-              <code
-                class="euiCodeBlock__code"
-              >
+          <div>
+            <pre>
+              <code>
                 {"reason":"Bad error"}
               </code>
             </pre>

From ee54d9d5b30de0a68838744f7a534eb4fda8779f Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 11 Feb 2020 10:19:45 -0600
Subject: [PATCH 08/10] mock euicode in storyshots

---
 .../canvas/.storybook/storyshots.test.js      |  13 +
 .../keyboard_shortcuts_doc.stories.storyshot  | 792 ++++--------------
 2 files changed, 189 insertions(+), 616 deletions(-)

diff --git a/x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js b/x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js
index 10842f4268fd3..7e8afe3b04378 100644
--- a/x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js
+++ b/x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js
@@ -27,6 +27,19 @@ Date.now = jest.fn(() => testTime);
 // Mock EUI generated ids to be consistently predictable for snapshots.
 jest.mock(`@elastic/eui/lib/components/form/form_row/make_id`, () => () => `generated-id`);
 
+// Mocking to prevent errors with React portal.
+// Temporary until https://github.com/elastic/kibana/pull/55877 provides other alternatives.
+jest.mock('@elastic/eui/lib/components/code/code', () => {
+  const React = require.requireActual('react');
+  return {
+    EuiCode: ({children, className}) => (
+      <span>
+        <code>{children}</code>
+      </span>
+    ),
+  };
+});
+
 // Jest automatically mocks SVGs to be a plain-text string that isn't an SVG.  Canvas uses
 // them in examples, so let's mock a few for tests.
 jest.mock('../canvas_plugin_src/renderers/shape/shapes', () => ({
diff --git a/x-pack/legacy/plugins/canvas/public/components/keyboard_shortcuts_doc/__examples__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot b/x-pack/legacy/plugins/canvas/public/components/keyboard_shortcuts_doc/__examples__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot
index 9397a67402e51..35cdd5ac378f4 100644
--- a/x-pack/legacy/plugins/canvas/public/components/keyboard_shortcuts_doc/__examples__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/components/keyboard_shortcuts_doc/__examples__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot
@@ -104,24 +104,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       CTRL
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       X
                     </code>
                   </span>
@@ -136,24 +126,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       CTRL
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       C
                     </code>
                   </span>
@@ -168,24 +148,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       CTRL
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       V
                     </code>
                   </span>
@@ -200,24 +170,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       CTRL
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       D
                     </code>
                   </span>
@@ -232,13 +192,8 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       DEL
                     </code>
                   </span>
@@ -249,13 +204,8 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                    
                 </span>
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       BACKSPACE
                     </code>
                   </span>
@@ -270,24 +220,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       CTRL
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ↑
                     </code>
                   </span>
@@ -302,35 +242,20 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       CTRL
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       SHIFT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ↑
                     </code>
                   </span>
@@ -345,24 +270,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       CTRL
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ↓
                     </code>
                   </span>
@@ -377,35 +292,20 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       CTRL
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       SHIFT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ↓
                     </code>
                   </span>
@@ -420,13 +320,8 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       G
                     </code>
                   </span>
@@ -441,13 +336,8 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       U
                     </code>
                   </span>
@@ -462,13 +352,8 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ↑
                     </code>
                   </span>
@@ -483,13 +368,8 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ↓
                     </code>
                   </span>
@@ -504,13 +384,8 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ←
                     </code>
                   </span>
@@ -525,13 +400,8 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       →
                     </code>
                   </span>
@@ -546,24 +416,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       SHIFT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ↑
                     </code>
                   </span>
@@ -578,24 +438,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       SHIFT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ↓
                     </code>
                   </span>
@@ -610,24 +460,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       SHIFT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ←
                     </code>
                   </span>
@@ -642,24 +482,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       SHIFT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       →
                     </code>
                   </span>
@@ -693,24 +523,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       CTRL
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ENTER
                     </code>
                   </span>
@@ -744,24 +564,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       SHIFT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       CLICK
                     </code>
                   </span>
@@ -776,24 +586,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ALT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       DRAG
                     </code>
                   </span>
@@ -808,24 +608,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       CTRL
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       DRAG
                     </code>
                   </span>
@@ -840,24 +630,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       CTRL
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       CLICK
                     </code>
                   </span>
@@ -872,24 +652,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       CTRL
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       Z
                     </code>
                   </span>
@@ -904,35 +674,20 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       CTRL
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       SHIFT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       Z
                     </code>
                   </span>
@@ -947,24 +702,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ALT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       [
                     </code>
                   </span>
@@ -979,24 +724,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ALT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ]
                     </code>
                   </span>
@@ -1011,24 +746,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ALT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       E
                     </code>
                   </span>
@@ -1043,24 +768,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ALT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       G
                     </code>
                   </span>
@@ -1075,24 +790,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ALT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       R
                     </code>
                   </span>
@@ -1107,35 +812,20 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       CTRL
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ALT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       +
                     </code>
                   </span>
@@ -1150,35 +840,20 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       CTRL
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ALT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       -
                     </code>
                   </span>
@@ -1193,35 +868,20 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       CTRL
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ALT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       [
                     </code>
                   </span>
@@ -1236,24 +896,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ALT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       F
                     </code>
                   </span>
@@ -1264,24 +914,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                    
                 </span>
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ALT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       P
                     </code>
                   </span>
@@ -1315,24 +955,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ALT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       F
                     </code>
                   </span>
@@ -1343,24 +973,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                    
                 </span>
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ALT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       P
                     </code>
                   </span>
@@ -1375,13 +995,8 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ESC
                     </code>
                   </span>
@@ -1396,24 +1011,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ALT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       [
                     </code>
                   </span>
@@ -1424,13 +1029,8 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                    
                 </span>
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       BACKSPACE
                     </code>
                   </span>
@@ -1441,13 +1041,8 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                    
                 </span>
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ←
                     </code>
                   </span>
@@ -1462,24 +1057,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ALT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ]
                     </code>
                   </span>
@@ -1490,13 +1075,8 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                    
                 </span>
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       SPACE
                     </code>
                   </span>
@@ -1507,13 +1087,8 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                    
                 </span>
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       →
                     </code>
                   </span>
@@ -1528,24 +1103,14 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       ALT
                     </code>
                   </span>
                    
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       R
                     </code>
                   </span>
@@ -1560,13 +1125,8 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
                 className="euiDescriptionList__description"
               >
                 <span>
-                  <span
-                    className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
-                    style={Object {}}
-                  >
-                    <code
-                      className="euiCodeBlock__code"
-                    >
+                  <span>
+                    <code>
                       P
                     </code>
                   </span>

From 7555f5f21ae7aa95a598749675e6c11c82d348a0 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 11 Feb 2020 15:50:12 -0600
Subject: [PATCH 09/10] types/enzyme yarn.lock

---
 yarn.lock | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index cdfff145d588f..51edd382e6394 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4361,7 +4361,7 @@
   resolved "https://registry.yarnpkg.com/@types/elasticsearch/-/elasticsearch-5.0.33.tgz#b0fd37dc674f498223b6d68c313bdfd71f4d812b"
   integrity sha512-n/g9pqJEpE4fyUE8VvHNGtl7E2Wv8TCroNwfgAeJKRV4ghDENahtrAo1KMsFNIejBD2gDAlEUa4CM4oEEd8p9Q==
 
-"@types/enzyme@^3.1.13":
+"@types/enzyme@^3.1.13", "@types/enzyme@^3.9.0":
   version "3.10.5"
   resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.5.tgz#fe7eeba3550369eed20e7fb565bfb74eec44f1f0"
   integrity sha512-R+phe509UuUYy9Tk0YlSbipRpfVtIzb/9BHn5pTEtjJTF5LXvUjrIQcZvNyANNEyFrd2YGs196PniNT1fgvOQA==
@@ -4369,14 +4369,6 @@
     "@types/cheerio" "*"
     "@types/react" "*"
 
-"@types/enzyme@^3.9.0":
-  version "3.9.3"
-  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.9.3.tgz#d1029c0edd353d7b00f3924803eb88216460beed"
-  integrity sha512-jDKoZiiMA3lGO3skSO7dfqEHNvmiTLLV+PHD9EBQVlJANJvpY6qq1zzjRI24ZOtG7F+CS7BVWDXKewRmN8PjHQ==
-  dependencies:
-    "@types/cheerio" "*"
-    "@types/react" "*"
-
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"

From ffd1e25d17dc9bde06bd39fd4a6640056b8806b2 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 11 Feb 2020 17:13:16 -0600
Subject: [PATCH 10/10] sidenav type update

---
 .../dimension_panel/dimension_panel.test.tsx  | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx
index d7e6c6f2d0511..98cf862e1fd2b 100644
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx
@@ -7,7 +7,7 @@
 import { ReactWrapper, ShallowWrapper } from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { EuiComboBox, EuiSideNav, EuiPopover } from '@elastic/eui';
+import { EuiComboBox, EuiSideNav, EuiSideNavItemType, EuiPopover } from '@elastic/eui';
 import { changeColumn } from '../state_helpers';
 import {
   IndexPatternDimensionPanel,
@@ -303,11 +303,12 @@ describe('IndexPatternDimensionPanel', () => {
 
     openPopover();
 
-    const options = (wrapper.find(EuiSideNav).prop('items')[0].items as unknown) as Array<{
+    interface ItemType {
       name: string;
-      className: string;
       'data-test-subj': string;
-    }>;
+    }
+    const items: Array<EuiSideNavItemType<ItemType>> = wrapper.find(EuiSideNav).prop('items');
+    const options = (items[0].items as unknown) as ItemType[];
 
     expect(options.find(({ name }) => name === 'Minimum')!['data-test-subj']).not.toContain(
       'Incompatible'
@@ -883,12 +884,20 @@ describe('IndexPatternDimensionPanel', () => {
 
     openPopover();
 
-    expect(
-      wrapper
-        .find(EuiSideNav)
-        .prop('items')[0]
-        .items.map(({ name }: { name: React.ReactNode }) => name)
-    ).toEqual(['Unique count', 'Average', 'Count', 'Maximum', 'Minimum', 'Sum']);
+    interface ItemType {
+      name: React.ReactNode;
+    }
+    const items: Array<EuiSideNavItemType<ItemType>> = wrapper.find(EuiSideNav).prop('items');
+    const options = (items[0].items as unknown) as ItemType[];
+
+    expect(options.map(({ name }: { name: React.ReactNode }) => name)).toEqual([
+      'Unique count',
+      'Average',
+      'Count',
+      'Maximum',
+      'Minimum',
+      'Sum',
+    ]);
   });
 
   it('should add a column on selection of a field', () => {