Upgrade EUI to v19.0.0 (#57284)

* eui to v19.0.0

* typescript updates; idAria removal

* src snapshot updates

* mock euicode and euicodeblock for jest

* x-pack snapshot updates

* mock euicode for jest

* more euicode snapshots

* mock euicode in storyshots

* types/enzyme yarn.lock

* sidenav type update

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",

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",

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
+          <span>
-            class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+            <code>
-          >
-            <code
-              class="euiCodeBlock__code"
-            >
               200
             </code>
           </span>
@@ -101,12 +97,8 @@ Array [
         <dd
           class="euiDescriptionList__description"
         >
-          <span
+          <span>
-            class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+            <code>
-          >
-            <code
-              class="euiCodeBlock__code"
-            >
               status:200
             </code>
           </span>
@@ -125,12 +117,8 @@ Array [
         <dd
           class="euiDescriptionList__description"
         >
-          <span
+          <span>
-            class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+            <code>
-          >
-            <code
-              class="euiCodeBlock__code"
-            >
               status:[400 TO 499]
             </code>
           </span>
@@ -149,12 +137,8 @@ Array [
         <dd
           class="euiDescriptionList__description"
         >
-          <span
+          <span>
-            class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+            <code>
-          >
-            <code
-              class="euiCodeBlock__code"
-            >
               status:[400 TO 499] AND extension:PHP
             </code>
           </span>
@@ -173,12 +157,8 @@ Array [
         <dd
           class="euiDescriptionList__description"
         >
-          <span
+          <span>
-            class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+            <code>
-          >
-            <code
-              class="euiCodeBlock__code"
-            >
               status:[400 TO 499] AND (extension:php OR extension:html)
             </code>
           </span>
@@ -291,15 +271,9 @@ Array [
           <div
             class="euiSpacer euiSpacer--s"
           />
-          <div
+          <div>
-            class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingSmall"
+            <pre>
-          >
+              <code>
-            <pre
-              class="euiCodeBlock__pre"
-            >
-              <code
-                class="euiCodeBlock__code"
-              >
                 {"reason":"Awful error"}
               </code>
             </pre>
@@ -320,15 +294,9 @@ Array [
           <div
             class="euiSpacer euiSpacer--s"
           />
-          <div
+          <div>
-            class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingSmall"
+            <pre>
-          >
+              <code>
-            <pre
-              class="euiCodeBlock__pre"
-            >
-              <code
-                class="euiCodeBlock__code"
-              >
                 {"reason":"Bad error"}
               </code>
             </pre>

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';
 

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();
 });

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 */
+    "foo bar {
-    /* 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 {
       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 */
+    "foo bar {
-    /* 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 {
       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 */
+    "foo bar {
-    /* 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 {
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;

src/plugins/advanced_settings/public/management_app/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"

src/plugins/advanced_settings/public/management_app/components/field/field.tsx

@@ -815,7 +815,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}
@@ -824,7 +823,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)}

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;
 }
 

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(title)) {
-  if (isTitleString) {
     // 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>
+    <EuiDescribedFormGroup title={titleWrapped} description={description} fullWidth>
-      {children ? children : <Field field={field!} idAria={idAria} {...rest} />}
+      {children ? children : <Field field={field!} {...rest} />}
     </EuiDescribedFormGroup>
   );
 };

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, EuiContextMenuPanelDescriptor } from '@elastic/eui';
-import { EuiContextMenu } from '@elastic/eui';
 
 import { HttpStart } from 'kibana/public';
 

src/plugins/share/public/types.ts

@@ -17,10 +17,7 @@
  * under the License.
  */
 
-import {
+import { EuiContextMenuPanelDescriptor, EuiContextMenuPanelItemDescriptor } from '@elastic/eui';
-  EuiContextMenuPanelDescriptor,
-  EuiContextMenuPanelItemDescriptor,
-} from '@elastic/eui/src/components/context_menu/context_menu';
 
 /**
  * @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;
 }
 

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"
   }

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"
   }
 }

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": {

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": {

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;
 }

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>

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', () => ({

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>

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>

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"

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
+      <FormRow title={indexPatterns.title} description={indexPatterns.description}>
-        title={indexPatterns.title}
-        description={indexPatterns.description}
-        idAria={indexPatterns.idAria}
-      >
         <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,
           }}
         />

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
+        <EuiFormRow fullWidth isInvalid={!valid} label={indicesSelectionLabel} labelType="legend">
-          describedByIds={['indices']}
-          fullWidth
-          isInvalid={!valid}
-          label={indicesSelectionLabel}
-          labelType="legend"
-        >
           <>{choices}</>
         </EuiFormRow>
       </LoadingOverlayWrapper>

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
+      <EuiFormRow error={false} fullWidth isInvalid={false} label={startTimeLabel}>
-        describedByIds={['timeRange']}
-        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
+      <EuiFormRow error={false} fullWidth isInvalid={false} label={endTimeLabel}>
-        describedByIds={['timeRange']}
-        error={false}
-        fullWidth
-        isInvalid={false}
-        label={endTimeLabel}
-      >
         <EuiFlexGroup gutterSize="s">
           <EuiFormControlLayout
             clear={endTime && !disabled ? { onClick: () => setEndTime(undefined) } : undefined}

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={

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={

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}

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;

x-pack/legacy/plugins/lens/public/indexpattern_datasource/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(
+    interface ItemType {
-      wrapper
+      name: React.ReactNode;
-        .find(EuiSideNav)
+    }
-        .prop('items')[0]
+    const items: Array<EuiSideNavItemType<ItemType>> = wrapper.find(EuiSideNav).prop('items');
-        .items.map(({ name }) => name)
+    const options = (items[0].items as unknown) as ItemType[];
-    ).toEqual(['Unique count', 'Average', 'Count', 'Maximum', 'Minimum', 'Sum']);
+
+    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', () => {

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
+      <EuiFormRow label={title} error={validation.message} isInvalid={validation.valid === false}>
-        label={title}
-        describedByIds={['description']}
-        error={validation.message}
-        isInvalid={validation.valid === false}
-      >
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>

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
+      <EuiFormRow label={title} error={validation.message} isInvalid={validation.valid === false}>
-        label={title}
-        describedByIds={['description']}
-        error={validation.message}
-        isInvalid={validation.valid === false}
-      >
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>

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
+      <EuiFormRow label={title} error={validation.message} isInvalid={validation.valid === false}>
-        label={title}
-        describedByIds={['description']}
-        error={validation.message}
-        isInvalid={validation.valid === false}
-      >
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>

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
+      <EuiFormRow label={title} error={validation.message} isInvalid={validation.valid === false}>
-        label={title}
-        describedByIds={['description']}
-        error={validation.message}
-        isInvalid={validation.valid === false}
-      >
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>

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>

x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/calendars/description.tsx

@@ -24,7 +24,6 @@ export const Description: FC = memo(({ children }) => {
   );
   return (
     <EuiDescribedFormGroup
-      idAria="calendars_description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -43,7 +42,7 @@ export const Description: FC = memo(({ children }) => {
         />
       }
     >
-      <EuiFormRow describedByIds={['calendars_description']}>
+      <EuiFormRow>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>

x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/custom_urls/description.tsx

@@ -26,7 +26,6 @@ export const Description: FC = memo(({ children }) => {
     <EuiDescribedFormGroup
       fullWidth
       className="ml-custom-urls-selection"
-      idAria="custom_urls_description"
       title={<h3>{title}</h3>}
       description={
         <FormattedMessage
@@ -45,7 +44,7 @@ export const Description: FC = memo(({ children }) => {
         />
       }
     >
-      <EuiFormRow describedByIds={['custom_urls_description']} fullWidth>
+      <EuiFormRow fullWidth>
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>

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>

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>

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
+      <EuiFormRow label={title} error={validation.message} isInvalid={validation.valid === false}>
-        label={title}
-        describedByIds={['description']}
-        error={validation.message}
-        isInvalid={validation.valid === false}
-      >
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>

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>

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}>
+    <EuiDescribedFormGroup title={<h3>{title}</h3>} description={description}>
-      <EuiFormRow
+      <EuiFormRow label={title} error={validation.message} isInvalid={validation.valid === false}>
-        label={title}
-        describedByIds={['description']}
-        error={validation.message}
-        isInvalid={validation.valid === false}
-      >
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>

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>

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
+      <EuiFormRow label={title} error={validation.message} isInvalid={validation.valid === false}>
-        label={title}
-        describedByIds={['description']}
-        error={validation.message}
-        isInvalid={validation.valid === false}
-      >
         <>{children}</>
       </EuiFormRow>
     </EuiDescribedFormGroup>

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>

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>

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>

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>

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>

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',
           })}
         >

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>

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>

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
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
           esProd001
         </code>
       </span>
        settings for 
-      <span
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
           xpack.monitoring.exporters
         </code>
       </span>
       , and found the reason: 
-      <span
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__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
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
           xpack.monitoring.exporters
         </code>
       </span>
        configuration, or the 
-      <span
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
           xpack.monitoring.elasticsearch
         </code>
       </span>
        settings in 
-      <span
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__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
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
           xpack.monitoring.elasticsearch
         </code>
       </span>
        setting in 
-      <span
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
           kibana.yml
         </code>
       </span>

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 = {

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
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
           xpack.monitoring.enabled
         </code>
       </span>
        is set to 
-      <span
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
           false
         </code>
       </span>
        set, which disables monitoring. Removing the 
-      <span
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
           xpack.monitoring.enabled: false
         </code>
       </span>

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 = {

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
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
           xpack.monitoring.collection.interval
         </code>
       </span>
        is set to 
-      <span
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
           -1
         </code>
       </span>
@@ -109,32 +101,20 @@ Array [
   >
     <p>
       We checked the 
-      <span
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
           node001foo
         </code>
       </span>
        settings for 
-      <span
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
           xpack.monitoring.exporters
         </code>
       </span>
       , and found the reason: 
-      <span
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__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
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
           xpack.monitoring.exporters
         </code>
       </span>
        configuration, or the 
-      <span
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
           xpack.monitoring.elasticsearch
         </code>
       </span>
        settings in 
-      <span
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__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
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
           xpack.monitoring.elasticsearch
         </code>
       </span>
        setting in 
-      <span
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
           kibana.yml
         </code>
       </span>
@@ -277,32 +237,20 @@ Array [
   >
     <p>
       We checked the node001foo settings and found that 
-      <span
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
           xpack.monitoring.enabled
         </code>
       </span>
        is set to 
-      <span
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
           false
         </code>
       </span>
        set, which disables monitoring. Removing the 
-      <span
+      <span>
-        class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline"
+        <code>
-      >
-        <code
-          class="euiCodeBlock__code"
-        >
           xpack.monitoring.enabled: false
         </code>
       </span>

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', () => {

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
+    <fieldset
-      aria-describedby="mockId"
-      aria-labelledby="mockId-title"
       class="euiDescribedFormGroup euiDescribedFormGroup--fullWidth"
-      role="group"
     >
+      <legend
+        class="euiScreenReaderOnly"
+      />
       <div
         class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
         <div
           class="euiFlexItem"
         >
-          <h2
+          <span>
-            class="euiTitle euiTitle--small euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
+            <h2
-            id="mockId-title"
+              aria-hidden="true"
-          >
+              class="euiTitle euiTitle--small euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
-            Name
+            >
-          </h2>
+              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>
+    </fieldset>
-    <div
+    <fieldset
-      aria-describedby="mockId"
-      aria-labelledby="mockId-title"
       class="euiDescribedFormGroup euiDescribedFormGroup--fullWidth"
-      role="group"
     >
+      <legend
+        class="euiScreenReaderOnly"
+      />
       <div
         class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
         <div
           class="euiFlexItem"
         >
-          <h2
+          <span>
-            class="euiTitle euiTitle--small euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
+            <h2
-            id="mockId-title"
+              aria-hidden="true"
-          >
+              class="euiTitle euiTitle--small euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
-            Seed nodes for cluster discovery
+            >
-          </h2>
+              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>
+    </fieldset>
-    <div
+    <fieldset
-      aria-describedby="mockId"
-      aria-labelledby="mockId-title"
       class="euiDescribedFormGroup euiDescribedFormGroup--fullWidth"
-      role="group"
     >
+      <legend
+        class="euiScreenReaderOnly"
+      />
       <div
         class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
         <div
           class="euiFlexItem"
         >
-          <h2
+          <span>
-            class="euiTitle euiTitle--small euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
+            <h2
-            id="mockId-title"
+              aria-hidden="true"
-          >
+              class="euiTitle euiTitle--small euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
-            Make remote cluster optional
+            >
-          </h2>
+              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"

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}

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",
-        },
       },
     }
   }

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",
-        },
       },
     }
   }

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={

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

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
+      <EuiFormRow hasEmptyLabelSpace fullWidth>
-        hasEmptyLabelSpace
-        describedByIds={['policyIgnoreUnavailableDescription']}
-        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
+      <EuiFormRow hasEmptyLabelSpace fullWidth>
-        hasEmptyLabelSpace
-        describedByIds={['policyIncludeGlobalStateDescription']}
-        fullWidth
-      >
         <EuiSwitch
           data-test-subj="globalStateToggle"
           label={

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

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}
         >

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}
         >

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}
         >

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}
         >

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}
               >

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}
         >

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
+        <EuiFormRow hasEmptyLabelSpace fullWidth>
-          hasEmptyLabelSpace
-          fullWidth
-          describedByIds={['stepLogisticsIndicesDescription']}
-        >
           <Fragment>
             <EuiSwitch
               label={
@@ -361,14 +356,9 @@ export const RestoreSnapshotStepLogistics: React.FunctionComponent<StepProps> =
             defaultMessage="Renames indices on restore."
           />
         }
-        idAria="stepLogisticsRenameIndicesDescription"
         fullWidth
       >
-        <EuiFormRow
+        <EuiFormRow hasEmptyLabelSpace fullWidth>
-          hasEmptyLabelSpace
-          fullWidth
-          describedByIds={['stepLogisticsRenameIndicesDescription']}
-        >
           <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
+        <EuiFormRow hasEmptyLabelSpace={true} fullWidth>
-          hasEmptyLabelSpace={true}
-          fullWidth
-          describedByIds={['stepLogisticsPartialDescription']}
-        >
           <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

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
+        <EuiFormRow hasEmptyLabelSpace fullWidth>
-          hasEmptyLabelSpace
-          fullWidth
-          describedByIds={['stepSettingsIndexSettingsDescription']}
-        >
           <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
+        <EuiFormRow hasEmptyLabelSpace fullWidth>
-          hasEmptyLabelSpace
-          fullWidth
-          describedByIds={['stepSettingsIgnoreIndexSettingsDescription']}
-        >
           <Fragment>
             <EuiSwitch
               label={

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>

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",

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 []}

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 []}

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',
               {

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;
 }

yarn.lock

@@ -1955,15 +1955,17 @@
     tabbable "^1.1.0"
     uuid "^3.1.0"
 
-"@elastic/eui@18.3.0":
+"@elastic/eui@19.0.0":
-  version "18.3.0"
+  version "19.0.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-18.3.0.tgz#e21c6246624f694e2ae1c7c1f1a11b612faf260a"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-19.0.0.tgz#cf7d644945c95997d442585cf614e853f173746e"
-  integrity sha512-Rkj1rTtDa6iZMUF7pxYRojku1sLXzTU0FK1D9i0XE3H//exy3VyTV6qUlbdkiKXjO7emrgQqfzKDeXT+ZYztgg==
+  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"
@@ -4384,10 +4386,10 @@
   resolved "https://registry.yarnpkg.com/@types/elasticsearch/-/elasticsearch-5.0.33.tgz#b0fd37dc674f498223b6d68c313bdfd71f4d812b"
   integrity sha512-n/g9pqJEpE4fyUE8VvHNGtl7E2Wv8TCroNwfgAeJKRV4ghDENahtrAo1KMsFNIejBD2gDAlEUa4CM4oEEd8p9Q==
 
-"@types/enzyme@^3.9.0":
+"@types/enzyme@^3.1.13", "@types/enzyme@^3.9.0":
-  version "3.9.3"
+  version "3.10.5"
-  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.9.3.tgz#d1029c0edd353d7b00f3924803eb88216460beed"
+  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.5.tgz#fe7eeba3550369eed20e7fb565bfb74eec44f1f0"
-  integrity sha512-jDKoZiiMA3lGO3skSO7dfqEHNvmiTLLV+PHD9EBQVlJANJvpY6qq1zzjRI24ZOtG7F+CS7BVWDXKewRmN8PjHQ==
+  integrity sha512-R+phe509UuUYy9Tk0YlSbipRpfVtIzb/9BHn5pTEtjJTF5LXvUjrIQcZvNyANNEyFrd2YGs196PniNT1fgvOQA==
   dependencies:
     "@types/cheerio" "*"
     "@types/react" "*"