chore: Minor design updates

Author: NathanZlion

src/table/__tests__/column-grouping-utils.test.tsx

@@ -418,13 +418,18 @@ describe('column-grouping-utils', () => {
 
         expect(result?.maxDepth).toBe(3);
 
-        console.log(JSON.stringify(result?.rows));
-
-        // Row 0: metrics and config
+        // Row 0: metrics and a hidden placeholder for config (config had rowspan=2, now expanded)
         expect(result?.rows[0].columns.map(c => c.id)).toEqual(['metrics', 'config']);
-
-        // Row 1: perf only (config's children in row 2)
-        expect(result?.rows[1].columns.map(c => c.id)).toEqual(['perf']);
+        const configRow0 = result?.rows[0].columns.find(c => c.id === 'config');
+        expect(configRow0?.isHidden).toBe(true);
+        expect(configRow0?.rowspan).toBe(1);
+
+        // Row 1: perf and the real config (dropped down from row 0)
+        expect(result?.rows[1].columns.map(c => c.id)).toEqual(['perf', 'config']);
+        const configRow1 = result?.rows[1].columns.find(c => c.id === 'config');
+        expect(configRow1?.isHidden).toBe(false);
+        expect(configRow1?.isGroup).toBe(true);
+        expect(configRow1?.rowspan).toBe(1);
 
         // Row 2: both leaf columns
         expect(result?.rows[2].columns.map(c => c.id)).toEqual(['cpu', 'type']);

src/table/column-grouping-utils.ts

@@ -312,11 +312,6 @@ function expandRowspansToHiddenNodes<T>(node: TableHeaderNode<T>): void {
     return;
   }
 
-  // Only expand leaf columns — groups keep their natural HTML rowspan
-  if (node.isGroup) {
-    return;
-  }
-
   const originalRowspan = node.rowspan;
   const originalRowIndex = node.rowIndex;
   const parentNode = node.parentNode!;

src/table/header-cell/hidden-header-cell.tsx

@@ -3,6 +3,7 @@
 import React, { useRef } from 'react';
 
 import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
+import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
 
 import { ColumnWidthStyle } from '../column-widths-utils';
 import { TableProps } from '../interfaces';
@@ -63,6 +64,9 @@ export function TableHiddenHeaderCell({
   const cellRefObject = useRef<HTMLElement>(null);
   const cellRefCombined = useMergeRefs(cellRef, cellRefObject);
 
+  const focusableRef = useRef<HTMLDivElement>(null);
+  const { tabIndex: focusableTabIndex } = useSingleTabStopNavigation(focusableRef, { tabIndex });
+
   return (
     <TableThElement
       resizableStyle={resizableStyle}
@@ -83,8 +87,13 @@ export function TableHiddenHeaderCell({
       scope="col"
       ariaLabel=""
     >
-      {/* Empty content — this is a hidden placeholder cell */}
-      <div className={styles['header-cell-hidden-content']} aria-hidden="true" />
+      {/* Empty but focusable content — allows keyboard navigation through placeholder cells */}
+      <div
+        ref={focusableRef}
+        className={styles['header-cell-hidden-content']}
+        tabIndex={focusableTabIndex}
+        data-focus-id={`header-hidden-${columnId}`}
+      />
       {resizableColumns ? (
         <Resizer
           tabIndex={tabIndex}

src/table/header-cell/styles.scss

@@ -95,12 +95,13 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
   // is the table-level visibility prop (for the measurement thead), not our placeholder concept.
   &:has(.header-cell-hidden-content) {
     border-block-end-color: transparent;
+  }
 
-    // Complete divider styles for hidden placeholder cells.
-    // The normal divider rule `th:not(:last-child) > .divider` fails when hidden cells
-    // end up as :last-child (due to rowspan siblings not being in the same <tr>).
-    // We replicate the full divider positioning here with the same block-gap
-    // to keep divider heights visually consistent with normal header cells.
+  // Divider styles for hidden placeholder cells (only when NOT the last cell in the row).
+  // The normal divider rule `th:not(:last-child) > .divider` doesn't apply here because
+  // hidden cells use `.resize-divider` instead of `.divider`. We replicate the positioning
+  // with the same block-gap to keep divider heights visually consistent.
+  &:not(:last-child):has(.header-cell-hidden-content) {
     > .resize-divider {
       position: absolute;
       outline: none;
@@ -111,7 +112,8 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
       min-block-size: awsui.$line-height-heading-xs;
       // Use the same block-gap as normal dividers (from resizer/styles.scss)
       // to keep divider heights visually consistent across the header row.
-      max-block-size: calc(100% - 2 * #{awsui.$space-xs} - #{awsui.$space-xxxs});
+      // stylelint-disable-next-line custom-property-pattern
+      max-block-size: calc(100% - var(--awsui-table-resizer-block-gap, 0px));
       margin-block: auto;
       margin-inline: auto;
       border-inline-start: awsui.$border-item-width solid awsui.$color-border-divider-default;
@@ -156,6 +158,7 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
       box-shadow: awsui.$shadow-sticky-column-first;
       clip-path: inset(0px -24px 0px 0px);
 
+      // stylelint-disable-next-line no-descending-specificity
       & > .resize-divider {
         display: none;
       }

src/table/resizer/styles.scss

@@ -15,7 +15,10 @@
 
 $handle-width: awsui.$space-xl;
 $active-separator-width: 2px;
-$block-gap: calc(2 * #{awsui.$space-xs} + #{awsui.$space-xxxs});
+// $block-gap: calc(2 * #{awsui.$space-xs} + #{awsui.$space-xxxs});
+// Use a CSS custom property so the gap can be overridden at runtime (demo/playground for designers).
+// stylelint-disable-next-line custom-property-pattern
+$block-gap: var(--awsui-table-resizer-block-gap, 0px);
 
 .resizer-wrapper {
   inset-block: 0;