Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

Table column header tab index fix #1883

Merged
merged 9 commits into from
Nov 13, 2023
Merged

Table column header tab index fix #1883

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
872d2df
Column header tab index issue
cm9361 Nov 9, 2023
28bd5a5
Updates
cm9361 Nov 9, 2023
9cfc8f9
Update DataGrid focus handling for column header cells.
cm9361 Nov 9, 2023
d6d60f9
Update DataGrid focus handling for column header cells.
cm9361 Nov 9, 2023
36d6631
Updated terra-data-grid jest snapshots.
cm9361 Nov 9, 2023
eb8cd4a
Merge remote-tracking branch 'origin' into table-column-header-tabindex
cm9361 Nov 9, 2023
7507ba2
Update ChangeLog after release
cm9361 Nov 13, 2023
1a2d8ca
Merge remote-tracking branch 'origin' into table-column-header-tabindex
cm9361 Nov 13, 2023
c6d3f85
terra-data-grid changelog updates.
cm9361 Nov 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/terra-data-grid/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
* Fixed the column header background color for the Orion Fusion theme.
* Fixed pinned column divider issue during keyboard resize.
* Fixed resize handle being communicated when non-header cell is focused.
* Fixed issue where focus was given to the column header instead of its button element.

* Added
* Added ability to select a range of cells to FlowsheetDataGrid.
Expand Down
17 changes: 12 additions & 5 deletions packages/terra-data-grid/src/DataGrid.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
};

Expand Down
10 changes: 0 additions & 10 deletions packages/terra-data-grid/tests/jest/__snapshots__/DataGrid.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -896,7 +896,6 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
"width": "200px",
}
}
tabIndex={-1}
>
<div
className="header-container"
Expand Down Expand Up @@ -1070,7 +1069,6 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
"width": "200px",
}
}
tabIndex={-1}
>
<div
className="header-container"
Expand Down Expand Up @@ -3625,7 +3623,6 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
"width": "200px",
}
}
tabIndex={-1}
>
<div
className="header-container"
Expand Down Expand Up @@ -3799,7 +3796,6 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
"width": "200px",
}
}
tabIndex={-1}
>
<div
className="header-container"
Expand Down Expand Up @@ -6435,7 +6431,6 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
"width": "200px",
}
}
tabIndex={-1}
>
<div
className="header-container"
Expand Down Expand Up @@ -6609,7 +6604,6 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
"width": "200px",
}
}
tabIndex={-1}
>
<div
className="header-container"
Expand Down Expand Up @@ -9706,7 +9700,6 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and
"width": "200px",
}
}
tabIndex={-1}
>
<div
className="header-container"
Expand Down Expand Up @@ -9880,7 +9873,6 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and
"width": "200px",
}
}
tabIndex={-1}
>
<div
className="header-container"
Expand Down Expand Up @@ -12353,7 +12345,6 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = `
"width": "200px",
}
}
tabIndex={-1}
>
<div
className="header-container"
Expand Down Expand Up @@ -12527,7 +12518,6 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = `
"width": "200px",
}
}
tabIndex={-1}
>
<div
className="header-container"
Expand Down
Loading
Loading