fix(Datagrid): expander title / aria-label updates (carbon-design-sys…

…tem#3564) * chore(Datagrid): add hover state to expanded area * fix(Datagrid): use sass variable * chore: add hover to expanded area as well * chore: highlight parent row as well * chore: add optional chain * chore(Datagrid): assign expected values for expanded/collapsed states * fix(Datagrid): update expanded row test
lee-chase · Oct 10, 2023 · 1bcff24 · 1bcff24
1 parent 09521c3
commit 1bcff24
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 51 deletions.
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.test.js b/packages/ibm-products/src/components/Datagrid/Datagrid.test.js
@@ -1371,17 +1371,16 @@ describe(componentName, () => {
   });
 
   function clickRow(rowNumber) {
-    const row = screen
-      .getByRole('table')
-      .getElementsByTagName('tbody')[0]
-      .getElementsByTagName('tr')[rowNumber];
-
-    const rowExpander = row.querySelector(
-      `button[aria-label="Expand current row"]`
+    const rows = screen.getAllByRole('row');
+    const bodyRows = rows.filter(
+      (r) =>
+        !r.classList.contains('c4p--datagrid__head') &&
+        !r.classList.contains('c4p--datagrid__expanded-row')
     );
-    fireEvent.click(rowExpander);
+    const row = bodyRows[rowNumber];
 
-    setTimeout(1000);
+    const rowExpander = row.querySelector(`button[aria-label="Expand row"]`);
+    fireEvent.click(rowExpander);
 
     expect(
       screen
@@ -1393,17 +1392,17 @@ describe(componentName, () => {
       screen
         .getByRole('table')
         .getElementsByTagName('tbody')[0]
-        .getElementsByClassName('c4p--datagrid__expanded-row')[0].lastChild
-        .textContent
+        .getElementsByClassName('c4p--datagrid__expanded-row')[0].textContent
     ).toEqual(`Content for ${rowNumber}`);
 
-    const firstRowExpander =
-      screen.getAllByLabelText('Expand current row')[rowNumber];
-    fireEvent.click(firstRowExpander);
+    const rowExpanderCollapse = row.querySelector(
+      `button[aria-label="Collapse row"]`
+    );
+    fireEvent.click(rowExpanderCollapse);
   }
 
   it('Expanded Row', async () => {
-    render(<ExpandedRow data-testid={dataTestId}></ExpandedRow>);
+    render(<ExpandedRow data-testid={dataTestId} />);
     clickRow(1);
     clickRow(4);
     clickRow(8);
@@ -1470,7 +1469,7 @@ describe(componentName, () => {
 
   it('Nested Table', async () => {
     render(<NestedTable data-testid={dataTestId}></NestedTable>);
-    const firstRowExpander = screen.getAllByLabelText('Expand current row')[0];
+    const firstRowExpander = screen.getAllByLabelText('Expand row')[0];
     const firstRow = screen.getAllByRole('row')[1];
     fireEvent.click(firstRowExpander);
     expect(firstRow.nextSibling).toHaveClass('c4p--datagrid__expanded-row');

diff --git a/.../ibm-products/src/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.docs-page.js b/.../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
   );

diff --git a/...es/ibm-products/src/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.stories.js b/...es/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,

diff --git a/packages/ibm-products/src/components/Datagrid/Extensions/NestedRows/NestedRows.stories.js b/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,

diff --git a/packages/ibm-products/src/components/Datagrid/useNestedRowExpander.js b/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;
diff --git a/packages/ibm-products/src/components/Datagrid/useRowExpander.js b/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;
diff --git a/packages/ibm-products/src/components/Datagrid/utils/getArgTypes.js b/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: