fix(Datagrid): expander title / aria-label updates

packages/ibm-products/src/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.docs-page.js

@@ -24,6 +24,8 @@ const App = () => {
       columns,
       data,
       ExpandedRowContentComponent: expansionRenderer,
+      expanderButtonTitleExpanded: 'Collapse row',
+      expanderButtonTitleCollapsed: 'Expand row', 
     },
     useExpandedRow
   );

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

@@ -153,6 +153,8 @@ const sharedDatagridProps = {
     },
   ],
   expandedContentHeight: 96,
+  expanderButtonTitleExpanded: 'Collapse row',
+  expanderButtonTitleCollapsed: 'Expand row',
 };
 
 const ExpandedRows = ({ ...args }) => {
@@ -198,6 +200,9 @@ const expandableRowControlProps = {
   gridTitle: sharedDatagridProps.gridTitle,
   gridDescription: sharedDatagridProps.gridDescription,
   expandedContentHeight: sharedDatagridProps.expandedContentHeight,
+  expanderButtonTitleExpanded: sharedDatagridProps.expanderButtonTitleExpanded,
+  expanderButtonTitleCollapsed:
+    sharedDatagridProps.expanderButtonTitleCollapsed,
 };
 const expandableRowStoryName = 'With expandable row';
 export const ExpandableRowStory = prepareStory(BasicTemplateWrapper, {
@@ -206,6 +211,8 @@ export const ExpandableRowStory = prepareStory(BasicTemplateWrapper, {
     gridTitle: ARG_TYPES.gridTitle,
     gridDescription: ARG_TYPES.gridDescription,
     expandedContentHeight: ARG_TYPES.expandedContentHeight,
+    expanderButtonTitleExpanded: ARG_TYPES.expanderButtonTitleExpanded,
+    expanderButtonTitleCollapsed: ARG_TYPES.expanderButtonTitleCollapsed,
   },
   args: {
     ...expandableRowControlProps,

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

@@ -44,6 +44,8 @@ const datagridState = useDatagrid(
   {
     columns,
     data,
+    expanderButtonTitleExpanded: 'Collapse row',
+    expanderButtonTitleCollapsed: 'Expand row',
   },
   useNestedRows
 );
@@ -225,6 +227,8 @@ export const NestedRowsUsageStory = prepareStory(BasicTemplateWrapper, {
     rowSize: ARG_TYPES.rowSize,
     rowSizes: ARG_TYPES.rowSizes,
     onRowSizeChange: ARG_TYPES.onRowSizeChange,
+    expanderButtonTitleExpanded: 'Collapse row',
+    expanderButtonTitleCollapsed: 'Expand row',
   },
   args: {
     ...nestedRowsControlProps,

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

@@ -1,41 +1,57 @@
 /* eslint-disable react/prop-types */
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+
+import React, { useRef } from 'react';
 import { ChevronRight } from '@carbon/react/icons';
 import cx from 'classnames';
 import { pkg, carbon } from '../../settings';
 
 const blockClass = `${pkg.prefix}--datagrid`;
+
 const useNestedRowExpander = (hooks) => {
+  const tempState = useRef();
+  const useInstance = (instance) => {
+    tempState.current = instance;
+  };
   const visibleColumns = (columns) => {
     const expanderColumn = {
       id: 'expander',
-      Cell: ({ row }) =>
-        row.canExpand && (
-          <button
-            type="button"
-            aria-label="Expand current row"
-            className={cx(
-              `${blockClass}__row-expander`,
-              `${carbon.prefix}--btn`,
-              `${carbon.prefix}--btn--ghost`
-            )}
-            {...row.getToggleRowExpandedProps()}
-          >
-            <ChevronRight
-              className={cx(`${blockClass}__expander-icon`, {
-                [`${blockClass}__expander-icon--not-open`]: !row.isExpanded,
-                [`${blockClass}__expander-icon--open`]: row.isExpanded,
-              })}
-            />
-          </button>
-        ),
+      Cell: ({ row }) => {
+        const {
+          expanderButtonTitleExpanded = 'Collapse row',
+          expanderButtonTitleCollapsed = 'Expand row',
+        } = tempState?.current || {};
+        const expanderTitle = row.isExpanded
+          ? expanderButtonTitleExpanded
+          : expanderButtonTitleCollapsed;
+        return (
+          row.canExpand && (
+            <button
+              type="button"
+              aria-label={expanderTitle}
+              className={cx(
+                `${blockClass}__row-expander`,
+                `${carbon.prefix}--btn`,
+                `${carbon.prefix}--btn--ghost`
+              )}
+              {...row.getToggleRowExpandedProps()}
+              title={expanderTitle}
+            >
+              <ChevronRight
+                className={cx(`${blockClass}__expander-icon`, {
+                  [`${blockClass}__expander-icon--not-open`]: !row.isExpanded,
+                  [`${blockClass}__expander-icon--open`]: row.isExpanded,
+                })}
+              />
+            </button>
+          )
+        );
+      },
       width: 48,
       disableResizing: true,
       disableSortBy: true,
@@ -44,6 +60,7 @@ const useNestedRowExpander = (hooks) => {
     return [expanderColumn, ...columns];
   };
   hooks.visibleColumns.push(visibleColumns);
+  hooks.useInstance.push(useInstance);
 };
 
 export default useNestedRowExpander;

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

@@ -1,34 +1,46 @@
 /* eslint-disable react/prop-types */
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+
+import React, { useRef } from 'react';
 import { ChevronDown, ChevronUp } from '@carbon/react/icons';
 import { pkg, carbon } from '../../settings';
 import cx from 'classnames';
 
 const blockClass = `${pkg.prefix}--datagrid`;
 
 const useRowExpander = (hooks) => {
+  const tempState = useRef();
+  const useInstance = (instance) => {
+    tempState.current = instance;
+  };
   const visibleColumns = (columns) => {
     const expanderColumn = {
       id: 'expander',
       Cell: ({ row }) => {
+        const {
+          expanderButtonTitleExpanded = 'Collapse row',
+          expanderButtonTitleCollapsed = 'Expand row',
+        } = tempState?.current || {};
+        const expanderTitle = row.isExpanded
+          ? expanderButtonTitleExpanded
+          : expanderButtonTitleCollapsed;
         return (
           row.canExpand && (
             <button
               type="button"
-              aria-label="Expand current row"
+              aria-label={expanderTitle}
               className={cx(
                 `${blockClass}__row-expander`,
                 `${carbon.prefix}--btn`,
                 `${carbon.prefix}--btn--ghost`
               )}
               {...row.getToggleRowExpandedProps()}
+              title={expanderTitle}
             >
               {row.isExpanded ? (
                 <ChevronUp className={`${blockClass}__row-expander--icon`} />
@@ -47,6 +59,7 @@ const useRowExpander = (hooks) => {
     return [expanderColumn, ...columns];
   };
   hooks.visibleColumns.push(visibleColumns);
+  hooks.useInstance.push(useInstance);
 };
 
 export default useRowExpander;

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

@@ -76,6 +76,20 @@ export const ARG_TYPES = {
     description:
       'This value controls the height of the expanded content area. _This value is set/passed inside of the `datagridState` object._',
   },
+  expanderButtonTitleExpanded: {
+    control: {
+      type: 'text',
+    },
+    description:
+      'This value controls the expander title/aria-label when expanded. _This value is set/passed inside of the `datagridState` object._',
+  },
+  expanderButtonTitleCollapsed: {
+    control: {
+      type: 'text',
+    },
+    description:
+      'This value controls the expander title/aria-label when expanded. _This value is set/passed inside of the `datagridState` object._',
+  },
   customizeColumnsProps: {
     control: 'object',
     description: