From f475ce95db5b3f364fb52702cd31aeb81e9db9e0 Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Sat, 12 Oct 2019 02:55:25 +0530
Subject: [PATCH] Fixes several a11y issues manifesting in Kibana (#2411)

Fixes several of misc a11y issues showing up in Kibana:
- Poor labeling in `EuiSuperDatePicker` ([Kibana issue 38794](https://github.com/elastic/kibana/issues/38794)) (this kind of snowballed into improving several things in the vicinity)
- Fixes #2416: `EuiFormRow`s that render fields that also render a label end up rendering multiple labels for an input which breaks many assistive tech (this issue was found during the in progress Kibana rollout of automated a11y testing ([Kibana issue 43584](https://github.com/elastic/kibana/pull/43584) )
- Fixes #2414: `EuiCodeEditor`s would render with the same ID which breaks many assistive tech (this issue was found during the in progress Kibana rollout of automated a11y testing)
---
 CHANGELOG.md                                  |   6 +-
 src-docs/src/views/form_layouts/form_rows.js  |   5 +-
 .../__snapshots__/code_editor.test.js.snap    |  22 +-
 src/components/code_editor/code_editor.js     |   1 +
 .../code_editor/code_editor.test.js           |   4 +-
 .../date_popover/relative_tab.js              | 101 +++--
 .../__snapshots__/quick_select.test.js.snap   | 382 ++++++++----------
 .../_commonly_used_time_ranges.scss           |   4 +
 .../quick_select_popover/_index.scss          |   1 +
 .../quick_select_popover/_quick_select.scss   |   3 +-
 .../_quick_select_popover.scss                |   3 +-
 .../commonly_used_time_ranges.js              |  35 +-
 .../quick_select_popover/quick_select.js      | 177 +++++---
 .../quick_select_popover/quick_select.test.js |   6 +
 .../quick_select_popover/refresh_interval.js  |  54 ++-
 .../__snapshots__/flex_item.test.tsx.snap     |  18 -
 src/components/flex/flex_grid.tsx             |  11 +-
 src/components/flex/flex_item.test.tsx        |  24 +-
 src/components/flex/flex_item.tsx             |   4 +-
 .../described_form_group.test.js.snap         |   7 +-
 .../__snapshots__/form_row.test.js.snap       |  32 +-
 src/components/form/form_row/form_row.js      |  19 +-
 22 files changed, 514 insertions(+), 405 deletions(-)
 create mode 100644 src/components/date_picker/super_date_picker/quick_select_popover/_commonly_used_time_ranges.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e8547e7ce8..298710f9ff7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,13 +4,17 @@
 - Added new `EuiColorStops` component ([#2360](https://github.com/elastic/eui/pull/2360))
 - Added `currency` glyph to 'EuiIcon' ([#2398](https://github.com/elastic/eui/pull/2398))
 - Migrate `EuiBreadcrumbs`, `EuiHeader` etc, and `EuiLink` to TypeScript ([#2391](https://github.com/elastic/eui/pull/2391))
+- Added `hasChildLabel` prop to `EuiFormRow` to avoid duplicate labels ([#2390](https://github.com/elastic/eui/pull/2390))
 - Added `component` prop to `EuiPageBody`, switching the default from `div` to `main` ([#2410](https://github.com/elastic/eui/pull/2410))
 - Added focus state to `EuiListGroupItem` ([#2406](https://github.com/elastic/eui/pull/2406))
 - Added `keyboardShorcut` glyph to 'EuiIcon ([#2413](https://github.com/elastic/eui/pull/2413))
 
 **Bug fixes**
 
-- Fix `EuiSelectable` to accept programmatic updates to its `options` prop ([#2390](https://github.com/elastic/eui/pull/2390))
+- Fixed `EuiSelectable` to accept programmatic updates to its `options` prop ([#2390](https://github.com/elastic/eui/pull/2390))
+- Fixed poor labeling in `EuiSuperDatePicker` ([#2390](https://github.com/elastic/eui/pull/2411))
+- Fixed `EuiCodeEditor`'s ID to be dynamic between renders ([#2390](https://github.com/elastic/eui/pull/2411))
+- Fixed `EuiCodeEditor` to not render multiple labels for some inputs ([#2390](https://github.com/elastic/eui/pull/2411))
 
 ## [`14.4.0`](https://github.com/elastic/eui/tree/v14.4.0)
 
diff --git a/src-docs/src/views/form_layouts/form_rows.js b/src-docs/src/views/form_layouts/form_rows.js
index 42b14c9ab53..312c0350b2b 100644
--- a/src-docs/src/views/form_layouts/form_rows.js
+++ b/src-docs/src/views/form_layouts/form_rows.js
@@ -117,7 +117,10 @@ export default class extends Component {
           <EuiRange min={0} max={100} name="range" id="range" />
         </EuiFormRow>
 
-        <EuiFormRow label="Use a switch instead of a single checkbox">
+        <EuiFormRow
+          label="Use a switch instead of a single checkbox"
+          labelAppend="Some inputs also render their own labels, such as the switch, so they need the row label turned off because multiple labels break screen readers. "
+          hasChildLabel={false}>
           <EuiSwitch
             name="switch"
             label="Should we do this?"
diff --git a/src/components/code_editor/__snapshots__/code_editor.test.js.snap b/src/components/code_editor/__snapshots__/code_editor.test.js.snap
index a3b2b19c116..55512191f5a 100644
--- a/src/components/code_editor/__snapshots__/code_editor.test.js.snap
+++ b/src/components/code_editor/__snapshots__/code_editor.test.js.snap
@@ -4,7 +4,7 @@ exports[`EuiCodeEditor behavior hint element should be disabled when the ui ace
 <div
   class="euiCodeEditorKeyboardHint"
   data-test-subj="codeEditorHint"
-  id="42"
+  id="htmlId"
   role="button"
   tabindex="0"
 >
@@ -25,7 +25,7 @@ exports[`EuiCodeEditor behavior hint element should be enabled when the ui ace b
 <div
   class="euiCodeEditorKeyboardHint"
   data-test-subj="codeEditorHint"
-  id="42"
+  id="htmlId"
   role="button"
   tabindex="0"
 >
@@ -46,7 +46,7 @@ exports[`EuiCodeEditor behavior hint element should be tabable 1`] = `
 <div
   class="euiCodeEditorKeyboardHint"
   data-test-subj="codeEditorHint"
-  id="42"
+  id="htmlId"
   role="button"
   tabindex="0"
 >
@@ -71,7 +71,7 @@ exports[`EuiCodeEditor is rendered 1`] = `
   <div
     class="euiCodeEditorKeyboardHint"
     data-test-subj="codeEditorHint"
-    id="42"
+    id="htmlId"
     role="button"
     tabindex="0"
   >
@@ -88,7 +88,7 @@ exports[`EuiCodeEditor is rendered 1`] = `
   </div>
   <div
     class=" ace_editor ace-tm testClass1 testClass2"
-    id="brace-editor"
+    id="htmlId"
     style="width: 500px; height: 500px;"
   >
     <textarea
@@ -187,7 +187,7 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-describedby on
   <div
     class="euiCodeEditorKeyboardHint"
     data-test-subj="codeEditorHint"
-    id="42"
+    id="htmlId"
     role="button"
     tabindex="0"
   >
@@ -204,7 +204,7 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-describedby on
   </div>
   <div
     class=" ace_editor ace-tm"
-    id="brace-editor"
+    id="htmlId"
     style="width: 500px; height: 500px;"
   >
     <textarea
@@ -303,7 +303,7 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-labelledby on t
   <div
     class="euiCodeEditorKeyboardHint"
     data-test-subj="codeEditorHint"
-    id="42"
+    id="htmlId"
     role="button"
     tabindex="0"
   >
@@ -320,7 +320,7 @@ exports[`EuiCodeEditor props aria attributes allows setting aria-labelledby on t
   </div>
   <div
     class=" ace_editor ace-tm"
-    id="brace-editor"
+    id="htmlId"
     style="width: 500px; height: 500px;"
   >
     <textarea
@@ -419,7 +419,7 @@ exports[`EuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
   <div
     class="euiCodeEditorKeyboardHint"
     data-test-subj="codeEditorHint"
-    id="42"
+    id="htmlId"
     role="button"
     tabindex="0"
   >
@@ -436,7 +436,7 @@ exports[`EuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
   </div>
   <div
     class=" ace_editor ace-tm"
-    id="brace-editor"
+    id="htmlId"
     style="width: 500px; height: 500px;"
   >
     <textarea
diff --git a/src/components/code_editor/code_editor.js b/src/components/code_editor/code_editor.js
index fbf5fe32025..6cbe07a731e 100644
--- a/src/components/code_editor/code_editor.js
+++ b/src/components/code_editor/code_editor.js
@@ -204,6 +204,7 @@ export class EuiCodeEditor extends Component {
         {prompt}
 
         <AceEditor
+          name={this.idGenerator()}
           ref={this.aceEditorRef}
           width={width}
           height={height}
diff --git a/src/components/code_editor/code_editor.test.js b/src/components/code_editor/code_editor.test.js
index 8c28d9bf60c..7a3c8a75319 100644
--- a/src/components/code_editor/code_editor.test.js
+++ b/src/components/code_editor/code_editor.test.js
@@ -11,9 +11,7 @@ import {
 
 // Mock the htmlIdGenerator to generate predictable ids for snapshot tests
 jest.mock('../../services/accessibility/html_id_generator', () => ({
-  htmlIdGenerator: () => {
-    return () => 42;
-  },
+  htmlIdGenerator: () => () => 'htmlId',
 }));
 
 describe('EuiCodeEditor', () => {
diff --git a/src/components/date_picker/super_date_picker/date_popover/relative_tab.js b/src/components/date_picker/super_date_picker/date_popover/relative_tab.js
index 7efeb0dfead..acf3bcf733d 100644
--- a/src/components/date_picker/super_date_picker/date_popover/relative_tab.js
+++ b/src/components/date_picker/super_date_picker/date_popover/relative_tab.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import dateMath from '@elastic/datemath';
 import { toSentenceCase } from '../../../../services/string/to_case';
-
+import { htmlIdGenerator } from '../../../../services';
 import { EuiFlexGroup, EuiFlexItem } from '../../../flex';
 import {
   EuiForm,
@@ -21,6 +21,8 @@ import {
   parseRelativeParts,
   toRelativeStringFromParts,
 } from '../relative_utils';
+import { EuiScreenReaderOnly } from '../../../accessibility';
+import { EuiI18n } from '../../../i18n';
 
 export class EuiRelativeTab extends Component {
   constructor(props) {
@@ -33,6 +35,8 @@ export class EuiRelativeTab extends Component {
     };
   }
 
+  generateId = htmlIdGenerator();
+
   onCountChange = evt => {
     const sanitizedValue = parseInt(evt.target.value, 10);
     this.setState(
@@ -69,6 +73,7 @@ export class EuiRelativeTab extends Component {
   };
 
   render() {
+    const relativeDateInputNumberDescriptionId = this.generateId();
     const isInvalid = this.state.count < 0;
     const parsedValue = dateMath.parse(this.props.value, {
       roundUp: this.props.roundUp,
@@ -81,45 +86,87 @@ export class EuiRelativeTab extends Component {
       <EuiForm className="euiDatePopoverContent__padded">
         <EuiFlexGroup gutterSize="s" responsive={false}>
           <EuiFlexItem>
-            <EuiFormRow
-              isInvalid={isInvalid}
-              error={isInvalid ? 'Must be >= 0' : null}>
-              <EuiFieldNumber
-                compressed
-                aria-label="Count of"
-                data-test-subj={'superDatePickerRelativeDateInputNumber'}
-                value={this.state.count}
-                onChange={this.onCountChange}
-                isInvalid={isInvalid}
-              />
-            </EuiFormRow>
+            <EuiI18n
+              tokens={[
+                'euiRelativeTab.numberInputError',
+                'euiRelativeTab.numberInputLabel',
+              ]}
+              defaults={['Must be >= 0', 'Time span amount']}>
+              {([numberInputError, numberInputLabel]) => (
+                <EuiFormRow
+                  isInvalid={isInvalid}
+                  error={isInvalid ? numberInputError : null}>
+                  <EuiFieldNumber
+                    compressed
+                    aria-label={numberInputLabel}
+                    aria-describedby={relativeDateInputNumberDescriptionId}
+                    data-test-subj={'superDatePickerRelativeDateInputNumber'}
+                    value={this.state.count}
+                    onChange={this.onCountChange}
+                    isInvalid={isInvalid}
+                  />
+                </EuiFormRow>
+              )}
+            </EuiI18n>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiSelect
-              compressed
-              data-test-subj={'superDatePickerRelativeDateInputUnitSelector'}
-              value={this.state.unit}
-              options={relativeOptions}
-              onChange={this.onUnitChange}
-            />
+            <EuiI18n
+              token="euiRelativeTab.unitInputLabel"
+              default="Relative time span">
+              {unitInputLabel => (
+                <EuiSelect
+                  compressed
+                  aria-label={unitInputLabel}
+                  data-test-subj={
+                    'superDatePickerRelativeDateInputUnitSelector'
+                  }
+                  value={this.state.unit}
+                  options={relativeOptions}
+                  onChange={this.onUnitChange}
+                />
+              )}
+            </EuiI18n>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="m" />
-        <EuiSwitch
-          data-test-subj={'superDatePickerRelativeDateRoundSwitch'}
-          label={`Round to the ${timeUnits[this.state.unit.substring(0, 1)]}`}
-          checked={this.state.round}
-          onChange={this.onRoundChange}
-        />
+        <EuiI18n
+          token="euiRelativeTab.roundingLabel"
+          default="Round to the {unit}"
+          values={{ unit: timeUnits[this.state.unit.substring(0, 1)] }}>
+          {roundingLabel => (
+            <EuiSwitch
+              data-test-subj={'superDatePickerRelativeDateRoundSwitch'}
+              label={roundingLabel}
+              checked={this.state.round}
+              onChange={this.onRoundChange}
+            />
+          )}
+        </EuiI18n>
+
         <EuiSpacer size="m" />
         <EuiFieldText
           compressed
           value={formatedValue}
           readOnly
           prepend={
-            <EuiFormLabel>{this.state.sentenceCasedPosition} date</EuiFormLabel>
+            <EuiFormLabel>
+              <EuiI18n
+                token="euiRelativeTab.relativeDate"
+                default="{position} date"
+                values={{ position: this.state.sentenceCasedPosition }}
+              />
+            </EuiFormLabel>
           }
         />
+        <EuiScreenReaderOnly id={relativeDateInputNumberDescriptionId}>
+          <p>
+            <EuiI18n
+              token="euiRelativeTab.fullDescription"
+              default="The unit is changeable. Currently set to {unit}."
+              values={{ unit: this.state.unit }}
+            />
+          </p>
+        </EuiScreenReaderOnly>
       </EuiForm>
     );
   }
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap
index fc678ee0d4f..5b41e109f0b 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap
@@ -1,50 +1,68 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiQuickSelect is rendered 1`] = `
-<Fragment>
+<fieldset>
+  <EuiI18n
+    defaults={
+      Array [
+        "Quick select a time range",
+        "Quick select",
+      ]
+    }
+    tokens={
+      Array [
+        "euiQuickSelect.legendLabel",
+        "euiQuickSelect.legendText",
+      ]
+    }
+  >
+    <Component />
+  </EuiI18n>
   <EuiFlexGroup
     alignItems="center"
     gutterSize="s"
+    justifyContent="spaceBetween"
     responsive={false}
   >
-    <EuiFlexItem>
-      <EuiTitle
-        size="xxxs"
-      >
-        <span>
-          Quick select
-        </span>
-      </EuiTitle>
-    </EuiFlexItem>
     <EuiFlexItem
       grow={false}
     >
-      <EuiToolTip
-        content="Previous time window"
-        delay="regular"
-        position="top"
+      <EuiI18n
+        default="Quick select"
+        token="euiQuickSelect.quickSelectTitle"
       >
-        <EuiButtonIcon
-          aria-label="Previous time window"
-          iconType="arrowLeft"
-          onClick={[Function]}
-        />
-      </EuiToolTip>
+        <Component />
+      </EuiI18n>
     </EuiFlexItem>
     <EuiFlexItem
       grow={false}
     >
-      <EuiToolTip
-        content="Next time window"
-        delay="regular"
-        position="top"
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+        responsive={false}
       >
-        <EuiButtonIcon
-          aria-label="Next time window"
-          iconType="arrowRight"
-          onClick={[Function]}
-        />
-      </EuiToolTip>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiI18n
+            default="Previous time window"
+            token="euiQuickSelect.previousLabel"
+          >
+            <Component />
+          </EuiI18n>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiI18n
+            default="Next time window"
+            token="euiQuickSelect.nextLabel"
+          >
+            <Component />
+          </EuiI18n>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiFlexItem>
   </EuiFlexGroup>
   <EuiSpacer
@@ -55,145 +73,132 @@ exports[`EuiQuickSelect is rendered 1`] = `
     responsive={false}
   >
     <EuiFlexItem>
-      <EuiSelect
-        aria-label="Quick time tense"
-        compressed={true}
-        fullWidth={false}
-        hasNoInitialSelection={false}
-        isLoading={false}
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "text": "Last",
-              "value": "last",
-            },
-            Object {
-              "text": "Next",
-              "value": "next",
-            },
-          ]
-        }
-        value="last"
-      />
+      <EuiI18n
+        default="Time tense"
+        token="euiQuickSelect.tenseLabel"
+      >
+        <Component />
+      </EuiI18n>
     </EuiFlexItem>
     <EuiFlexItem>
-      <EuiFieldNumber
-        aria-label="Quick time value"
-        compressed={true}
-        fullWidth={false}
-        isLoading={false}
-        onChange={[Function]}
-        value={15}
-      />
+      <EuiI18n
+        default="Time value"
+        token="euiQuickSelect.valueLabel"
+      >
+        <Component />
+      </EuiI18n>
     </EuiFlexItem>
     <EuiFlexItem>
-      <EuiSelect
-        aria-label="Quick time units"
-        compressed={true}
-        fullWidth={false}
-        hasNoInitialSelection={false}
-        isLoading={false}
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "text": "seconds",
-              "value": "s",
-            },
-            Object {
-              "text": "minutes",
-              "value": "m",
-            },
-            Object {
-              "text": "hours",
-              "value": "h",
-            },
-            Object {
-              "text": "days",
-              "value": "d",
-            },
-            Object {
-              "text": "weeks",
-              "value": "w",
-            },
-            Object {
-              "text": "months",
-              "value": "M",
-            },
-            Object {
-              "text": "years",
-              "value": "y",
-            },
-          ]
-        }
-        value="m"
-      />
+      <EuiI18n
+        default="Time unit"
+        token="euiQuickSelect.unitLabel"
+      >
+        <Component />
+      </EuiI18n>
     </EuiFlexItem>
     <EuiFlexItem
       grow={false}
     >
       <EuiButton
+        aria-describedby="htmlId htmlId"
         className="euiQuickSelect__applyButton"
         disabled={false}
         onClick={[Function]}
         size="s"
       >
-        Apply
+        <EuiI18n
+          default="Apply"
+          token="euiQuickSelect.applyButton"
+        />
       </EuiButton>
     </EuiFlexItem>
   </EuiFlexGroup>
   <EuiHorizontalRule
     margin="s"
   />
-</Fragment>
+  <EuiScreenReaderOnly
+    id="htmlId"
+  >
+    <p>
+      <EuiI18n
+        default="Currently set to {timeTense} {timeValue} {timeUnit}."
+        token="euiQuickSelect.fullDescription"
+        values={
+          Object {
+            "timeTense": "last",
+            "timeUnit": "minutes",
+            "timeValue": 15,
+          }
+        }
+      />
+    </p>
+  </EuiScreenReaderOnly>
+</fieldset>
 `;
 
 exports[`EuiQuickSelect prevQuickSelect 1`] = `
-<Fragment>
+<fieldset>
+  <EuiI18n
+    defaults={
+      Array [
+        "Quick select a time range",
+        "Quick select",
+      ]
+    }
+    tokens={
+      Array [
+        "euiQuickSelect.legendLabel",
+        "euiQuickSelect.legendText",
+      ]
+    }
+  >
+    <Component />
+  </EuiI18n>
   <EuiFlexGroup
     alignItems="center"
     gutterSize="s"
+    justifyContent="spaceBetween"
     responsive={false}
   >
-    <EuiFlexItem>
-      <EuiTitle
-        size="xxxs"
-      >
-        <span>
-          Quick select
-        </span>
-      </EuiTitle>
-    </EuiFlexItem>
     <EuiFlexItem
       grow={false}
     >
-      <EuiToolTip
-        content="Previous time window"
-        delay="regular"
-        position="top"
+      <EuiI18n
+        default="Quick select"
+        token="euiQuickSelect.quickSelectTitle"
       >
-        <EuiButtonIcon
-          aria-label="Previous time window"
-          iconType="arrowLeft"
-          onClick={[Function]}
-        />
-      </EuiToolTip>
+        <Component />
+      </EuiI18n>
     </EuiFlexItem>
     <EuiFlexItem
       grow={false}
     >
-      <EuiToolTip
-        content="Next time window"
-        delay="regular"
-        position="top"
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+        responsive={false}
       >
-        <EuiButtonIcon
-          aria-label="Next time window"
-          iconType="arrowRight"
-          onClick={[Function]}
-        />
-      </EuiToolTip>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiI18n
+            default="Previous time window"
+            token="euiQuickSelect.previousLabel"
+          >
+            <Component />
+          </EuiI18n>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiI18n
+            default="Next time window"
+            token="euiQuickSelect.nextLabel"
+          >
+            <Component />
+          </EuiI18n>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiFlexItem>
   </EuiFlexGroup>
   <EuiSpacer
@@ -204,96 +209,65 @@ exports[`EuiQuickSelect prevQuickSelect 1`] = `
     responsive={false}
   >
     <EuiFlexItem>
-      <EuiSelect
-        aria-label="Quick time tense"
-        compressed={true}
-        fullWidth={false}
-        hasNoInitialSelection={false}
-        isLoading={false}
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "text": "Last",
-              "value": "last",
-            },
-            Object {
-              "text": "Next",
-              "value": "next",
-            },
-          ]
-        }
-        value="Next"
-      />
+      <EuiI18n
+        default="Time tense"
+        token="euiQuickSelect.tenseLabel"
+      >
+        <Component />
+      </EuiI18n>
     </EuiFlexItem>
     <EuiFlexItem>
-      <EuiFieldNumber
-        aria-label="Quick time value"
-        compressed={true}
-        fullWidth={false}
-        isLoading={false}
-        onChange={[Function]}
-        value={32}
-      />
+      <EuiI18n
+        default="Time value"
+        token="euiQuickSelect.valueLabel"
+      >
+        <Component />
+      </EuiI18n>
     </EuiFlexItem>
     <EuiFlexItem>
-      <EuiSelect
-        aria-label="Quick time units"
-        compressed={true}
-        fullWidth={false}
-        hasNoInitialSelection={false}
-        isLoading={false}
-        onChange={[Function]}
-        options={
-          Array [
-            Object {
-              "text": "seconds",
-              "value": "s",
-            },
-            Object {
-              "text": "minutes",
-              "value": "m",
-            },
-            Object {
-              "text": "hours",
-              "value": "h",
-            },
-            Object {
-              "text": "days",
-              "value": "d",
-            },
-            Object {
-              "text": "weeks",
-              "value": "w",
-            },
-            Object {
-              "text": "months",
-              "value": "M",
-            },
-            Object {
-              "text": "years",
-              "value": "y",
-            },
-          ]
-        }
-        value="M"
-      />
+      <EuiI18n
+        default="Time unit"
+        token="euiQuickSelect.unitLabel"
+      >
+        <Component />
+      </EuiI18n>
     </EuiFlexItem>
     <EuiFlexItem
       grow={false}
     >
       <EuiButton
+        aria-describedby="htmlId htmlId"
         className="euiQuickSelect__applyButton"
         disabled={false}
         onClick={[Function]}
         size="s"
       >
-        Apply
+        <EuiI18n
+          default="Apply"
+          token="euiQuickSelect.applyButton"
+        />
       </EuiButton>
     </EuiFlexItem>
   </EuiFlexGroup>
   <EuiHorizontalRule
     margin="s"
   />
-</Fragment>
+  <EuiScreenReaderOnly
+    id="htmlId"
+  >
+    <p>
+      <EuiI18n
+        default="Currently set to {timeTense} {timeValue} {timeUnit}."
+        token="euiQuickSelect.fullDescription"
+        values={
+          Object {
+            "timeTense": "Next",
+            "timeUnit": "months",
+            "timeValue": 32,
+          }
+        }
+      />
+    </p>
+  </EuiScreenReaderOnly>
+</fieldset>
 `;
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/_commonly_used_time_ranges.scss b/src/components/date_picker/super_date_picker/quick_select_popover/_commonly_used_time_ranges.scss
new file mode 100644
index 00000000000..bebe1133aea
--- /dev/null
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/_commonly_used_time_ranges.scss
@@ -0,0 +1,4 @@
+.euiCommonlyUsedTimeRanges__item {
+  font-size: $euiFontSizeS;
+  line-height: $euiFontSizeS;
+}
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/_index.scss b/src/components/date_picker/super_date_picker/quick_select_popover/_index.scss
index 4fc081c561d..0b110a05b7f 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/_index.scss
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/_index.scss
@@ -1,3 +1,4 @@
 @import 'quick_select_popover';
 @import 'quick_select';
 @import 'refresh_interval';
+@import 'commonly_used_time_ranges';
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select.scss b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select.scss
index 4a5b8ed06f6..fa7907252c4 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select.scss
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select.scss
@@ -1,5 +1,4 @@
-
 .euiQuickSelect__applyButton {
   // Allow the button to shrink
- min-width: 0;
+  min-width: 0;
 }
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
index 047c2f808e2..2fd91cce5a0 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
@@ -8,11 +8,12 @@
   max-height: $euiSizeM * 11;
   overflow: hidden;
   overflow-y: auto;
+  padding: $euiSizeXS 0; // Offset negative margin from flex items
 }
 
 // sass-lint:disable no-important
 .euiQuickSelectPopover__buttonText {
-  // Override specificity from universal and sibiling selectors
+  // Override specificity from universal and sibling selectors
   margin-right: $euiSizeXS !important;
 }
 
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js b/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js
index d7077076e64..3331ab15023 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js
@@ -1,21 +1,26 @@
 import PropTypes from 'prop-types';
-import React, { Fragment } from 'react';
+import React from 'react';
 import { commonlyUsedRangeShape } from '../types';
-
+import { EuiI18n } from '../../../i18n';
 import { EuiFlexGrid, EuiFlexItem } from '../../../flex';
 import { EuiTitle } from '../../../title';
-import { EuiSpacer } from '../../../spacer';
 import { EuiLink } from '../../../link';
-import { EuiText } from '../../../text';
 import { EuiHorizontalRule } from '../../../horizontal_rule';
+import { htmlIdGenerator } from '../../../../services';
+
+const generateId = htmlIdGenerator();
 
 export function EuiCommonlyUsedTimeRanges({ applyTime, commonlyUsedRanges }) {
+  const legendId = generateId();
   const links = commonlyUsedRanges.map(({ start, end, label }) => {
     const applyCommonlyUsed = () => {
       applyTime({ start, end });
     };
     return (
-      <EuiFlexItem key={label}>
+      <EuiFlexItem
+        key={label}
+        component="li"
+        className="euiCommonlyUsedTimeRanges__item">
         <EuiLink
           onClick={applyCommonlyUsed}
           data-test-subj={`superDatePickerCommonlyUsed_${label.replace(
@@ -29,22 +34,28 @@ export function EuiCommonlyUsedTimeRanges({ applyTime, commonlyUsedRanges }) {
   });
 
   return (
-    <Fragment>
+    <fieldset>
       <EuiTitle size="xxxs">
-        <span>Commonly used</span>
+        <legend id={legendId} aria-label="Commonly used time ranges">
+          <EuiI18n
+            token="euiCommonlyUsedTimeRanges.legend"
+            default="Commonly used"
+          />
+        </legend>
       </EuiTitle>
-      <EuiSpacer size="s" />
-      <EuiText size="s" className="euiQuickSelectPopover__section">
+      <div className="euiQuickSelectPopover__section">
         <EuiFlexGrid
+          aria-labelledby={legendId}
           gutterSize="s"
           columns={2}
           direction="column"
-          responsive={false}>
+          responsive={false}
+          component="ul">
           {links}
         </EuiFlexGrid>
-      </EuiText>
+      </div>
       <EuiHorizontalRule margin="s" />
-    </Fragment>
+    </fieldset>
   );
 }
 
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.js b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.js
index 38b8d06ac61..450cb062f5a 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.js
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.js
@@ -1,17 +1,17 @@
 import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import moment from 'moment';
 import dateMath from '@elastic/datemath';
-
+import { htmlIdGenerator } from '../../../../services';
 import { EuiButton, EuiButtonIcon } from '../../../button';
 import { EuiFlexGroup, EuiFlexItem } from '../../../flex';
-import { EuiTitle } from '../../../title';
 import { EuiSpacer } from '../../../spacer';
 import { EuiSelect, EuiFieldNumber } from '../../../form';
 import { EuiToolTip } from '../../../tool_tip';
 import { EuiHorizontalRule } from '../../../horizontal_rule';
-
+import { EuiI18n } from '../../../i18n';
 import { timeUnits } from '../time_units';
+import { EuiScreenReaderOnly } from '../../../accessibility';
 
 const LAST = 'last';
 const NEXT = 'next';
@@ -36,6 +36,8 @@ export class EuiQuickSelect extends Component {
     };
   }
 
+  generateId = htmlIdGenerator();
+
   onTimeTenseChange = evt => {
     this.setState({
       timeTense: evt.target.value,
@@ -115,75 +117,150 @@ export class EuiQuickSelect extends Component {
   };
 
   render() {
+    const { timeTense, timeValue, timeUnits } = this.state;
+    const timeSelectionId = this.generateId();
+    const legendId = this.generateId();
+
     return (
-      <Fragment>
-        <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s">
-          <EuiFlexItem>
-            <EuiTitle size="xxxs">
-              <span>Quick select</span>
-            </EuiTitle>
-          </EuiFlexItem>
+      <fieldset>
+        <EuiI18n
+          tokens={['euiQuickSelect.legendLabel', 'euiQuickSelect.legendText']}
+          defaults={['Quick select a time range', 'Quick select']}>
+          {([legendLabel, legendText]) => (
+            // Legend needs to be the first thing in a fieldset, but we want the visible title within the flex.
+            // So we hide it, but allow screen readers to see it
+            <EuiScreenReaderOnly>
+              <legend
+                id={legendId}
+                aria-label={legendLabel}
+                className="euiFormLabel">
+                {legendText}
+              </legend>
+            </EuiScreenReaderOnly>
+          )}
+        </EuiI18n>
+        <EuiFlexGroup
+          responsive={false}
+          alignItems="center"
+          justifyContent="spaceBetween"
+          gutterSize="s">
           <EuiFlexItem grow={false}>
-            <EuiToolTip content="Previous time window">
-              <EuiButtonIcon
-                aria-label="Previous time window"
-                iconType="arrowLeft"
-                onClick={this.stepBackward}
-              />
-            </EuiToolTip>
+            <EuiI18n
+              token="euiQuickSelect.quickSelectTitle"
+              default="Quick select">
+              {quickSelectTitle => (
+                <div id={legendId} aria-hidden className="euiFormLabel">
+                  {quickSelectTitle}
+                </div>
+              )}
+            </EuiI18n>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiToolTip content="Next time window">
-              <EuiButtonIcon
-                aria-label="Next time window"
-                iconType="arrowRight"
-                onClick={this.stepForward}
-              />
-            </EuiToolTip>
+            <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+              <EuiFlexItem grow={false}>
+                <EuiI18n
+                  token="euiQuickSelect.previousLabel"
+                  default="Previous time window">
+                  {previousLabel => (
+                    <EuiToolTip content={previousLabel}>
+                      <EuiButtonIcon
+                        aria-label={previousLabel}
+                        iconType="arrowLeft"
+                        onClick={this.stepBackward}
+                      />
+                    </EuiToolTip>
+                  )}
+                </EuiI18n>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiI18n
+                  token="euiQuickSelect.nextLabel"
+                  default="Next time window">
+                  {nextLabel => (
+                    <EuiToolTip content={nextLabel}>
+                      <EuiButtonIcon
+                        aria-label={nextLabel}
+                        iconType="arrowRight"
+                        onClick={this.stepForward}
+                      />
+                    </EuiToolTip>
+                  )}
+                </EuiI18n>
+              </EuiFlexItem>
+            </EuiFlexGroup>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="s" />
         <EuiFlexGroup gutterSize="s" responsive={false}>
           <EuiFlexItem>
-            <EuiSelect
-              compressed
-              aria-label="Quick time tense"
-              value={this.state.timeTense}
-              options={timeTenseOptions}
-              onChange={this.onTimeTenseChange}
-            />
+            <EuiI18n token="euiQuickSelect.tenseLabel" default="Time tense">
+              {tenseLabel => (
+                <EuiSelect
+                  compressed
+                  aria-label={tenseLabel}
+                  aria-describedby={`${timeSelectionId} ${legendId}`}
+                  value={timeTense}
+                  options={timeTenseOptions}
+                  onChange={this.onTimeTenseChange}
+                />
+              )}
+            </EuiI18n>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiFieldNumber
-              compressed
-              aria-label="Quick time value"
-              value={this.state.timeValue}
-              onChange={this.onTimeValueChange}
-            />
+            <EuiI18n token="euiQuickSelect.valueLabel" default="Time value">
+              {valueLabel => (
+                <EuiFieldNumber
+                  compressed
+                  aria-describedby={`${timeSelectionId} ${legendId}`}
+                  aria-label={valueLabel}
+                  value={timeValue}
+                  onChange={this.onTimeValueChange}
+                />
+              )}
+            </EuiI18n>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiSelect
-              compressed
-              aria-label="Quick time units"
-              value={this.state.timeUnits}
-              options={timeUnitsOptions}
-              onChange={this.onTimeUnitsChange}
-            />
+            <EuiI18n token="euiQuickSelect.unitLabel" default="Time unit">
+              {unitLabel => (
+                <EuiSelect
+                  compressed
+                  aria-label={unitLabel}
+                  aria-describedby={`${timeSelectionId} ${legendId}`}
+                  value={timeUnits}
+                  options={timeUnitsOptions}
+                  onChange={this.onTimeUnitsChange}
+                />
+              )}
+            </EuiI18n>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButton
+              aria-describedby={`${timeSelectionId} ${legendId}`}
               className="euiQuickSelect__applyButton"
               size="s"
               onClick={this.applyQuickSelect}
-              disabled={
-                this.state.timeValue === '' || this.state.timeValue <= 0
-              }>
-              Apply
+              disabled={timeValue === '' || timeValue <= 0}>
+              <EuiI18n token="euiQuickSelect.applyButton" default="Apply" />
             </EuiButton>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiHorizontalRule margin="s" />
-      </Fragment>
+        <EuiScreenReaderOnly id={timeSelectionId}>
+          <p>
+            <EuiI18n
+              token="euiQuickSelect.fullDescription"
+              default="Currently set to {timeTense} {timeValue} {timeUnit}."
+              values={{
+                timeTense,
+                timeValue,
+                timeUnit: timeUnitsOptions.find(
+                  option => option.value === timeUnits
+                ).text,
+              }}
+            />
+          </p>
+        </EuiScreenReaderOnly>
+      </fieldset>
     );
   }
 }
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.test.js b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.test.js
index 76bc1a144f0..f5b950bbee8 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.test.js
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.test.js
@@ -9,6 +9,12 @@ const defaultProps = {
   start: 'now-15m',
   end: 'now',
 };
+
+// Mock the htmlIdGenerator to generate predictable ids for snapshot tests
+jest.mock('../../../../services/accessibility/html_id_generator', () => ({
+  htmlIdGenerator: () => () => 'htmlId',
+}));
+
 describe('EuiQuickSelect', () => {
   test('is rendered', () => {
     const component = shallow(<EuiQuickSelect {...defaultProps} />);
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js b/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js
index 4c0f5fcc7bb..469433436b1 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js
@@ -1,12 +1,14 @@
 import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { timeUnits, timeUnitsPlural } from '../time_units';
-
+import { EuiI18n } from '../../../i18n';
 import { EuiFlexGroup, EuiFlexItem } from '../../../flex';
 import { EuiTitle } from '../../../title';
 import { EuiSpacer } from '../../../spacer';
 import { EuiSelect, EuiFieldNumber } from '../../../form';
 import { EuiButton } from '../../../button';
+import { htmlIdGenerator } from '../../../../services';
+import { EuiScreenReaderOnly } from '../../../accessibility';
 
 const refreshUnitsOptions = Object.keys(timeUnits)
   .filter(timeUnit => {
@@ -67,6 +69,8 @@ export class EuiRefreshInterval extends Component {
     };
   }
 
+  generateId = htmlIdGenerator();
+
   onValueChange = evt => {
     const sanitizedValue = parseFloat(evt.target.value);
     this.setState(
@@ -110,23 +114,33 @@ export class EuiRefreshInterval extends Component {
   };
 
   render() {
+    const legendId = this.generateId();
+    const refreshSelectionId = this.generateId();
+    const { value, units } = this.state;
+
     if (!this.props.applyRefreshInterval) {
       return null;
     }
 
     return (
-      <Fragment>
+      <fieldset>
         <EuiTitle size="xxxs">
-          <span>Refresh every</span>
+          <legend id={legendId}>
+            <EuiI18n
+              token="euiRefreshInterval.legend"
+              default="Refresh every"
+            />
+          </legend>
         </EuiTitle>
         <EuiSpacer size="s" />
         <EuiFlexGroup gutterSize="s" responsive={false}>
           <EuiFlexItem>
             <EuiFieldNumber
               compressed
-              value={this.state.value}
+              value={value}
               onChange={this.onValueChange}
               aria-label="Refresh interval value"
+              aria-describedby={`${refreshSelectionId} ${legendId}`}
               data-test-subj="superDatePickerRefreshIntervalInput"
             />
           </EuiFlexItem>
@@ -134,7 +148,8 @@ export class EuiRefreshInterval extends Component {
             <EuiSelect
               compressed
               aria-label="Refresh interval units"
-              value={this.state.units}
+              aria-describedby={`${refreshSelectionId} ${legendId}`}
+              value={units}
               options={refreshUnitsOptions}
               onChange={this.onUnitsChange}
               data-test-subj="superDatePickerRefreshIntervalUnitsSelect"
@@ -146,13 +161,32 @@ export class EuiRefreshInterval extends Component {
               iconType={this.props.isPaused ? 'play' : 'stop'}
               size="s"
               onClick={this.toogleRefresh}
-              disabled={this.state.value === '' || this.state.value <= 0}
-              data-test-subj="superDatePickerToggleRefreshButton">
-              {this.props.isPaused ? 'Start' : 'Stop'}
+              disabled={value === '' || value <= 0}
+              data-test-subj="superDatePickerToggleRefreshButton"
+              aria-describedby={`${refreshSelectionId} ${legendId}`}>
+              {this.props.isPaused ? (
+                <EuiI18n token="euiRefreshInterval.start" default="Start" />
+              ) : (
+                <EuiI18n token="euiRefreshInterval.stop" default="Stop" />
+              )}
             </EuiButton>
           </EuiFlexItem>
         </EuiFlexGroup>
-      </Fragment>
+        <EuiScreenReaderOnly id={refreshSelectionId}>
+          <p>
+            <EuiI18n
+              token="euiRefreshInterval.fullDescription"
+              default="Currently set to {optionValue} {optionText}."
+              values={{
+                optionValue: value,
+                optionText: refreshUnitsOptions.find(
+                  option => option.value === units
+                ).text,
+              }}
+            />
+          </p>
+        </EuiScreenReaderOnly>
+      </fieldset>
     );
   }
 }
diff --git a/src/components/flex/__snapshots__/flex_item.test.tsx.snap b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
index 302bd8fc395..39afc51a3a3 100644
--- a/src/components/flex/__snapshots__/flex_item.test.tsx.snap
+++ b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
@@ -1,23 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiFlexItem component div is rendered 1`] = `
-<div
-  class="euiFlexItem"
-/>
-`;
-
-exports[`EuiFlexItem component figure is rendered 1`] = `
-<figure
-  class="euiFlexItem"
-/>
-`;
-
-exports[`EuiFlexItem component span is rendered 1`] = `
-<span
-  class="euiFlexItem"
-/>
-`;
-
 exports[`EuiFlexItem grow 1 is rendered 1`] = `
 <div
   class="euiFlexItem euiFlexItem--flexGrow1"
diff --git a/src/components/flex/flex_grid.tsx b/src/components/flex/flex_grid.tsx
index cc994c65793..9334346309a 100644
--- a/src/components/flex/flex_grid.tsx
+++ b/src/components/flex/flex_grid.tsx
@@ -26,6 +26,11 @@ export interface EuiFlexGridProps {
    * Force each item to be display block on smaller screens
    */
   responsive?: boolean;
+
+  /**
+   * The tag to render
+   */
+  component?: keyof JSX.IntrinsicElements;
 }
 
 const directionToClassNameMap = {
@@ -68,6 +73,7 @@ export const EuiFlexGrid: FunctionComponent<
   direction = 'row',
   responsive = true,
   columns = 0,
+  component: Component = 'div',
   ...rest
 }) => {
   const classes = classNames(
@@ -82,8 +88,9 @@ export const EuiFlexGrid: FunctionComponent<
   );
 
   return (
-    <div className={classes} {...rest}>
+    // @ts-ignore
+    <Component className={classes} {...rest}>
       {children}
-    </div>
+    </Component>
   );
 };
diff --git a/src/components/flex/flex_item.test.tsx b/src/components/flex/flex_item.test.tsx
index d035f14774e..4a05e7d8900 100644
--- a/src/components/flex/flex_item.test.tsx
+++ b/src/components/flex/flex_item.test.tsx
@@ -6,7 +6,7 @@ import {
   stopThrowingReactWarnings,
 } from '../../test';
 
-import { EuiFlexItem, FlexItemComponentType, GROW_SIZES } from './flex_item';
+import { EuiFlexItem, GROW_SIZES } from './flex_item';
 
 beforeAll(startThrowingReactWarnings);
 afterAll(stopThrowingReactWarnings);
@@ -27,26 +27,4 @@ describe('EuiFlexItem', () => {
       });
     });
   });
-
-  describe('component', () => {
-    (['div', 'span', 'figure'] as FlexItemComponentType[]).forEach(value => {
-      test(`${value} is rendered`, () => {
-        const component = render(<EuiFlexItem component={value} />);
-
-        expect(component).toMatchSnapshot();
-      });
-    });
-
-    ['h2'].forEach(value => {
-      test(`${value} is not rendered`, () => {
-        expect(() =>
-          render(
-            // intentionally passing an invalid value
-            // @ts-ignore
-            <EuiFlexItem component={value} />
-          )
-        ).toThrow();
-      });
-    });
-  });
 });
diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx
index 046cffa1391..e3c5cdb3e96 100644
--- a/src/components/flex/flex_item.tsx
+++ b/src/components/flex/flex_item.tsx
@@ -16,11 +16,10 @@ export type FlexItemGrowSize =
   | true
   | false
   | null;
-export type FlexItemComponentType = 'div' | 'span' | 'figure';
 
 export interface EuiFlexItemProps {
   grow?: FlexItemGrowSize;
-  component?: FlexItemComponentType;
+  component?: keyof JSX.IntrinsicElements;
 }
 
 export const GROW_SIZES: FlexItemGrowSize[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
@@ -49,6 +48,7 @@ export const EuiFlexItem: FunctionComponent<
   );
 
   return (
+    // @ts-ignore
     <Component className={classes} {...rest}>
       {children}
     </Component>
diff --git a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap b/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap
index 7c5dbeffbc1..b26ca92ce1b 100644
--- a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap
+++ b/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap
@@ -38,6 +38,7 @@ exports[`EuiDescribedFormGroup is rendered 1`] = `
         describedByIds={Array []}
         display="row"
         fullWidth={false}
+        hasChildLabel={true}
         hasEmptyLabelSpace={false}
         labelType="label"
       >
@@ -77,6 +78,7 @@ exports[`EuiDescribedFormGroup props description is not rendered when it's not p
         describedByIds={Array []}
         display="row"
         fullWidth={false}
+        hasChildLabel={true}
         hasEmptyLabelSpace={false}
         labelType="label"
       >
@@ -125,6 +127,7 @@ exports[`EuiDescribedFormGroup props fullWidth is rendered 1`] = `
         describedByIds={Array []}
         display="row"
         fullWidth={true}
+        hasChildLabel={true}
         hasEmptyLabelSpace={false}
         labelType="label"
       >
@@ -173,6 +176,7 @@ exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = `
         describedByIds={Array []}
         display="row"
         fullWidth={false}
+        hasChildLabel={true}
         hasEmptyLabelSpace={false}
         labelType="label"
       >
@@ -221,6 +225,7 @@ exports[`EuiDescribedFormGroup props titleSize is rendered 1`] = `
         describedByIds={Array []}
         display="row"
         fullWidth={false}
+        hasChildLabel={true}
         hasEmptyLabelSpace={false}
         labelType="label"
       >
@@ -321,6 +326,7 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
                 ]
               }
               fullWidth={false}
+              hasChildLabel={true}
               hasEmptyLabelSpace={false}
               helpText="Help text"
               isInvalid={true}
@@ -329,7 +335,6 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
             >
               <div
                 className="euiFormRow"
-                id="generated-id-row"
               >
                 <div
                   className="euiFormRow__labelWrapper"
diff --git a/src/components/form/form_row/__snapshots__/form_row.test.js.snap b/src/components/form/form_row/__snapshots__/form_row.test.js.snap
index d79083066fe..85b29410e9c 100644
--- a/src/components/form/form_row/__snapshots__/form_row.test.js.snap
+++ b/src/components/form/form_row/__snapshots__/form_row.test.js.snap
@@ -5,6 +5,7 @@ exports[`EuiFormRow behavior onBlur is called in child 1`] = `
   describedByIds={Array []}
   display="row"
   fullWidth={false}
+  hasChildLabel={true}
   hasEmptyLabelSpace={false}
   label={
     <span>
@@ -15,7 +16,6 @@ exports[`EuiFormRow behavior onBlur is called in child 1`] = `
 >
   <div
     className="euiFormRow"
-    id="generated-id-row"
   >
     <div
       className="euiFormRow__labelWrapper"
@@ -54,6 +54,7 @@ exports[`EuiFormRow behavior onBlur works in parent even if not in child 1`] = `
   describedByIds={Array []}
   display="row"
   fullWidth={false}
+  hasChildLabel={true}
   hasEmptyLabelSpace={false}
   label={
     <span>
@@ -64,7 +65,6 @@ exports[`EuiFormRow behavior onBlur works in parent even if not in child 1`] = `
 >
   <div
     className="euiFormRow"
-    id="generated-id-row"
   >
     <div
       className="euiFormRow__labelWrapper"
@@ -103,6 +103,7 @@ exports[`EuiFormRow behavior onFocus is called in child 1`] = `
   describedByIds={Array []}
   display="row"
   fullWidth={false}
+  hasChildLabel={true}
   hasEmptyLabelSpace={false}
   label={
     <span>
@@ -113,7 +114,6 @@ exports[`EuiFormRow behavior onFocus is called in child 1`] = `
 >
   <div
     className="euiFormRow"
-    id="generated-id-row"
   >
     <div
       className="euiFormRow__labelWrapper"
@@ -152,6 +152,7 @@ exports[`EuiFormRow behavior onFocus works in parent even if not in child 1`] =
   describedByIds={Array []}
   display="row"
   fullWidth={false}
+  hasChildLabel={true}
   hasEmptyLabelSpace={false}
   label={
     <span>
@@ -162,7 +163,6 @@ exports[`EuiFormRow behavior onFocus works in parent even if not in child 1`] =
 >
   <div
     className="euiFormRow"
-    id="generated-id-row"
   >
     <div
       className="euiFormRow__labelWrapper"
@@ -201,7 +201,6 @@ exports[`EuiFormRow is rendered 1`] = `
   aria-label="aria-label"
   class="euiFormRow testClass1 testClass2"
   data-test-subj="test subject string"
-  id="generated-id-row"
 >
   <div
     class="euiFormRow__fieldWrapper"
@@ -216,7 +215,6 @@ exports[`EuiFormRow is rendered 1`] = `
 exports[`EuiFormRow props compressed is rendered 1`] = `
 <div
   class="euiFormRow euiFormRow--compressed"
-  id="generated-id-row"
 >
   <div
     class="euiFormRow__fieldWrapper"
@@ -231,7 +229,6 @@ exports[`EuiFormRow props compressed is rendered 1`] = `
 exports[`EuiFormRow props describedByIds is rendered 1`] = `
 <div
   className="euiFormRow"
-  id="generated-id-row"
 >
   <div
     className="euiFormRow__fieldWrapper"
@@ -249,7 +246,6 @@ exports[`EuiFormRow props describedByIds is rendered 1`] = `
 exports[`EuiFormRow props display type center is rendered 1`] = `
 <div
   class="euiFormRow"
-  id="generated-id-row"
 >
   <div
     class="euiFormRow__fieldWrapper euiFormRow__fieldWrapperDisplayOnly"
@@ -264,7 +260,6 @@ exports[`EuiFormRow props display type center is rendered 1`] = `
 exports[`EuiFormRow props display type centerCompressed is rendered 1`] = `
 <div
   class="euiFormRow euiFormRow--compressed"
-  id="generated-id-row"
 >
   <div
     class="euiFormRow__fieldWrapper euiFormRow__fieldWrapperDisplayOnly"
@@ -279,7 +274,6 @@ exports[`EuiFormRow props display type centerCompressed is rendered 1`] = `
 exports[`EuiFormRow props display type columnCompressed is rendered 1`] = `
 <div
   class="euiFormRow euiFormRow--compressed euiFormRow--horizontal"
-  id="generated-id-row"
 >
   <div
     class="euiFormRow__fieldWrapper"
@@ -294,7 +288,6 @@ exports[`EuiFormRow props display type columnCompressed is rendered 1`] = `
 exports[`EuiFormRow props display type columnCompressedSwitch is rendered 1`] = `
 <div
   class="euiFormRow euiFormRow--compressed euiFormRow--horizontal euiFormRow--hasSwitch"
-  id="generated-id-row"
 >
   <div
     class="euiFormRow__fieldWrapper"
@@ -309,7 +302,6 @@ exports[`EuiFormRow props display type columnCompressedSwitch is rendered 1`] =
 exports[`EuiFormRow props display type row is rendered 1`] = `
 <div
   class="euiFormRow"
-  id="generated-id-row"
 >
   <div
     class="euiFormRow__fieldWrapper"
@@ -324,7 +316,6 @@ exports[`EuiFormRow props display type row is rendered 1`] = `
 exports[`EuiFormRow props display type rowCompressed is rendered 1`] = `
 <div
   class="euiFormRow euiFormRow--compressed"
-  id="generated-id-row"
 >
   <div
     class="euiFormRow__fieldWrapper"
@@ -339,7 +330,6 @@ exports[`EuiFormRow props display type rowCompressed is rendered 1`] = `
 exports[`EuiFormRow props displayOnly is rendered 1`] = `
 <div
   class="euiFormRow"
-  id="generated-id-row"
 >
   <div
     class="euiFormRow__fieldWrapper euiFormRow__fieldWrapperDisplayOnly"
@@ -356,7 +346,6 @@ exports[`EuiFormRow props displayOnly is rendered 1`] = `
 exports[`EuiFormRow props error as array is rendered 1`] = `
 <div
   class="euiFormRow"
-  id="generated-id-row"
 >
   <div
     class="euiFormRow__fieldWrapper"
@@ -386,7 +375,6 @@ exports[`EuiFormRow props error as array is rendered 1`] = `
 exports[`EuiFormRow props error as string is rendered 1`] = `
 <div
   class="euiFormRow"
-  id="generated-id-row"
 >
   <div
     class="euiFormRow__fieldWrapper"
@@ -409,7 +397,6 @@ exports[`EuiFormRow props error as string is rendered 1`] = `
 exports[`EuiFormRow props error is not rendered if isInvalid is false 1`] = `
 <div
   class="euiFormRow"
-  id="generated-id-row"
 >
   <div
     class="euiFormRow__fieldWrapper"
@@ -424,7 +411,6 @@ exports[`EuiFormRow props error is not rendered if isInvalid is false 1`] = `
 exports[`EuiFormRow props fullWidth is rendered 1`] = `
 <div
   class="euiFormRow euiFormRow--fullWidth"
-  id="generated-id-row"
 >
   <div
     class="euiFormRow__fieldWrapper"
@@ -439,7 +425,6 @@ exports[`EuiFormRow props fullWidth is rendered 1`] = `
 exports[`EuiFormRow props hasEmptyLabelSpace is rendered 1`] = `
 <div
   class="euiFormRow euiFormRow--hasEmptyLabelSpace"
-  id="generated-id-row"
 >
   <div
     class="euiFormRow__fieldWrapper"
@@ -454,7 +439,6 @@ exports[`EuiFormRow props hasEmptyLabelSpace is rendered 1`] = `
 exports[`EuiFormRow props helpText is rendered 1`] = `
 <div
   class="euiFormRow"
-  id="generated-id-row"
 >
   <div
     class="euiFormRow__fieldWrapper"
@@ -478,7 +462,7 @@ exports[`EuiFormRow props helpText is rendered 1`] = `
 exports[`EuiFormRow props id is rendered 1`] = `
 <div
   class="euiFormRow"
-  id="id-row"
+  id="id"
 >
   <div
     class="euiFormRow__fieldWrapper"
@@ -493,7 +477,6 @@ exports[`EuiFormRow props id is rendered 1`] = `
 exports[`EuiFormRow props isInvalid is rendered 1`] = `
 <div
   class="euiFormRow"
-  id="generated-id-row"
 >
   <div
     class="euiFormRow__labelWrapper"
@@ -519,7 +502,6 @@ exports[`EuiFormRow props isInvalid is rendered 1`] = `
 exports[`EuiFormRow props label append is rendered 1`] = `
 <div
   className="euiFormRow"
-  id="generated-id-row"
 >
   <div
     className="euiFormRow__labelWrapper"
@@ -550,7 +532,6 @@ exports[`EuiFormRow props label append is rendered 1`] = `
 exports[`EuiFormRow props label is rendered 1`] = `
 <div
   className="euiFormRow"
-  id="generated-id-row"
 >
   <div
     className="euiFormRow__labelWrapper"
@@ -578,16 +559,13 @@ exports[`EuiFormRow props label is rendered 1`] = `
 
 exports[`EuiFormRow props label renders as a legend and subsquently a fieldset wrapper 1`] = `
 <fieldset
-  aria-labelledby="generated-id-legend"
   className="euiFormRow"
-  id="generated-id-row"
 >
   <div
     className="euiFormRow__labelWrapper"
   >
     <EuiFormLabel
       className="euiFormRow__label"
-      id="generated-id-legend"
       isFocused={false}
       type="legend"
     >
diff --git a/src/components/form/form_row/form_row.js b/src/components/form/form_row/form_row.js
index 1eb2db015fc..59f6a4e2d08 100644
--- a/src/components/form/form_row/form_row.js
+++ b/src/components/form/form_row/form_row.js
@@ -76,6 +76,7 @@ export class EuiFormRow extends Component {
       compressed,
       display,
       displayOnly,
+      hasChildLabel,
       ...rest
     } = this.props;
 
@@ -139,7 +140,6 @@ export class EuiFormRow extends Component {
 
     let optionalLabel;
     const isLegend = label && labelType === 'legend' ? true : false;
-    const labelID = isLegend ? `${id}-${labelType}` : undefined;
 
     if (label || labelAppend) {
       optionalLabel = (
@@ -149,9 +149,8 @@ export class EuiFormRow extends Component {
             isFocused={!isLegend && this.state.isFocused}
             isInvalid={isInvalid}
             aria-invalid={isInvalid}
-            htmlFor={!isLegend ? id : undefined}
-            type={labelType}
-            id={labelID}>
+            htmlFor={!isLegend && hasChildLabel ? id : undefined}
+            type={labelType}>
             {label}
           </EuiFormLabel>
           {labelAppend && ' '}
@@ -190,12 +189,7 @@ export class EuiFormRow extends Component {
     const Element = labelType === 'legend' ? 'fieldset' : 'div';
 
     return (
-      <Element
-        className={classes}
-        {...rest}
-        id={`${id}-row`}
-        aria-labelledby={labelID} // Only renders a string if label type is 'legend'
-      >
+      <Element className={classes} {...rest}>
         {optionalLabel}
         <div className={fieldWrapperClasses}>
           {field}
@@ -210,6 +204,10 @@ export class EuiFormRow extends Component {
 EuiFormRow.propTypes = {
   children: PropTypes.element.isRequired,
   className: PropTypes.string,
+  /**
+   * Escape hatch to not render duplicate labels if the child also renders a label
+   */
+  hasChildLabel: PropTypes.bool,
   label: PropTypes.node,
   /**
    * Sets the type of html element the label should be based
@@ -269,4 +267,5 @@ EuiFormRow.defaultProps = {
   fullWidth: false,
   describedByIds: [],
   labelType: 'label',
+  hasChildLabel: true,
 };