fix: add aria-label to datagrid toolbar (#4378)

Co-authored-by: elysia <[email protected]>
carbon-design-system · Feb 26, 2024 · 5c423e3 · 5c423e3
1 parent cb262d6
commit 5c423e3
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 8 deletions.
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.stories.js b/packages/ibm-products/src/components/Datagrid/Datagrid.stories.js
@@ -539,7 +539,12 @@ export const BatchActions = () => {
     useStickyColumn
   );
 
-  return <Datagrid datagridState={{ ...datagridState }} />;
+  return (
+    <Datagrid
+      datagridState={{ ...datagridState }}
+      ariaToolbarLabel="batch actions toolbar"
+    />
+  );
 };
 
 export const DisableSelectRow = () => {

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.js b/packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.js
@@ -20,7 +20,7 @@ const blockClass = `${pkg.prefix}--datagrid`;
 const componentName = 'Datagrid';
 
 export let Datagrid = React.forwardRef(
-  ({ datagridState, title, ...rest }, ref) => {
+  ({ ariaToolbarLabel, datagridState, title, ...rest }, ref) => {
     if (!datagridState) {
       pconsole.warn(
         'Datagrid was not passed datagridState which is required to render this component.'
@@ -44,6 +44,7 @@ export let Datagrid = React.forwardRef(
     const props = {
       title,
       datagridState,
+      ariaToolbarLabel,
     };
 
     return (
@@ -89,6 +90,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
    */

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridContent.js b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridContent.js
@@ -33,7 +33,7 @@ const { TableContainer, Table } = DataTable;
 
 const blockClass = `${pkg.prefix}--datagrid`;
 
-export const DatagridContent = ({ datagridState, title }) => {
+export const DatagridContent = ({ ariaToolbarLabel, datagridState, title }) => {
   const { state: inlineEditState, dispatch } = useContext(InlineEditContext);
   const { filterTags, EventEmitter, panelOpen } = useContext(FilterContext);
   const { activeCellId, gridActive, editId } = inlineEditState;
@@ -197,8 +197,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,
@@ -239,6 +241,7 @@ export const DatagridContent = ({ datagridState, title }) => {
 };
 
 DatagridContent.propTypes = {
+  ariaToolbarLabel: PropTypes.string,
   datagridState: PropTypes.shape({
     getTableProps: PropTypes.func,
     getFilterFlyoutProps: PropTypes.func,

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridToolbar.js b/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 { Add16, OverflowMenuVertical16 } from '@carbon/icons-react';
 import {
   DataTable,
@@ -175,7 +176,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 } =
@@ -188,20 +189,24 @@ const DatagridToolbar = (datagridState) => {
       ref={ref}
       className={cx([toolbarClass, `${toolbarClass}--${getRowHeight}`])}
     >
-      <TableToolbar>
+      <TableToolbar aria-label={ariaToolbarLabel}>
         {DatagridActions && <DatagridActions {...datagridState} />}
         {DatagridBatchActionsToolbar &&
           DatagridBatchActionsToolbar(datagridState, width, ref)}
       </TableToolbar>
     </div>
   ) : DatagridActions ? (
     <div className={toolbarClass}>
-      <TableToolbar>
+      <TableToolbar aria-label={ariaToolbarLabel}>
         {DatagridActions && <DatagridActions {...datagridState} />}
         {DatagridBatchActions && DatagridBatchActions(datagridState)}
       </TableToolbar>
     </div>
   ) : null;
 };
 
+DatagridToolbar.propTypes = {
+  ariaToolbarLabel: PropTypes.string,
+};
+
 export default DatagridToolbar;