From d2196ea1ca001fbc22f38fcb258016f1df6c87e4 Mon Sep 17 00:00:00 2001
From: ling1726 <lingfangao@hotmail.com>
Date: Mon, 9 Oct 2023 20:01:41 +0200
Subject: [PATCH] fix: remove row focus background color (#29364)

* fix: remove row focus background color

Removes the the row focus background so that focus outline in the teams
high contrast theme appears clearly

Fixes https://github.com/microsoft/fluentui/issues/29033

* changefile

* revert bad commit
---
 ...-table-bb51d6ec-6257-488a-b412-18e3acb470cf.json |  7 +++++++
 .../TableCell/useTableCellStyles.styles.ts          |  1 -
 .../components/TableRow/useTableRowStyles.styles.ts | 13 -------------
 3 files changed, 7 insertions(+), 14 deletions(-)
 create mode 100644 change/@fluentui-react-table-bb51d6ec-6257-488a-b412-18e3acb470cf.json

diff --git a/change/@fluentui-react-table-bb51d6ec-6257-488a-b412-18e3acb470cf.json b/change/@fluentui-react-table-bb51d6ec-6257-488a-b412-18e3acb470cf.json
new file mode 100644
index 0000000000000..08f071dd912f0
--- /dev/null
+++ b/change/@fluentui-react-table-bb51d6ec-6257-488a-b412-18e3acb470cf.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: remove row focus background color ",
+  "packageName": "@fluentui/react-table",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.styles.ts b/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.styles.ts
index ef1c3afbac308..5ca0fb171f31f 100644
--- a/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.styles.ts
+++ b/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.styles.ts
@@ -54,7 +54,6 @@ const useFlexLayoutStyles = makeStyles({
  */
 const useStyles = makeStyles({
   root: {
-    backgroundColor: 'inherit',
     position: 'relative',
     ...shorthands.padding('0px', tokens.spacingHorizontalS),
 
diff --git a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.styles.ts b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.styles.ts
index aa7efb0d073cd..a56f3e60d2bd3 100644
--- a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.styles.ts
+++ b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.styles.ts
@@ -51,18 +51,6 @@ 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(
-      {
-        backgroundColor: tokens.colorSubtleBackgroundHover,
-      },
-      { selector: 'focus-within' },
-    ),
-  },
-
   rootInteractive: {
     ':active': {
       backgroundColor: tokens.colorSubtleBackgroundPressed,
@@ -155,7 +143,6 @@ export const useTableRowStyles_unstable = (state: TableRowState): TableRowState
     styles[state.size],
     state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,
     styles[state.appearance],
-    state.appearance === 'none' && !state.isHeaderRow && styles.noAppearanceFocusWithin,
     state.root.className,
   );