fix: remove row focus background color (microsoft#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 microsoft#29033

* changefile

* revert bad commit

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

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,
   );