From 31249e54ff4514709d5289113884a2a16e5d42e8 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Wed, 29 Jan 2020 12:22:27 -0800
Subject: [PATCH] Add tableCaption to EuiBasicTable (#2782)

---
 CHANGELOG.md                                  |   2 +-
 src-docs/src/views/tables/basic/props_info.js |   6 +
 .../__snapshots__/basic_table.test.tsx.snap   | 173 ++++++------------
 .../in_memory_table.test.tsx.snap             |   3 -
 src/components/basic_table/basic_table.tsx    |  46 +++--
 5 files changed, 97 insertions(+), 133 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 45b47cda021..c912d58a23d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `18.3.0`.
+- Added `tableCaption` prop to `EuiBasicTable` and improved the default one ([#2782](https://github.com/elastic/eui/pull/2782))
 
 ## [`18.3.0`](https://github.com/elastic/eui/tree/v18.3.0)
 
diff --git a/src-docs/src/views/tables/basic/props_info.js b/src-docs/src/views/tables/basic/props_info.js
index 5e64e7c86d3..ebc3f2ad640 100644
--- a/src-docs/src/views/tables/basic/props_info.js
+++ b/src-docs/src/views/tables/basic/props_info.js
@@ -95,6 +95,12 @@ export const propsInfo = {
           required: false,
           type: { name: '(criteria: #Criteria) => void' },
         },
+        tableCaption: {
+          description:
+            'Describes the content of the table. If not specified, the caption will be "This table contains {itemCount} rows."',
+          required: false,
+          type: { name: 'string' },
+        },
         tableLayout: {
           description:
             'Sets the table-layout CSS property. Note that auto tableLayout prevents truncateText from working properly.',
diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
index 7f072a77ba5..e8b98946ae7 100644
--- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
@@ -25,17 +25,14 @@ exports[`EuiBasicTable cellProps renders cells with custom props from a callback
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows."
+              token="euiBasicTable.tableDescriptionWithoutPagination"
               values={
                 Object {
                   "itemCount": 3,
@@ -148,17 +145,14 @@ exports[`EuiBasicTable cellProps renders rows with custom props from an object 1
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows."
+              token="euiBasicTable.tableDescriptionWithoutPagination"
               values={
                 Object {
                   "itemCount": 3,
@@ -273,17 +267,14 @@ exports[`EuiBasicTable empty is rendered 1`] = `
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows."
+              token="euiBasicTable.tableDescriptionWithoutPagination"
               values={
                 Object {
                   "itemCount": 0,
@@ -343,17 +334,14 @@ exports[`EuiBasicTable empty renders a node as a custom message 1`] = `
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows."
+              token="euiBasicTable.tableDescriptionWithoutPagination"
               values={
                 Object {
                   "itemCount": 0,
@@ -421,17 +409,14 @@ exports[`EuiBasicTable empty renders a string as a custom message 1`] = `
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows."
+              token="euiBasicTable.tableDescriptionWithoutPagination"
               values={
                 Object {
                   "itemCount": 0,
@@ -491,17 +476,14 @@ exports[`EuiBasicTable footers do not render without a column footer definition
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows."
+              token="euiBasicTable.tableDescriptionWithoutPagination"
               values={
                 Object {
                   "itemCount": 3,
@@ -718,20 +700,18 @@ exports[`EuiBasicTable footers render with pagination, selection, sorting, and f
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows out of {totalItemCount} rows."
+              token="euiBasicTable.tableDescriptionWithPagination"
               values={
                 Object {
                   "itemCount": 3,
+                  "totalItemCount": 5,
                 }
               }
             />
@@ -1009,17 +989,14 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows."
+              token="euiBasicTable.tableDescriptionWithoutPagination"
               values={
                 Object {
                   "itemCount": 3,
@@ -1137,17 +1114,14 @@ exports[`EuiBasicTable rowProps renders rows with custom props from a callback 1
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows."
+              token="euiBasicTable.tableDescriptionWithoutPagination"
               values={
                 Object {
                   "itemCount": 3,
@@ -1266,17 +1240,14 @@ exports[`EuiBasicTable rowProps renders rows with custom props from an object 1`
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows."
+              token="euiBasicTable.tableDescriptionWithoutPagination"
               values={
                 Object {
                   "itemCount": 3,
@@ -1395,20 +1366,18 @@ exports[`EuiBasicTable with pagination - 2nd page 1`] = `
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows out of {totalItemCount} rows."
+              token="euiBasicTable.tableDescriptionWithPagination"
               values={
                 Object {
                   "itemCount": 2,
+                  "totalItemCount": 5,
                 }
               }
             />
@@ -1503,20 +1472,18 @@ exports[`EuiBasicTable with pagination 1`] = `
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows out of {totalItemCount} rows."
+              token="euiBasicTable.tableDescriptionWithPagination"
               values={
                 Object {
                   "itemCount": 3,
+                  "totalItemCount": 5,
                 }
               }
             />
@@ -1628,20 +1595,18 @@ exports[`EuiBasicTable with pagination and error 1`] = `
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows out of {totalItemCount} rows."
+              token="euiBasicTable.tableDescriptionWithPagination"
               values={
                 Object {
                   "itemCount": 3,
+                  "totalItemCount": 5,
                 }
               }
             />
@@ -1710,20 +1675,18 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows out of {totalItemCount} rows."
+              token="euiBasicTable.tableDescriptionWithPagination"
               values={
                 Object {
                   "itemCount": 3,
+                  "totalItemCount": 5,
                 }
               }
             />
@@ -1878,20 +1841,18 @@ exports[`EuiBasicTable with pagination, hiding the per page options 1`] = `
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows out of {totalItemCount} rows."
+              token="euiBasicTable.tableDescriptionWithPagination"
               values={
                 Object {
                   "itemCount": 3,
+                  "totalItemCount": 5,
                 }
               }
             />
@@ -2025,20 +1986,18 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows out of {totalItemCount} rows."
+              token="euiBasicTable.tableDescriptionWithPagination"
               values={
                 Object {
                   "itemCount": 3,
+                  "totalItemCount": 5,
                 }
               }
             />
@@ -2217,20 +2176,18 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows out of {totalItemCount} rows."
+              token="euiBasicTable.tableDescriptionWithPagination"
               values={
                 Object {
                   "itemCount": 3,
+                  "totalItemCount": 5,
                 }
               }
             />
@@ -2502,20 +2459,18 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows out of {totalItemCount} rows."
+              token="euiBasicTable.tableDescriptionWithPagination"
               values={
                 Object {
                   "itemCount": 3,
+                  "totalItemCount": 5,
                 }
               }
             />
@@ -2694,20 +2649,18 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows out of {totalItemCount} rows."
+              token="euiBasicTable.tableDescriptionWithPagination"
               values={
                 Object {
                   "itemCount": 3,
+                  "totalItemCount": 5,
                 }
               }
             />
@@ -2886,20 +2839,18 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows out of {totalItemCount} rows."
+              token="euiBasicTable.tableDescriptionWithPagination"
               values={
                 Object {
                   "itemCount": 3,
+                  "totalItemCount": 5,
                 }
               }
             />
@@ -3189,20 +3140,18 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows out of {totalItemCount} rows."
+              token="euiBasicTable.tableDescriptionWithPagination"
               values={
                 Object {
                   "itemCount": 3,
+                  "totalItemCount": 5,
                 }
               }
             />
@@ -3360,17 +3309,14 @@ exports[`EuiBasicTable with sortable columns and sorting disabled 1`] = `
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows."
+              token="euiBasicTable.tableDescriptionWithoutPagination"
               values={
                 Object {
                   "itemCount": 3,
@@ -3488,17 +3434,14 @@ exports[`EuiBasicTable with sorting 1`] = `
     >
       <EuiScreenReaderOnly>
         <caption
-          aria-live="polite"
-          aria-relevant="text"
           className="euiTableCaption"
-          role="status"
         >
           <EuiDelayRender
             delay={500}
           >
             <EuiI18n
-              default="Below is a table of {itemCount} items."
-              token="euiBasicTable.tableDescription"
+              default="This table contains {itemCount} rows."
+              token="euiBasicTable.tableDescriptionWithoutPagination"
               values={
                 Object {
                   "itemCount": 3,
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
index 34dd0470f1d..4e021fa7798 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
@@ -134,10 +134,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
           >
             <EuiScreenReaderOnly>
               <caption
-                aria-live="polite"
-                aria-relevant="text"
                 className="euiScreenReaderOnly euiTableCaption"
-                role="status"
               >
                 <EuiDelayRender
                   delay={500}
diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx
index 57820505390..92e0631b609 100644
--- a/src/components/basic_table/basic_table.tsx
+++ b/src/components/basic_table/basic_table.tsx
@@ -177,6 +177,7 @@ interface BasicTableProps<T> extends Omit<EuiTableProps, 'onChange'> {
   cellProps?: object | CellPropsCallback<T>;
   columns: Array<EuiBasicTableColumn<T>>;
   error?: string;
+  tableCaption?: string;
   hasActions?: boolean;
   isExpandable?: boolean;
   isSelectable?: boolean;
@@ -439,6 +440,7 @@ export class EuiBasicTable<T = any> extends Component<
       hasActions,
       rowProps,
       cellProps,
+      tableCaption,
       tableLayout,
       ...rest
     } = this.props;
@@ -533,22 +535,38 @@ export class EuiBasicTable<T = any> extends Component<
   }
 
   renderTableCaption() {
-    const { items } = this.props;
-
+    const { items, pagination, tableCaption } = this.props;
+    let captionElement;
+    if (tableCaption) {
+      captionElement = tableCaption;
+    } else {
+      if (pagination && pagination.totalItemCount > 0) {
+        captionElement = (
+          <EuiI18n
+            token="euiBasicTable.tableDescriptionWithPagination"
+            default="This table contains {itemCount} rows out of {totalItemCount} rows."
+            values={{
+              totalItemCount: pagination.totalItemCount,
+              itemCount: items.length,
+            }}
+          />
+        );
+      } else {
+        captionElement = (
+          <EuiI18n
+            token="euiBasicTable.tableDescriptionWithoutPagination"
+            default="This table contains {itemCount} rows."
+            values={{
+              itemCount: items.length,
+            }}
+          />
+        );
+      }
+    }
     return (
       <EuiScreenReaderOnly>
-        <caption
-          className="euiTableCaption"
-          role="status"
-          aria-relevant="text"
-          aria-live="polite">
-          <EuiDelayRender>
-            <EuiI18n
-              token="euiBasicTable.tableDescription"
-              default="Below is a table of {itemCount} items."
-              values={{ itemCount: items.length }}
-            />
-          </EuiDelayRender>
+        <caption className="euiTableCaption">
+          <EuiDelayRender>{captionElement}</EuiDelayRender>
         </caption>
       </EuiScreenReaderOnly>
     );