Cleanup around EuiSuperDatePicker quick select a11y

elastic · Oct 14, 2019 · e53b00a · e53b00a
1 parent f475ce9
commit e53b00a
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 32 deletions.
diff --git 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/...ate_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap b/...ate_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
@@ -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>
               )}