resize handle id description added

cerner · Feb 16, 2024 · 2ae6a5c · 2ae6a5c
1 parent 81519f2
commit 2ae6a5c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/packages/terra-table/src/subcomponents/ColumnHeaderCell.jsx b/packages/terra-table/src/subcomponents/ColumnHeaderCell.jsx
@@ -328,8 +328,8 @@ const ColumnHeaderCell = (props) => {
   headerDescription += sortDescription ? `, ${sortDescription}` : '';
 
   // set focus to the action button
-  const distributeFocusWithinActionCell = () => {
-    columnHeaderCellRef?.current?.childNodes[0].focus();
+  const focusActionCell = () => {
+    columnHeaderCellRef?.current?.childNodes[0]?.focus();
   };
 
   const isPinnedColumn = columnIndex < columnContext.pinnedColumnOffsets.length;
@@ -371,6 +371,8 @@ const ColumnHeaderCell = (props) => {
     );
   }
 
+  const resizeHandleId = `${tableId}-${columnId}-resizeHandle`;
+
   return (
   /* eslint-disable react/forbid-dom-props */
     <CellTag
@@ -386,19 +388,18 @@ const ColumnHeaderCell = (props) => {
       tabIndex={isGridContext && !hasButtonElement ? -1 : undefined}
       role={!isActionCell ? 'columnheader' : undefined}
       scope={!isActionCell ? 'col' : undefined}
-      // aria-owns={!isActionCell ? `${tableId}-${columnId}-actionCell` : undefined} // This way header owns action
-      aria-owns={isActionCell ? `${tableId}-${columnId}-resizeHandle` : undefined} // Action owns handle
+      aria-owns={isActionCell ? resizeHandleId : undefined} // Action Cell has to own a corresponding resize handle to avoid a double announcement on handle focus when it comes from action cell
       title={!isActionCell ? displayName : action?.label}
       onMouseDown={isSelectable && onColumnSelect ? handleMouseDown : undefined}
       onKeyDown={(isSelectable || isResizable) ? handleKeyDown : undefined}
       // eslint-disable-next-line react/forbid-component-props
       style={{ width: `${width}px`, height: isActionCell ? 'auto' : headerHeight, left: cellLeftEdge }}
-      onFocus={isActionCell ? distributeFocusWithinActionCell : undefined}
+      onFocus={isActionCell ? focusActionCell : undefined}
     >
       {cellContent}
       { isResizable && !isActionCell && (
       <ColumnResizeHandle
-        id={`${tableId}-${columnId}-resizeHandle`}
+        id={resizeHandleId}
         columnIndex={columnIndex}
         columnText={displayName}
         columnWidth={width}

diff --git a/packages/terra-table/src/subcomponents/ColumnResizeHandle.jsx b/packages/terra-table/src/subcomponents/ColumnResizeHandle.jsx
@@ -15,7 +15,11 @@ import styles from './ColumnResizeHandle.module.scss';
 const cx = classNames.bind(styles);
 
 const propTypes = {
-  id: PropTypes.string,
+  /**
+   * Required string representing a unique identifier for the column resize handle.
+   */
+  id: PropTypes.string.isRequired,
+
   /**
    * The cell's column position in the grid. This is zero based.
    */