fix: Cell actions should have correct background when row focused within

change/@fluentui-react-table-52eb28b7-346f-4cab-b6d2-ad9d9461a607.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: Cell actions should have correct background when row focused within",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tabster-4f1e29e2-4847-4cd0-bd75-c832fbafbb39.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: focus-within attribute no longer the same as focus-visible",
+  "packageName": "@fluentui/react-tabster",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
-import { useFocusWithin } from '@fluentui/react-tabster';
+import { getNativeElementProps } from '@fluentui/react-utilities';
 import type { TableCellActionsProps, TableCellActionsState } from './TableCellActions.types';
 
 /**
@@ -21,7 +20,7 @@ export const useTableCellActions_unstable = (
       root: 'div',
     },
     root: getNativeElementProps('div', {
-      ref: useMergedRefs(ref, useFocusWithin()),
+      ref,
       ...props,
     }),
     visible: props.visible ?? false,

packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts

@@ -1,7 +1,6 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { TableCellActionsSlots, TableCellActionsState } from './TableCellActions.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 
 export const tableCellActionsClassNames: SlotClassNames<TableCellActionsSlots> = {
   root: 'fui-TableCellActions',
@@ -18,13 +17,6 @@ const useStyles = makeStyles({
     transform: 'translateY(-50%)',
     opacity: 0,
     marginLeft: 'auto',
-
-    ...createCustomFocusIndicatorStyle(
-      {
-        opacity: 1,
-      },
-      { selector: 'focus-within' },
-    ),
   },
 
   visible: {

packages/react-components/react-table/src/components/TableRow/useTableRow.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
 import type { TableRowProps, TableRowState } from './TableRow.types';
 import { useTableContext } from '../../contexts/tableContext';
-import { useFocusVisible } from '@fluentui/react-tabster';
+import { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';
 
 /**
  * Create the state required to render TableRow.
@@ -17,13 +17,14 @@ export const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLEl
   const { noNativeElements, size } = useTableContext();
   const rootComponent = props.as ?? noNativeElements ? 'div' : 'tr';
   const focusVisibleRef = useFocusVisible();
+  const focusWithinRef = useFocusWithin();
 
   return {
     components: {
       root: rootComponent,
     },
     root: getNativeElementProps(rootComponent, {
-      ref: useMergedRefs(ref, focusVisibleRef),
+      ref: useMergedRefs(ref, focusVisibleRef, focusWithinRef),
       role: rootComponent === 'div' ? 'row' : undefined,
       ...props,
     }),

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

@@ -37,6 +37,9 @@ const useStyles = makeStyles({
         [`& .${tableSelectionCellClassNames.root}`]: {
           opacity: 1,
         },
+        [`& .${tableCellActionsClassNames.root}`]: {
+          opacity: 1,
+        },
       },
       { selector: 'focus-within' },
     ),
@@ -49,6 +52,22 @@ const useStyles = makeStyles({
     ),
   },
 
+  // When focus is within the row the background colour
+  // should be the same as hover, except when there is a brand
+  // or neutral appearance applied on the row
+  noAppearanceFocusWithin: {
+    ...createCustomFocusIndicatorStyle(
+      {
+        [`& .${tableCellActionsClassNames.root}`]: {
+          backgroundColor: tokens.colorSubtleBackgroundHover,
+        },
+
+        backgroundColor: tokens.colorSubtleBackgroundHover,
+      },
+      { selector: 'focus-within' },
+    ),
+  },
+
   rootInteractive: {
     ':active': {
       backgroundColor: tokens.colorSubtleBackgroundPressed,
@@ -145,6 +164,7 @@ export const useTableRowStyles_unstable = (state: TableRowState): TableRowState
     styles[state.size],
     state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,
     styles[state.appearance],
+    state.appearance === 'none' && !isHeaderRow && styles.noAppearanceFocusWithin,
     state.root.className,
   );
 

packages/react-components/react-tabster/src/focus/constants.ts

@@ -9,7 +9,7 @@ export const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';
 /**
  * @internal
  */
-export const FOCUS_WITHIN_ATTR = 'data-fui-focus-visible';
+export const FOCUS_WITHIN_ATTR = 'data-fui-focus-within';
 export const defaultOptions = {
   style: {},
   selector: 'focus',