Fixes several a11y issues manifesting in Kibana

CHANGELOG.md

@@ -4,6 +4,7 @@
 - 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))
 

src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap

@@ -2,52 +2,61 @@
 
 exports[`EuiQuickSelect is rendered 1`] = `
 <fieldset>
-  <EuiTitle
-    className="euiQuickSelect__legend"
-    size="xxxs"
-  >
-    <EuiI18n
-      defaults={
-        Array [
-          "Quick select a time range",
-          "Quick select",
-        ]
-      }
-      tokens={
-        Array [
-          "euiQuickSelect.legendLabel",
-          "euiQuickSelect.legendText",
-        ]
-      }
-    >
-      <Component />
-    </EuiI18n>
-  </EuiTitle>
   <EuiFlexGroup
     alignItems="center"
     gutterSize="s"
-    justifyContent="flexEnd"
+    justifyContent="spaceBetween"
     responsive={false}
   >
     <EuiFlexItem
       grow={false}
     >
       <EuiI18n
-        default="Previous time window"
-        token="euiQuickSelect.previousLabel"
+        defaults={
+          Array [
+            "Quick select a time range",
+            "Quick select",
+          ]
+        }
+        tokens={
+          Array [
+            "euiQuickSelect.legendLabel",
+            "euiQuickSelect.legendText",
+          ]
+        }
       >
         <Component />
       </EuiI18n>
     </EuiFlexItem>
     <EuiFlexItem
       grow={false}
     >
-      <EuiI18n
-        default="Next time window"
-        token="euiQuickSelect.nextLabel"
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+        responsive={false}
       >
-        <Component />
-      </EuiI18n>
+        <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
@@ -123,52 +132,61 @@ exports[`EuiQuickSelect is rendered 1`] = `
 
 exports[`EuiQuickSelect prevQuickSelect 1`] = `
 <fieldset>
-  <EuiTitle
-    className="euiQuickSelect__legend"
-    size="xxxs"
-  >
-    <EuiI18n
-      defaults={
-        Array [
-          "Quick select a time range",
-          "Quick select",
-        ]
-      }
-      tokens={
-        Array [
-          "euiQuickSelect.legendLabel",
-          "euiQuickSelect.legendText",
-        ]
-      }
-    >
-      <Component />
-    </EuiI18n>
-  </EuiTitle>
   <EuiFlexGroup
     alignItems="center"
     gutterSize="s"
-    justifyContent="flexEnd"
+    justifyContent="spaceBetween"
     responsive={false}
   >
     <EuiFlexItem
       grow={false}
     >
       <EuiI18n
-        default="Previous time window"
-        token="euiQuickSelect.previousLabel"
+        defaults={
+          Array [
+            "Quick select a time range",
+            "Quick select",
+          ]
+        }
+        tokens={
+          Array [
+            "euiQuickSelect.legendLabel",
+            "euiQuickSelect.legendText",
+          ]
+        }
       >
         <Component />
       </EuiI18n>
     </EuiFlexItem>
     <EuiFlexItem
       grow={false}
     >
-      <EuiI18n
-        default="Next time window"
-        token="euiQuickSelect.nextLabel"
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+        responsive={false}
       >
-        <Component />
-      </EuiI18n>
+        <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

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

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

src/components/date_picker/super_date_picker/quick_select_popover/_quick_select.scss

@@ -2,8 +2,3 @@
   // Allow the button to shrink
   min-width: 0;
 }
-
-.euiQuickSelect__legend {
-  // Allow the legend to sit inline with a flex row
-  position: absolute;
-}

src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss

@@ -8,6 +8,7 @@
   max-height: $euiSizeM * 11;
   overflow: hidden;
   overflow-y: auto;
+  padding: $euiSizeXS 0; // Offset negative margin from flex items
 }
 
 // sass-lint:disable no-important
@@ -19,9 +20,3 @@
 .euiQuickSelectPopover__anchor {
   height: 100%;
 }
-
-// sass-lint:disable no-important
-.euiQuickSelectPopover__list {
-  // Override specificity from greater specificity selectors
-  margin: 0 !important;
-}

src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js

@@ -4,9 +4,7 @@ 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';
 
@@ -19,7 +17,10 @@ export function EuiCommonlyUsedTimeRanges({ applyTime, commonlyUsedRanges }) {
       applyTime({ start, end });
     };
     return (
-      <EuiFlexItem key={label} component="li">
+      <EuiFlexItem
+        key={label}
+        component="li"
+        className="euiCommonlyUsedTimeRanges__item">
         <EuiLink
           onClick={applyCommonlyUsed}
           data-test-subj={`superDatePickerCommonlyUsed_${label.replace(
@@ -42,19 +43,17 @@ export function EuiCommonlyUsedTimeRanges({ applyTime, commonlyUsedRanges }) {
           />
         </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}
-          component="ul"
-          className="euiQuickSelectPopover__list">
+          component="ul">
           {links}
         </EuiFlexGrid>
-      </EuiText>
+      </div>
       <EuiHorizontalRule margin="s" />
     </fieldset>
   );

src/components/date_picker/super_date_picker/quick_select_popover/quick_select.js

@@ -5,7 +5,6 @@ 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';
@@ -124,51 +123,61 @@ export class EuiQuickSelect extends Component {
 
     return (
       <fieldset>
-        <EuiTitle size="xxxs" className="euiQuickSelect__legend">
-          <EuiI18n
-            tokens={['euiQuickSelect.legendLabel', 'euiQuickSelect.legendText']}
-            defaults={['Quick select a time range', 'Quick select']}>
-            {([legendLabel, legendText]) => (
-              <legend id={legendId} aria-label={legendLabel}>
-                {legendText}
-              </legend>
-            )}
-          </EuiI18n>
-        </EuiTitle>
         <EuiFlexGroup
           responsive={false}
           alignItems="center"
-          justifyContent="flexEnd"
+          justifyContent="spaceBetween"
           gutterSize="s">
           <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>
+              tokens={[
+                'euiQuickSelect.legendLabel',
+                'euiQuickSelect.legendText',
+              ]}
+              defaults={['Quick select a time range', 'Quick select']}>
+              {([legendLabel, legendText]) => (
+                <legend
+                  id={legendId}
+                  aria-label={legendLabel}
+                  className="euiFormLabel">
+                  {legendText}
+                </legend>
               )}
             </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>
+            <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" />