diff --git a/packages/terra-data-grid/CHANGELOG.md b/packages/terra-data-grid/CHANGELOG.md index be30c1c93ff..5fe6479c363 100644 --- a/packages/terra-data-grid/CHANGELOG.md +++ b/packages/terra-data-grid/CHANGELOG.md @@ -5,6 +5,9 @@ * Added additional screen reader support to announce that column headers are interactable upon selection. +* Added + * Added ability to resize columns via keyboard. + ## 0.8.1 - (October 17, 2023) * Fixed diff --git a/packages/terra-data-grid/src/subcomponents/ColumnResizeHandle.jsx b/packages/terra-data-grid/src/subcomponents/ColumnResizeHandle.jsx index b746674a571..d0c4af2dd60 100644 --- a/packages/terra-data-grid/src/subcomponents/ColumnResizeHandle.jsx +++ b/packages/terra-data-grid/src/subcomponents/ColumnResizeHandle.jsx @@ -98,6 +98,7 @@ const ColumnResizeHandle = (props) => { const [isAriaLabel, setIsAriaLabel] = useState(false); const [isAriaValueText, setIsAriaValueText] = useState(false); const [isNavigationEnabled, setNavigationEnabled] = useState(true); + const [resizeHandleStyles, setResizeHandleStyles] = useState(['resize-handle']); useEffect(() => { if (isActive) { @@ -110,6 +111,8 @@ const ColumnResizeHandle = (props) => { // Set focus to resize handle DOM element resizeHandleRef.current.focus(); + // setResizeHandleStyles(['resize-handle', 'resize-handle-selected']) + // Execute callback function to notify consumer of mouse down event onResizeMouseDown(event); @@ -121,6 +124,7 @@ const ColumnResizeHandle = (props) => { const onMouseUp = () => { onResizeMouseUp(); + // setResizeHandleStyles(['resize-handle']) }; const fitToTable = () => { @@ -143,9 +147,13 @@ const ColumnResizeHandle = (props) => { switch (key) { case KeyCode.KEY_SPACE: case KeyCode.KEY_RETURN: + setNavigationEnabled(false); // Lock focus into component resizeHandleRef.current.focus(); - setNavigationEnabled(false); + + // set styles for keyboard + setResizeHandleStyles(['resize-handle', 'resize-handle-selected']); + // Assistive technologies should avoid announcing aria-label while focus locked, but announce aria-valueText instead setIsAriaLabel(false); setIsAriaValueText(true); @@ -159,6 +167,9 @@ const ColumnResizeHandle = (props) => { setIsAriaValueText(false); // Release focus lock columnContext.setColumnHeaderAriaLiveMessage(intl.formatMessage({ id: 'Terra.worklist-data-grid.resume-navigation' })); + + // reset styles for keyboard + setResizeHandleStyles(['resize-handle']); setNavigationEnabled(true); break; case KeyCode.KEY_RIGHT: @@ -216,7 +227,7 @@ const ColumnResizeHandle = (props) => { onClick={onClick} onFocus={fitToTable} onBlur={onBlur} - className={cx('resize-handle', theme.className)} + className={cx(resizeHandleStyles, theme.className)} /> ); }; diff --git a/packages/terra-data-grid/src/subcomponents/ColumnResizeHandle.module.scss b/packages/terra-data-grid/src/subcomponents/ColumnResizeHandle.module.scss index b0fe2540f73..0a4245f20f6 100644 --- a/packages/terra-data-grid/src/subcomponents/ColumnResizeHandle.module.scss +++ b/packages/terra-data-grid/src/subcomponents/ColumnResizeHandle.module.scss @@ -15,12 +15,21 @@ z-index: 1; &:focus { - border-color: var(--terra-data-grid-resize-handle-focus-border-color, rgba(34, 42, 46, 1)) !important; + border-color: var(--terra-data-grid-resize-handle-hover-border-color, rgba(34, 42, 46, 0.6)); outline: 0 !important; } &:hover { border-color: var(--terra-data-grid-resize-handle-hover-border-color, rgba(34, 42, 46, 0.6)); } + + &:active { + border-color: var(--terra-data-grid-resize-handle-focus-border-color, rgba(34, 42, 46, 1)) !important; + + } + } +active + .resize-handle-selected { + border-color: var(--terra-data-grid-resize-handle-focus-border-color, rgba(34, 42, 46, 1)) !important; } } diff --git a/packages/terra-framework-docs/CHANGELOG.md b/packages/terra-framework-docs/CHANGELOG.md index 4161a111628..ccbedb71e21 100644 --- a/packages/terra-framework-docs/CHANGELOG.md +++ b/packages/terra-framework-docs/CHANGELOG.md @@ -21,8 +21,6 @@ * Changed * Updated `terra-menu` examples with focus highlight styles for terra-button on closing menu with selection of menu-item. - -* Updated * Updates examples for `terra-data-grid` to cover scenarios for focusable elements prevented from receiving focus. * Updated focusable cell test for `terra-data-grid` to account for focusable elements in a hidden container.