From 831ff23cf07040120e7111d80015b16f0d6b80c1 Mon Sep 17 00:00:00 2001
From: Evan Sharp <Evan.Sharp@ibm.com>
Date: Mon, 20 Sep 2021 10:20:35 -0400
Subject: [PATCH] fix(tabletoolbar): provide aria-label to CarbonTableToolbar

Previously, aria-label could not be specified on TableToolbar, letting Carbon's TableToolbar default it to 'data table toolbar'
This the label should be unqiue, but with multiple Tables with toolbars, it would only ever be 'data table toolbar'
This change allows aria-label be be specified via the i18n prop as toolbarLabelAria
If secondaryTitle is used and no i18n.toolbarLabelAria is specified, it will default to using secondaryTitle within aria-label (appending ' Toolbar')
If no secondaryTitle nor i18n.toolbarLabelAria is specified, it will fallback to Carbon's TableToolbar default as it does now.

BREAKING CHANGE: TableToolbar with secondaryTitle will now default to using secondaryTitle in the aria-label.
To mitigate this change: set i18n.toolbarLabelAria to "data table toolbar"
---
 .../Card/__snapshots__/Card.story.storyshot   |  2 +-
 .../__snapshots__/Dashboard.story.storyshot   | 12 +++++------
 .../DashboardGrid.story.storyshot             |  2 +-
 .../DashboardEditor.story.storyshot           |  4 ++--
 .../__snapshots__/RuleBuilder.story.storyshot |  8 ++++----
 packages/react/src/components/Table/Table.jsx |  2 ++
 .../src/components/Table/TablePropTypes.js    |  1 +
 .../Table/TableToolbar/TableToolbar.jsx       |  2 ++
 .../StatefulTable.story.storyshot             | 14 ++++++-------
 .../Table/__snapshots__/Table.story.storyshot |  8 ++++----
 .../__snapshots__/TableCard.story.storyshot   | 20 +++++++++----------
 .../__snapshots__/publicAPI.test.js.snap      | 10 ++++++++++
 12 files changed, 50 insertions(+), 35 deletions(-)

diff --git a/packages/react/src/components/Card/__snapshots__/Card.story.storyshot b/packages/react/src/components/Card/__snapshots__/Card.story.storyshot
index 06a2a763da..05ff3c17a2 100644
--- a/packages/react/src/components/Card/__snapshots__/Card.story.storyshot
+++ b/packages/react/src/components/Card/__snapshots__/Card.story.storyshot
@@ -192,7 +192,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/C
           }
         >
           <section
-            aria-label="data table toolbar"
+            aria-label="Custom Card Title Toolbar"
             className="bx--table-toolbar"
             data-testid="my table-table-toolbar"
           >
diff --git a/packages/react/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot b/packages/react/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot
index ee8159b4a3..151ee484fa 100644
--- a/packages/react/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot
+++ b/packages/react/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot
@@ -1604,7 +1604,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/
                   data-testid="table-for-card-alert-table1-table-container"
                 >
                   <section
-                    aria-label="data table toolbar"
+                    aria-label="Alerts Toolbar"
                     className="bx--table-toolbar"
                     data-testid="table-for-card-alert-table1-table-toolbar"
                   >
@@ -4544,7 +4544,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/
                   data-testid="table-for-card-alert-table1-table-container"
                 >
                   <section
-                    aria-label="data table toolbar"
+                    aria-label="Alerts Toolbar"
                     className="bx--table-toolbar"
                     data-testid="table-for-card-alert-table1-table-toolbar"
                   >
@@ -7519,7 +7519,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/
                   data-testid="table-for-card-alert-table1-table-container"
                 >
                   <section
-                    aria-label="data table toolbar"
+                    aria-label="Alerts Toolbar"
                     className="bx--table-toolbar"
                     data-testid="table-for-card-alert-table1-table-toolbar"
                   >
@@ -9578,7 +9578,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/
                   data-testid="table-for-card-expandedcard-table-container"
                 >
                   <section
-                    aria-label="data table toolbar"
+                    aria-label="Expanded card Toolbar"
                     className="bx--table-toolbar"
                     data-testid="table-for-card-expandedcard-table-toolbar"
                   >
@@ -13095,7 +13095,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/
                   data-testid="table-for-card-alert-table1-table-container"
                 >
                   <section
-                    aria-label="data table toolbar"
+                    aria-label="Alerts Toolbar"
                     className="bx--table-toolbar"
                     data-testid="table-for-card-alert-table1-table-toolbar"
                   >
@@ -30741,7 +30741,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/
                   data-testid="table-for-card-alert-table1-table-container"
                 >
                   <section
