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"
carbon-design-system · Sep 22, 2021 · 831ff23 · 831ff23
1 parent 6e6dc0a
commit 831ff23
Show file tree

Hide file tree

Showing 12 changed files with 50 additions and 35 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",