[terra-table] Remove cell dive-in logic for table role (#1840)

packages/terra-framework-docs/src/terra-dev-site/doc/table/Examples/PinnedColumns.2.doc.mdx

@@ -1,4 +1,4 @@
 import { Badge } from "terra-table/package.json?dev-site-package";
 import PinnedColumnsTable from "./PinnedColumnsTable?dev-site-example";
 
-<PinnedColumnsTable />
+<PinnedColumnsTable />

packages/terra-table/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated the table component so that the cell dive-in logic would not execute when not in the grid context.
+
 ## 5.0.0-alpha.0 - (October 17, 2023)
 
 * Breaking Change

packages/terra-table/src/subcomponents/Cell.jsx

@@ -140,8 +140,10 @@ function Cell(props) {
   };
 
   useEffect(() => {
-    setIsInteractable(hasFocusableElements());
-  }, []);
+    if (isGridContext) {
+      setIsInteractable(hasFocusableElements());
+    }
+  }, [isGridContext]);
 
   /**
    * Handles the onDeactivate callback for FocusTrap component
@@ -229,9 +231,25 @@ function Cell(props) {
 
   const CellTag = isRowHeader ? 'th' : 'td';
 
+  // eslint-disable-next-line react/forbid-dom-props
+  let cellContentComponent = <div className={cx('cell-content', theme.className)} style={{ height }}>{cellContent}</div>;
+  // Render FocusTrap container when within a grid context
+  if (isGridContext) {
+    cellContentComponent = (
+      <FocusTrap
+        active={isFocusTrapEnabled}
+        focusTrapOptions={{
+          returnFocusOnDeactivate: true, clickOutsideDeactivates: true, escapeDeactivates: false, onDeactivate: deactivateFocusTrap,
+        }}
+      >
+        {cellContentComponent}
+      </FocusTrap>
+    );
+  }
+
   return (
     <CellTag
-      ref={cellRef}
+      ref={isGridContext ? cellRef : undefined}
       aria-selected={isSelected}
       aria-label={ariaLabel}
       tabIndex={isGridContext ? -1 : undefined}
@@ -242,15 +260,7 @@ function Cell(props) {
       // eslint-disable-next-line react/forbid-component-props
       style={{ left: cellLeftEdge }}
     >
-      <FocusTrap
-        active={isFocusTrapEnabled}
-        focusTrapOptions={{
-          returnFocusOnDeactivate: true, clickOutsideDeactivates: true, escapeDeactivates: false, onDeactivate: deactivateFocusTrap,
-        }}
-      >
-        {/* eslint-disable-next-line react/forbid-dom-props */}
-        <div className={cx('cell-content', theme.className)} style={{ height }}>{cellContent}</div>
-      </FocusTrap>
+      {cellContentComponent}
       {isInteractable && <VisuallyHiddenText text={intl.formatMessage({ id: 'Terra.table.cell-interactable' })} />}
     </CellTag>
   );

packages/terra-table/tests/jest/Cell.test.jsx

@@ -3,7 +3,8 @@ import { IntlProvider } from 'react-intl';
 
 /* eslint-disable-next-line import/no-extraneous-dependencies */
 import { shallowWithIntl, mountWithIntl } from 'terra-enzyme-intl';
-
+import VisuallyHiddenText from 'terra-visually-hidden-text';
+import GridContext, { GridConstants } from '../../src/utils/GridContext';
 import Cell from '../../src/subcomponents/Cell';
 import ColumnContext from '../../src/utils/ColumnContext';
 
@@ -145,6 +146,84 @@ describe('Cell', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  it('verifies that a table cell does not have a FocusTrap element', () => {
+    const wrapper = shallowWithIntl(
+      <IntlProvider locale="en">
+        <Cell
+          rowId="RowID"
+          columnId="ColumnId"
+          ariaLabel="Some Label Here"
+          rowIndex={1}
+          columnIndex={2}
+          key="key"
+        >
+          Data in cell
+        </Cell>
+      </IntlProvider>,
+    ).dive().dive();
+
+    const focusTrapComponent = wrapper.find('FocusTrap');
+    expect(focusTrapComponent).toHaveLength(0);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('verifies that a grid cell has a FocusTrap element', () => {
+    jest.spyOn(console, 'error').mockImplementation(); // eslint-disable-line no-console
+
+    const wrapper = mountWithIntl(
+      <GridContext.Provider value={{ role: GridConstants.GRID }}>
+        <Cell
+          rowId="RowID"
+          columnId="ColumnId"
+          ariaLabel="Some Label Here"
+          rowIndex={1}
+          columnIndex={0}
+          key="key"
+        >
+          <button type="button">Button</button>
+        </Cell>
+      </GridContext.Provider>,
+    );
+
+    const focusTrapComponent = wrapper.find('FocusTrap');
+    expect(focusTrapComponent).toHaveLength(1);
+
+    const visuallyHiddenText = wrapper.find(VisuallyHiddenText);
+    expect(visuallyHiddenText).toHaveLength(1);
+    expect(wrapper).toMatchSnapshot();
+
+    console.error.mockRestore(); // eslint-disable-line no-console
+  });
+
+  it('verifies that a grid cell without a focusale element does not have visually hidden text', () => {
+    jest.spyOn(console, 'error').mockImplementation(); // eslint-disable-line no-console
+
+    const wrapper = mountWithIntl(
+      <GridContext.Provider value={{ role: GridConstants.GRID }}>
+        <Cell
+          rowId="RowID"
+          columnId="ColumnId"
+          ariaLabel="Some Label Here"
+          rowIndex={1}
+          columnIndex={0}
+          key="key"
+        >
+          Data in cell
+        </Cell>
+      </GridContext.Provider>,
+    );
+
+    const focusTrapComponent = wrapper.find('FocusTrap');
+    expect(focusTrapComponent).toHaveLength(1);
+
+    const visuallyHiddenText = wrapper.find(VisuallyHiddenText);
+    expect(visuallyHiddenText).toHaveLength(0);
+    expect(wrapper).toMatchSnapshot();
+
+    console.error.mockRestore(); // eslint-disable-line no-console
+  });
+
   it('verifies that a cell has the correct styles and no content when isMasked prop is true', () => {
     const wrapper = shallowWithIntl(
       <IntlProvider locale="en">