EuiDelayRender

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={500}
+                />
               </caption>
             </EuiScreenReaderOnly>
             <EuiTableHeader>

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

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: 500,
+  };
+
+  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 }) => ({ toggle: !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;
+  }
+}

src/components/delay_render/index.ts

@@ -0,0 +1 @@
+export { EuiDelayRender } from './delay_render';

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={true}
   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={true}
   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={true}
   hasActiveFilters={true}
@@ -41,6 +44,7 @@ exports[`FieldValueToggleFilter render - active negated 1`] = `
 
 exports[`FieldValueToggleFilter render 1`] = `
 <EuiFilterButton
+  aria-pressed="false"
   color="text"
   grow={true}
   hasActiveFilters={false}

src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.js.snap

@@ -3,23 +3,27 @@
 exports[`TermToggleGroupFilter render - active 1`] = `
 Array [
   <EuiFilterButton
+    aria-pressed="true"
     color="text"
     grow={true}
     hasActiveFilters={true}
     iconSide="right"
     key="field_value_toggle_filter_item_0"
+    noDivider={true}
     onClick={[Function]}
     type="button"
     withNext={true}
   >
     Kibana
   </EuiFilterButton>,
   <EuiFilterButton
+    aria-pressed="false"
     color="text"
     grow={true}
     hasActiveFilters={false}
     iconSide="right"
     key="field_value_toggle_filter_item_1"
+    noDivider={false}
     onClick={[Function]}
     type="button"
     withNext={false}
@@ -32,23 +36,27 @@ Array [
 exports[`TermToggleGroupFilter render - active negated - custom negated name 1`] = `
 Array [
   <EuiFilterButton
+    aria-pressed="true"
     color="text"
     grow={true}
     hasActiveFilters={true}
     iconSide="right"
     key="field_value_toggle_filter_item_0"
+    noDivider={true}
     onClick={[Function]}
     type="button"
     withNext={true}
   >
     -Kibana
   </EuiFilterButton>,
   <EuiFilterButton
+    aria-pressed="false"
     color="text"
     grow={true}
     hasActiveFilters={false}
     iconSide="right"
     key="field_value_toggle_filter_item_1"
+    noDivider={false}
     onClick={[Function]}
     type="button"
     withNext={false}
@@ -61,23 +69,27 @@ Array [
 exports[`TermToggleGroupFilter render - active negated 1`] = `
 Array [
   <EuiFilterButton
+    aria-pressed="true"
     color="text"
     grow={true}
     hasActiveFilters={true}
     iconSide="right"
     key="field_value_toggle_filter_item_0"
+    noDivider={true}
     onClick={[Function]}
     type="button"
     withNext={true}
   >
     Not Kibana
   </EuiFilterButton>,
   <EuiFilterButton
+    aria-pressed="false"
     color="text"
     grow={true}
     hasActiveFilters={false}
     iconSide="right"
     key="field_value_toggle_filter_item_1"
+    noDivider={false}
     onClick={[Function]}
     type="button"
     withNext={false}
@@ -90,23 +102,27 @@ Array [
 exports[`TermToggleGroupFilter render 1`] = `
 Array [
   <EuiFilterButton
+    aria-pressed="false"
     color="text"
     grow={true}
     hasActiveFilters={false}
     iconSide="right"
     key="field_value_toggle_filter_item_0"
+    noDivider={true}
     onClick={[Function]}
     type="button"
     withNext={true}
   >
     Kibana
   </EuiFilterButton>,
   <EuiFilterButton
+    aria-pressed="false"
     color="text"
     grow={true}
     hasActiveFilters={false}
     iconSide="right"
     key="field_value_toggle_filter_item_1"
+    noDivider={false}
     onClick={[Function]}
     type="button"
     withNext={false}

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={true}
   hasActiveFilters={false}

src/components/search_bar/filters/field_value_toggle_filter.js

@@ -60,6 +60,7 @@ export class FieldValueToggleFilter extends Component {
       <EuiFilterButton
         onClick={onClick}
         hasActiveFilters={hasActiveFilters}
+        aria-pressed={hasActiveFilters ? 'true' : 'false'}
       >
         {name}
       </EuiFilterButton>

src/components/search_bar/filters/field_value_toggle_group_filter.js

@@ -67,6 +67,8 @@ export class FieldValueToggleGroupFilter extends Component {
           key={key}
           onClick={onClick}
           hasActiveFilters={active}
+          noDivider={!isLastItem}
+          aria-pressed={active ? 'true' : 'false'}
           withNext={!isLastItem}
         >
           {name}

src/components/search_bar/filters/is_filter.js

@@ -57,6 +57,7 @@ export class IsFilter extends Component {
       <EuiFilterButton
         onClick={onClick}
         hasActiveFilters={hasActiveFilters}
+        aria-pressed={hasActiveFilters ? 'true' : 'false'}
       >
         {name}
       </EuiFilterButton>