Table column header tab index fix (#1883)

cerner · Nov 13, 2023 · 434d99b · 434d99b
1 parent 624d819
commit 434d99b
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 68 deletions.
diff --git a/packages/terra-data-grid/CHANGELOG.md b/packages/terra-data-grid/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Fixed
+  * Fixed issue where focus was given to the column header instead of its button element.
+
 ## 1.1.0 - (November 9, 2023)
 
 * Fixed

diff --git a/packages/terra-data-grid/src/DataGrid.jsx b/packages/terra-data-grid/src/DataGrid.jsx
@@ -204,13 +204,20 @@ const DataGrid = injectIntl((props) => {
     setCellAriaLiveMessage(null);
     setFocusedRow(newRowIndex);
     setFocusedCol(newColIndex);
-    let focusedCell = grid.current.rows[newRowIndex].cells[newColIndex];
-    if (isRowSelectionCell(newColIndex) && focusedCell.getElementsByTagName('input').length > 0) {
-      [focusedCell] = focusedCell.getElementsByTagName('input');
-    }
 
     if (makeActiveElement) {
-      focusedCell.focus();
+      // Set focus on input field (checkbox) of row selection cells.
+      let focusedCell = grid.current.rows[newRowIndex].cells[newColIndex];
+      if (isRowSelectionCell(newColIndex) && focusedCell.getElementsByTagName('input').length > 0) {
+        [focusedCell] = focusedCell.getElementsByTagName('input');
+      }
+
+      // Set focus to column header button, if it exists
+      if (newRowIndex === 0 && !focusedCell.hasAttribute('tabindex')) {
+        focusedCell = focusedCell.querySelector('[role="button"]');
+      }
+
+      focusedCell?.focus();
     }
   };
 

diff --git a/packages/terra-data-grid/tests/jest/__snapshots__/DataGrid.test.jsx.snap b/packages/terra-data-grid/tests/jest/__snapshots__/DataGrid.test.jsx.snap
@@ -905,7 +905,6 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
                                 "width": "200px",
                               }
                             }
-                            tabIndex={-1}
                           >
                             <div
                               className="header-container"
@@ -1082,7 +1081,6 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
                                 "width": "200px",
                               }
                             }
-                            tabIndex={-1}
                           >
                             <div
                               className="header-container"
@@ -3825,7 +3823,6 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
                                 "width": "200px",
                               }
                             }
-                            tabIndex={-1}
                           >
                             <div
                               className="header-container"
@@ -4002,7 +3999,6 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
                                 "width": "200px",
                               }
                             }
-                            tabIndex={-1}
                           >
                             <div
                               className="header-container"
@@ -6826,7 +6822,6 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
                                 "width": "200px",
                               }
                             }
-                            tabIndex={-1}
                           >
                             <div
                               className="header-container"
@@ -7003,7 +6998,6 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
                                 "width": "200px",
                               }
                             }
-                            tabIndex={-1}
                           >
                             <div
                               className="header-container"
@@ -10316,7 +10310,6 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and
                                 "width": "200px",
                               }
                             }
-                            tabIndex={-1}
                           >
                             <div
                               className="header-container"
@@ -10493,7 +10486,6 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and
                                 "width": "200px",
                               }
                             }
-                            tabIndex={-1}
                           >
                             <div
                               className="header-container"
@@ -13151,7 +13143,6 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = `
                                 "width": "200px",
                               }
                             }
-                            tabIndex={-1}
                           >
                             <div
                               className="header-container"
@@ -13328,7 +13319,6 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = `
                                 "width": "200px",
                               }
                             }
-                            tabIndex={-1}
                           >
                             <div
                               className="header-container"
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,9 @@ @@
     ## Unreleased
+    * Fixed
+      * Fixed issue where focus was given to the column header instead of its button element.
     ## 1.1.0 - (November 9, 2023)
     * Fixed
@@ Expand Down @@