fix: do not use outlineStyle: none in createCustomFocusIndicatorStyle

change/@fluentui-react-avatar-c5eda590-5ce5-4e60-9278-1c3e2c262c93.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update createCustomFocusIndicator usage to specify outline: none",
+  "packageName": "@fluentui/react-avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-link-d5ee02fd-4fb1-447a-9c5a-29d224098eb1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update createCustomFocusIndicator usage to specify outline: none",
+  "packageName": "@fluentui/react-link",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-table-7f1e5d71-db9b-4684-ae54-8f43917da2bb.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: remove now-unnecessary enableOutline in createCustomFocusIndicator",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tabster-febe226f-524c-446a-a2b1-769b8ba7180f.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "fix: move `outlineStyle: none` out of createCustomFocusIndicatorStyle and to createFocusOutlineStyle",
+  "packageName": "@fluentui/react-tabster",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts

@@ -71,6 +71,7 @@ const useTriggerButtonStyles = makeStyles({
 
   focusIndicator: createCustomFocusIndicatorStyle({
     ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
+    outlineStyle: 'none',
   }),
 
   states: {

packages/react-components/react-link/src/components/Link/useLinkStyles.styles.ts

@@ -13,6 +13,7 @@ const useStyles = makeStyles({
     textDecorationColor: tokens.colorStrokeFocus2,
     textDecorationLine: 'underline',
     textDecorationStyle: 'double',
+    outlineStyle: 'none',
   }),
   // Common styles.
   root: {

packages/react-components/react-table/src/components/TableCell/useTableCellStyles.styles.ts

@@ -63,7 +63,7 @@ const useStyles = makeStyles({
         ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),
         ...shorthands.borderRadius(tokens.borderRadiusMedium),
       },
-      { selector: 'focus', enableOutline: true },
+      { selector: 'focus' },
     ),
   },
 });

packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.styles.ts

@@ -38,7 +38,7 @@ const useStyles = makeStyles({
         ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),
         ...shorthands.borderRadius(tokens.borderRadiusMedium),
       },
-      { selector: 'focus-within', enableOutline: true },
+      { selector: 'focus-within' },
     ),
     position: 'relative',
   },

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

@@ -40,14 +40,14 @@ const useStyles = makeStyles({
           opacity: 1,
         },
       },
-      { selector: 'focus-within', enableOutline: true },
+      { selector: 'focus-within' },
     ),
     ...createCustomFocusIndicatorStyle(
       {
         ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),
         ...shorthands.borderRadius(tokens.borderRadiusMedium),
       },
-      { selector: 'focus', enableOutline: true },
+      { selector: 'focus' },
     ),
   },
 
@@ -59,7 +59,7 @@ const useStyles = makeStyles({
       {
         backgroundColor: tokens.colorSubtleBackgroundHover,
       },
-      { selector: 'focus-within', enableOutline: true },
+      { selector: 'focus-within' },
     ),
   },
 

packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.styles.ts

@@ -42,7 +42,7 @@ const useStyles = makeStyles({
         ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),
         ...shorthands.borderRadius(tokens.borderRadiusMedium),
       },
-      { selector: 'focus', enableOutline: true },
+      { selector: 'focus' },
     ),
   },
 

packages/react-components/react-tabster/etc/react-tabster.api.md

@@ -14,19 +14,21 @@ import { Types } from 'tabster';
 export function applyFocusVisiblePolyfill(scope: HTMLElement, targetWindow: Window): () => void;
 
 // @public
-export function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(style: TStyle, { selector, enableOutline, }?: CreateCustomFocusIndicatorStyleOptions): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle;
+export function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(style: TStyle, { selector }?: CreateCustomFocusIndicatorStyleOptions): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle;
 
 // @public (undocumented)
 export interface CreateCustomFocusIndicatorStyleOptions {
+    // @deprecated
     enableOutline?: boolean;
     selector?: 'focus' | 'focus-within';
 }
 
 // @public
-export const createFocusOutlineStyle: ({ selector, style, }?: CreateFocusOutlineStyleOptions) => GriffelStyle;
+export const createFocusOutlineStyle: ({ enableOutline, selector, style, }?: CreateFocusOutlineStyleOptions) => GriffelStyle;
 
 // @public (undocumented)
-export interface CreateFocusOutlineStyleOptions extends CreateCustomFocusIndicatorStyleOptions {
+export interface CreateFocusOutlineStyleOptions extends Omit<CreateCustomFocusIndicatorStyleOptions, 'enableOutline'> {
+    enableOutline?: boolean;
     // (undocumented)
     style?: Partial<FocusOutlineStyleOptions>;
 }

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

@@ -15,7 +15,8 @@ export interface CreateCustomFocusIndicatorStyleOptions {
   selector?: 'focus' | 'focus-within';
   /**
    * Enables the browser default outline style
-   * @default false
+   * @deprecated The custom focus indicator no longer affects outline styles. Outline is overridden
+   * in the default focus indicator function, `createFocusOutlineStyle`.
    */
   enableOutline?: boolean;
 }
@@ -29,19 +30,9 @@ export interface CreateCustomFocusIndicatorStyleOptions {
  */
 export function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(
   style: TStyle,
-  {
-    selector = defaultOptions.selector,
-    enableOutline = false,
-  }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,
+  { selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,
 ): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {
   return {
-    ':focus': {
-      outlineStyle: enableOutline ? undefined : 'none',
-    },
-    ':focus-visible': {
-      outlineStyle: enableOutline ? undefined : 'none',
-    },
-
     ...(selector === 'focus' && {
       [`&[${FOCUS_VISIBLE_ATTR}]`]: style,
     }),

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

@@ -18,8 +18,13 @@ export type FocusOutlineStyleOptions = {
   outlineWidth: string;
   outlineOffset?: string | FocusOutlineOffset;
 };
-export interface CreateFocusOutlineStyleOptions extends CreateCustomFocusIndicatorStyleOptions {
+export interface CreateFocusOutlineStyleOptions extends Omit<CreateCustomFocusIndicatorStyleOptions, 'enableOutline'> {
   style?: Partial<FocusOutlineStyleOptions>;
+
+  /**
+   * Enables the browser default outline style
+   */
+  enableOutline?: boolean;
 }
 
 /**
@@ -66,10 +71,18 @@ const getFocusOutlineStyles = (options: FocusOutlineStyleOptions): GriffelStyle
  * @returns focus outline styles object for @see makeStyles
  */
 export const createFocusOutlineStyle = ({
+  enableOutline = false,
   selector = defaultOptions.selector,
   style = defaultOptions.style,
-}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle =>
-  createCustomFocusIndicatorStyle(
+}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle => ({
+  ':focus': {
+    outlineStyle: enableOutline ? undefined : 'none',
+  },
+  ':focus-visible': {
+    outlineStyle: enableOutline ? undefined : 'none',
+  },
+
+  ...createCustomFocusIndicatorStyle(
     getFocusOutlineStyles({
       outlineColor: tokens.colorStrokeFocus2,
       outlineRadius: tokens.borderRadiusMedium,
@@ -78,4 +91,5 @@ export const createFocusOutlineStyle = ({
       ...style,
     }),
     { selector },
-  );
+  ),
+});