[Bug]: Focus border generated by createFocusOutlineStyle can be cut/invisible when parent container is overflow: hidden

[wfwf1997]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (20) x64 Intel(R) Core(TM) i9-10900X CPU @ 3.70GHz
    Memory: 27.87 GB / 31.21 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh

Are you reporting Accessibility issue?

yes

Reproduction

https://codesandbox.io/p/sandbox/vigorous-firefly-mnrppk

Bug Description

Actual Behavior

The focus border is partially visible, or not visible in some cases.

Expected Behavior

The focus border should always be fully visible.

Logs

No response

Requested priority

High

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[mainframev]

Hi @wfwf1997 👋🏻

I guess with current focus style implementation, where it's set as absolutely positioned border with some offset, it will be always cut by parent padding and overflow:hidden. It have to be solved where is the overflow property set. You can have a negative margin workaround on a parent container. In the case you provided, you can apply something like that to a parent div, where is the overflow property set:

const useStyles = makeStyles({
  hidden: {
   ...shorthands.overflow("hidden"),
   ...shorthands.margin("0", "-8px"),
   ...shorthands.padding("0", "8px"),
  },
  inlineFlex: {
    display: "inline-flex",
  },
});

You can also try to use overflow: clip, but that works only for single axe.
Plus, I think would be a nice option to have a prop to control the offset, so if needed, user can turn off offset for focus ring.

[wfwf1997]

Thanks @mainframev for your solution. I suppose this approach do work. But it may hard to find out and fix every occurence of such clipping in a large codebase. I wonder if we can change the implementation or design to make these borders not that easy to get clipped.

[microsoft-github-policy-service]

no assignees

Gentle ping that this issue needs attention.

[ling1726]

It seems that native outline styles by default also have this problem https://stackblitz.com/edit/vitejs-vite-nayfuf?file=src%2Fstyle.css,src%2Fmain.ts&terminal=dev

Playing around with it I think what the user agent does is apply a default outline-offset: -2px to native focus outlines which are styled as outline-style: auto

Perhaps we should consider a default outline offset for Fluent focus outlines like the user agent does

[ling1726]

I have a draft PR here #33097 that sets a -2px focus outline, this will resolve issues for the switch and checkbox examples provided in the repro since they do not have offsets set by default

However this will do nothing for the slider unfortunately since the offset is explicitly set in code

fluentui/packages/react-components/react-slider/library/src/components/Slider/useSliderStyles.styles.ts

Lines 101 to 108 in ed7c93c

	focusIndicatorHorizontal: createFocusOutlineStyle({
	selector: 'focus-within',
	style: { outlineOffset: { top: '-2px', bottom: '-2px', left: '8px', right: '8px' } },
	}),
	focusIndicatorVertical: createFocusOutlineStyle({
	selector: 'focus-within',
	style: { outlineOffset: { top: '6px', bottom: '6px', left: '4px', right: '4px' } },

[ling1726]

/azp run