From 1d92393b661b45acc934efe1b7b6df955374818a Mon Sep 17 00:00:00 2001
From: David Menendez <damenend@gmail.com>
Date: Fri, 16 Feb 2024 11:50:18 -0600
Subject: [PATCH 1/3] fix: add aria label to datagrid toolbar

---
 .../src/components/Datagrid/Datagrid.stories.js     |  7 ++++++-
 .../src/components/Datagrid/Datagrid/Datagrid.js    |  8 +++++++-
 .../components/Datagrid/Datagrid/DatagridContent.js |  5 +++--
 .../components/Datagrid/Datagrid/DatagridToolbar.js | 13 +++++++++----
 4 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.stories.js b/packages/ibm-products/src/components/Datagrid/Datagrid.stories.js
index 8a913dd3ee..ff8f3df213 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid.stories.js
+++ b/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 }}
+      toolbarLabel="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
index d517064604..2f9014e75d 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.js
+++ b/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, toolbarLabel, ...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,
+      toolbarLabel,
     };
 
     return (
@@ -100,4 +101,9 @@ Datagrid.propTypes = {
    * Table title
    */
   title: PropTypes.string,
+  /**
+   * Specify a label to be read by screen readers on the container node
+   * 'aria-label' of the TableToolbar component.
+   */
+  toolbarLabel: PropTypes.string,
 };
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridContent.js b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridContent.js
index a20dc7e6fb..7ddc009943 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridContent.js
+++ b/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, toolbarLabel }) => {
   const { state: inlineEditState, dispatch } = useContext(InlineEditContext);
   const { filterTags, EventEmitter, panelOpen } = useContext(FilterContext);
   const { activeCellId, gridActive, editId } = inlineEditState;
@@ -191,7 +191,7 @@ export const DatagridContent = ({ datagridState, title }) => {
         title={gridTitle}
         description={gridDescription}
       >
-        <DatagridToolbar {...datagridState} />
+        <DatagridToolbar {...datagridState} toolbarLabel={toolbarLabel} />
         <div
           className={cx(`${blockClass}__table-container`, {
             [`${blockClass}__table-container--filter-open`]: panelOpen,
@@ -265,4 +265,5 @@ DatagridContent.propTypes = {
     state: PropTypes.object,
   }),
   title: PropTypes.string,
+  toolbarLabel: PropTypes.string,
 };
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridToolbar.js b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridToolbar.js
index 28c71c572f..b8ee9a06fb 100644
--- 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 {
   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 = ({ toolbarLabel, ...datagridState }) => {
   const ref = useRef(null);
   const { width } = useResizeObserver(ref);
   const { DatagridActions, DatagridBatchActions, batchActions, rowSize } =
@@ -193,7 +194,7 @@ const DatagridToolbar = (datagridState) => {
       ref={ref}
       className={cx([blockClass, `${blockClass}--${getRowHeight}`])}
     >
-      <TableToolbar>
+      <TableToolbar aria-label={toolbarLabel}>
         {DatagridActions && <DatagridActions {...datagridState} />}
         {DatagridBatchActionsToolbar &&
           DatagridBatchActionsToolbar(datagridState, width, ref)}
@@ -201,7 +202,7 @@ const DatagridToolbar = (datagridState) => {
     </div>
   ) : DatagridActions ? (
     <div className={blockClass}>
-      <TableToolbar>
+      <TableToolbar aria-label={toolbarLabel}>
         {DatagridActions && <DatagridActions {...datagridState} />}
         {DatagridBatchActions && DatagridBatchActions(datagridState)}
       </TableToolbar>
@@ -209,4 +210,8 @@ const DatagridToolbar = (datagridState) => {
   ) : null;
 };
 
+DatagridToolbar.propTypes = {
+  toolbarLabel: PropTypes.string,
+};
+
 export default DatagridToolbar;

From 46bbee7125ef54839b8e6423876c5e8fb9815461 Mon Sep 17 00:00:00 2001
From: David Menendez <damenend@gmail.com>
Date: Fri, 16 Feb 2024 11:50:57 -0600
Subject: [PATCH 2/3] chore: format

---
 .../components/Datagrid/Datagrid/addons/stateReducer.js  | 5 ++++-
 .../src/components/Datagrid/utils/makeData.js            | 9 ++++++---
 .../src/components/FullPageError/FullPageError.mdx       | 7 +++++--
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/stateReducer.js b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/stateReducer.js
index 550a67774e..e787b11ab6 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/stateReducer.js
+++ b/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 {
diff --git a/packages/ibm-products/src/components/Datagrid/utils/makeData.js b/packages/ibm-products/src/components/Datagrid/utils/makeData.js
index 3c638857fc..3eafed0d73 100644
--- a/packages/ibm-products/src/components/Datagrid/utils/makeData.js
+++ b/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} />
+      ),
   };
 };
 
diff --git a/packages/ibm-products/src/components/FullPageError/FullPageError.mdx b/packages/ibm-products/src/components/FullPageError/FullPageError.mdx
index ecb90de04f..d9dcb12760 100644
--- a/packages/ibm-products/src/components/FullPageError/FullPageError.mdx
+++ b/packages/ibm-products/src/components/FullPageError/FullPageError.mdx
@@ -38,7 +38,8 @@ 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')} />
@@ -46,7 +47,9 @@ Display an Access Denied (403) error message when the user lacks permission to a
 
 ### 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')} />

From 0ad8a00fd49acabd3632ce1ade3f276d4d133b74 Mon Sep 17 00:00:00 2001
From: David Menendez <damenend@gmail.com>
Date: Fri, 16 Feb 2024 13:56:01 -0600
Subject: [PATCH 3/3] fix: prop name change

---
 .../src/components/Datagrid/Datagrid.stories.js    |  2 +-
 .../src/components/Datagrid/Datagrid/Datagrid.js   | 14 +++++++-------
 .../Datagrid/Datagrid/DatagridContent.js           |  9 ++++++---
 .../Datagrid/Datagrid/DatagridToolbar.js           |  8 ++++----
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.stories.js b/packages/ibm-products/src/components/Datagrid/Datagrid.stories.js
index ff8f3df213..3ce037d330 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid.stories.js
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid.stories.js
@@ -499,7 +499,7 @@ export const BatchActions = () => {
   return (
     <Datagrid
       datagridState={{ ...datagridState }}
-      toolbarLabel="batch actions toolbar"
+      ariaToolbarLabel="batch actions toolbar"
     />
   );
 };
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.js b/packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.js
index 2f9014e75d..145695a3fd 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.js
+++ b/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, toolbarLabel, ...rest }, ref) => {
+  ({ datagridState, title, ariaToolbarLabel, ...rest }, ref) => {
     if (!datagridState) {
       pconsole.warn(
         'Datagrid was not passed datagridState which is required to render this component.'
@@ -47,7 +47,7 @@ export let Datagrid = React.forwardRef(
     const props = {
       title,
       datagridState,
-      toolbarLabel,
+      ariaToolbarLabel,
     };
 
     return (
@@ -93,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
    */
@@ -101,9 +106,4 @@ Datagrid.propTypes = {
    * Table title
    */
   title: PropTypes.string,
-  /**
-   * Specify a label to be read by screen readers on the container node
-   * 'aria-label' of the TableToolbar component.
-   */
-  toolbarLabel: PropTypes.string,
 };
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridContent.js b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridContent.js
index 7ddc009943..74a305457e 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridContent.js
+++ b/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, toolbarLabel }) => {
+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, toolbarLabel }) => {
         title={gridTitle}
         description={gridDescription}
       >
-        <DatagridToolbar {...datagridState} toolbarLabel={toolbarLabel} />
+        <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, toolbarLabel }) => {
 };
 
 DatagridContent.propTypes = {
+  ariaToolbarLabel: PropTypes.string,
   datagridState: PropTypes.shape({
     getTableProps: PropTypes.func,
     getFilterFlyoutProps: PropTypes.func,
@@ -265,5 +269,4 @@ DatagridContent.propTypes = {
     state: PropTypes.object,
   }),
   title: PropTypes.string,
-  toolbarLabel: PropTypes.string,
 };
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridToolbar.js b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridToolbar.js
index b8ee9a06fb..b27d8d6095 100644
--- a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridToolbar.js
+++ b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridToolbar.js
@@ -181,7 +181,7 @@ const DatagridBatchActionsToolbar = (datagridState, width, ref) => {
   );
 };
 
-const DatagridToolbar = ({ toolbarLabel, ...datagridState }) => {
+const DatagridToolbar = ({ ariaToolbarLabel, ...datagridState }) => {
   const ref = useRef(null);
   const { width } = useResizeObserver(ref);
   const { DatagridActions, DatagridBatchActions, batchActions, rowSize } =
@@ -194,7 +194,7 @@ const DatagridToolbar = ({ toolbarLabel, ...datagridState }) => {
       ref={ref}
       className={cx([blockClass, `${blockClass}--${getRowHeight}`])}
     >
-      <TableToolbar aria-label={toolbarLabel}>
+      <TableToolbar aria-label={ariaToolbarLabel}>
         {DatagridActions && <DatagridActions {...datagridState} />}
         {DatagridBatchActionsToolbar &&
           DatagridBatchActionsToolbar(datagridState, width, ref)}
@@ -202,7 +202,7 @@ const DatagridToolbar = ({ toolbarLabel, ...datagridState }) => {
     </div>
   ) : DatagridActions ? (
     <div className={blockClass}>
-      <TableToolbar aria-label={toolbarLabel}>
+      <TableToolbar aria-label={ariaToolbarLabel}>
         {DatagridActions && <DatagridActions {...datagridState} />}
         {DatagridBatchActions && DatagridBatchActions(datagridState)}
       </TableToolbar>
@@ -211,7 +211,7 @@ const DatagridToolbar = ({ toolbarLabel, ...datagridState }) => {
 };
 
 DatagridToolbar.propTypes = {
-  toolbarLabel: PropTypes.string,
+  ariaToolbarLabel: PropTypes.string,
 };
 
 export default DatagridToolbar;