From 10985501755155e81f56ba942a0dc7da2020169b Mon Sep 17 00:00:00 2001
From: rockfield <philipp.b@ya.ru>
Date: Tue, 23 Apr 2019 19:46:24 +0300
Subject: [PATCH 01/16] filter toggle buttons are labeled now as proper aria
 toggle buttons = pressed/not-pressed

---
 src/components/search_bar/filters/field_value_toggle_filter.js  | 2 ++
 .../search_bar/filters/field_value_toggle_group_filter.js       | 2 ++
 src/components/search_bar/filters/is_filter.js                  | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/src/components/search_bar/filters/field_value_toggle_filter.js b/src/components/search_bar/filters/field_value_toggle_filter.js
index 80c2d9715b0..5f34ebd16fe 100644
--- a/src/components/search_bar/filters/field_value_toggle_filter.js
+++ b/src/components/search_bar/filters/field_value_toggle_filter.js
@@ -60,6 +60,8 @@ export class FieldValueToggleFilter extends Component {
       <EuiFilterButton
         onClick={onClick}
         hasActiveFilters={hasActiveFilters}
+        aria-label={config.ariaLabel}
+        aria-pressed={hasActiveFilters ? 'true' : 'false'}
       >
         {name}
       </EuiFilterButton>
diff --git a/src/components/search_bar/filters/field_value_toggle_group_filter.js b/src/components/search_bar/filters/field_value_toggle_group_filter.js
index aceeffef043..faa1f25fc84 100644
--- a/src/components/search_bar/filters/field_value_toggle_group_filter.js
+++ b/src/components/search_bar/filters/field_value_toggle_group_filter.js
@@ -68,6 +68,8 @@ export class FieldValueToggleGroupFilter extends Component {
           onClick={onClick}
           hasActiveFilters={active}
           noDivider={!isLastItem}
+          aria-label={item.ariaLabel}
+          aria-pressed={active ? 'true' : 'false'}
         >
           {name}
         </EuiFilterButton>
diff --git a/src/components/search_bar/filters/is_filter.js b/src/components/search_bar/filters/is_filter.js
index 5c6ff4e0587..abf4e5fae62 100644
--- a/src/components/search_bar/filters/is_filter.js
+++ b/src/components/search_bar/filters/is_filter.js
@@ -57,6 +57,8 @@ export class IsFilter extends Component {
       <EuiFilterButton
         onClick={onClick}
         hasActiveFilters={hasActiveFilters}
+        aria-label={config.ariaLabel}
+        aria-pressed={hasActiveFilters ? 'true' : 'false'}
       >
         {name}
       </EuiFilterButton>

From 4999ac0aa0a67931274071c83dc0c829ab41a4cf Mon Sep 17 00:00:00 2001
From: rockfield <philipp.b@ya.ru>
Date: Tue, 23 Apr 2019 19:47:04 +0300
Subject: [PATCH 02/16] Introduces delay render component (similar to delay
 hide), which allows to delay a particular React render

---
 src/components/basic_table/basic_table.js    | 17 +++--
 src/components/delay_render/delay_render.tsx | 68 ++++++++++++++++++++
 src/components/delay_render/index.ts         |  1 +
 3 files changed, 80 insertions(+), 6 deletions(-)
 create mode 100644 src/components/delay_render/delay_render.tsx
 create mode 100644 src/components/delay_render/index.ts

diff --git a/src/components/basic_table/basic_table.js b/src/components/basic_table/basic_table.js
index 9a1f836593c..24a4575dfe9 100644
--- a/src/components/basic_table/basic_table.js
+++ b/src/components/basic_table/basic_table.js
@@ -34,6 +34,7 @@ import { EuiTableSortMobile } from '../table/mobile/table_sort_mobile';
 import { withRequiredProp } from '../../utils/prop_types/with_required_prop';
 import { EuiScreenReaderOnly, EuiKeyboardAccessible } from '../accessibility';
 import { EuiI18n } from '../i18n';
+import { EuiDelayRender } from '../delay_render';
 import makeId from '../form/form_row/make_id';
 
 const dataTypesProfiles = {
@@ -240,8 +241,10 @@ export class EuiBasicTable extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      selection: []
+      selection: [],
+      isDelaying: true,
     };
+    this.delayID = null;
   }
 
   static buildCriteria(props) {
@@ -430,11 +433,13 @@ export class EuiBasicTable extends Component {
     return (
       <EuiScreenReaderOnly>
         <caption role="status" aria-relevant="text" aria-live="polite">
-          <EuiI18n
-            token="euiBasicTable.tableDescription"
-            default="Below is a table of {itemCount} items."
-            values={{ itemCount: items.length }}
-          />
+          <EuiDelayRender>
+            <EuiI18n
+              token="euiBasicTable.tableDescription"
+              default="Below is a table of {itemCount} items."
+              values={{ itemCount: items.length }}
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
     );
diff --git a/src/components/delay_render/delay_render.tsx b/src/components/delay_render/delay_render.tsx
new file mode 100644
index 00000000000..55cab55e1d7
--- /dev/null
+++ b/src/components/delay_render/delay_render.tsx
@@ -0,0 +1,68 @@
+import { Component } from 'react';
+
+interface EuiDelayRenderProps {
+  delay: number;
+}
+
+interface EuiDelayRenderState {
+  delay: number;
+  toggle: boolean;
+}
+
+export class EuiDelayRender extends Component<
+  EuiDelayRenderProps,
+  EuiDelayRenderState
+> {
+  static defaultProps = {
+    delay: 2000,
+  };
+
+  private delayID: number | undefined;
+  private toBeDelayed: boolean = false;
+
+  constructor(props: EuiDelayRenderProps) {
+    super(props);
+    this.state = {
+      delay: this.props.delay,
+      toggle: false,
+    };
+  }
+
+  shouldUpdate() {
+    this.setState({ toggle: !this.state.toggle });
+  }
+
+  startDelaying = () => {
+    window.clearTimeout(this.delayID);
+    this.toBeDelayed = true;
+    this.delayID = window.setTimeout(this.stopDelaying, this.state.delay);
+  };
+  stopDelaying = () => {
+    window.clearTimeout(this.delayID);
+    this.toBeDelayed = false;
+    this.shouldUpdate();
+  };
+
+  componentDidMount() {
+    this.toBeDelayed = true;
+  }
+  shouldComponentUpdate(
+    nextProps: EuiDelayRenderProps,
+    nextState: EuiDelayRenderState
+  ) {
+    if (this.toBeDelayed) {
+      this.startDelaying();
+    }
+    return true;
+  }
+  componentWillUnmount() {
+    this.stopDelaying();
+  }
+  componentDidUpdate() {
+    this.toBeDelayed = true;
+  }
+
+  render() {
+    return !this.toBeDelayed ? this.props.children : null;
+  }
+}
diff --git a/src/components/delay_render/index.ts b/src/components/delay_render/index.ts
new file mode 100644
index 00000000000..6d29dbddf4f
--- /dev/null
+++ b/src/components/delay_render/index.ts
@@ -0,0 +1 @@
+export { EuiDelayRender } from './delay_render';

From b1b0b8854108af4234bb95ed4f4a309da1c92f29 Mon Sep 17 00:00:00 2001
From: rockfield <philipp.b@ya.ru>
Date: Tue, 23 Apr 2019 19:52:00 +0300
Subject: [PATCH 03/16] PR snapshots updates

---
 .../__snapshots__/basic_table.test.js.snap    | 460 +++++++++++-------
 .../in_memory_table.test.js.snap              |  14 +-
 .../field_value_toggle_filter.test.js.snap    |   4 +
 ...eld_value_toggle_group_filter.test.js.snap |   8 +
 .../__snapshots__/is_filter.test.js.snap      |   1 +
 5 files changed, 292 insertions(+), 195 deletions(-)

diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
index ddf79db73d0..7fcf4cf37d9 100644
--- a/src/components/basic_table/__snapshots__/basic_table.test.js.snap
+++ b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
@@ -28,15 +28,19 @@ exports[`EuiBasicTable cellProps renders cells with custom props from a callback
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 3,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 3,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -149,15 +153,19 @@ exports[`EuiBasicTable cellProps renders rows with custom props from an object 1
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 3,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 3,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -272,15 +280,19 @@ exports[`EuiBasicTable empty is rendered 1`] = `
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 0,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 0,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -348,15 +360,19 @@ exports[`EuiBasicTable empty renders a node as a custom message 1`] = `
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 0,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 0,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -432,15 +448,19 @@ exports[`EuiBasicTable empty renders a string as a custom message 1`] = `
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 0,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 0,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -508,15 +528,19 @@ exports[`EuiBasicTable footers do not render without a column footer definition
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 3,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 3,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -745,15 +769,19 @@ exports[`EuiBasicTable footers render with pagination, selection, sorting, and f
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 3,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 3,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -1052,15 +1080,19 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 3,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 3,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -1184,15 +1216,19 @@ exports[`EuiBasicTable rowProps renders rows with custom props from a callback 1
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 3,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 3,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -1311,15 +1347,19 @@ exports[`EuiBasicTable rowProps renders rows with custom props from an object 1`
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 3,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 3,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -1438,15 +1478,19 @@ exports[`EuiBasicTable with pagination - 2nd page 1`] = `
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 2,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 2,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -1544,15 +1588,19 @@ exports[`EuiBasicTable with pagination 1`] = `
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 3,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 3,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -1667,15 +1715,19 @@ exports[`EuiBasicTable with pagination and error 1`] = `
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 3,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 3,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -1755,15 +1807,19 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 3,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 3,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -1923,15 +1979,19 @@ exports[`EuiBasicTable with pagination, hiding the per page options 1`] = `
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 3,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 3,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -2068,15 +2128,19 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 3,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 3,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -2260,15 +2324,19 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 3,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 3,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -2566,15 +2634,19 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 3,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 3,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -2758,15 +2830,19 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 3,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 3,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -2950,15 +3026,19 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 3,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 3,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -3274,15 +3354,19 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 3,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 3,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -3445,15 +3529,19 @@ exports[`EuiBasicTable with sortable columns and sorting disabled 1`] = `
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 3,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 3,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
@@ -3571,15 +3659,19 @@ exports[`EuiBasicTable with sorting 1`] = `
           aria-relevant="text"
           role="status"
         >
-          <EuiI18n
-            default="Below is a table of {itemCount} items."
-            token="euiBasicTable.tableDescription"
-            values={
-              Object {
-                "itemCount": 3,
+          <EuiDelayRender
+            delay={2000}
+          >
+            <EuiI18n
+              default="Below is a table of {itemCount} items."
+              token="euiBasicTable.tableDescription"
+              values={
+                Object {
+                  "itemCount": 3,
+                }
               }
-            }
-          />
+            />
+          </EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
       <EuiTableHeader>
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
index 132fb5b5454..87131a9cd1c 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
@@ -139,17 +139,9 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                 className="euiScreenReaderOnly"
                 role="status"
               >
-                <EuiI18n
-                  default="Below is a table of {itemCount} items."
-                  token="euiBasicTable.tableDescription"
-                  values={
-                    Object {
-                      "itemCount": 2,
-                    }
-                  }
-                >
-                  Below is a table of 2 items.
-                </EuiI18n>
+                <EuiDelayRender
+                  delay={2000}
+                />
               </caption>
             </EuiScreenReaderOnly>
             <EuiTableHeader>
diff --git a/src/components/search_bar/filters/__snapshots__/field_value_toggle_filter.test.js.snap b/src/components/search_bar/filters/__snapshots__/field_value_toggle_filter.test.js.snap
index cc0f5fc8f3e..fadcf3fe32c 100644
--- a/src/components/search_bar/filters/__snapshots__/field_value_toggle_filter.test.js.snap
+++ b/src/components/search_bar/filters/__snapshots__/field_value_toggle_filter.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`FieldValueToggleFilter render - active 1`] = `
 <EuiFilterButton
+  aria-pressed="true"
   color="text"
   grow={false}
   hasActiveFilters={true}
@@ -15,6 +16,7 @@ exports[`FieldValueToggleFilter render - active 1`] = `
 
 exports[`FieldValueToggleFilter render - active negated - custom negated name 1`] = `
 <EuiFilterButton
+  aria-pressed="true"
   color="text"
   grow={false}
   hasActiveFilters={true}
@@ -28,6 +30,7 @@ exports[`FieldValueToggleFilter render - active negated - custom negated name 1`
 
 exports[`FieldValueToggleFilter render - active negated 1`] = `
 <EuiFilterButton
+  aria-pressed="true"
   color="text"
   grow={false}
   hasActiveFilters={true}
@@ -41,6 +44,7 @@ exports[`FieldValueToggleFilter render - active negated 1`] = `
 
 exports[`FieldValueToggleFilter render 1`] = `
 <EuiFilterButton
+  aria-pressed="false"
   color="text"
   grow={false}
   hasActiveFilters={false}
diff --git a/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.js.snap b/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.js.snap
index f9694849c33..d393e8328a6 100644
--- a/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.js.snap
+++ b/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.js.snap
@@ -3,6 +3,7 @@
 exports[`TermToggleGroupFilter render - active 1`] = `
 Array [
   <EuiFilterButton
+    aria-pressed="true"
     color="text"
     grow={false}
     hasActiveFilters={true}
@@ -15,6 +16,7 @@ Array [
     Kibana
   </EuiFilterButton>,
   <EuiFilterButton
+    aria-pressed="false"
     color="text"
     grow={false}
     hasActiveFilters={false}
@@ -32,6 +34,7 @@ Array [
 exports[`TermToggleGroupFilter render - active negated - custom negated name 1`] = `
 Array [
   <EuiFilterButton
+    aria-pressed="true"
     color="text"
     grow={false}
     hasActiveFilters={true}
@@ -44,6 +47,7 @@ Array [
     -Kibana
   </EuiFilterButton>,
   <EuiFilterButton
+    aria-pressed="false"
     color="text"
     grow={false}
     hasActiveFilters={false}
@@ -61,6 +65,7 @@ Array [
 exports[`TermToggleGroupFilter render - active negated 1`] = `
 Array [
   <EuiFilterButton
+    aria-pressed="true"
     color="text"
     grow={false}
     hasActiveFilters={true}
@@ -73,6 +78,7 @@ Array [
     Not Kibana
   </EuiFilterButton>,
   <EuiFilterButton
+    aria-pressed="false"
     color="text"
     grow={false}
     hasActiveFilters={false}
@@ -90,6 +96,7 @@ Array [
 exports[`TermToggleGroupFilter render 1`] = `
 Array [
   <EuiFilterButton
+    aria-pressed="false"
     color="text"
     grow={false}
     hasActiveFilters={false}
@@ -102,6 +109,7 @@ Array [
     Kibana
   </EuiFilterButton>,
   <EuiFilterButton
+    aria-pressed="false"
     color="text"
     grow={false}
     hasActiveFilters={false}
diff --git a/src/components/search_bar/filters/__snapshots__/is_filter.test.js.snap b/src/components/search_bar/filters/__snapshots__/is_filter.test.js.snap
index 4db284e4dde..a66d82315db 100644
--- a/src/components/search_bar/filters/__snapshots__/is_filter.test.js.snap
+++ b/src/components/search_bar/filters/__snapshots__/is_filter.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`IsFilter render 1`] = `
 <EuiFilterButton
+  aria-pressed="false"
   color="text"
   grow={false}
   hasActiveFilters={false}

From 6bf2976425d164a25eedc481840a279f04dcfbd1 Mon Sep 17 00:00:00 2001
From: rockfield <philipp.b@ya.ru>
Date: Tue, 23 Apr 2019 20:05:03 +0300
Subject: [PATCH 04/16] Adjusting delay timout to 500ms

---
 src/components/delay_render/delay_render.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/delay_render/delay_render.tsx b/src/components/delay_render/delay_render.tsx
index 55cab55e1d7..ff7ddf7247d 100644
--- a/src/components/delay_render/delay_render.tsx
+++ b/src/components/delay_render/delay_render.tsx
@@ -14,7 +14,7 @@ export class EuiDelayRender extends Component<
   EuiDelayRenderState
 > {
   static defaultProps = {
-    delay: 2000,
+    delay: 500,
   };
 
   private delayID: number | undefined;

From d2810f1e624337cad1ea252f0af1a0a89c0629de Mon Sep 17 00:00:00 2001
From: rockfield <philipp.b@ya.ru>
Date: Tue, 23 Apr 2019 20:05:15 +0300
Subject: [PATCH 05/16] PR snapshots updates

---
 .../__snapshots__/basic_table.test.js.snap    | 46 +++++++++----------
 .../in_memory_table.test.js.snap              |  2 +-
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
index 7fcf4cf37d9..d1aad9493dd 100644
--- a/src/components/basic_table/__snapshots__/basic_table.test.js.snap
+++ b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
@@ -29,7 +29,7 @@ exports[`EuiBasicTable cellProps renders cells with custom props from a callback
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -154,7 +154,7 @@ exports[`EuiBasicTable cellProps renders rows with custom props from an object 1
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -281,7 +281,7 @@ exports[`EuiBasicTable empty is rendered 1`] = `
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -361,7 +361,7 @@ exports[`EuiBasicTable empty renders a node as a custom message 1`] = `
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -449,7 +449,7 @@ exports[`EuiBasicTable empty renders a string as a custom message 1`] = `
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -529,7 +529,7 @@ exports[`EuiBasicTable footers do not render without a column footer definition
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -770,7 +770,7 @@ exports[`EuiBasicTable footers render with pagination, selection, sorting, and f
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -1081,7 +1081,7 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -1217,7 +1217,7 @@ exports[`EuiBasicTable rowProps renders rows with custom props from a callback 1
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -1348,7 +1348,7 @@ exports[`EuiBasicTable rowProps renders rows with custom props from an object 1`
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -1479,7 +1479,7 @@ exports[`EuiBasicTable with pagination - 2nd page 1`] = `
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -1589,7 +1589,7 @@ exports[`EuiBasicTable with pagination 1`] = `
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -1716,7 +1716,7 @@ exports[`EuiBasicTable with pagination and error 1`] = `
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -1808,7 +1808,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -1980,7 +1980,7 @@ exports[`EuiBasicTable with pagination, hiding the per page options 1`] = `
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -2129,7 +2129,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -2325,7 +2325,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -2635,7 +2635,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -2831,7 +2831,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -3027,7 +3027,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -3355,7 +3355,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -3530,7 +3530,7 @@ exports[`EuiBasicTable with sortable columns and sorting disabled 1`] = `
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
@@ -3660,7 +3660,7 @@ exports[`EuiBasicTable with sorting 1`] = `
           role="status"
         >
           <EuiDelayRender
-            delay={2000}
+            delay={500}
           >
             <EuiI18n
               default="Below is a table of {itemCount} items."
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
index 87131a9cd1c..2cc4f3c416b 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
@@ -140,7 +140,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                 role="status"
               >
                 <EuiDelayRender
-                  delay={2000}
+                  delay={500}
                 />
               </caption>
             </EuiScreenReaderOnly>

From 2dd03cd4d558a588b40bec2e976f407b0e1278e8 Mon Sep 17 00:00:00 2001
From: rockfield <philipp.b@ya.ru>
Date: Tue, 23 Apr 2019 20:10:05 +0300
Subject: [PATCH 06/16] put aria-label atts back as they are no longer needed

---
 src/components/search_bar/filters/field_value_toggle_filter.js   | 1 -
 .../search_bar/filters/field_value_toggle_group_filter.js        | 1 -
 src/components/search_bar/filters/is_filter.js                   | 1 -
 3 files changed, 3 deletions(-)

diff --git a/src/components/search_bar/filters/field_value_toggle_filter.js b/src/components/search_bar/filters/field_value_toggle_filter.js
index 5f34ebd16fe..43d3f02ff12 100644
--- a/src/components/search_bar/filters/field_value_toggle_filter.js
+++ b/src/components/search_bar/filters/field_value_toggle_filter.js
@@ -60,7 +60,6 @@ export class FieldValueToggleFilter extends Component {
       <EuiFilterButton
         onClick={onClick}
         hasActiveFilters={hasActiveFilters}
-        aria-label={config.ariaLabel}
         aria-pressed={hasActiveFilters ? 'true' : 'false'}
       >
         {name}
diff --git a/src/components/search_bar/filters/field_value_toggle_group_filter.js b/src/components/search_bar/filters/field_value_toggle_group_filter.js
index faa1f25fc84..2f72bfc50da 100644
--- a/src/components/search_bar/filters/field_value_toggle_group_filter.js
+++ b/src/components/search_bar/filters/field_value_toggle_group_filter.js
@@ -68,7 +68,6 @@ export class FieldValueToggleGroupFilter extends Component {
           onClick={onClick}
           hasActiveFilters={active}
           noDivider={!isLastItem}
-          aria-label={item.ariaLabel}
           aria-pressed={active ? 'true' : 'false'}
         >
           {name}
diff --git a/src/components/search_bar/filters/is_filter.js b/src/components/search_bar/filters/is_filter.js
index abf4e5fae62..a6073a07f24 100644
--- a/src/components/search_bar/filters/is_filter.js
+++ b/src/components/search_bar/filters/is_filter.js
@@ -57,7 +57,6 @@ export class IsFilter extends Component {
       <EuiFilterButton
         onClick={onClick}
         hasActiveFilters={hasActiveFilters}
-        aria-label={config.ariaLabel}
         aria-pressed={hasActiveFilters ? 'true' : 'false'}
       >
         {name}

From 1b7a59216e597ad3b2fa7b8019f0716fca04744a Mon Sep 17 00:00:00 2001
From: rockfield <philipp.b@ya.ru>
Date: Mon, 6 May 2019 11:37:45 +0300
Subject: [PATCH 07/16] review edits

---
 src/components/delay_render/delay_render.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/delay_render/delay_render.tsx b/src/components/delay_render/delay_render.tsx
index ff7ddf7247d..9125dae993b 100644
--- a/src/components/delay_render/delay_render.tsx
+++ b/src/components/delay_render/delay_render.tsx
@@ -29,7 +29,7 @@ export class EuiDelayRender extends Component<
   }
 
   shouldUpdate() {
-    this.setState({ toggle: !this.state.toggle });
+    this.setState(({ toggle }) => ({toggle: !toggle}));
   }
 
   startDelaying = () => {

From 6be035c1e3b9379568fbbf997d34b692123bf4e5 Mon Sep 17 00:00:00 2001
From: rockfield <philipp.b@ya.ru>
Date: Tue, 7 May 2019 12:24:41 +0300
Subject: [PATCH 08/16] following up feedback comments

---
 src/components/basic_table/basic_table.js    | 4 +---
 src/components/delay_render/delay_render.tsx | 5 +----
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/basic_table/basic_table.js b/src/components/basic_table/basic_table.js
index 24a4575dfe9..822cc50b6ac 100644
--- a/src/components/basic_table/basic_table.js
+++ b/src/components/basic_table/basic_table.js
@@ -241,10 +241,8 @@ export class EuiBasicTable extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      selection: [],
-      isDelaying: true,
+      selection: []
     };
-    this.delayID = null;
   }
 
   static buildCriteria(props) {
diff --git a/src/components/delay_render/delay_render.tsx b/src/components/delay_render/delay_render.tsx
index 58c7d008273..0a151653bc3 100644
--- a/src/components/delay_render/delay_render.tsx
+++ b/src/components/delay_render/delay_render.tsx
@@ -46,10 +46,7 @@ export class EuiDelayRender extends Component<
   componentDidMount() {
     this.toBeDelayed = true;
   }
-  shouldComponentUpdate(
-    nextProps: EuiDelayRenderProps,
-    nextState: EuiDelayRenderState
-  ) {
+  shouldComponentUpdate() {
     if (this.toBeDelayed) {
       this.startDelaying();
     }

From b311622c9725f6a9e9950533c487afd957bce891 Mon Sep 17 00:00:00 2001
From: rockfield <philipp.b@ya.ru>
Date: Tue, 7 May 2019 22:03:44 +0300
Subject: [PATCH 09/16] following up feedback comments

---
 src/components/delay_render/delay_render.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/delay_render/delay_render.tsx b/src/components/delay_render/delay_render.tsx
index 0a151653bc3..bafbd0f7a1f 100644
--- a/src/components/delay_render/delay_render.tsx
+++ b/src/components/delay_render/delay_render.tsx
@@ -5,7 +5,6 @@ interface EuiDelayRenderProps {
 }
 
 interface EuiDelayRenderState {
-  delay: number;
   toggle: boolean;
 }
 
@@ -20,10 +19,9 @@ export class EuiDelayRender extends Component<
   private delayID: number | undefined;
   private toBeDelayed: boolean = false;
 
-  constructor(props: EuiDelayRenderProps) {
-    super(props);
+  constructor() {
+    super();
     this.state = {
-      delay: this.props.delay,
       toggle: false,
     };
   }
@@ -35,7 +33,7 @@ export class EuiDelayRender extends Component<
   startDelaying = () => {
     window.clearTimeout(this.delayID);
     this.toBeDelayed = true;
-    this.delayID = window.setTimeout(this.stopDelaying, this.state.delay);
+    this.delayID = window.setTimeout(this.stopDelaying, this.props.delay);
   };
   stopDelaying = () => {
     window.clearTimeout(this.delayID);

From f1e0c93208dce61a0f1c5b99766e2cc596100cba Mon Sep 17 00:00:00 2001
From: rockfield <philipp.b@ya.ru>
Date: Wed, 8 May 2019 00:23:33 +0300
Subject: [PATCH 10/16] ...

---
 src/components/delay_render/delay_render.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/delay_render/delay_render.tsx b/src/components/delay_render/delay_render.tsx
index bafbd0f7a1f..b7cc4d2d69c 100644
--- a/src/components/delay_render/delay_render.tsx
+++ b/src/components/delay_render/delay_render.tsx
@@ -19,8 +19,8 @@ export class EuiDelayRender extends Component<
   private delayID: number | undefined;
   private toBeDelayed: boolean = false;
 
-  constructor() {
-    super();
+  constructor(props: EuiDelayRenderProps) {
+    super(props);
     this.state = {
       toggle: false,
     };

From 35f536d896414b4ea4f5d912f58eb6022a732204 Mon Sep 17 00:00:00 2001
From: rockfield <philipp.b@ya.ru>
Date: Mon, 13 May 2019 14:13:35 +0300
Subject: [PATCH 11/16] update snapshot

---
 .../context_menu_panel.test.js.snap           | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap b/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
index 559c961c368..0ef3519b3f5 100644
--- a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
+++ b/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
@@ -349,6 +349,49 @@ exports[`EuiContextMenuPanel behavior focus is set on the first focusable elemen
 </div>
 `;
 
+exports[`EuiContextMenuPanel behavior focus is set on the first focusable element by default if there are no items and hasFocus is true 2`] = `
+<div
+  class="euiContextMenu"
+  style="height: 0px;"
+>
+  <div
+    class="euiContextMenuPanel euiContextMenu__panel"
+    tabindex="0"
+  >
+    <button
+      class="euiContextMenuPanelTitle"
+      data-test-subj="contextMenuPanelTitleButton"
+      type="button"
+    >
+      <span
+        class="euiContextMenu__itemLayout"
+      >
+        <svg
+          class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+        <span
+          class="euiContextMenu__text"
+        >
+          2
+        </span>
+      </span>
+    </button>
+    <div>
+      <div>
+        <div>
+          2
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiContextMenuPanel behavior keyboard navigation of items focuses the panel by default 1`] = `
 <div
   class="euiContextMenu"

From d4ff07baf10c919ca6c886ba0ae7f09d74769bdb Mon Sep 17 00:00:00 2001
From: rockfield <philipp.b@ya.ru>
Date: Mon, 13 May 2019 16:39:30 +0300
Subject: [PATCH 12/16] set initial render as delayed

---
 src/components/delay_render/delay_render.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/delay_render/delay_render.tsx b/src/components/delay_render/delay_render.tsx
index b7cc4d2d69c..49ceff33b50 100644
--- a/src/components/delay_render/delay_render.tsx
+++ b/src/components/delay_render/delay_render.tsx
@@ -17,7 +17,7 @@ export class EuiDelayRender extends Component<
   };
 
   private delayID: number | undefined;
-  private toBeDelayed: boolean = false;
+  private toBeDelayed: boolean = true;
 
   constructor(props: EuiDelayRenderProps) {
     super(props);
@@ -42,7 +42,7 @@ export class EuiDelayRender extends Component<
   };
 
   componentDidMount() {
-    this.toBeDelayed = true;
+    this.startDelaying();
   }
   shouldComponentUpdate() {
     if (this.toBeDelayed) {

From d32b799edbf09d623e7c4a8fd5903d9dd0ba4384 Mon Sep 17 00:00:00 2001
From: rockfield <philipp.b@ya.ru>
Date: Mon, 13 May 2019 16:39:54 +0300
Subject: [PATCH 13/16] update documentation

---
 src-docs/src/routes.js                        |  2 +
 .../src/views/delay_render/delay_render.js    | 59 +++++++++++++++++++
 .../delay_render/delay_render_example.js      | 37 ++++++++++++
 src/components/index.js                       |  1 +
 4 files changed, 99 insertions(+)
 create mode 100644 src-docs/src/views/delay_render/delay_render.js
 create mode 100644 src-docs/src/views/delay_render/delay_render_example.js

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index cbb6b8abdc2..eee4e990508 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -68,6 +68,7 @@ import { CopyExample } from './views/copy/copy_example';
 import { DatePickerExample } from './views/date_picker/date_picker_example';
 
 import { DelayHideExample } from './views/delay_hide/delay_hide_example';
+import { DelayRenderExample } from './views/delay_render/delay_render_example';
 
 import { DescriptionListExample } from './views/description_list/description_list_example';
 
@@ -366,6 +367,7 @@ const navigation = [
       CopyExample,
       UtilityClassesExample,
       DelayHideExample,
+      DelayRenderExample,
       ErrorBoundaryExample,
       FocusTrapExample,
       HighlightExample,
diff --git a/src-docs/src/views/delay_render/delay_render.js b/src-docs/src/views/delay_render/delay_render.js
new file mode 100644
index 00000000000..504dbf450c8
--- /dev/null
+++ b/src-docs/src/views/delay_render/delay_render.js
@@ -0,0 +1,59 @@
+import React, { Component, Fragment } from 'react';
+import {
+  EuiDelayRender,
+  EuiFlexItem,
+  EuiCheckbox,
+  EuiFormRow,
+  EuiFieldNumber,
+  EuiLoadingSpinner,
+} from '../../../../src/components';
+
+export default class extends Component {
+  state = {
+    minimumDelay: 3000,
+    render: false,
+  };
+
+  onChangeMinimumDelay = event => {
+    this.setState({ minimumDelay: parseInt(event.target.value, 10) });
+  };
+
+  onChangeHide = event => {
+    this.setState({ render: event.target.checked });
+  };
+
+  render() {
+    const status = this.state.render ? 'showing' : 'hidden';
+    const label = `Child (${status})`;
+    return (
+      <Fragment>
+        <EuiFlexItem>
+          <EuiFormRow>
+            <EuiCheckbox
+              id="dummy-id"
+              checked={this.state.render}
+              onChange={this.onChangeHide}
+              label="Show child"
+            />
+          </EuiFormRow>
+          <EuiFormRow label="Minimum delay">
+            <EuiFieldNumber
+              value={this.state.minimumDelay}
+              onChange={this.onChangeMinimumDelay}
+            />
+          </EuiFormRow>
+
+          <EuiFormRow label={label}>
+            {this.state.render ? (
+              <EuiDelayRender delay={this.state.minimumDelay}>
+                <EuiLoadingSpinner size="m" />
+              </EuiDelayRender>
+            ) : (
+              <Fragment />
+            )}
+          </EuiFormRow>
+        </EuiFlexItem>
+      </Fragment>
+    );
+  }
+}
diff --git a/src-docs/src/views/delay_render/delay_render_example.js b/src-docs/src/views/delay_render/delay_render_example.js
new file mode 100644
index 00000000000..268e5f9dfa8
--- /dev/null
+++ b/src-docs/src/views/delay_render/delay_render_example.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import DelayRender from './delay_render';
+import { GuideSectionTypes } from '../../components';
+import { EuiCode, EuiDelayRender } from '../../../../src/components';
+import { renderToHtml } from '../../services';
+
+const delayRenderSource = require('!!raw-loader!./delay_render');
+const delayRenderHtml = renderToHtml(DelayRender);
+
+export const DelayRenderExample = {
+  title: 'Delay Render',
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: delayRenderSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: delayRenderHtml,
+        },
+      ],
+      text: (
+        <p>
+          <EuiCode>EuiDelayRender</EuiCode> is a component for conditionally
+          toggling the visibility of a child component. It will ensure that the
+          child is hidden for at least 500ms (default). This allows delay UI
+          rendering. That is helpful when you need to update aria live region(s)
+          repeatedly.
+        </p>
+      ),
+      props: { EuiDelayRender },
+      demo: <DelayRender />,
+    },
+  ],
+};
diff --git a/src/components/index.js b/src/components/index.js
index 772987caba3..4c72db29f59 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -48,6 +48,7 @@ export {
 } from './date_picker';
 
 export { EuiDelayHide } from './delay_hide';
+export { EuiDelayRender } from './delay_render';
 
 export {
   EuiDescriptionList,

From c17604b0f0d1534acbcaa475dca23bc2a18c229d Mon Sep 17 00:00:00 2001
From: rockfield <philipp.b@ya.ru>
Date: Mon, 13 May 2019 16:42:19 +0300
Subject: [PATCH 14/16] update change log

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 781d10c2f57..b9e5e4ee972 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - Converted `relative_options` to TS ([#1921](https://github.com/elastic/eui/pull/1921))
 - Added width to `EuiFlexItem` when gutter in `EuiFlexGrid` is set to none. ([#1941](https://github.com/elastic/eui/pull/1941))
 - Format all JavaScript files with Prettier through ESLint ([#1906](https://github.com/elastic/eui/pull/1906))
+- New component "Delay Render" ([#1876](https://github.com/elastic/eui/pull/1876))
 
 **Bug fixes**
 

From 4c00a6c920d4817eb5de48015c98f5fad5fcdf04 Mon Sep 17 00:00:00 2001
From: rockfield <philipp.b@ya.ru>
Date: Tue, 14 May 2019 10:41:37 +0300
Subject: [PATCH 15/16] string parameters conversion, snapshot updating

---
 .../field_value_toggle_filter.test.js.snap       |  8 ++++----
 .../field_value_toggle_group_filter.test.js.snap | 16 ++++++++--------
 .../filters/__snapshots__/is_filter.test.js.snap |  2 +-
 .../filters/field_value_toggle_filter.js         |  2 +-
 .../filters/field_value_toggle_group_filter.js   |  2 +-
 src/components/search_bar/filters/is_filter.js   |  2 +-
 6 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/search_bar/filters/__snapshots__/field_value_toggle_filter.test.js.snap b/src/components/search_bar/filters/__snapshots__/field_value_toggle_filter.test.js.snap
index ce2f3bcd530..3796cb5c880 100644
--- a/src/components/search_bar/filters/__snapshots__/field_value_toggle_filter.test.js.snap
+++ b/src/components/search_bar/filters/__snapshots__/field_value_toggle_filter.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`FieldValueToggleFilter render - active 1`] = `
 <EuiFilterButton
-  aria-pressed="true"
+  aria-pressed={true}
   color="text"
   grow={true}
   hasActiveFilters={true}
@@ -16,7 +16,7 @@ exports[`FieldValueToggleFilter render - active 1`] = `
 
 exports[`FieldValueToggleFilter render - active negated - custom negated name 1`] = `
 <EuiFilterButton
-  aria-pressed="true"
+  aria-pressed={true}
   color="text"
   grow={true}
   hasActiveFilters={true}
@@ -30,7 +30,7 @@ exports[`FieldValueToggleFilter render - active negated - custom negated name 1`
 
 exports[`FieldValueToggleFilter render - active negated 1`] = `
 <EuiFilterButton
-  aria-pressed="true"
+  aria-pressed={true}
   color="text"
   grow={true}
   hasActiveFilters={true}
@@ -44,7 +44,7 @@ exports[`FieldValueToggleFilter render - active negated 1`] = `
 
 exports[`FieldValueToggleFilter render 1`] = `
 <EuiFilterButton
-  aria-pressed="false"
+  aria-pressed={false}
   color="text"
   grow={true}
   hasActiveFilters={false}
diff --git a/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.js.snap b/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.js.snap
index 266bec1167b..e04a56a0c82 100644
--- a/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.js.snap
+++ b/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.js.snap
@@ -3,7 +3,7 @@
 exports[`TermToggleGroupFilter render - active 1`] = `
 Array [
   <EuiFilterButton
-    aria-pressed="true"
+    aria-pressed={true}
     color="text"
     grow={true}
     hasActiveFilters={true}
@@ -17,7 +17,7 @@ Array [
     Kibana
   </EuiFilterButton>,
   <EuiFilterButton
-    aria-pressed="false"
+    aria-pressed={false}
     color="text"
     grow={true}
     hasActiveFilters={false}
@@ -36,7 +36,7 @@ Array [
 exports[`TermToggleGroupFilter render - active negated - custom negated name 1`] = `
 Array [
   <EuiFilterButton
-    aria-pressed="true"
+    aria-pressed={true}
     color="text"
     grow={true}
     hasActiveFilters={true}
@@ -50,7 +50,7 @@ Array [
     -Kibana
   </EuiFilterButton>,
   <EuiFilterButton
-    aria-pressed="false"
+    aria-pressed={false}
     color="text"
     grow={true}
     hasActiveFilters={false}
@@ -69,7 +69,7 @@ Array [
 exports[`TermToggleGroupFilter render - active negated 1`] = `
 Array [
   <EuiFilterButton
-    aria-pressed="true"
+    aria-pressed={true}
     color="text"
     grow={true}
     hasActiveFilters={true}
@@ -83,7 +83,7 @@ Array [
     Not Kibana
   </EuiFilterButton>,
   <EuiFilterButton
-    aria-pressed="false"
+    aria-pressed={false}
     color="text"
     grow={true}
     hasActiveFilters={false}
@@ -102,7 +102,7 @@ Array [
 exports[`TermToggleGroupFilter render 1`] = `
 Array [
   <EuiFilterButton
-    aria-pressed="false"
+    aria-pressed={false}
     color="text"
     grow={true}
     hasActiveFilters={false}
@@ -116,7 +116,7 @@ Array [
     Kibana
   </EuiFilterButton>,
   <EuiFilterButton
-    aria-pressed="false"
+    aria-pressed={false}
     color="text"
     grow={true}
     hasActiveFilters={false}
diff --git a/src/components/search_bar/filters/__snapshots__/is_filter.test.js.snap b/src/components/search_bar/filters/__snapshots__/is_filter.test.js.snap
index ce9b6cbfb64..8a7c1e570d3 100644
--- a/src/components/search_bar/filters/__snapshots__/is_filter.test.js.snap
+++ b/src/components/search_bar/filters/__snapshots__/is_filter.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`IsFilter render 1`] = `
 <EuiFilterButton
-  aria-pressed="false"
+  aria-pressed={false}
   color="text"
   grow={true}
   hasActiveFilters={false}
diff --git a/src/components/search_bar/filters/field_value_toggle_filter.js b/src/components/search_bar/filters/field_value_toggle_filter.js
index 98b6c1109ac..49836c687f2 100644
--- a/src/components/search_bar/filters/field_value_toggle_filter.js
+++ b/src/components/search_bar/filters/field_value_toggle_filter.js
@@ -66,7 +66,7 @@ export class FieldValueToggleFilter extends Component {
       <EuiFilterButton
         onClick={onClick}
         hasActiveFilters={hasActiveFilters}
-        aria-pressed={hasActiveFilters ? 'true' : 'false'}>
+        aria-pressed={!!hasActiveFilters}>
         {name}
       </EuiFilterButton>
     );
diff --git a/src/components/search_bar/filters/field_value_toggle_group_filter.js b/src/components/search_bar/filters/field_value_toggle_group_filter.js
index 6d688543485..6a08fcc1c17 100644
--- a/src/components/search_bar/filters/field_value_toggle_group_filter.js
+++ b/src/components/search_bar/filters/field_value_toggle_group_filter.js
@@ -76,7 +76,7 @@ export class FieldValueToggleGroupFilter extends Component {
           onClick={onClick}
           hasActiveFilters={active}
           noDivider={!isLastItem}
-          aria-pressed={active ? 'true' : 'false'}
+          aria-pressed={!!active}
           withNext={!isLastItem}>
           {name}
         </EuiFilterButton>
diff --git a/src/components/search_bar/filters/is_filter.js b/src/components/search_bar/filters/is_filter.js
index 4b579ebb9e0..304d6f1e2d3 100644
--- a/src/components/search_bar/filters/is_filter.js
+++ b/src/components/search_bar/filters/is_filter.js
@@ -59,7 +59,7 @@ export class IsFilter extends Component {
       <EuiFilterButton
         onClick={onClick}
         hasActiveFilters={hasActiveFilters}
-        aria-pressed={hasActiveFilters ? 'true' : 'false'}>
+        aria-pressed={!!hasActiveFilters}>
         {name}
       </EuiFilterButton>
     );

From 7b38907e3edc6de4b1a8dac222284b4f3e44fdb0 Mon Sep 17 00:00:00 2001
From: rockfield <philipp.b@ya.ru>
Date: Wed, 22 May 2019 18:15:50 +0300
Subject: [PATCH 16/16] update snapshots

---
 .../context_menu_panel.test.js.snap           | 227 ------------------
 1 file changed, 227 deletions(-)

diff --git a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap b/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
index 0ef3519b3f5..26e477cc90f 100644
--- a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
+++ b/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
@@ -306,233 +306,6 @@ exports[`EuiContextMenu props panels and initialPanelId renders the referenced p
 </div>
 `;
 
-exports[`EuiContextMenuPanel behavior focus is set on the first focusable element by default if there are no items and hasFocus is true 1`] = `
-<div
-  class="euiContextMenu"
-  style="height: 0px;"
->
-  <div
-    class="euiContextMenuPanel euiContextMenu__panel"
-    tabindex="0"
-  >
-    <button
-      class="euiContextMenuPanelTitle"
-      data-test-subj="contextMenuPanelTitleButton"
-      type="button"
-    >
-      <span
-        class="euiContextMenu__itemLayout"
-      >
-        <svg
-          class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
-          focusable="false"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        />
-        <span
-          class="euiContextMenu__text"
-        >
-          2
-        </span>
-      </span>
-    </button>
-    <div>
-      <div>
-        <div>
-          2
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiContextMenuPanel behavior focus is set on the first focusable element by default if there are no items and hasFocus is true 2`] = `
-<div
-  class="euiContextMenu"
-  style="height: 0px;"
->
-  <div
-    class="euiContextMenuPanel euiContextMenu__panel"
-    tabindex="0"
-  >
-    <button
-      class="euiContextMenuPanelTitle"
-      data-test-subj="contextMenuPanelTitleButton"
-      type="button"
-    >
-      <span
-        class="euiContextMenu__itemLayout"
-      >
-        <svg
-          class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
-          focusable="false"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        />
-        <span
-          class="euiContextMenu__text"
-        >
-          2
-        </span>
-      </span>
-    </button>
-    <div>
-      <div>
-        <div>
-          2
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiContextMenuPanel behavior keyboard navigation of items focuses the panel by default 1`] = `
-<div
-  class="euiContextMenu"
-  style="height: 0px; width: 400px;"
->
-  <div
-    class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutRight"
-    tabindex="0"
-  >
-    <button
-      class="euiContextMenuPanelTitle"
-      data-test-subj="contextMenuPanelTitleButton"
-      type="button"
-    >
-      <span
-        class="euiContextMenu__itemLayout"
-      >
-        <svg
-          class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
-          focusable="false"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        />
-        <span
-          class="euiContextMenu__text"
-        >
-          2
-        </span>
-      </span>
-    </button>
-    <div>
-      <div>
-        <div>
-          2
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInRight"
-    tabindex="0"
-  >
-    <button
-      class="euiContextMenuPanelTitle"
-      data-test-subj="contextMenuPanelTitleButton"
-      type="button"
-    >
-      <span
-        class="euiContextMenu__itemLayout"
-      >
-        <svg
-          class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
-          focusable="false"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        />
-        <span
-          class="euiContextMenu__text"
-        >
-          1
-        </span>
-      </span>
-    </button>
-    <div>
-      <div>
-        <button
-          class="euiContextMenuItem"
-          type="button"
-        >
-          <span
-            class="euiContextMenu__itemLayout"
-          >
-            <span
-              class="euiContextMenuItem__text"
-            >
-              2a
-            </span>
-            <svg
-              class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__arrow"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </span>
-        </button>
-        <button
-          class="euiContextMenuItem"
-          type="button"
-        >
-          <span
-            class="euiContextMenu__itemLayout"
-          >
-            <span
-              class="euiContextMenuItem__text"
-            >
-              2b
-            </span>
-            <svg
-              class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__arrow"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </span>
-        </button>
-        <button
-          class="euiContextMenuItem"
-          type="button"
-        >
-          <span
-            class="euiContextMenu__itemLayout"
-          >
-            <span
-              class="euiContextMenuItem__text"
-            >
-              2c
-            </span>
-            <svg
-              class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__arrow"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`EuiContextMenuPanel is rendered 1`] = `
 <div
   aria-label="aria-label"