diff --git a/package-lock.json b/package-lock.json index 5a0b5478483..66f130f6989 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39396,6 +39396,10 @@ "resolved": "packages/terra-collapsible-menu-view", "link": true }, + "node_modules/terra-compact-interactive-list": { + "resolved": "packages/terra-compact-interactive-list", + "link": true + }, "node_modules/terra-content-container": { "version": "3.39.1", "resolved": "https://registry.npmjs.org/terra-content-container/-/terra-content-container-3.39.1.tgz", @@ -43243,6 +43247,21 @@ "react-intl": ">=2.8.0, <6.0.0" } }, + "packages/terra-compact-interactive-list": { + "version": "0.1.0", + "license": "Apache-2.0", + "dependencies": { + "classnames": "^2.2.5", + "keycode-js": "^3.1.0", + "prop-types": "^15.5.8", + "terra-theme-context": "^1.0.0" + }, + "peerDependencies": { + "react": "^16.8.5", + "react-dom": "^16.8.5", + "react-intl": "2 || 3 || 4 || 5" + } + }, "packages/terra-data-grid": { "version": "1.0.0", "license": "Apache-2.0", @@ -43478,6 +43497,7 @@ "terra-brand-footer": "^3.11.0", "terra-button": "^3.3.0", "terra-collapsible-menu-view": "^6.83.0", + "terra-compact-interactive-list": "^0.1.0", "terra-content-container": "^3.0.0", "terra-data-grid": "^1.0.0", "terra-date-input": "^1.46.0", diff --git a/packages/terra-table/CHANGELOG.md b/packages/terra-table/CHANGELOG.md index 39e98a7aa54..407c73315e4 100644 --- a/packages/terra-table/CHANGELOG.md +++ b/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) diff --git a/packages/terra-table/src/subcomponents/ColumnHeaderCell.jsx b/packages/terra-table/src/subcomponents/ColumnHeaderCell.jsx index 28b34a1c539..e9157ef4283 100644 --- a/packages/terra-table/src/subcomponents/ColumnHeaderCell.jsx +++ b/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 */ { 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 }} > -
+
{errorIcon} {displayName} {sortIndicatorIcon} diff --git a/packages/terra-table/tests/jest/ColumnHeaderCell.test.jsx b/packages/terra-table/tests/jest/ColumnHeaderCell.test.jsx index 1ce344338b8..4b4a2dcf541 100644 --- a/packages/terra-table/tests/jest/ColumnHeaderCell.test.jsx +++ b/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); diff --git a/packages/terra-table/tests/jest/__snapshots__/ColumnHeaderCell.test.jsx.snap b/packages/terra-table/tests/jest/__snapshots__/ColumnHeaderCell.test.jsx.snap index c757854ca32..809d9012a37 100644 --- a/packages/terra-table/tests/jest/__snapshots__/ColumnHeaderCell.test.jsx.snap +++ b/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} >
diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/table-spec/row-selection-header-selectable.png b/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/table-spec/row-selection-header-selectable.png index 65e8948cccf..22040691305 100644 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/table-spec/row-selection-header-selectable.png and b/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/table-spec/row-selection-header-selectable.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/table-spec/sortable-table-focused-header.png b/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/table-spec/sortable-table-focused-header.png index f0d5d81a158..7d1ccc3022a 100644 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/table-spec/sortable-table-focused-header.png and b/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/table-spec/sortable-table-focused-header.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/table-spec/sortable-table-keyboard.png b/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/table-spec/sortable-table-keyboard.png index 5ace8e4ca02..56e0534e394 100644 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/table-spec/sortable-table-keyboard.png and b/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/table-spec/sortable-table-keyboard.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/table-spec/sortable-table.png b/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/table-spec/sortable-table.png deleted file mode 100644 index fff25f1ff68..00000000000 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/table-spec/sortable-table.png and /dev/null differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/table-spec/row-selection-header-selectable.png b/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/table-spec/row-selection-header-selectable.png index 65e8948cccf..22040691305 100644 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/table-spec/row-selection-header-selectable.png and b/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/table-spec/row-selection-header-selectable.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/table-spec/sortable-table-focused-header.png b/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/table-spec/sortable-table-focused-header.png index f0d5d81a158..7d1ccc3022a 100644 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/table-spec/sortable-table-focused-header.png and b/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/table-spec/sortable-table-focused-header.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/table-spec/sortable-table-keyboard.png b/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/table-spec/sortable-table-keyboard.png index 5ace8e4ca02..56e0534e394 100644 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/table-spec/sortable-table-keyboard.png and b/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/table-spec/sortable-table-keyboard.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/table-spec/sortable-table.png b/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/table-spec/sortable-table.png deleted file mode 100644 index fff25f1ff68..00000000000 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/table-spec/sortable-table.png and /dev/null differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/table-spec/row-selection-header-selectable.png b/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/table-spec/row-selection-header-selectable.png index 4a27c02ea5a..a9224b14e84 100644 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/table-spec/row-selection-header-selectable.png and b/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/table-spec/row-selection-header-selectable.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/table-spec/sortable-table-focused-header.png b/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/table-spec/sortable-table-focused-header.png index 1bfbddd0ea5..c37e5af81de 100644 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/table-spec/sortable-table-focused-header.png and b/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/table-spec/sortable-table-focused-header.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/table-spec/sortable-table-keyboard.png b/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/table-spec/sortable-table-keyboard.png index f210707966c..d6c006c9592 100644 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/table-spec/sortable-table-keyboard.png and b/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/table-spec/sortable-table-keyboard.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/table-spec/row-selection-header-selectable.png b/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/table-spec/row-selection-header-selectable.png index 4a27c02ea5a..a9224b14e84 100644 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/table-spec/row-selection-header-selectable.png and b/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/table-spec/row-selection-header-selectable.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/table-spec/sortable-table-focused-header.png b/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/table-spec/sortable-table-focused-header.png index 1bfbddd0ea5..c37e5af81de 100644 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/table-spec/sortable-table-focused-header.png and b/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/table-spec/sortable-table-focused-header.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/table-spec/sortable-table-keyboard.png b/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/table-spec/sortable-table-keyboard.png index f210707966c..d6c006c9592 100644 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/table-spec/sortable-table-keyboard.png and b/packages/terra-table/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/table-spec/sortable-table-keyboard.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/table-spec/row-selection-header-selectable.png b/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/table-spec/row-selection-header-selectable.png index 757f9d44fc3..5e4d7627d4d 100644 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/table-spec/row-selection-header-selectable.png and b/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/table-spec/row-selection-header-selectable.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/table-spec/sortable-table-focused-header.png b/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/table-spec/sortable-table-focused-header.png index fa65c25d997..6b6fd1b55a8 100644 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/table-spec/sortable-table-focused-header.png and b/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/table-spec/sortable-table-focused-header.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/table-spec/sortable-table-keyboard.png b/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/table-spec/sortable-table-keyboard.png index be41f746cd9..c50fa08a022 100644 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/table-spec/sortable-table-keyboard.png and b/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/table-spec/sortable-table-keyboard.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/table-spec/sortable-table.png b/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/table-spec/sortable-table.png deleted file mode 100644 index 8a1d39f11be..00000000000 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/table-spec/sortable-table.png and /dev/null differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/table-spec/row-selection-header-selectable.png b/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/table-spec/row-selection-header-selectable.png index 757f9d44fc3..5e4d7627d4d 100644 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/table-spec/row-selection-header-selectable.png and b/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/table-spec/row-selection-header-selectable.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/table-spec/sortable-table-focused-header.png b/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/table-spec/sortable-table-focused-header.png index fa65c25d997..6b6fd1b55a8 100644 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/table-spec/sortable-table-focused-header.png and b/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/table-spec/sortable-table-focused-header.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/table-spec/sortable-table-keyboard.png b/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/table-spec/sortable-table-keyboard.png index be41f746cd9..c50fa08a022 100644 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/table-spec/sortable-table-keyboard.png and b/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/table-spec/sortable-table-keyboard.png differ diff --git a/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/table-spec/sortable-table.png b/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/table-spec/sortable-table.png deleted file mode 100644 index 8a1d39f11be..00000000000 Binary files a/packages/terra-table/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/table-spec/sortable-table.png and /dev/null differ