From e53b00a148bba9ac0c1a788815ea852c699b8d37 Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Mon, 14 Oct 2019 13:52:27 +0530
Subject: [PATCH] Cleanup around EuiSuperDatePicker quick select a11y

---
 CHANGELOG.md                                  |  1 +
 .../__snapshots__/quick_select.test.js.snap   | 28 +++----------------
 .../quick_select_popover/quick_select.js      | 13 ++++-----
 3 files changed, 10 insertions(+), 32 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 298710f9ff7..f31c7529f58 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@
 - 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))
+- Continues a11y fixes in `EuiSuperDatePicker` ([#2426](https://github.com/elastic/eui/pull/2426))
 
 ## [`14.4.0`](https://github.com/elastic/eui/tree/v14.4.0)
 
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 5b41e109f0b..5edeb5a2be3 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
@@ -3,18 +3,8 @@
 exports[`EuiQuickSelect is rendered 1`] = `
 <fieldset>
   <EuiI18n
-    defaults={
-      Array [
-        "Quick select a time range",
-        "Quick select",
-      ]
-    }
-    tokens={
-      Array [
-        "euiQuickSelect.legendLabel",
-        "euiQuickSelect.legendText",
-      ]
-    }
+    default="Quick select a time range"
+    token="euiQuickSelect.legendText"
   >
     <Component />
   </EuiI18n>
@@ -139,18 +129,8 @@ exports[`EuiQuickSelect is rendered 1`] = `
 exports[`EuiQuickSelect prevQuickSelect 1`] = `
 <fieldset>
   <EuiI18n
-    defaults={
-      Array [
-        "Quick select a time range",
-        "Quick select",
-      ]
-    }
-    tokens={
-      Array [
-        "euiQuickSelect.legendLabel",
-        "euiQuickSelect.legendText",
-      ]
-    }
+    default="Quick select a time range"
+    token="euiQuickSelect.legendText"
   >
     <Component />
   </EuiI18n>
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 450cb062f5a..082760bd7bc 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
@@ -124,16 +124,13 @@ export class EuiQuickSelect extends Component {
     return (
       <fieldset>
         <EuiI18n
-          tokens={['euiQuickSelect.legendLabel', 'euiQuickSelect.legendText']}
-          defaults={['Quick select a time range', 'Quick select']}>
-          {([legendLabel, legendText]) => (
+          token="euiQuickSelect.legendText"
+          default="Quick select a time range">
+          {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">
+              <legend id={legendId} className="euiFormLabel">
                 {legendText}
               </legend>
             </EuiScreenReaderOnly>
@@ -149,7 +146,7 @@ export class EuiQuickSelect extends Component {
               token="euiQuickSelect.quickSelectTitle"
               default="Quick select">
               {quickSelectTitle => (
-                <div id={legendId} aria-hidden className="euiFormLabel">
+                <div aria-hidden className="euiFormLabel">
                   {quickSelectTitle}
                 </div>
               )}