From 872d2df256a0be2412319de1721e77640d00a6b0 Mon Sep 17 00:00:00 2001 From: Charles McDonald Date: Thu, 9 Nov 2023 08:14:22 -0600 Subject: [PATCH 1/7] Column header tab index issue --- packages/terra-data-grid/CHANGELOG.md | 1 + packages/terra-data-grid/src/DataGrid.jsx | 2 +- packages/terra-table/CHANGELOG.md | 1 + .../src/subcomponents/ColumnHeaderCell.jsx | 26 ++++++++++--------- 4 files changed, 17 insertions(+), 13 deletions(-) diff --git a/packages/terra-data-grid/CHANGELOG.md b/packages/terra-data-grid/CHANGELOG.md index cd6ee748f1b..79a0616bb5d 100644 --- a/packages/terra-data-grid/CHANGELOG.md +++ b/packages/terra-data-grid/CHANGELOG.md @@ -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. diff --git a/packages/terra-data-grid/src/DataGrid.jsx b/packages/terra-data-grid/src/DataGrid.jsx index 54a72747169..4cb0b0f903e 100644 --- a/packages/terra-data-grid/src/DataGrid.jsx +++ b/packages/terra-data-grid/src/DataGrid.jsx @@ -209,7 +209,7 @@ const DataGrid = injectIntl((props) => { [focusedCell] = focusedCell.getElementsByTagName('input'); } - if (makeActiveElement) { + if (makeActiveElement && newRowIndex !== 0) { focusedCell.focus(); } }; diff --git a/packages/terra-table/CHANGELOG.md b/packages/terra-table/CHANGELOG.md index 8f5ae017ee9..c631e5244ac 100644 --- a/packages/terra-table/CHANGELOG.md +++ b/packages/terra-table/CHANGELOG.md @@ -11,6 +11,7 @@ * Fixed issue where column header cell was receiving tab focus instead of the button for table role. * Fixed column header left border style. * Fixed resize handle being communicated when non-header cell is focused. + * Fixed tab index issues in the column header cells. ## 5.1.1-alpha.0 - (October 25, 2023) diff --git a/packages/terra-table/src/subcomponents/ColumnHeaderCell.jsx b/packages/terra-table/src/subcomponents/ColumnHeaderCell.jsx index 79eee7a9ab7..22e9152ebda 100644 --- a/packages/terra-table/src/subcomponents/ColumnHeaderCell.jsx +++ b/packages/terra-table/src/subcomponents/ColumnHeaderCell.jsx @@ -168,20 +168,20 @@ const ColumnHeaderCell = (props) => { const isGridContext = gridContext.role === GridConstants.GRID; - const columnHeaderFocusArea = useCallback(() => (columnHeaderCellButtonRef.current ? columnHeaderCellButtonRef.current : columnHeaderCellRef.current), []); + const columnHeaderFocusableElement = useCallback(() => (columnHeaderCellButtonRef.current ? columnHeaderCellButtonRef.current : columnHeaderCellRef.current), []); useEffect(() => { if (isActive) { if (isResizable && isResizeActive) { setResizeHandleActive(true); } else { - columnHeaderFocusArea().focus(); + columnHeaderFocusableElement().focus(); setResizeHandleActive(false); } } else { setResizeHandleActive(false); } - }, [columnHeaderFocusArea, isActive, isResizable, isResizeActive]); + }, [columnHeaderFocusableElement, isActive, isResizable, isResizeActive]); const onResizeHandleMouseDown = useCallback((event) => { event.stopPropagation(); @@ -192,9 +192,9 @@ const ColumnHeaderCell = (props) => { // Restore focus to column header after resize action is completed. const onResizeHandleMouseUp = useCallback(() => { - columnHeaderFocusArea().focus(); + columnHeaderFocusableElement().focus(); setResizeHandleActive(false); - }, [columnHeaderFocusArea]); + }, [columnHeaderFocusableElement]); // Handle column header selection via the mouse click. const handleMouseDown = (event) => { @@ -216,7 +216,7 @@ const ColumnHeaderCell = (props) => { break; case KeyCode.KEY_LEFT: if (isResizable && isResizeHandleActive && isGridContext) { - columnHeaderFocusArea().focus(); + columnHeaderFocusableElement().focus(); setResizeHandleActive(false); event.stopPropagation(); event.preventDefault(); @@ -259,13 +259,15 @@ const ColumnHeaderCell = (props) => { : null; // For tables, we want elements to be tabbable when selectable, but not anytime else. - let columnTabIndex = isSelectable ? 0 : undefined; - + let buttonTabIndex = isSelectable ? 0 : undefined; if (isGridContext) { // For grids, we only want 1 tab stop. We then define the focus behavior in DataGrid. - columnTabIndex = isSelectable && displayName ? -1 : undefined; + buttonTabIndex = isSelectable && displayName ? -1 : undefined; } + // Determine if button element is required for column header + const hasButtonElement = isSelectable && displayName; + return ( /* eslint-disable react/forbid-dom-props */ { selectable: isSelectable, pinned: columnIndex < columnContext.pinnedColumnOffsets.length, })} - tabIndex={isGridContext ? -1 : undefined} + tabIndex={isGridContext && !hasButtonElement ? -1 : undefined} role="columnheader" scope="col" aria-sort={sortIndicator} @@ -285,8 +287,8 @@ const ColumnHeaderCell = (props) => { >
{errorIcon} {displayName} From 28bd5a5c6a9f99ff1e02f0cb56288815e343ec60 Mon Sep 17 00:00:00 2001 From: Charles McDonald Date: Thu, 9 Nov 2023 10:46:46 -0600 Subject: [PATCH 2/7] Updates --- packages/terra-data-grid/src/DataGrid.jsx | 7 +++++-- .../src/subcomponents/ColumnHeaderCell.jsx | 17 +++++++---------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/terra-data-grid/src/DataGrid.jsx b/packages/terra-data-grid/src/DataGrid.jsx index 4cb0b0f903e..58effc30cba 100644 --- a/packages/terra-data-grid/src/DataGrid.jsx +++ b/packages/terra-data-grid/src/DataGrid.jsx @@ -209,8 +209,11 @@ const DataGrid = injectIntl((props) => { [focusedCell] = focusedCell.getElementsByTagName('input'); } - if (makeActiveElement && newRowIndex !== 0) { - focusedCell.focus(); + if (makeActiveElement) { + if (newRowIndex === 0) { + [focusedCell] = focusedCell.querySelector('[tabindex=\'0\'], [tabindex=\'-1\']'); + } + focusedCell?.focus(); } }; diff --git a/packages/terra-table/src/subcomponents/ColumnHeaderCell.jsx b/packages/terra-table/src/subcomponents/ColumnHeaderCell.jsx index 22e9152ebda..6f53e308a05 100644 --- a/packages/terra-table/src/subcomponents/ColumnHeaderCell.jsx +++ b/packages/terra-table/src/subcomponents/ColumnHeaderCell.jsx @@ -162,26 +162,23 @@ const ColumnHeaderCell = (props) => { const gridContext = useContext(GridContext); const columnHeaderCellRef = useRef(); - const columnHeaderCellButtonRef = useRef(); const [isResizeHandleActive, setResizeHandleActive] = useState(false); const isGridContext = gridContext.role === GridConstants.GRID; - const columnHeaderFocusableElement = useCallback(() => (columnHeaderCellButtonRef.current ? columnHeaderCellButtonRef.current : columnHeaderCellRef.current), []); - useEffect(() => { if (isActive) { if (isResizable && isResizeActive) { setResizeHandleActive(true); } else { - columnHeaderFocusableElement().focus(); + columnHeaderCellRef.current.focus(); setResizeHandleActive(false); } } else { setResizeHandleActive(false); } - }, [columnHeaderFocusableElement, isActive, isResizable, isResizeActive]); + }, [isActive, isResizable, isResizeActive]); const onResizeHandleMouseDown = useCallback((event) => { event.stopPropagation(); @@ -192,9 +189,9 @@ const ColumnHeaderCell = (props) => { // Restore focus to column header after resize action is completed. const onResizeHandleMouseUp = useCallback(() => { - columnHeaderFocusableElement().focus(); + columnHeaderCellRef.current.focus(); setResizeHandleActive(false); - }, [columnHeaderFocusableElement]); + }, []); // Handle column header selection via the mouse click. const handleMouseDown = (event) => { @@ -216,7 +213,7 @@ const ColumnHeaderCell = (props) => { break; case KeyCode.KEY_LEFT: if (isResizable && isResizeHandleActive && isGridContext) { - columnHeaderFocusableElement().focus(); + columnHeaderCellRef.current.focus(); setResizeHandleActive(false); event.stopPropagation(); event.preventDefault(); @@ -271,7 +268,7 @@ const ColumnHeaderCell = (props) => { return ( /* eslint-disable react/forbid-dom-props */ { >
{errorIcon} From 9cfc8f9c6c837f5f2132b82a1850ef0c76fa31b0 Mon Sep 17 00:00:00 2001 From: Charles McDonald Date: Thu, 9 Nov 2023 12:13:21 -0600 Subject: [PATCH 3/7] Update DataGrid focus handling for column header cells. --- packages/terra-data-grid/src/DataGrid.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/terra-data-grid/src/DataGrid.jsx b/packages/terra-data-grid/src/DataGrid.jsx index 58effc30cba..d4cda17b617 100644 --- a/packages/terra-data-grid/src/DataGrid.jsx +++ b/packages/terra-data-grid/src/DataGrid.jsx @@ -210,8 +210,8 @@ const DataGrid = injectIntl((props) => { } if (makeActiveElement) { - if (newRowIndex === 0) { - [focusedCell] = focusedCell.querySelector('[tabindex=\'0\'], [tabindex=\'-1\']'); + if (newRowIndex === 0 && !focusedCell.hasAttribute('tabindex')) { + focusedCell = focusedCell.querySelector('[role="button"]'); } focusedCell?.focus(); } From d6d60f973b59dd752353b8c836644ea5e4ea2ec8 Mon Sep 17 00:00:00 2001 From: Charles McDonald Date: Thu, 9 Nov 2023 12:35:09 -0600 Subject: [PATCH 4/7] Update DataGrid focus handling for column header cells. --- packages/terra-data-grid/src/DataGrid.jsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/terra-data-grid/src/DataGrid.jsx b/packages/terra-data-grid/src/DataGrid.jsx index d4cda17b617..f24bb177157 100644 --- a/packages/terra-data-grid/src/DataGrid.jsx +++ b/packages/terra-data-grid/src/DataGrid.jsx @@ -204,15 +204,19 @@ 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) { + // 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(); } }; From 36d6631502d9396816601724d9d73b807c128924 Mon Sep 17 00:00:00 2001 From: Charles McDonald Date: Thu, 9 Nov 2023 12:59:50 -0600 Subject: [PATCH 5/7] Updated terra-data-grid jest snapshots. --- .../jest/__snapshots__/DataGrid.test.jsx.snap | 10 ----- .../WorklistDataGrid.test.jsx.snap | 38 ------------------- 2 files changed, 48 deletions(-) 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 index 60d3a6aed76..2cc838b2917 100644 --- a/packages/terra-data-grid/tests/jest/__snapshots__/DataGrid.test.jsx.snap +++ b/packages/terra-data-grid/tests/jest/__snapshots__/DataGrid.test.jsx.snap @@ -896,7 +896,6 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres "width": "200px", } } - tabIndex={-1} >
Date: Mon, 13 Nov 2023 08:34:39 -0600 Subject: [PATCH 6/7] Update ChangeLog after release --- packages/terra-table/CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/terra-table/CHANGELOG.md b/packages/terra-table/CHANGELOG.md index bf779e414e2..cc9b93c43a6 100644 --- a/packages/terra-table/CHANGELOG.md +++ b/packages/terra-table/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Fixed + * Fixed tab index issues in the column header cells. + * Added * Added row selection mode to the table component. * Added ability for consumers to specify a custom screen reader message for masked cells. @@ -11,7 +14,6 @@ * Fixed issue where column header cell was receiving tab focus instead of the button for table role. * Fixed column header left border style. * Fixed resize handle being communicated when non-header cell is focused. - * Fixed tab index issues in the column header cells. ## 5.1.1-alpha.0 - (October 25, 2023) From c6d3f857c10f931330d98e6d565fec600105017c Mon Sep 17 00:00:00 2001 From: Charles McDonald Date: Mon, 13 Nov 2023 09:08:03 -0600 Subject: [PATCH 7/7] terra-data-grid changelog updates. --- packages/terra-data-grid/CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/terra-data-grid/CHANGELOG.md b/packages/terra-data-grid/CHANGELOG.md index fe871b5748f..de67930acef 100644 --- a/packages/terra-data-grid/CHANGELOG.md +++ b/packages/terra-data-grid/CHANGELOG.md @@ -2,13 +2,15 @@ ## Unreleased +* Fixed + * Fixed issue where focus was given to the column header instead of its button element. + ## 1.1.0 - (November 9, 2023) * Fixed * 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.