Merge branch 'wdg_column_resizing' into UXPLATFORM-9611

packages/terra-data-grid/CHANGELOG.md

@@ -6,6 +6,7 @@
 
 * Fixed
   * Fixed issue where WorklistDataGrid loses focus when Row Selection Mode is turned off from a Row Selection Cell.
+  * Fixed issue where focus was moved from editable fields when using key events from data grid components.
   * Fixed tab focus management when next element is in a hidden container.
   * Fixed tab focus management to wrap to the first focusable element when the data grid is the last focusable element.
 

packages/terra-data-grid/src/DataGrid.jsx

@@ -66,7 +66,7 @@ const propTypes = {
   columnHeaderHeight: PropTypes.string,
 
   /**
-   * Numeric increment in pixels to adjust column width when resizing via the keyboard
+   * Numeric increment in pixels to adjust column width when resizing via the keyboard.
    */
   columnResizeIncrement: PropTypes.number,
 
@@ -392,12 +392,39 @@ const DataGrid = injectIntl((props) => {
     }
   };
 
+  /**
+   *
+   * @param {HTMLElement} element - The element to check if it is a text input
+   * @returns True if the element is a text input.  Otherwise, false.
+   */
+  const isTextInput = (element) => {
+    const { tagName } = element;
+    if (tagName.toLowerCase() === 'input') {
+      const validTypes = ['text', 'password', 'number', 'email', 'tel', 'url', 'search', 'date', 'datetime', 'datetime-local', 'time', 'month', 'week'];
+      const inputType = element.type;
+      return validTypes.indexOf(inputType) >= 0;
+    }
+
+    return false;
+  };
+
   const handleKeyDown = (event) => {
     const cellCoordinates = { row: focusedRow, col: focusedCol };
     let nextRow = cellCoordinates.row;
     let nextCol = cellCoordinates.col;
     setCheckResizable(false);
 
+    const targetElement = event.target;
+
+    // Allow default behavior if the event target is an editable field
+
+    if (event.keyCode !== KeyCode.KEY_TAB
+        && (isTextInput(targetElement)
+            || ['textarea', 'select'].indexOf(targetElement.tagName.toLowerCase()) >= 0
+            || (targetElement.hasAttribute('contentEditable') && targetElement.getAttribute('contentEditable') !== false))) {
+      return;
+    }
+
     const key = event.keyCode;
     switch (key) {
       case KeyCode.KEY_UP:
@@ -592,7 +619,7 @@ const DataGrid = injectIntl((props) => {
             columnResizeIncrement={columnResizeIncrement}
             onColumnSelect={handleColumnSelect}
             onResizeMouseDown={onResizeMouseDown}
-            onResizeHandleChange={onResizeHandleChange}
+            onResizeHandleChange={onColumnResize ? onResizeHandleChange: null}
           />
           <tbody>
             {rows.map((row, index) => (

packages/terra-data-grid/src/subcomponents/ColumnHeader.jsx

@@ -23,11 +23,11 @@ const propTypes = {
    */
   activeColumnIndex: PropTypes.number,
   /**
-   * Specifies if resize handle should be active
+   * Specifies if resize handle should be active.
    */
   activeColumnResizing: PropTypes.bool,
   /**
-   * Numeric increment in pixels to adjust column width when resizing via the keyboard
+   * Numeric increment in pixels to adjust column width when resizing via the keyboard.
    */
   columnResizeIncrement: PropTypes.number,
   /**
@@ -40,7 +40,7 @@ const propTypes = {
    */
   onResizeMouseDown: PropTypes.func,
   /**
-   * Function that is called when the the keyboard is used to adjust the column size
+   * Function that is called when the the keyboard is used to adjust the column size.
    */
   onResizeHandleChange: PropTypes.func,
 };

packages/terra-data-grid/src/subcomponents/ColumnHeaderCell.jsx

@@ -52,7 +52,7 @@ const propTypes = {
   maximumWidth: PropTypes.number,
 
   /**
-   * Boolean value indictating whether or not the header cell is focused
+   * Boolean value indicating whether or not the header cell is focused.
    */
   isActive: PropTypes.bool,
 
@@ -77,7 +77,7 @@ const propTypes = {
   isResizeActive: PropTypes.bool,
 
   /**
-   * Numeric increment in pixels to adjust column width when resizing via the keyboard
+   * Numeric increment in pixels to adjust column width when resizing via the keyboard.
    */
   columnResizeIncrement: PropTypes.number,
 
@@ -114,7 +114,7 @@ const propTypes = {
   onResizeMouseDown: PropTypes.func,
 
   /**
-   * Function that is called when the the keyboard is used to adjust the column size
+   * Function that is called when the the keyboard is used to adjust the column size.
    */
   onResizeHandleChange: PropTypes.func,
 
@@ -164,10 +164,8 @@ const ColumnHeaderCell = (props) => {
   const [isResizeHandleActive, setResizeHandleActive] = useState(false);
 
   useEffect(() => {
-    if (isActive) {
-      if (isResizeActive) {
+    if (isActive && isResizeActive) {
         setResizeHandleActive(true);
-      }
     } else {
       setResizeHandleActive(false);
     }
@@ -207,7 +205,6 @@ const ColumnHeaderCell = (props) => {
         if (isResizable && isResizeHandleActive) {
           columnHeaderCellButtonRef.current.focus();
           setResizeHandleActive(false);
-
           event.stopPropagation();
           event.preventDefault();
         }
@@ -281,6 +278,7 @@ const ColumnHeaderCell = (props) => {
         columnWidth={width}
         columnResizeIncrement={columnResizeIncrement}
         isActive={isResizeHandleActive}
+        setIsActive={setResizeHandleActive}
         height={tableHeight}
         minimumWidth={minimumWidth}
         maximumWidth={maximumWidth}

packages/terra-data-grid/src/subcomponents/ColumnResizeHandle.jsx

@@ -30,13 +30,17 @@ const propTypes = {
     */
   height: PropTypes.number.isRequired,
   /**
-   * Numeric increment in pixels to adjust column width when resizing via the keyboard
+   * Numeric increment in pixels to adjust column width when resizing via the keyboard.
    */
   columnResizeIncrement: PropTypes.number,
   /**
    * Control is the active element
    */
   isActive: PropTypes.bool,
+    /**
+   * Callback to update isActive for parent.
+   */
+  setIsActive: PropTypes.func,
   /**
    * Number that specifies the minimum column width in pixels.
    */
@@ -50,13 +54,19 @@ const propTypes = {
    */
   onResizeMouseDown: PropTypes.func.isRequired,
   /**
-   * Function that is called when onMouseDown event is triggered for the resize handle
+   * Function that is called when onMouseDown event is triggered for the resize handle.
    */
   onResizeMouseUp: PropTypes.func.isRequired,
   /**
-   * Function that is called when the the keyboard is used to adjust the column size
+   * Function that is called when the the keyboard is used to adjust the column size.
    */
   onResizeHandleChange: PropTypes.func,
+
+  /**
+   * Function that is called when the the keyboard is used to adjust the column size.
+   */
+  onResizeHandleBlur: PropTypes.func,
+
   /**
    * @private
    * The intl object containing translations. This is retrieved from the context automatically by injectIntl.
@@ -71,17 +81,19 @@ const defaultProps = {
 const ColumnResizeHandle = (props) => {
   const {
     columnIndex,
+    columnResizeIncrement,
     columnText,
     columnWidth,
     height,
-    columnResizeIncrement,
+    intl,
     isActive,
-    minimumWidth,
     maximumWidth,
+    minimumWidth,
+    onResizeHandleBlur,
+    onResizeHandleChange,
     onResizeMouseDown,
     onResizeMouseUp,
-    onResizeHandleChange,
-    intl,
+    setIsActive
   } = props;
 
   // Retrieve current theme from context
@@ -187,6 +199,7 @@ const ColumnResizeHandle = (props) => {
   const onBlur = () => {
     setNavigationEnabled(true);
     setIsAriaLabel(false);
+    setIsActive(false);
   };
 
   return (

packages/terra-data-grid/tests/wdio/data-grid-spec.js

@@ -231,6 +231,35 @@ Terra.describeViewports('DataGrid', ['medium', 'large'], () => {
       Terra.validates.element('focusable-textarea-cell-trap-focus', { columnResizeSelector });
       expect(browser.$$('textarea:focus')).toBeElementsArrayOfSize(1);
     });
+
+    it('validates that keyboard inputs will not move focus from an input field', () => {
+      browser.$('#input-cell').click();
+
+      browser.keys(['ArrowRight', 'ArrowLeft']);
+
+      Terra.validates.element('data-grid-focusable-input-retains-focus', { columnResizeSelector });
+      expect(browser.$('#input-cell').isFocused()).toBe(true);
+    });
+
+    it('validates that keyboard inputs will not move focus from a textarea', () => {
+      browser.$('#textarea-cell').click();
+
+      browser.pause(250);
+
+      browser.keys(['ArrowRight', 'ArrowLeft']);
+
+      Terra.validates.element('data-grid-focusable-textarea-retains-focus', { columnResizeSelector });
+      expect(browser.$('#textarea-cell').isFocused()).toBe(true);
+    });
+
+    it('validates that keyboard inputs will not move focus from a select element', () => {
+      browser.$('#specialties').click();
+
+      browser.keys(['ArrowRight', 'ArrowLeft']);
+
+      Terra.validates.element('data-grid-focusable-select-retains-focus', { columnResizeSelector });
+      expect(browser.$('#specialties').isFocused()).toBe(true);
+    });
   });
 
   describe('with pinned columns', () => {

packages/terra-framework-docs/CHANGELOG.md

@@ -2,7 +2,11 @@
 
 ## Unreleased
 
+* 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.
 
 ## 1.40.0 - (October 11, 2023)
@@ -19,6 +23,7 @@
 
 * Updated
   * Updated examples for `terra-collapsible-menu-view` to use more meaningful controls and control labels.
+  * Updated focusable cell test for `terra-data-grid` to account for focusable elements in a hidden container.
   * Updated examples and tests to add support for content scrolling within the iframe.
   * Updated examples and tests for `terra-embedded-content-consumer` to show the preferred way to set the title.
 

packages/terra-framework-docs/src/terra-dev-site/doc/menu/example/BasicMenu.module.scss

@@ -1,5 +1,15 @@
+// Themes
+@import '../../../theme/clinical-lowlight-theme/BasicMenu.module';
+@import '../../../theme/orion-fusion-theme/BasicMenu.module';
+
 :local {
   .menu-wrapper {
     display: inline-block;
+
+    button {
+      &:focus {
+        box-shadow: var(--terra-framework-docs-menu-button-focus-box-shadow, 0 0 1px 3px rgba(76, 178, 233, 0.5), 0 0 7px 4px rgba(76, 178, 233, 0.35));
+      }
+    }
   }
 }

packages/terra-framework-docs/src/terra-dev-site/test/data-grid/data-grid/DataGridFocusableCell.test.jsx

@@ -18,9 +18,10 @@ const DataGridFocusableCell = () => {
 
   const buttonCell = <button type="button" aria-label="Alert" onClick={handleButtonOpenModal}>Alert</button>;
   // eslint-disable-next-line react/forbid-dom-props
-  const inputCell = <input type="text" aria-label="Text Input" style={{ width: '100px', height: '25px', display: 'inline' }} />;
+  const inputCell = <input id="input-cell" type="text" aria-label="Text Input" style={{ width: '100px', height: '25px', display: 'inline' }} />;
+  const inputCell2 = <input type="text" aria-label="Text Input" style={{ width: '100px', height: '25px', display: 'inline' }} />;
   const anchorCell = <a href="https://www.oracle.com/" aria-label="Visit Oracle">Visit Oracle</a>;
-  const textAreaCell = <textarea name="textArea" aria-label="Text Area" rows="1" cols="15" value="Text Area" />;
+  const textAreaCell = <textarea id="textarea-cell" name="textArea" aria-label="Text Area" rows="1" cols="15" value="Text Area" />;
   const selectCell = (
     <select name="specialties" id="specialties" aria-label="Select Specialty">
       <option value="ambulatory">Ambulatory</option>
@@ -54,7 +55,7 @@ const DataGridFocusableCell = () => {
           {
             content: (<div>
               {buttonCell}
-              {inputCell}
+              {inputCell2}
               {/* eslint-disable-next-line react/jsx-closing-tag-location */}
             </div>),
           },

packages/terra-framework-docs/src/terra-dev-site/theme/clinical-lowlight-theme/BasicMenu.module.scss

@@ -0,0 +1,8 @@
+:local {
+  .clinical-lowlight-theme {
+    /* ---------------------------------------------------------------------- *
+     * Menu: Doc Examples
+     * ---------------------------------------------------------------------- */
+    --terra-framework-docs-menu-button-focus-box-shadow: 0 0 1px 3px #004c76, 0 0 7px 4px #004c76;
+  }
+}

packages/terra-framework-docs/src/terra-dev-site/theme/orion-fusion-theme/BasicMenu.module.scss

@@ -0,0 +1,8 @@
+:local {
+  .orion-fusion-theme {
+    /* ---------------------------------------------------------------------- *
+     * Menu: Doc Examples
+     * ---------------------------------------------------------------------- */
+    --terra-framework-docs-menu-button-focus-box-shadow: 0 0 1px 3px rgba(76, 178, 233, 0.5), 0 0 7px 4px rgba(76, 178, 233, 0.35);
+  }
+}