Merge branch 'wdg_column_resizing' into UXPLATFORM-9611

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

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)}
     />
   );
 };

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;
   }
 }

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.