Library

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

System Info

N/A

Are you reporting Accessibility issue?

no

Reproduction

N/A

Bug Description

Actual Behavior

Card defines invalid styles for focus ❌

Expected Behavior

• Card defines proper styles for focus

Repro

• Run yarn workspace @fluentui/react-card build

• Open packages/react-components/react-card/lib/components/Card/useCardStyles.styles.js

• Notice following rules:

      '.f3l4wcz[data-fui-focus-visible]::after{top:-var(--strokeWidthThick);}',
      '.f6j2biq[data-fui-focus-visible]::after{bottom:-var(--strokeWidthThick);}',
      '.fdzzmfx[data-fui-focus-visible]::after{left:-var(--strokeWidthThick);}',
      '.fduh8kh[data-fui-focus-visible]::after{right:-var(--strokeWidthThick);}',

  Note: -var() is invalid CSS value

• Definitions there are invalid:
  

  fluentui/packages/react-components/react-card/src/components/Card/useCardStyles.styles.ts

  Lines 69 to 78 in ab53a4c

  	...createFocusOutlineStyle({
  	style: focusOutlineStyle,
  	selector: 'focus',
  	}),
  	},
  	selectableFocused: createFocusOutlineStyle({
  	style: focusOutlineStyle,
  	selector: 'focus-within',
  	}),

  Note: createFocusOutlineStyle() does not take into account CSS variables
  

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

  Lines 58 to 61 in ab53a4c

  	top: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetTop})`,
  	bottom: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetBottom})`,
  	left: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetLeft})`,
  	right: !outlineOffset ? `-${outlineWidth}` : `calc(0px - ${outlineWidth} - ${outlineOffsetRight})`,

Logs

N/A

Requested priority

High

Products/sites affected

Teams

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.