[terra-table] Make Buttons in Selectable Header Cells Focusable

packages/terra-table/CHANGELOG.md

@@ -8,6 +8,7 @@
 
 * Fixed
   * Fixed the column header background color for the Orion Fusion theme.
+  * Fixed issue where column header cell was receiving tab focus instead of the button for table role.
 
 ## 5.1.1-alpha.0 - (October 25, 2023)
 

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

@@ -181,11 +181,6 @@ const ColumnHeaderCell = (props) => {
     )
     : null;
 
-  let tabIndex = isSelectable ? 0 : undefined;
-  if (isGridContext) {
-    tabIndex = -1;
-  }
-
   return (
   /* eslint-disable react/forbid-dom-props */
     <th
@@ -195,7 +190,7 @@ const ColumnHeaderCell = (props) => {
         selectable: isSelectable,
         pinned: columnIndex < columnContext.pinnedColumnOffsets.length,
       })}
-      tabIndex={tabIndex}
+      tabIndex={isGridContext ? -1 : undefined}
       role="columnheader"
       scope="col"
       aria-sort={sortIndicator}
@@ -204,7 +199,11 @@ const ColumnHeaderCell = (props) => {
       // eslint-disable-next-line react/forbid-dom-props
       style={{ height: headerHeight, left: cellLeftEdge }}
     >
-      <div className={cx('header-container')} role={displayName && 'button'}>
+      <div
+        className={cx('header-container')}
+        role={displayName && 'button'}
+        tabIndex={(!isGridContext && isSelectable) ? 0 : undefined}
+      >
         {errorIcon}
         <span>{displayName}</span>
         {sortIndicatorIcon}

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

@@ -209,12 +209,13 @@ describe('ColumnHeaderCell', () => {
     expect(columnHeader.key()).toBe('Column-0');
     expect(columnHeader.props().role).toBe('columnheader');
     expect(columnHeader.props().scope).toBe('col');
-    expect(columnHeader.props().tabIndex).toEqual(0);
+    expect(columnHeader.props().tabIndex).toBeUndefined();
     expect(columnHeader.props()['aria-sort']).toBe('ascending');
     expect(columnHeader.props().onMouseDown).toBeDefined();
     expect(columnHeader.props().style.height).toBe('150px');
 
     const headerContainer = columnHeader.find('.header-container[role="button"]');
+    expect(headerContainer.props().tabIndex).toBe(0);
     expect(headerContainer.find('span').text().trim()).toBe('Vitals');
     expect(headerContainer.find(IconUp)).toHaveLength(1);
     expect(headerContainer.find(IconError)).toHaveLength(1);
@@ -256,6 +257,7 @@ describe('ColumnHeaderCell', () => {
     expect(columnHeader.props().style.height).toBe('150px');
 
     const headerContainer = columnHeader.find('.header-container[role="button"]');
+    expect(headerContainer.props().tabIndex).toBeUndefined();
     expect(headerContainer.find('span').text().trim()).toBe('Vitals');
     expect(headerContainer.find(IconUp)).toHaveLength(1);
     expect(headerContainer.find(IconError)).toHaveLength(1);

packages/terra-table/tests/jest/__snapshots__/ColumnHeaderCell.test.jsx.snap

@@ -141,11 +141,11 @@ exports[`ColumnHeaderCell renders a column header cell with onColumnSelect callb
       "left": null,
     }
   }
-  tabIndex={0}
 >
   <div
     className="header-container"
     role="button"
+    tabIndex={0}
   >
     <IconError
       a11yLabel="Terra.table.columnError"

packages/terra-table/tests/jest/__snapshots__/Table.test.jsx.snap

@@ -12854,10 +12854,10 @@ exports[`Table verifies row selection column header not selectable without callb
                         "left": 0,
                       }
                     }
-                    tabIndex={0}
                   >
                     <div
                       className="header-container"
+                      tabIndex={0}
                     >
                       <span />
                     </div>