fix: Cell actions should have correct background when row focused wit…

…hin (#25790)

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

The table cell actions should appear when any focus is within the row
and not just within the cell actions container. Also apply the hover
background colour when the row has focus within.

Now when the cell actions overlap the cell content, it will 'cover' the
content just like in hover scenarios.

* changefiles

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',