-                    aria-label="data table toolbar"
+                    aria-label="Alerts Toolbar"
                     className="bx--table-toolbar"
                     data-testid="table-for-card-alert-table1-table-toolbar"
                   >
diff --git a/packages/react/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot b/packages/react/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot
index 1b465de7f8..c9eef5e5e6 100644
--- a/packages/react/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot
+++ b/packages/react/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot
@@ -2105,7 +2105,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/D
               data-testid="table-for-card-tableCard-table-container"
             >
               <section
-                aria-label="data table toolbar"
+                aria-label="TableCard - LARGE Toolbar"
                 className="bx--table-toolbar"
                 data-testid="table-for-card-tableCard-table-toolbar"
               >
diff --git a/packages/react/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot b/packages/react/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot
index 364b6e26c7..8afebe9748 100644
--- a/packages/react/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot
+++ b/packages/react/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot
@@ -627,7 +627,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
                         data-testid="table-for-card-Table-table-container"
                       >
                         <section
-                          aria-label="data table toolbar"
+                          aria-label="Table card Toolbar"
                           className="bx--table-toolbar"
                           data-testid="table-for-card-Table-table-toolbar"
                         >
@@ -19905,7 +19905,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
                       data-testid="table-for-card-Table-table-container"
                     >
                       <section
-                        aria-label="data table toolbar"
+                        aria-label="Table card Toolbar"
                         className="bx--table-toolbar"
                         data-testid="table-for-card-Table-table-toolbar"
                       >
diff --git a/packages/react/src/components/RuleBuilder/__snapshots__/RuleBuilder.story.storyshot b/packages/react/src/components/RuleBuilder/__snapshots__/RuleBuilder.story.storyshot
index 861fd80c05..82070d1bdc 100644
--- a/packages/react/src/components/RuleBuilder/__snapshots__/RuleBuilder.story.storyshot
+++ b/packages/react/src/components/RuleBuilder/__snapshots__/RuleBuilder.story.storyshot
@@ -847,7 +847,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
                     data-testid="edit-table-table-container"
                   >
                     <section
-                      aria-label="data table toolbar"
+                      aria-label="Editor access Toolbar"
                       className="bx--table-toolbar"
                       data-testid="edit-table-table-toolbar"
                     >
@@ -1362,7 +1362,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
                     data-testid="read-table-table-container"
                   >
                     <section
-                      aria-label="data table toolbar"
+                      aria-label="Read only access Toolbar"
                       className="bx--table-toolbar"
                       data-testid="read-table-table-toolbar"
                     >
@@ -5463,7 +5463,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
                     data-testid="edit-table-table-container"
                   >
                     <section
-                      aria-label="data table toolbar"
+                      aria-label="Editor access Toolbar"
                       className="bx--table-toolbar"
                       data-testid="edit-table-table-toolbar"
                     >
@@ -5742,7 +5742,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 2 - Watson IoT E
                     data-testid="read-table-table-container"
                   >
                     <section
-                      aria-label="data table toolbar"
+                      aria-label="Read only access Toolbar"
                       className="bx--table-toolbar"
                       data-testid="read-table-table-toolbar"
                     >
