fix: adds aria label to datagrid toolbar (#4348)

* fix: add aria label to datagrid toolbar

* chore: format

* fix: prop name change

packages/ibm-products/src/components/Datagrid/Datagrid.stories.js

@@ -496,7 +496,12 @@ export const BatchActions = () => {
     useStickyColumn
   );
 
-  return <Datagrid datagridState={{ ...datagridState }} />;
+  return (
+    <Datagrid
+      datagridState={{ ...datagridState }}
+      ariaToolbarLabel="batch actions toolbar"
+    />
+  );
 };
 
 export const DisableSelectRow = () => {

packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.js

@@ -23,7 +23,7 @@ const componentName = 'Datagrid';
  * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/cdai-design/pal/components/data-table/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
  */
 export let Datagrid = React.forwardRef(
-  ({ datagridState, title, ...rest }, ref) => {
+  ({ datagridState, title, ariaToolbarLabel, ...rest }, ref) => {
     if (!datagridState) {
       pconsole.warn(
         'Datagrid was not passed datagridState which is required to render this component.'
@@ -47,6 +47,7 @@ export let Datagrid = React.forwardRef(
     const props = {
       title,
       datagridState,
+      ariaToolbarLabel,
     };
 
     return (
@@ -92,6 +93,11 @@ Datagrid = pkg.checkComponentEnabled(Datagrid, componentName);
 Datagrid.displayName = componentName;
 
 Datagrid.propTypes = {
+  /**
+   * Specify a label to be read by screen readers on the container node
+   * 'aria-label' of the TableToolbar component.
+   */
+  ariaToolbarLabel: PropTypes.string,
   /**
    * The data grid state, much of it being supplied by the useDatagrid hook
    */

packages/ibm-products/src/components/Datagrid/Datagrid/DatagridContent.js

@@ -32,7 +32,7 @@ import { clearSingleFilter } from './addons/Filtering/FilterProvider';
 const blockClass = `${pkg.prefix}--datagrid`;
 const gcClass = `${blockClass}__grid-container`;
 
-export const DatagridContent = ({ datagridState, title }) => {
+export const DatagridContent = ({ datagridState, title, ariaToolbarLabel }) => {
   const { state: inlineEditState, dispatch } = useContext(InlineEditContext);
   const { filterTags, EventEmitter, panelOpen } = useContext(FilterContext);
   const { activeCellId, gridActive, editId } = inlineEditState;
@@ -191,7 +191,10 @@ export const DatagridContent = ({ datagridState, title }) => {
         title={gridTitle}
         description={gridDescription}
       >
-        <DatagridToolbar {...datagridState} />
+        <DatagridToolbar
+          {...datagridState}
+          ariaToolbarLabel={ariaToolbarLabel}
+        />
         <div
           className={cx(`${blockClass}__table-container`, {
             [`${blockClass}__table-container--filter-open`]: panelOpen,
@@ -233,6 +236,7 @@ export const DatagridContent = ({ datagridState, title }) => {
 };
 
 DatagridContent.propTypes = {
+  ariaToolbarLabel: PropTypes.string,
   datagridState: PropTypes.shape({
     getTableProps: PropTypes.func,
     getFilterFlyoutProps: PropTypes.func,

packages/ibm-products/src/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -6,6 +6,7 @@
  */
 
 import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
 import {
   TableToolbar,
   TableBatchActions,
@@ -127,7 +128,7 @@ const DatagridBatchActionsToolbar = (datagridState, width, ref) => {
       dispatch,
       rows: [],
       getRowId,
-      isChecked: false
+      isChecked: false,
     });
     toggleAllRowsSelected(false);
     setGlobalFilter(null);
@@ -180,7 +181,7 @@ const DatagridBatchActionsToolbar = (datagridState, width, ref) => {
   );
 };
 
-const DatagridToolbar = (datagridState) => {
+const DatagridToolbar = ({ ariaToolbarLabel, ...datagridState }) => {
   const ref = useRef(null);
   const { width } = useResizeObserver(ref);
   const { DatagridActions, DatagridBatchActions, batchActions, rowSize } =
@@ -193,20 +194,24 @@ const DatagridToolbar = (datagridState) => {
       ref={ref}
       className={cx([blockClass, `${blockClass}--${getRowHeight}`])}
     >
-      <TableToolbar>
+      <TableToolbar aria-label={ariaToolbarLabel}>
         {DatagridActions && <DatagridActions {...datagridState} />}
         {DatagridBatchActionsToolbar &&
           DatagridBatchActionsToolbar(datagridState, width, ref)}
       </TableToolbar>
     </div>
   ) : DatagridActions ? (
     <div className={blockClass}>
-      <TableToolbar>
+      <TableToolbar aria-label={ariaToolbarLabel}>
         {DatagridActions && <DatagridActions {...datagridState} />}
         {DatagridBatchActions && DatagridBatchActions(datagridState)}
       </TableToolbar>
     </div>
   ) : null;
 };
 
+DatagridToolbar.propTypes = {
+  ariaToolbarLabel: PropTypes.string,
+};
+
 export default DatagridToolbar;

packages/ibm-products/src/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -114,7 +114,10 @@ export const stateReducer = (newState, action) => {
         const newData = { ...newState.selectedRowData };
         const dataWithRemovedRow = Object.fromEntries(
           Object.entries(newData).filter(([key]) => {
-            return parseInt(key) !== parseInt(getRowId(rowData.original, rowData.index));
+            return (
+              parseInt(key) !==
+              parseInt(getRowId(rowData.original, rowData.index))
+            );
           })
         );
         return {

packages/ibm-products/src/components/Datagrid/utils/makeData.js

@@ -24,8 +24,8 @@ const getRandomInteger = (min, max, decimalPlaces) => {
 };
 
 export const makeData = (...lens) => {
-  const config = lens.filter(a => typeof a === 'object')[0];
-  const filteredData = lens.filter(a => typeof a === 'number');
+  const config = lens.filter((a) => typeof a === 'object')[0];
+  const filteredData = lens.filter((a) => typeof a === 'number');
   const makeDataLevel = (depth = 0) => {
     const len = filteredData[depth];
     return range(len).map((index) => ({
@@ -147,7 +147,10 @@ const newPerson = (index, config) => {
     bonus: `$\r${getRandomInteger(100, 500, 2)}`,
     passwordStrength: getPasswordStrength(),
     doc_link: renderDocLink(),
-    slug: config?.enableAIRow && (index === 1 || index === 3 || index === 4) && <ExampleSlug align={config?.slugAlign} />
+    slug: config?.enableAIRow &&
+      (index === 1 || index === 3 || index === 4) && (
+        <ExampleSlug align={config?.slugAlign} />
+      ),
   };
 };
 

packages/ibm-products/src/components/FullPageError/FullPageError.mdx

@@ -38,15 +38,18 @@ errors, and not caused by server connectivity issues.
 
 ### 403 variant
 
-Display an Access Denied (403) error message when the user lacks permission to access the page or data, or when login is required.
+Display an Access Denied (403) error message when the user lacks permission to
+access the page or data, or when login is required.
 
 <Canvas>
   <Story id={getStoryId(FullPageError.displayName, 'full-page-error-403')} />
 </Canvas>
 
 ### 404 variant
 
-Show a Page Not Found (404) error message when the requested page cannot be located on the server, typically due to outdated bookmarks, mistyped URLs, or broken links.
+Show a Page Not Found (404) error message when the requested page cannot be
+located on the server, typically due to outdated bookmarks, mistyped URLs, or
+broken links.
 
 <Canvas>
   <Story id={getStoryId(FullPageError.displayName, 'full-page-error-404')} />