diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml index 3b2c44fdd28..b8c4eb140b0 100644 --- a/.github/workflows/ci-cd.yml +++ b/.github/workflows/ci-cd.yml @@ -3,9 +3,9 @@ name: CI and CD on: push: - branches: ['main'] + branches: ['wdg_column_resizing'] pull_request: - branches: ['main'] + branches: ['wdg_column_resizing'] schedule: - cron: '0 1 * * SUN' workflow_dispatch: diff --git a/.github/workflows/pr-preview.yml b/.github/workflows/pr-preview.yml index 4c849a56a31..7e66818b6b7 100644 --- a/.github/workflows/pr-preview.yml +++ b/.github/workflows/pr-preview.yml @@ -2,7 +2,7 @@ name: pr-preview on: pull_request: - branches: ['main'] + branches: ['wdg_column_resizing'] jobs: deploy: runs-on: ubuntu-latest diff --git a/packages/terra-data-grid/CHANGELOG.md b/packages/terra-data-grid/CHANGELOG.md index a283a82d5ba..25acbdbafad 100644 --- a/packages/terra-data-grid/CHANGELOG.md +++ b/packages/terra-data-grid/CHANGELOG.md @@ -1,6 +1,9 @@ # Changelog ## Unreleased +* Added + * Added additional screen reader support to announce that column headers are interactable upon selection. + * Added * Added keyboard support for column resizing. @@ -18,6 +21,7 @@ ## 0.8.0 - (October 11, 2023) * Added + * Added ability to resize columns via keyboard. * Added base FlowsheetDataGrid component. * Changed diff --git a/packages/terra-data-grid/src/DataGrid.jsx b/packages/terra-data-grid/src/DataGrid.jsx index 2a670ba7399..d348cd71131 100644 --- a/packages/terra-data-grid/src/DataGrid.jsx +++ b/packages/terra-data-grid/src/DataGrid.jsx @@ -189,6 +189,7 @@ const DataGrid = injectIntl((props) => { const [checkResizable, setCheckResizable] = useState(false); const [focusedRow, setFocusedRow] = useState(0); const [focusedCol, setFocusedCol] = useState(0); + const [gridHasFocus, setGridHasFocus] = useState(false); // Aria live region message management const [columnHeaderAriaLiveMessage, setColumnHeaderAriaLiveMessage] = useState(null); @@ -584,12 +585,19 @@ const DataGrid = injectIntl((props) => { // Not triggered when swapping focus between children if (handleFocus.current) { setFocusedRowCol(focusedRow, focusedCol, true); + setGridHasFocus(true); } } handleFocus.current = true; }; + const onBlur = (event) => { + if (!event.currentTarget.contains(event.relatedTarget)) { + setGridHasFocus(false); + } + }; + // ------------------------------------- return ( @@ -603,6 +611,7 @@ const DataGrid = injectIntl((props) => { className={cx('data-grid', theme.className)} onKeyDown={handleKeyDown} onFocus={onFocus} + onBlur={onBlur} onMouseDown={onMouseDown} tabIndex={0} {...(activeIndex != null && { onMouseUp, onMouseMove, onMouseLeave: onMouseUp })} @@ -614,7 +623,7 @@ const DataGrid = injectIntl((props) => { columns={dataGridColumns} headerHeight={columnHeaderHeight} tableHeight={tableHeight} - activeColumnIndex={focusedRow === 0 ? focusedCol : undefined} + activeColumnIndex={(gridHasFocus && focusedRow === 0) ? focusedCol : undefined} isActiveColumnResizing={focusedRow === 0 && checkResizable} columnResizeIncrement={columnResizeIncrement} onColumnSelect={handleColumnSelect} diff --git a/packages/terra-data-grid/src/WorklistDataGrid.jsx b/packages/terra-data-grid/src/WorklistDataGrid.jsx index eed69bbd028..5eae16d815f 100644 --- a/packages/terra-data-grid/src/WorklistDataGrid.jsx +++ b/packages/terra-data-grid/src/WorklistDataGrid.jsx @@ -412,7 +412,7 @@ function WorklistDataGrid(props) { onKeyDown={handleKeyDown} onKeyUp={handleKeyUp} className={cx('worklist-data-grid-container')} - onFocus={!gridReceivedFocus.current && onFocus} + onFocus={!gridReceivedFocus.current ? onFocus : undefined} > { const columnContext = useContext(ColumnContext); const columnHeaderCellRef = useRef(); + const columnHeaderCellButtonRef = useRef(); const [isResizeHandleActive, setResizeHandleActive] = useState(false); + const columnHeaderFocusArea = useCallback(() => (columnHeaderCellButtonRef.current ? columnHeaderCellButtonRef.current : columnHeaderCellRef.current), []); + useEffect(() => { - if (isActive && isResizeActive) { - setResizeHandleActive(true); + if (isActive) { + if (isResizable && isResizeActive) { + setResizeHandleActive(true); + } else { + columnHeaderFocusArea().focus(); + setResizeHandleActive(false); + } } else { setResizeHandleActive(false); } - }, [isActive, isResizeActive]); + }, [columnHeaderFocusArea, isActive, isResizable, isResizeActive]); const onResizeHandleMouseDown = useCallback((event) => { if (onResizeMouseDown) { @@ -178,9 +186,9 @@ const ColumnHeaderCell = (props) => { // Restore focus to column header after resize action is completed. const onResizeHandleMouseUp = useCallback(() => { - columnHeaderCellRef.current.focus(); + columnHeaderFocusArea().focus(); setResizeHandleActive(false); - }, []); + }, [columnHeaderFocusArea]); // Handle column header selection via the mouse click. const handleMouseDown = (event) => { @@ -202,7 +210,7 @@ const ColumnHeaderCell = (props) => { break; case KeyCode.KEY_LEFT: if (isResizable && isResizeHandleActive) { - columnHeaderCellRef.current.focus(); + columnHeaderFocusArea().focus(); setResizeHandleActive(false); event.stopPropagation(); event.preventDefault(); @@ -258,7 +266,10 @@ const ColumnHeaderCell = (props) => { onKeyDown={(isSelectable || isResizable) ? handleKeyDown : undefined} style={{ width: `${width}px`, height: headerHeight, left: cellLeftEdge }} // eslint-disable-line react/forbid-dom-props > -
+
{errorIcon} {displayName} {sortIndicatorIcon} diff --git a/packages/terra-data-grid/tests/jest/ColumnHeaderCell.test.jsx b/packages/terra-data-grid/tests/jest/ColumnHeaderCell.test.jsx index 3cb092b0479..9d3434396f1 100644 --- a/packages/terra-data-grid/tests/jest/ColumnHeaderCell.test.jsx +++ b/packages/terra-data-grid/tests/jest/ColumnHeaderCell.test.jsx @@ -269,7 +269,7 @@ describe('ColumnHeaderCell', () => { expect(columnHeader.props().style.width).toBe('100px'); expect(columnHeader.props().style.height).toBe('150px'); - const headerContainer = columnHeader.find('.header-container[role="button"]'); + const headerContainer = columnHeader.find('.header-container'); 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-data-grid/tests/jest/__snapshots__/ColumnHeaderCell.test.jsx.snap b/packages/terra-data-grid/tests/jest/__snapshots__/ColumnHeaderCell.test.jsx.snap index 422dd5e8770..6e4ba4ba8e6 100644 --- a/packages/terra-data-grid/tests/jest/__snapshots__/ColumnHeaderCell.test.jsx.snap +++ b/packages/terra-data-grid/tests/jest/__snapshots__/ColumnHeaderCell.test.jsx.snap @@ -20,6 +20,7 @@ exports[`ColumnHeaderCell renders a column header cell with ascending sort 1`] =
Vitals @@ -62,6 +63,7 @@ exports[`ColumnHeaderCell renders a column header cell with ascending sort and e
Vitals @@ -151,6 +154,7 @@ exports[`ColumnHeaderCell renders a column header cell with error 1`] = `
Vitals @@ -377,6 +382,7 @@ exports[`ColumnHeaderCell renders a pinned column header cell 1`] = `
Vitals @@ -729,6 +731,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
March 16 @@ -909,7 +912,6 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres >
March 17 @@ -2777,6 +2779,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres Vitals @@ -3075,6 +3079,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
March 16 @@ -3255,7 +3260,6 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres >
March 17 @@ -5105,6 +5109,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
Vitals @@ -5499,6 +5504,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
March 16 @@ -5679,7 +5685,6 @@ exports[`DataGrid verifies row selection column header selection 1`] = ` >
March 17 @@ -7715,6 +7720,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and
Vitals @@ -947,6 +949,7 @@ exports[`Row selection verifies Shift+Click enables row selection when row selec
March 16 @@ -1127,7 +1130,6 @@ exports[`Row selection verifies Shift+Click enables row selection when row selec >
March 17 @@ -3257,6 +3259,7 @@ exports[`Row selection verifies Shift+Click establishes anchor and selects row w
Vitals @@ -3650,6 +3654,7 @@ exports[`Row selection verifies Shift+Click establishes anchor and selects row w
March 16 @@ -3830,7 +3835,6 @@ exports[`Row selection verifies Shift+Click establishes anchor and selects row w >
March 17 @@ -6552,6 +6556,7 @@ exports[`Row selection verifies Shift+Click honors the anchor established by row
Vitals @@ -6945,6 +6951,7 @@ exports[`Row selection verifies Shift+Click honors the anchor established by row
March 16 @@ -7125,7 +7132,6 @@ exports[`Row selection verifies Shift+Click honors the anchor established by row >
March 17 @@ -9826,6 +9832,7 @@ exports[`Row selection verifies Shift+Space enables row selection when row selec
Vitals @@ -10124,6 +10132,7 @@ exports[`Row selection verifies Shift+Space enables row selection when row selec
March 16 @@ -10304,7 +10313,6 @@ exports[`Row selection verifies Shift+Space enables row selection when row selec >
March 17 @@ -12434,6 +12442,7 @@ exports[`Row selection verifies Shift+Space establishes anchor and selects row i
Vitals @@ -12827,6 +12837,7 @@ exports[`Row selection verifies Shift+Space establishes anchor and selects row i
March 16 @@ -13007,7 +13018,6 @@ exports[`Row selection verifies Shift+Space establishes anchor and selects row i >
March 17 @@ -15729,6 +15739,7 @@ exports[`Row selection verifies Shift+Space honors the anchor established by row
Vitals @@ -16122,6 +16134,7 @@ exports[`Row selection verifies Shift+Space honors the anchor established by row
March 16 @@ -16302,7 +16315,6 @@ exports[`Row selection verifies Shift+Space honors the anchor established by row >
March 17 @@ -19072,6 +19084,7 @@ exports[`Row selection verifies callbacks when Shift+Down contracts the range of
Vitals @@ -19465,6 +19479,7 @@ exports[`Row selection verifies callbacks when Shift+Down contracts the range of
March 16 @@ -19645,7 +19660,6 @@ exports[`Row selection verifies callbacks when Shift+Down contracts the range of >
March 17 @@ -22335,6 +22349,7 @@ exports[`Row selection verifies callbacks when Shift+Down is used and row select
Vitals @@ -22728,6 +22744,7 @@ exports[`Row selection verifies callbacks when Shift+Down is used and row select
March 16 @@ -22908,7 +22925,6 @@ exports[`Row selection verifies callbacks when Shift+Down is used and row select >
March 17 @@ -25647,6 +25663,7 @@ exports[`Row selection verifies callbacks when Shift+Down is used and row select
Vitals @@ -25945,6 +25963,7 @@ exports[`Row selection verifies callbacks when Shift+Down is used and row select
March 16 @@ -26125,7 +26144,6 @@ exports[`Row selection verifies callbacks when Shift+Down is used and row select >
March 17 @@ -28263,6 +28281,7 @@ exports[`Row selection verifies callbacks when Shift+Down more than one. 1`] = `
Vitals @@ -28656,6 +28676,7 @@ exports[`Row selection verifies callbacks when Shift+Down more than one. 1`] = `
March 16 @@ -28836,7 +28857,6 @@ exports[`Row selection verifies callbacks when Shift+Down more than one. 1`] = ` >
March 17 @@ -31558,6 +31578,7 @@ exports[`Row selection verifies multiple independent ranges can be created with
Vitals @@ -31951,6 +31973,7 @@ exports[`Row selection verifies multiple independent ranges can be created with
March 16 @@ -32131,7 +32154,6 @@ exports[`Row selection verifies multiple independent ranges can be created with >
March 17 @@ -34813,6 +34835,7 @@ exports[`Row selection verifies only onRowSelect is called when mouse is used to
Vitals @@ -35206,6 +35230,7 @@ exports[`Row selection verifies only onRowSelect is called when mouse is used to
March 16 @@ -35386,7 +35411,6 @@ exports[`Row selection verifies only onRowSelect is called when mouse is used to >
March 17 @@ -38068,6 +38092,7 @@ exports[`Row selection verifies only onRowSelect is called when mouse is used to
Vitals @@ -38461,6 +38487,7 @@ exports[`Row selection verifies only onRowSelect is called when mouse is used to
March 16 @@ -38641,7 +38668,6 @@ exports[`Row selection verifies only onRowSelect is called when mouse is used to >
March 17 @@ -41323,6 +41349,7 @@ exports[`Row selection verifies only onRowSelect is called when space is used to
Vitals @@ -41716,6 +41744,7 @@ exports[`Row selection verifies only onRowSelect is called when space is used to
March 16 @@ -41896,7 +41925,6 @@ exports[`Row selection verifies only onRowSelect is called when space is used to >
March 17 @@ -44578,6 +44606,7 @@ exports[`Row selection verifies only onRowSelect is called when space is used to
Vitals @@ -44971,6 +45001,7 @@ exports[`Row selection verifies only onRowSelect is called when space is used to
March 16 @@ -45151,7 +45182,6 @@ exports[`Row selection verifies only onRowSelect is called when space is used to >
March 17 @@ -47829,6 +47859,7 @@ exports[`Row selection verifies row selection when space is pressed on a masked
Vitals @@ -48222,6 +48254,7 @@ exports[`Row selection verifies row selection when space is pressed on a masked
March 16 @@ -48402,7 +48435,6 @@ exports[`Row selection verifies row selection when space is pressed on a masked >
March 17 @@ -51080,6 +51112,7 @@ exports[`Row selection verifies row selection when space is pressed on a non-sel
Vitals @@ -51473,6 +51507,7 @@ exports[`Row selection verifies row selection when space is pressed on a non-sel
March 16 @@ -51653,7 +51688,6 @@ exports[`Row selection verifies row selection when space is pressed on a non-sel >
March 17 @@ -54288,6 +54322,7 @@ exports[`WorklistDataGrid verifies onCellSelect callback is not triggered when s
Vitals @@ -54586,6 +54622,7 @@ exports[`WorklistDataGrid verifies onCellSelect callback is not triggered when s
March 16 @@ -54766,7 +54803,6 @@ exports[`WorklistDataGrid verifies onCellSelect callback is not triggered when s >
March 17 @@ -56809,6 +56845,7 @@ exports[`WorklistDataGrid verifies onCellSelect callback is not triggered when s
Vitals @@ -57107,6 +57145,7 @@ exports[`WorklistDataGrid verifies onCellSelect callback is not triggered when s
March 16 @@ -57287,7 +57326,6 @@ exports[`WorklistDataGrid verifies onCellSelect callback is not triggered when s >
March 17 diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/column-header-0-0-resize-handle-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/column-header-0-0-resize-handle-focused.png new file mode 100644 index 00000000000..69e4d2f33cf Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/column-header-0-0-resize-handle-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/column-header-0-1-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/column-header-0-1-focused.png new file mode 100644 index 00000000000..591b48b5241 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/column-header-0-1-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/column-header-0-2-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/column-header-0-2-focused.png new file mode 100644 index 00000000000..87edd5c78e3 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/column-header-0-2-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/column-header-0-3-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/column-header-0-3-focused.png new file mode 100644 index 00000000000..3b455310af9 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/column-header-0-3-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/data-grid-initial-focus.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/data-grid-initial-focus.png index 9b9930b7f19..547e4c11106 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/data-grid-initial-focus.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/data-grid-initial-focus.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/data-grid-return-focus.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/data-grid-return-focus.png index 9b9930b7f19..547e4c11106 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/data-grid-return-focus.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/data-grid-return-focus.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/worklist-data-grid-spec/column-resize-decrease-keyboard.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/worklist-data-grid-spec/column-resize-decrease-keyboard.png new file mode 100644 index 00000000000..826a18e69a7 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/worklist-data-grid-spec/column-resize-decrease-keyboard.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/worklist-data-grid-spec/column-resize-handle-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/worklist-data-grid-spec/column-resize-handle-focused.png new file mode 100644 index 00000000000..798d92451e2 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/worklist-data-grid-spec/column-resize-handle-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/worklist-data-grid-spec/column-resize-increase-keyboard.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/worklist-data-grid-spec/column-resize-increase-keyboard.png new file mode 100644 index 00000000000..a72a1680668 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/worklist-data-grid-spec/column-resize-increase-keyboard.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/worklist-data-grid-spec/hover-even-row-cell-selection.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/worklist-data-grid-spec/hover-even-row-cell-selection.png index 6fe6147b270..18bcbe96710 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/worklist-data-grid-spec/hover-even-row-cell-selection.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/worklist-data-grid-spec/hover-even-row-cell-selection.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/worklist-data-grid-spec/hover-odd-row-cell-selection.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/worklist-data-grid-spec/hover-odd-row-cell-selection.png index f843ad8527a..55ebb0fd954 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/worklist-data-grid-spec/hover-odd-row-cell-selection.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/worklist-data-grid-spec/hover-odd-row-cell-selection.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/column-header-0-0-resize-handle-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/column-header-0-0-resize-handle-focused.png new file mode 100644 index 00000000000..69e4d2f33cf Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/column-header-0-0-resize-handle-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/column-header-0-1-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/column-header-0-1-focused.png new file mode 100644 index 00000000000..591b48b5241 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/column-header-0-1-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/column-header-0-2-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/column-header-0-2-focused.png new file mode 100644 index 00000000000..11294e5472f Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/column-header-0-2-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/column-header-0-3-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/column-header-0-3-focused.png new file mode 100644 index 00000000000..3b455310af9 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/column-header-0-3-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/data-grid-initial-focus.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/data-grid-initial-focus.png index 975c43b7477..0e649bd33f7 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/data-grid-initial-focus.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/data-grid-initial-focus.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/data-grid-return-focus.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/data-grid-return-focus.png index 975c43b7477..0e649bd33f7 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/data-grid-return-focus.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/data-grid-return-focus.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-decrease-keyboard.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-decrease-keyboard.png new file mode 100644 index 00000000000..826a18e69a7 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-decrease-keyboard.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-handle-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-handle-focused.png new file mode 100644 index 00000000000..798d92451e2 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-handle-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-increase-keyboard.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-increase-keyboard.png new file mode 100644 index 00000000000..a72a1680668 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-increase-keyboard.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/worklist-data-grid-spec/hover-even-row-cell-selection.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/worklist-data-grid-spec/hover-even-row-cell-selection.png index 6fe6147b270..18bcbe96710 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/worklist-data-grid-spec/hover-even-row-cell-selection.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/worklist-data-grid-spec/hover-even-row-cell-selection.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/worklist-data-grid-spec/hover-odd-row-cell-selection.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/worklist-data-grid-spec/hover-odd-row-cell-selection.png index f843ad8527a..55ebb0fd954 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/worklist-data-grid-spec/hover-odd-row-cell-selection.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/worklist-data-grid-spec/hover-odd-row-cell-selection.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/column-header-0-0-resize-handle-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/column-header-0-0-resize-handle-focused.png new file mode 100644 index 00000000000..766cc430b75 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/column-header-0-0-resize-handle-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/column-header-0-1-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/column-header-0-1-focused.png new file mode 100644 index 00000000000..fec2fb0dba4 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/column-header-0-1-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/column-header-0-2-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/column-header-0-2-focused.png new file mode 100644 index 00000000000..651689da8f6 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/column-header-0-2-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/column-header-0-3-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/column-header-0-3-focused.png new file mode 100644 index 00000000000..1c594275fb7 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/column-header-0-3-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/data-grid-initial-focus.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/data-grid-initial-focus.png index 00c89c0a37c..cd67510b147 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/data-grid-initial-focus.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/data-grid-initial-focus.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/data-grid-return-focus.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/data-grid-return-focus.png index 00c89c0a37c..cd67510b147 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/data-grid-return-focus.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/data-grid-return-focus.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/worklist-data-grid-spec/column-resize-decrease-keyboard.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/worklist-data-grid-spec/column-resize-decrease-keyboard.png new file mode 100644 index 00000000000..91426765b65 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/worklist-data-grid-spec/column-resize-decrease-keyboard.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/worklist-data-grid-spec/column-resize-handle-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/worklist-data-grid-spec/column-resize-handle-focused.png new file mode 100644 index 00000000000..f8124c578da Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/worklist-data-grid-spec/column-resize-handle-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/worklist-data-grid-spec/column-resize-increase-keyboard.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/worklist-data-grid-spec/column-resize-increase-keyboard.png new file mode 100644 index 00000000000..56d4206e4ca Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/worklist-data-grid-spec/column-resize-increase-keyboard.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/worklist-data-grid-spec/hover-even-row-cell-selection.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/worklist-data-grid-spec/hover-even-row-cell-selection.png index 402e0ad1699..c220162dae9 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/worklist-data-grid-spec/hover-even-row-cell-selection.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/worklist-data-grid-spec/hover-even-row-cell-selection.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/worklist-data-grid-spec/hover-odd-row-cell-selection.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/worklist-data-grid-spec/hover-odd-row-cell-selection.png index fa18c656f53..35ad1ee8e73 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/worklist-data-grid-spec/hover-odd-row-cell-selection.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/worklist-data-grid-spec/hover-odd-row-cell-selection.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/column-header-0-0-resize-handle-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/column-header-0-0-resize-handle-focused.png new file mode 100644 index 00000000000..766cc430b75 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/column-header-0-0-resize-handle-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/column-header-0-1-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/column-header-0-1-focused.png new file mode 100644 index 00000000000..fec2fb0dba4 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/column-header-0-1-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/column-header-0-2-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/column-header-0-2-focused.png new file mode 100644 index 00000000000..651689da8f6 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/column-header-0-2-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/column-header-0-3-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/column-header-0-3-focused.png new file mode 100644 index 00000000000..1c594275fb7 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/column-header-0-3-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/data-grid-initial-focus.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/data-grid-initial-focus.png index 434c02c0056..e630bc733ac 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/data-grid-initial-focus.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/data-grid-initial-focus.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/data-grid-return-focus.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/data-grid-return-focus.png index 434c02c0056..e630bc733ac 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/data-grid-return-focus.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/data-grid-return-focus.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-decrease-keyboard.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-decrease-keyboard.png new file mode 100644 index 00000000000..91426765b65 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-decrease-keyboard.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-handle-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-handle-focused.png new file mode 100644 index 00000000000..f8124c578da Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-handle-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-increase-keyboard.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-increase-keyboard.png new file mode 100644 index 00000000000..56d4206e4ca Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-increase-keyboard.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/worklist-data-grid-spec/hover-even-row-cell-selection.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/worklist-data-grid-spec/hover-even-row-cell-selection.png index 402e0ad1699..c220162dae9 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/worklist-data-grid-spec/hover-even-row-cell-selection.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/worklist-data-grid-spec/hover-even-row-cell-selection.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/worklist-data-grid-spec/hover-odd-row-cell-selection.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/worklist-data-grid-spec/hover-odd-row-cell-selection.png index fa18c656f53..35ad1ee8e73 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/worklist-data-grid-spec/hover-odd-row-cell-selection.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/worklist-data-grid-spec/hover-odd-row-cell-selection.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/column-header-0-0-resize-handle-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/column-header-0-0-resize-handle-focused.png new file mode 100644 index 00000000000..fb47acf5b0c Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/column-header-0-0-resize-handle-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/column-header-0-1-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/column-header-0-1-focused.png new file mode 100644 index 00000000000..9c6cdb6b00d Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/column-header-0-1-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/column-header-0-2-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/column-header-0-2-focused.png new file mode 100644 index 00000000000..aeb606c5267 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/column-header-0-2-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/column-header-0-3-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/column-header-0-3-focused.png new file mode 100644 index 00000000000..d5b7fbed9fa Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/column-header-0-3-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/data-grid-initial-focus.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/data-grid-initial-focus.png index 56a91d994ce..5cf0cee8efb 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/data-grid-initial-focus.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/data-grid-initial-focus.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/data-grid-return-focus.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/data-grid-return-focus.png index 56a91d994ce..5cf0cee8efb 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/data-grid-return-focus.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/data-grid-return-focus.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/worklist-data-grid-spec/hover-even-row-cell-selection.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/worklist-data-grid-spec/hover-even-row-cell-selection.png index 40e353a32ed..d8f9bc1f52e 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/worklist-data-grid-spec/hover-even-row-cell-selection.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/worklist-data-grid-spec/hover-even-row-cell-selection.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/worklist-data-grid-spec/hover-odd-row-cell-selection.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/worklist-data-grid-spec/hover-odd-row-cell-selection.png index 3d31d33a37d..2f7be256aa7 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/worklist-data-grid-spec/hover-odd-row-cell-selection.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/worklist-data-grid-spec/hover-odd-row-cell-selection.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/column-header-0-0-resize-handle-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/column-header-0-0-resize-handle-focused.png new file mode 100644 index 00000000000..fb47acf5b0c Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/column-header-0-0-resize-handle-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/column-header-0-1-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/column-header-0-1-focused.png new file mode 100644 index 00000000000..9c6cdb6b00d Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/column-header-0-1-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/column-header-0-2-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/column-header-0-2-focused.png new file mode 100644 index 00000000000..aeb606c5267 Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/column-header-0-2-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/column-header-0-3-focused.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/column-header-0-3-focused.png new file mode 100644 index 00000000000..d5b7fbed9fa Binary files /dev/null and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/column-header-0-3-focused.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/data-grid-initial-focus.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/data-grid-initial-focus.png index bade81f08f5..546741b31ae 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/data-grid-initial-focus.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/data-grid-initial-focus.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/data-grid-return-focus.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/data-grid-return-focus.png index bade81f08f5..546741b31ae 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/data-grid-return-focus.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/data-grid-return-focus.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/worklist-data-grid-spec/hover-even-row-cell-selection.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/worklist-data-grid-spec/hover-even-row-cell-selection.png index 40e353a32ed..d8f9bc1f52e 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/worklist-data-grid-spec/hover-even-row-cell-selection.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/worklist-data-grid-spec/hover-even-row-cell-selection.png differ diff --git a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/worklist-data-grid-spec/hover-odd-row-cell-selection.png b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/worklist-data-grid-spec/hover-odd-row-cell-selection.png index 3d31d33a37d..2f7be256aa7 100644 Binary files a/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/worklist-data-grid-spec/hover-odd-row-cell-selection.png and b/packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/worklist-data-grid-spec/hover-odd-row-cell-selection.png differ diff --git a/packages/terra-data-grid/tests/wdio/data-grid-spec.js b/packages/terra-data-grid/tests/wdio/data-grid-spec.js index 6c914294623..473394e1fcf 100644 --- a/packages/terra-data-grid/tests/wdio/data-grid-spec.js +++ b/packages/terra-data-grid/tests/wdio/data-grid-spec.js @@ -142,7 +142,7 @@ Terra.describeViewports('DataGrid', ['medium', 'large'], () => { browser.keys(['Tab', 'Tab']); Terra.validates.element('data-grid-initial-focus', { columnResizeSelector }); - expect(browser.$('[role="grid"] thead tr:nth-of-type(1) th:nth-of-type(1)').isFocused()); + expect(browser.$('[role="grid"] thead tr:nth-of-type(1) th:nth-of-type(1) div[role=button]').isFocused()); }); it('validates that a Tab key press inside the grid will skip focusable cell elements', () => { @@ -175,7 +175,7 @@ Terra.describeViewports('DataGrid', ['medium', 'large'], () => { browser.keys(['Tab', 'Tab', 'Tab', 'Shift', 'Tab', 'Shift']); Terra.validates.element('data-grid-return-focus', { columnResizeSelector }); - expect(browser.$('[role="grid"] thead tr:nth-of-type(1) th:nth-of-type(1)').isFocused()); + expect(browser.$('[role="grid"] thead tr:nth-of-type(1) th:nth-of-type(1) div[role=button]').isFocused()); }); it('validates that a cell with no focusable elements does not trap focus', () => { @@ -354,7 +354,7 @@ Terra.describeViewports('DataGrid', ['medium', 'large'], () => { browser.keys(['Escape']); browser.keys(['ArrowLeft']); - expect($('tr.column-header-row').$('//th[2]').isFocused()).toBe(true); + expect($('tr.column-header-row').$('//th[2]/div[@role="button"]').isFocused()).toBe(true); expect($('tr.column-header-row').$('//th[2]').getCSSProperty('width').parsed.value).toBe(180); }); @@ -364,7 +364,7 @@ Terra.describeViewports('DataGrid', ['medium', 'large'], () => { browser.keys(['ArrowRight', 'ArrowRight']); // navigate to column-header-2 browser.keys(['Shift', 'Tab', 'Shift', 'Tab']); // tab back out and back into the grid - expect($('tr.column-header-row').$('//th[2]').isFocused()).toBe(true); + expect($('tr.column-header-row').$('//th[2]/div[@role="button"]').isFocused()).toBe(true); }); it('resumes column navigation after tabbing out and back into the table', () => { @@ -381,7 +381,88 @@ Terra.describeViewports('DataGrid', ['medium', 'large'], () => { browser.keys(['Tab']); browser.keys(Array(5).fill('ArrowRight')); // navigate to 2nd column resize handle - expect($('tr.column-header-row').$('//th[4]').isFocused()).toBe(true); + expect($('tr.column-header-row').$('//th[4]/div[@role="button"]').isFocused()).toBe(true); + }); + + it('focuses on the resize handle in the column header when navigating right from the column header', () => { + browser.url('/raw/tests/cerner-terra-framework-docs/data-grid/data-grid/default-data-grid'); + + browser.keys(['Tab', 'ArrowRight']); // Focus is on (0,0) + expect(browser.$('tr.column-header-row th:nth-child(1) div[class*=resize-handle]').isFocused()).toBe(true); + + Terra.validates.element('column-header-0-0-resize-handle-focused', { selector: defaultSelector }); + }); + + it('focuses on the resize handle in the column header when navigating left from the column header', () => { + browser.url('/raw/tests/cerner-terra-framework-docs/data-grid/data-grid/default-data-grid'); + + browser.keys(['Tab', 'ArrowRight', 'ArrowRight']); // Focus is on (0,1) + expect(browser.$('tr.column-header-row th:nth-child(2) div[role=button]').isFocused()).toBe(true); + + browser.keys(['ArrowLeft']); + expect(browser.$('tr.column-header-row th:nth-child(1) div[class*=resize-handle]').isFocused()).toBe(true); + + Terra.validates.element('column-header-0-0-resize-handle-focused', { selector: defaultSelector }); + }); + + it('focuses on the column header when navigating left from the resize handle', () => { + browser.url('/raw/tests/cerner-terra-framework-docs/data-grid/data-grid/default-data-grid'); + browser.keys(['Tab', 'ArrowRight', 'ArrowRight', 'ArrowRight']); // Focus on resize handle in (0,1) + + expect(browser.$('tr.column-header-row th:nth-child(2) div[class*=resize-handle]').isFocused()).toBe(true); + + browser.keys(['ArrowLeft']); + expect(browser.$('tr.column-header-row th:nth-child(2) div[role=button]').isFocused()).toBe(true); + + Terra.validates.element('column-header-0-1-focused', { selector: defaultSelector }); + }); + + it('focuses on the column header when navigating right from the resize handle', () => { + browser.url('/raw/tests/cerner-terra-framework-docs/data-grid/data-grid/default-data-grid'); + + browser.keys(['Tab', 'ArrowRight']); // Focus is on the (0,0) resize handle + expect(browser.$('tr.column-header-row th:nth-child(1) div[class*=resize-handle]').isFocused()).toBe(true); + + browser.keys(['ArrowRight']); + expect(browser.$('tr.column-header-row th:nth-child(2) div[role=button]').isFocused()).toBe(true); + + Terra.validates.element('column-header-0-1-focused', { selector: defaultSelector }); + }); + + it('focuses on the column header when navigating from the resize handle to a non-resizable column header', () => { + browser.url('/raw/tests/cerner-terra-framework-docs/data-grid/data-grid/data-grid-with-column-resizing'); + + browser.keys(['Tab', 'ArrowRight', 'ArrowRight', 'ArrowRight']); // Focus is on the (0,1) resize handle + expect(browser.$('tr.column-header-row th:nth-child(2) div[class*=resize-handle]').isFocused()).toBe(true); + + browser.keys(['ArrowRight']); + expect(browser.$('tr.column-header-row th:nth-child(3) div[role=button]').isFocused()).toBe(true); + + Terra.validates.element('column-header-0-2-focused', { selector: '#terra-data-grid-with-column-resizing' }); + }); + + it('focuses on the column header when navigating right from a non-resizable column header', () => { + browser.url('/raw/tests/cerner-terra-framework-docs/data-grid/data-grid/data-grid-with-column-resizing'); + + browser.keys(['Tab', 'ArrowRight', 'ArrowRight', 'ArrowRight', 'ArrowRight']); // Focus is on (0,3) + expect(browser.$('tr.column-header-row th:nth-child(3) div[role=button]').isFocused()).toBe(true); + + browser.keys(['ArrowRight']); + expect(browser.$('tr.column-header-row th:nth-child(4) div[role=button]').isFocused()).toBe(true); + + Terra.validates.element('column-header-0-3-focused', { selector: '#terra-data-grid-with-column-resizing' }); + }); + + it('focuses on the column header when navigating left to a non-resizable column header from resizable column header', () => { + browser.url('/raw/tests/cerner-terra-framework-docs/data-grid/data-grid/data-grid-with-column-resizing'); + + browser.keys(['Tab', 'ArrowRight', 'ArrowRight', 'ArrowRight', 'ArrowRight', 'ArrowRight']); // Focus is on (0,4) + expect(browser.$('tr.column-header-row th:nth-child(4) div[role=button]').isFocused()).toBe(true); + + browser.keys(['ArrowLeft']); + expect(browser.$('tr.column-header-row th:nth-child(3) div[role=button]').isFocused()).toBe(true); + + Terra.validates.element('column-header-0-2-focused', { selector: '#terra-data-grid-with-column-resizing' }); }); }); }); diff --git a/packages/terra-framework-docs/CHANGELOG.md b/packages/terra-framework-docs/CHANGELOG.md index 361522bcbd6..3084b0ba59c 100644 --- a/packages/terra-framework-docs/CHANGELOG.md +++ b/packages/terra-framework-docs/CHANGELOG.md @@ -12,6 +12,9 @@ * Added * Added example for Flowsheet Data Grid containing "No Result" cells. +* Fixed + * Fixed broken links in the Worklist Data Grid documentation in `terra-data-grid` component. + ## 1.42.0 - (October 20, 2023) * Added @@ -27,7 +30,7 @@ * Added * Added documentation for the new `terra-table` component. - + * Changed * Updated `terra-menu` examples with focus highlight styles for terra-button on closing menu with selection of menu-item. * Updates examples for `terra-data-grid` to cover scenarios for focusable elements prevented from receiving focus.