diff --git a/packages/react/src/components/Table/Table.jsx b/packages/react/src/components/Table/Table.jsx
index 85e565b9db..970904b2c1 100644
--- a/packages/react/src/components/Table/Table.jsx
+++ b/packages/react/src/components/Table/Table.jsx
@@ -426,6 +426,7 @@ export const defaultProps = (baseProps) => ({
     itemSelected: (selectedCount) => `${selectedCount} item selected`,
     rowCountInHeader: (totalRowCount) => `Results: ${totalRowCount}`,
     toggleAggregations: 'Toggle aggregations',
+    toolbarLabelAria: undefined,
     /** empty state */
     emptyMessage: 'There is no data',
     emptyMessageBody: '',
@@ -727,6 +728,7 @@ const Table = (props) => {
               downloadIconDescription: i18n.downloadIconDescription,
               rowCountInHeader: i18n.rowCountInHeader,
               toggleAggregations: i18n.toggleAggregations,
+              toolbarLabelAria: i18n.toolbarLabelAria,
             }}
             actions={{
               ...pick(
diff --git a/packages/react/src/components/Table/TablePropTypes.js b/packages/react/src/components/Table/TablePropTypes.js
index 1abc2fda92..aa277b127e 100644
--- a/packages/react/src/components/Table/TablePropTypes.js
+++ b/packages/react/src/components/Table/TablePropTypes.js
@@ -170,6 +170,7 @@ export const I18NPropTypes = PropTypes.shape({
   closeMenuAria: PropTypes.string,
   clearSelectionAria: PropTypes.string,
   batchCancel: PropTypes.string,
+  toolbarLabelAria: PropTypes.string,
   /** String 'items selected' or function receiving the selectedCount as param:
    * (selectedCount) => `${selectedCount} items selected` */
   itemsSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
diff --git a/packages/react/src/components/Table/TableToolbar/TableToolbar.jsx b/packages/react/src/components/Table/TableToolbar/TableToolbar.jsx
index ac29aa9968..16176f52fd 100644
--- a/packages/react/src/components/Table/TableToolbar/TableToolbar.jsx
+++ b/packages/react/src/components/Table/TableToolbar/TableToolbar.jsx
@@ -75,6 +75,7 @@ const propTypes = {
     filterAscending: PropTypes.string,
     filterDescending: PropTypes.string,
     toggleAggregations: PropTypes.string,
+    toolbarLabelAria: PropTypes.string,
   }),
   /**
    * Action callbacks to update tableState
@@ -215,6 +216,7 @@ const TableToolbar = ({
       // TODO: remove deprecated 'testID' in v3
       data-testid={testID || testId}
       className={classnames(`${iotPrefix}--table-toolbar`, className)}
+      aria-label={i18n.toolbarLabelAria || secondaryTitle ? `${secondaryTitle} Toolbar` : undefined}
     >
       <TableBatchActions
         // TODO: remove deprecated 'testID' in v3
diff --git a/packages/react/src/components/Table/__snapshots__/StatefulTable.story.storyshot b/packages/react/src/components/Table/__snapshots__/StatefulTable.story.storyshot
index a42800e0e9..757319c89b 100644
--- a/packages/react/src/components/Table/__snapshots__/StatefulTable.story.storyshot
+++ b/packages/react/src/components/Table/__snapshots__/StatefulTable.story.storyshot
@@ -23186,7 +23186,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
       data-testid="table-table-container"
     >
       <section
-        aria-label="data table toolbar"
+        aria-label="Row count: 100 Toolbar"
         className="bx--table-toolbar"
         data-testid="table-table-toolbar"
       >
@@ -44086,7 +44086,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
       data-testid="table-table-container"
     >
       <section
-        aria-label="data table toolbar"
+        aria-label="Table with user view management Toolbar"
         className="bx--table-toolbar"
         data-testid="table-table-toolbar"
       >
@@ -49223,7 +49223,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
     data-testid="table-table-container"
   >
     <section
-      aria-label="data table toolbar"
+      aria-label="Row count: 100 Toolbar"
       className="bx--table-toolbar"
       data-testid="table-table-toolbar"
     >
@@ -72446,7 +72446,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
       data-testid="table-table-container"
     >
       <section
-        aria-label="data table toolbar"
+        aria-label="Row count: 100 Toolbar"
         className="bx--table-toolbar"
         data-testid="table-table-toolbar"
       >
@@ -81543,7 +81543,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
     }
   >
     <section
-      aria-label="data table toolbar"
+      aria-label="Row count: 100 Toolbar"
       className="bx--table-toolbar"
       data-testid="table-table-toolbar"
     >
@@ -82425,7 +82425,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
       data-testid="table-table-container"
     >
       <section
-        aria-label="data table toolbar"
+        aria-label="Row count: 100 Toolbar"
         className="bx--table-toolbar"
         data-testid="table-table-toolbar"
       >
@@ -86653,7 +86653,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
       data-testid="table-table-container"
     >
       <section
-        aria-label="data table toolbar"
+        aria-label="Row count: 100 Toolbar"
         className="bx--table-toolbar"
         data-testid="table-table-toolbar"
       >
diff --git a/packages/react/src/components/Table/__snapshots__/Table.story.storyshot b/packages/react/src/components/Table/__snapshots__/Table.story.storyshot
index 177a2b0987..c7307f9225 100644
--- a/packages/react/src/components/Table/__snapshots__/Table.story.storyshot
+++ b/packages/react/src/components/Table/__snapshots__/Table.story.storyshot
@@ -9,7 +9,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
     data-testid="table-table-container"
   >
     <section
-      aria-label="data table toolbar"
+      aria-label="Basic \`dumb\` table Toolbar"
       className="bx--table-toolbar"
       data-testid="table-table-toolbar"
     >
@@ -24435,7 +24435,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
       data-testid="table-table-container"
     >
       <section
-        aria-label="data table toolbar"
+        aria-label="Table with user view management Toolbar"
         className="bx--table-toolbar"
         data-testid="table-table-toolbar"
       >
@@ -33201,7 +33201,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
       data-testid="table-table-container"
     >
       <section
-        aria-label="data table toolbar"
+        aria-label="My editable table Toolbar"
         className="bx--table-toolbar"
         data-testid="table-table-toolbar"
       >
@@ -78659,7 +78659,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
     data-testid="table-table-container"
   >
     <section
-      aria-label="data table toolbar"
+      aria-label="Row count: 100 Toolbar"
       className="bx--table-toolbar"
       data-testid="table-table-toolbar"
     >
diff --git a/packages/react/src/components/TableCard/__snapshots__/TableCard.story.storyshot b/packages/react/src/components/TableCard/__snapshots__/TableCard.story.storyshot
index bd7a8db347..19b34df045 100644
--- a/packages/react/src/components/TableCard/__snapshots__/TableCard.story.storyshot
+++ b/packages/react/src/components/TableCard/__snapshots__/TableCard.story.storyshot
@@ -37,7 +37,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
           data-testid="table-for-card-table-list-table-container"
         >
           <section
-            aria-label="data table toolbar"
+            aria-label="Open Alerts Toolbar"
             className="bx--table-toolbar"
             data-testid="table-for-card-table-list-table-toolbar"
           >
@@ -1463,7 +1463,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
           data-testid="table-for-card-table-list-table-container"
         >
           <section
-            aria-label="data table toolbar"
+            aria-label="Open Alerts Toolbar"
             className="bx--table-toolbar"
             data-testid="table-for-card-table-list-table-toolbar"
           >
@@ -2934,7 +2934,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
           data-testid="table-for-card-table-list-table-container"
         >
           <section
-            aria-label="data table toolbar"
+            aria-label="Open Alerts Toolbar"
             className="bx--table-toolbar"
             data-testid="table-for-card-table-list-table-toolbar"
           >
@@ -4633,7 +4633,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
           data-testid="table-for-card-undefined-table-container"
         >
           <section
-            aria-label="data table toolbar"
+            aria-label="Open Alerts Toolbar"
             className="bx--table-toolbar"
             data-testid="table-for-card-undefined-table-toolbar"
           >
@@ -5534,7 +5534,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
           data-testid="table-for-card-table-list-table-container"
         >
           <section
-            aria-label="data table toolbar"
+            aria-label="Open Alerts 11112 Toolbar"
             className="bx--table-toolbar"
             data-testid="table-for-card-table-list-table-toolbar"
           >
@@ -6764,7 +6764,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
           data-testid="table-for-card-table-list-table-container"
         >
           <section
-            aria-label="data table toolbar"
+            aria-label="Open Alerts Toolbar"
             className="bx--table-toolbar"
             data-testid="table-for-card-table-list-table-toolbar"
           >
@@ -9216,7 +9216,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
           data-testid="table-for-card-table-list-table-container"
         >
           <section
-            aria-label="data table toolbar"
+            aria-label="Open Alerts Toolbar"
             className="bx--table-toolbar"
             data-testid="table-for-card-table-list-table-toolbar"
           >
@@ -11502,7 +11502,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
           data-testid="table-for-card-table-list-table-container"
         >
           <section
-            aria-label="data table toolbar"
+            aria-label="Open Alerts Toolbar"
             className="bx--table-toolbar"
             data-testid="table-for-card-table-list-table-toolbar"
           >
@@ -13308,7 +13308,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
           data-testid="table-for-card-table-list-table-container"
         >
           <section
-            aria-label="data table toolbar"
+            aria-label="Open Alerts Toolbar"
             className="bx--table-toolbar"
             data-testid="table-for-card-table-list-table-toolbar"
           >
@@ -15453,7 +15453,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/T
           data-testid="table-for-card-table-list-table-container"
         >
           <section
-            aria-label="data table toolbar"
+            aria-label="Open Alerts Toolbar"
             className="bx--table-toolbar"
             data-testid="table-for-card-table-list-table-toolbar"
           >
diff --git a/packages/react/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap b/packages/react/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap
index 00bbb9f041..03da123562 100644
--- a/packages/react/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap
+++ b/packages/react/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap
@@ -457,6 +457,7 @@ Map {
         "selectRowAria": "Select row",
         "tableErrorStateTitle": "Unable to load the page",
         "toggleAggregations": "Toggle aggregations",
+        "toolbarLabelAria": "",
       },
       "id": null,
       "lightweight": false,
@@ -1121,6 +1122,9 @@ Map {
             "toggleAggregations": Object {
               "type": "string",
             },
+            "toolbarLabelAria": Object {
+              "type": "string",
+            },
           },
         ],
         "type": "shape",
@@ -2156,6 +2160,9 @@ Map {
             "toggleAggregations": Object {
               "type": "string",
             },
+            "toolbarLabelAria": Object {
+              "type": "string",
+            },
           },
         ],
         "type": "shape",
@@ -3768,6 +3775,9 @@ Map {
             "toggleAggregations": Object {
               "type": "string",
             },
+            "toolbarLabelAria": Object {
+              "type": "string",
+            },
           },
         ],
         "type": "shape",