Enhance screen reader support to announce column headers are interactable.

.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:

.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

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

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}

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}
     >
       <DataGrid
         id={id}

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

@@ -159,16 +159,24 @@ const ColumnHeaderCell = (props) => {
 
   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
     >
-      <div className={cx('header-container')} role={displayName && 'button'}>
+      <div
+        className={cx('header-container')}
+        {...isSelectable && displayName && { ref: columnHeaderCellButtonRef, tabIndex: '-1', role: 'button' }}
+      >
         {errorIcon}
         <span>{displayName}</span>
         {sortIndicatorIcon}

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

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`] =
   <div
     className="header-container"
     role="button"
+    tabIndex="-1"
   >
     <span>
        Vitals
@@ -62,6 +63,7 @@ exports[`ColumnHeaderCell renders a column header cell with ascending sort and e
   <div
     className="header-container"
     role="button"
+    tabIndex="-1"
   >
     <IconError
       a11yLabel="Terra.dataGrid.columnError"
@@ -110,6 +112,7 @@ exports[`ColumnHeaderCell renders a column header cell with descending sort 1`]
   <div
     className="header-container"
     role="button"
+    tabIndex="-1"
   >
     <span>
        Vitals
@@ -151,6 +154,7 @@ exports[`ColumnHeaderCell renders a column header cell with error 1`] = `
   <div
     className="header-container"
     role="button"
+    tabIndex="-1"
   >
     <IconError
       a11yLabel="Terra.dataGrid.columnError"
@@ -195,6 +199,7 @@ exports[`ColumnHeaderCell renders a column header cell with onColumnSelect callb
   <div
     className="header-container"
     role="button"
+    tabIndex="-1"
   >
     <IconError
       a11yLabel="Terra.dataGrid.columnError"
@@ -243,7 +248,6 @@ exports[`ColumnHeaderCell renders a column header cell with onColumnSelect callb
 >
   <div
     className="header-container"
-    role="button"
   >
     <IconError
       a11yLabel="Terra.dataGrid.columnError"
@@ -291,6 +295,7 @@ exports[`ColumnHeaderCell renders a default column header cell 1`] = `
   <div
     className="header-container"
     role="button"
+    tabIndex="-1"
   >
     <span>
        Vitals
@@ -377,6 +382,7 @@ exports[`ColumnHeaderCell renders a pinned column header cell 1`] = `
       <div
         className="header-container"
         role="button"
+        tabIndex="-1"
       >
         <IconError
           a11yLabel="Terra.dataGrid.columnError"

packages/terra-data-grid/tests/jest/__snapshots__/DataGrid.test.jsx.snap

@@ -431,6 +431,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
         <table
           className="data-grid"
           id="test-terra-data-grid"
+          onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
           onMouseDown={[Function]}
@@ -558,6 +559,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
                       <div
                         className="header-container"
                         role="button"
+                        tabIndex="-1"
                       >
                         <span>
                            Vitals
@@ -729,6 +731,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
                       <div
                         className="header-container"
                         role="button"
+                        tabIndex="-1"
                       >
                         <span>
                           March 16
@@ -909,7 +912,6 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
                     >
                       <div
                         className="header-container"
-                        role="button"
                       >
                         <span>
                           March 17
@@ -2777,6 +2779,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
         <table
           className="data-grid"
           id="test-terra-data-grid"
+          onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
           onMouseDown={[Function]}
@@ -2904,6 +2907,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
                       <div
                         className="header-container"
                         role="button"
+                        tabIndex="-1"
                       >
                         <span>
                            Vitals
@@ -3075,6 +3079,7 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
                       <div
                         className="header-container"
                         role="button"
+                        tabIndex="-1"
                       >
                         <span>
                           March 16
@@ -3255,7 +3260,6 @@ exports[`DataGrid verifies onCellSelect callback is triggered when space is pres
                     >
                       <div
                         className="header-container"
-                        role="button"
                       >
                         <span>
                           March 17
@@ -5105,14 +5109,14 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
         <table
           className="data-grid"
           id="test-terra-data-grid"
+          onBlur={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
           onMouseDown={[Function]}
           role="grid"
           tabIndex={0}
         >
           <Memo(ColumnHeader)
-            activeColumnIndex={0}
             columns={
               Array [
                 Object {
@@ -5163,7 +5167,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
                   columnIndex={0}
                   headerHeight="2.5rem"
                   id="WorklistDataGrid-rowSelectionColumn"
-                  isActive={true}
+                  isActive={false}
                   isResizable={false}
                   isResizeActive={false}
                   isSelectable={true}
@@ -5209,7 +5213,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
                         "timeZone": null,
                       }
                     }
-                    isActive={true}
+                    isActive={false}
                     isResizable={false}
                     isResizeActive={false}
                     isSelectable={true}
@@ -5328,6 +5332,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
                       <div
                         className="header-container"
                         role="button"
+                        tabIndex="-1"
                       >
                         <span>
                            Vitals
@@ -5499,6 +5504,7 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
                       <div
                         className="header-container"
                         role="button"
+                        tabIndex="-1"
                       >
                         <span>
                           March 16
@@ -5679,7 +5685,6 @@ exports[`DataGrid verifies row selection column header selection 1`] = `
                     >
                       <div
                         className="header-container"
-                        role="button"
                       >
                         <span>
                           March 17
@@ -7715,6 +7720,7 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and
   <table
     className="data-grid"
     id="test-terra-data-grid"
+    onBlur={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDown={[Function]}
@@ -7733,7 +7739,6 @@ exports[`DataGrid verifies that the grid created is consistent with the rows and
       }
     >
       <Memo(ColumnHeader)
-        activeColumnIndex={0}
         columns={
           Array [
             Object {
@@ -7948,6 +7953,7 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = `
   <table
     className="data-grid"
     id="test-terra-data-grid"
+    onBlur={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDown={[Function]}
@@ -7966,7 +7972,6 @@ exports[`DataGrid verifies the rows are created with the right props 1`] = `
       }
     >
       <Memo(ColumnHeader)
-        activeColumnIndex={0}
         columns={
           Array [
             Object {