diff --git a/change/@fluentui-react-avatar-c5eda590-5ce5-4e60-9278-1c3e2c262c93.json b/change/@fluentui-react-avatar-c5eda590-5ce5-4e60-9278-1c3e2c262c93.json new file mode 100644 index 0000000000000..ded5653202609 --- /dev/null +++ b/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": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-link-d5ee02fd-4fb1-447a-9c5a-29d224098eb1.json b/change/@fluentui-react-link-d5ee02fd-4fb1-447a-9c5a-29d224098eb1.json new file mode 100644 index 0000000000000..14fd2c0050f4c --- /dev/null +++ b/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": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-table-7f1e5d71-db9b-4684-ae54-8f43917da2bb.json b/change/@fluentui-react-table-7f1e5d71-db9b-4684-ae54-8f43917da2bb.json new file mode 100644 index 0000000000000..fed873db5f544 --- /dev/null +++ b/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": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tabster-febe226f-524c-446a-a2b1-769b8ba7180f.json b/change/@fluentui-react-tabster-febe226f-524c-446a-a2b1-769b8ba7180f.json new file mode 100644 index 0000000000000..249f14184b62e --- /dev/null +++ b/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": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts index aac8ec2ec1373..a678f68b4b6c7 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.styles.ts +++ b/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: { diff --git a/packages/react-components/react-link/src/components/Link/useLinkStyles.styles.ts b/packages/react-components/react-link/src/components/Link/useLinkStyles.styles.ts index 15f343ed72a2f..783663e7c6fd7 100644 --- a/packages/react-components/react-link/src/components/Link/useLinkStyles.styles.ts +++ b/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: { 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 c0f5c267af33d..ef1c3afbac308 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 @@ -63,7 +63,7 @@ const useStyles = makeStyles({ ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2), ...shorthands.borderRadius(tokens.borderRadiusMedium), }, - { selector: 'focus', enableOutline: true }, + { selector: 'focus' }, ), }, }); diff --git a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.styles.ts b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.styles.ts index b0da49bf24760..897cfb19cacd1 100644 --- a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.styles.ts +++ b/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', }, 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 5d0428f07fcc6..eab5fef2cea16 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 @@ -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' }, ), }, diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.styles.ts b/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.styles.ts index 33fcf2c455fcb..7df83972ba042 100644 --- a/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.styles.ts +++ b/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' }, ), }, diff --git a/packages/react-components/react-tabster/etc/react-tabster.api.md b/packages/react-components/react-tabster/etc/react-tabster.api.md index 4aa5d69cb3a29..c8ce15a06184a 100644 --- a/packages/react-components/react-tabster/etc/react-tabster.api.md +++ b/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(style: TStyle, { selector, enableOutline, }?: CreateCustomFocusIndicatorStyleOptions): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle; +export function createCustomFocusIndicatorStyle(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 { + enableOutline?: boolean; // (undocumented) style?: Partial; } diff --git a/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts b/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts index dd8355f87a99a..3a41a328a0f75 100644 --- a/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts +++ b/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( 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, }), diff --git a/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts b/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts index 10f0d030b1caf..93b64b3a50561 100644 --- a/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts +++ b/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 { style?: Partial; + + /** + * 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 }, - ); + ), +});