fix: Layer sets focus visible classname for its FocusRectsProvider (#28157)

Author: smhigley

change/@fluentui-react-13f13391-8a93-4b11-b3c6-cfccea4fcdee.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Layer propagates focus visible classname to its contents",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react/src/components/Layer/Layer.base.tsx

@@ -11,6 +11,8 @@ import {
   setPortalAttribute,
   setVirtualParent,
   FocusRectsProvider,
+  FocusRectsContext,
+  IsFocusVisibleClassName,
 } from '../../Utilities';
 import {
   registerLayer,
@@ -24,6 +26,14 @@ import type { ILayerProps, ILayerStyleProps, ILayerStyles } from './Layer.types'
 
 const getClassNames = classNamesFunction<ILayerStyleProps, ILayerStyles>();
 
+const getFocusVisibility = (providerRef?: React.RefObject<HTMLElement>) => {
+  if (providerRef?.current) {
+    return providerRef.current.classList.contains(IsFocusVisibleClassName);
+  }
+
+  return false;
+};
+
 export const LayerBase: React.FunctionComponent<ILayerProps> = React.forwardRef<HTMLDivElement, ILayerProps>(
   (props, ref) => {
     const registerPortalEl = usePortalCompat();
@@ -32,11 +42,24 @@ export const LayerBase: React.FunctionComponent<ILayerProps> = React.forwardRef<
     const mergedRef = useMergedRefs(rootRef, ref);
     const layerRef = React.useRef<HTMLDivElement>();
     const fabricElementRef = React.useRef<HTMLDivElement>(null);
+    const focusContext = React.useContext(FocusRectsContext);
 
     // Tracks if the layer mount events need to be raised.
     // Required to allow the DOM to render after the layer element is added.
     const [needRaiseLayerMount, setNeedRaiseLayerMount] = React.useState(false);
 
+    // Sets the focus visible className when the FocusRectsProvider for the layer is rendered
+    // This allows the current focus visibility style to be carried over to the layer content
+    const focusRectsRef = React.useCallback(
+      el => {
+        const isFocusVisible = getFocusVisibility(focusContext?.providerRef);
+        if (el && isFocusVisible) {
+          el.classList.add(IsFocusVisibleClassName);
+        }
+      },
+      [focusContext],
+    );
+
     const {
       children,
       className,
@@ -52,7 +75,7 @@ export const LayerBase: React.FunctionComponent<ILayerProps> = React.forwardRef<
       theme,
     } = props;
 
-    const fabricRef = useMergedRefs(fabricElementRef, fabricProps?.ref);
+    const fabricRef = useMergedRefs(fabricElementRef, fabricProps?.ref, focusRectsRef);
 
     const classNames = getClassNames(styles!, {
       theme: theme!,

packages/react/src/components/Layer/Layer.test.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as ReactTestUtils from 'react-dom/test-utils';
 import { Layer } from './Layer';
 import { LayerHost } from './LayerHost';
+import { FocusRectsProvider, IsFocusVisibleClassName } from '../../Utilities';
 import { mount } from 'enzyme';
 import { safeCreate } from '@fluentui/test-utilities';
 import { render } from '@testing-library/react';
@@ -263,6 +264,41 @@ describe('Layer', () => {
     expect(onLayerDidMountSpy).toHaveBeenCalledTimes(1);
   });
 
+  it('sets focus visibility className from parent context', () => {
+    const parentFocusEl = document.createElement('div');
+    parentFocusEl.classList.add(IsFocusVisibleClassName);
+    const parentFocusRef = { current: parentFocusEl };
+    const FocusProviderTest = () => (
+      <div id="app">
+        <FocusRectsProvider providerRef={parentFocusRef}>
+          <div id="parent">
+            <Layer hostId="focusTest" fabricProps={{ className: 'innerFocusProvider' }}>
+              content
+            </Layer>
+          </div>
+        </FocusRectsProvider>
+        <LayerHost id="focusTest" />
+      </div>
+    );
+
+    const appElement = document.createElement('div');
+
+    try {
+      document.body.appendChild(appElement);
+
+      ReactTestUtils.act(() => {
+        ReactDOM.render(<FocusProviderTest />, appElement);
+      });
+
+      const focusProvider = appElement.querySelector('.innerFocusProvider');
+      expect(focusProvider).toBeTruthy();
+      expect(focusProvider?.classList.contains(IsFocusVisibleClassName)).toBeTruthy();
+    } finally {
+      ReactDOM.unmountComponentAtNode(appElement);
+      appElement.remove();
+    }
+  });
+
   describe('compat', () => {
     it('calls "register" from "react-portal-compat"', () => {
       const unregister = jest.fn();