fix: subtle selection should apply correctly to header rows (microsoft#33104)

Author: ling1726

apps/vr-tests-react-components/src/stories/Table/TableSubtleSelection.stories.tsx

@@ -1,17 +1,27 @@
 import * as React from 'react';
 import type { Meta } from '@storybook/react';
-import { Table } from '@fluentui/react-table';
+import { Table, tableHeaderClassNames } from '@fluentui/react-table';
 import { Steps } from 'storywright';
 import { withStoryWrightSteps } from '../../utilities';
-import { SubtleSelection } from './utils';
+import { SubtleSelection, SubtleSelectionEmpty } from './utils';
 
 export default {
   title: 'Table table - subtle selection',
   decorators: [
     story =>
-      withStoryWrightSteps({ story, steps: new Steps().hover('.not-selected').snapshot('hover unselected row').end() }),
+      withStoryWrightSteps({
+        story,
+        steps: new Steps()
+          .hover('.not-selected')
+          .snapshot('hover unselected row')
+          .hover(`.${tableHeaderClassNames.root}`)
+          .snapshot('hover header row')
+          .end(),
+      }),
   ],
 } satisfies Meta<typeof Table>;
 
 export const Rest = () => <SubtleSelection noNativeElements={false} />;
 Rest.storyName = 'rest';
+
+export const NoSelection = () => <SubtleSelectionEmpty noNativeElements={false} />;

apps/vr-tests-react-components/src/stories/Table/utils.tsx

@@ -639,6 +639,41 @@ export const SubtleSelection: React.FC<SharedVrTestArgs> = ({ noNativeElements }
   </Table>
 );
 
+export const SubtleSelectionEmpty: React.FC<SharedVrTestArgs> = ({ noNativeElements }) => (
+  <Table noNativeElements={noNativeElements}>
+    <TableHeader>
+      <TableRow>
+        <TableSelectionCell type="checkbox" hidden />
+        {columns.map(column => (
+          <TableHeaderCell key={column.columnKey}>{column.label}</TableHeaderCell>
+        ))}
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      {items.map((item, i) => (
+        <TableRow key={item.file.label}>
+          <TableSelectionCell subtle type="checkbox" className="not-selected" />
+          <TableCell>
+            <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>
+          </TableCell>
+
+          <TableCell>
+            <TableCellLayout
+              media={<Avatar name={item.author.label} badge={{ status: item.author.status as PresenceBadgeStatus }} />}
+            >
+              {item.author.label}
+            </TableCellLayout>
+          </TableCell>
+          <TableCell>{item.lastUpdated.label}</TableCell>
+          <TableCell>
+            <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
+          </TableCell>
+        </TableRow>
+      ))}
+    </TableBody>
+  </Table>
+);
+
 export const Truncate: React.FC<SharedVrTestArgs & { truncate?: boolean }> = ({ noNativeElements, truncate }) => (
   <Table noNativeElements={noNativeElements} style={{ width: '400px' }}>
     <TableHeader>

change/@fluentui-react-table-f769575c-0588-4c39-b82a-b20389b9638a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: subtle selection should apply correctly to header rows",
+  "packageName": "@fluentui/react-table",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-table/library/src/components/TableRow/useTableRowStyles.styles.ts

@@ -31,43 +31,50 @@ const useStyles = makeStyles({
   root: {
     color: tokens.colorNeutralForeground1,
     boxSizing: 'border-box',
+    ...createCustomFocusIndicatorStyle(
+      { outline: `2px solid ${tokens.colorStrokeFocus2}`, borderRadius: tokens.borderRadiusMedium },
+      { selector: 'focus' },
+    ),
+  },
+
+  rootSubtleSelection: {
     ...createCustomFocusIndicatorStyle(
       {
         [`& .${tableSelectionCellClassNames.root}`]: {
           opacity: 1,
         },
-        [`& .${tableCellActionsClassNames.root}`]: {
-          opacity: 1,
-        },
       },
       { selector: 'focus-within' },
     ),
-    ...createCustomFocusIndicatorStyle(
-      { outline: `2px solid ${tokens.colorStrokeFocus2}`, borderRadius: tokens.borderRadiusMedium },
-      { selector: 'focus' },
-    ),
+    ':hover': {
+      [`& .${tableSelectionCellClassNames.root}`]: {
+        opacity: 1,
+      },
+    },
   },
 
   rootInteractive: {
+    ...createCustomFocusIndicatorStyle(
+      {
+        [`& .${tableCellActionsClassNames.root}`]: {
+          opacity: 1,
+        },
+      },
+      { selector: 'focus-within' },
+    ),
     ':active': {
       backgroundColor: tokens.colorSubtleBackgroundPressed,
       color: tokens.colorNeutralForeground1Pressed,
       [`& .${tableCellActionsClassNames.root}`]: {
         opacity: 1,
       },
-      [`& .${tableSelectionCellClassNames.root}`]: {
-        opacity: 1,
-      },
     },
     ':hover': {
       backgroundColor: tokens.colorSubtleBackgroundHover,
       color: tokens.colorNeutralForeground1Hover,
       [`& .${tableCellActionsClassNames.root}`]: {
         opacity: 1,
       },
-      [`& .${tableSelectionCellClassNames.root}`]: {
-        opacity: 1,
-      },
     },
     // High contrast styles
     '@media (forced-colors: active)': {
@@ -142,6 +149,7 @@ export const useTableRowStyles_unstable = (state: TableRowState): TableRowState
   state.root.className = mergeClasses(
     tableRowClassNames.root,
     styles.root,
+    styles.rootSubtleSelection,
     !state.isHeaderRow && styles.rootInteractive,
     styles[state.size],
     state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,

packages/react-components/react-table/library/src/components/TableSelectionCell/useTableSelectionCell.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { useId, slot } from '@fluentui/react-utilities';
+import { useId, slot, useMergedRefs } from '@fluentui/react-utilities';
 import { Checkbox } from '@fluentui/react-checkbox';
 import { Radio } from '@fluentui/react-radio';
 import type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types';
 import { useTableCell_unstable } from '../TableCell/useTableCell';
 import { useTableContext } from '../../contexts/tableContext';
+import { useFocusWithin } from '@fluentui/react-tabster';
 
 /**
  * Create the state required to render TableSelectionCell.
@@ -19,7 +20,7 @@ export const useTableSelectionCell_unstable = (
   props: TableSelectionCellProps,
   ref: React.Ref<HTMLElement>,
 ): TableSelectionCellState => {
-  const tableCellState = useTableCell_unstable(props, ref);
+  const tableCellState = useTableCell_unstable(props, useMergedRefs(ref, useFocusWithin()));
   const { noNativeElements } = useTableContext();
   const {
     type = 'checkbox',