Add focus rect support in shadow dom (microsoft#29046)

spmonahan · Aug 31, 2023 · 8f71268 · 8f71268
1 parent 870fe42
commit 8f71268
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/packages/utilities/src/shadowDom/MergeStylesShadowRootContext.tsx b/packages/utilities/src/shadowDom/MergeStylesShadowRootContext.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { GLOBAL_STYLESHEET_KEY } from '@fluentui/merge-styles';
+import { FocusRectsProvider } from '../FocusRectsProvider';
 import { useMergeStylesRootStylesheets_unstable } from './MergeStylesRootContext';
 /**
  * NOTE: This API is unstable and subject to breaking change or removal without notice.
@@ -36,11 +37,16 @@ export const MergeStylesShadowRootProvider_unstable: React.FC<MergeStylesShadowR
       shadowRoot,
     };
   }, [shadowRoot]);
+  const focusProviderRef = React.useRef<HTMLDivElement>(null);
 
   return (
     <MergeStylesShadowRootContext.Provider value={value} {...props}>
       <GlobalStyles />
-      {props.children}
+      <FocusRectsProvider providerRef={focusProviderRef}>
+        <div className="ms-MergeStylesShadowRootProvider" ref={focusProviderRef}>
+          {props.children}
+        </div>
+      </FocusRectsProvider>
     </MergeStylesShadowRootContext.Provider>
   );
 };