added enter key functionality

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `Enter` key press functionality to `EuiSuperDatePicker` ([#3048](https://github.com/elastic/eui/pull/3048))
 - Added props descriptions for `EuiComboBox` ([#3007](https://github.com/elastic/eui/pull/3007))
 - Exported `dateFormatAliases` as a part of the public API ([#3043](https://github.com/elastic/eui/pull/3043))
 - Exported `EuiTextProps` type definition ([#3039](https://github.com/elastic/eui/pull/3039))

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

@@ -1,7 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiQuickSelect is rendered 1`] = `
-<fieldset>
+<fieldset
+  onKeyDown={[Function]}
+  role="presentation"
+>
   <EuiI18n
     default="Quick select a time range"
     token="euiQuickSelect.legendText"
@@ -127,7 +130,10 @@ exports[`EuiQuickSelect is rendered 1`] = `
 `;
 
 exports[`EuiQuickSelect prevQuickSelect 1`] = `
-<fieldset>
+<fieldset
+  onKeyDown={[Function]}
+  role="presentation"
+>
   <EuiI18n
     default="Quick select a time range"
     token="euiQuickSelect.legendText"

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

@@ -57,6 +57,10 @@ export class EuiQuickSelect extends Component {
     });
   };
 
+  handleKeyDown = ({ key }) => {
+    if (key === 'Enter') this.applyQuickSelect();
+  };
+
   applyQuickSelect = () => {
     const { timeTense, timeValue, timeUnits } = this.state;
 
@@ -122,7 +126,7 @@ export class EuiQuickSelect extends Component {
     const legendId = this.generateId();
 
     return (
-      <fieldset>
+      <fieldset role="presentation" onKeyDown={this.handleKeyDown}>
         <EuiI18n
           token="euiQuickSelect.legendText"
           default="Quick select a time range">

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

@@ -90,6 +90,10 @@ export class EuiRefreshInterval extends Component {
     );
   };
 
+  handleKeyDown = ({ key }) => {
+    if (key === 'Enter') this.applyRefreshInterval();
+  };
+
   applyRefreshInterval = () => {
     if (this.state.value === '') {
       return;
@@ -106,7 +110,7 @@ export class EuiRefreshInterval extends Component {
     });
   };
 
-  toogleRefresh = () => {
+  toggleRefresh = () => {
     this.props.applyRefreshInterval({
       refreshInterval: toMilliseconds(this.state.units, this.state.value),
       isPaused: !this.props.isPaused,
@@ -123,7 +127,7 @@ export class EuiRefreshInterval extends Component {
     }
 
     return (
-      <fieldset>
+      <fieldset role="presentation" onKeyDown={this.handleKeyDown}>
         <EuiTitle size="xxxs">
           <legend id={legendId}>
             <EuiI18n
@@ -160,7 +164,7 @@ export class EuiRefreshInterval extends Component {
               className="euiRefreshInterval__startButton"
               iconType={this.props.isPaused ? 'play' : 'stop'}
               size="s"
-              onClick={this.toogleRefresh}
+              onClick={this.toggleRefresh}
               disabled={value === '' || value <= 0}
               data-test-subj="superDatePickerToggleRefreshButton"
               aria-describedby={`${refreshSelectionId} ${legendId}`}>

src/components/date_picker/super_date_picker/super_date_picker.js

@@ -470,7 +470,6 @@ export class EuiSuperDatePicker extends Component {
             {this.renderDatePickerRange()}
           </EuiFormControlLayout>
         </EuiFlexItem>
-
         {this.renderUpdateButton()}
       </EuiFlexGroup>
     );