fix: prevent toolbar from stealing focus when focus has already been …

…moved (#6934)

* fix: prevent toolbar from stealing focus when focus has already been moved in the document

* Change files

---------

Co-authored-by: Christopher Holt <=>

change/@microsoft-fast-foundation-452bb1d9-58ef-4cb0-a6fa-0ed41d1ad057.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: prevent toolbar from stealing focus when focus has already been moved in the document",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "=",
+  "dependentChangeType": "patch"
+}

packages/web-components/fast-foundation/src/toolbar/toolbar.ts

@@ -9,6 +9,7 @@ import { ARIAGlobalStatesAndProperties } from "../patterns/aria-global.js";
 import { StartEnd, StartEndOptions } from "../patterns/start-end.js";
 import { applyMixins } from "../utilities/apply-mixins.js";
 import { getDirection } from "../utilities/direction.js";
+import { getRootActiveElement } from "../utilities/root-active-element.js";
 
 /**
  * Toolbar configuration options
@@ -258,7 +259,14 @@ export class Toolbar extends FoundationElement {
     private setFocusedElement(activeIndex: number = this.activeIndex): void {
         this.activeIndex = activeIndex;
         this.setFocusableElements();
-        this.focusableElements[this.activeIndex]?.focus();
+        if (
+            this.focusableElements[this.activeIndex] &&
+            // Don't focus the toolbar element if some event handlers moved
+            // the focus on another element in the page.
+            this.contains(getRootActiveElement(this))
+        ) {
+            this.focusableElements[this.activeIndex].focus();
+        }
     }
 
     /**

packages/web-components/fast-foundation/src/utilities/root-active-element.ts

@@ -0,0 +1,10 @@
+// returns the active element in the shadow context of the element in question.
+export function getRootActiveElement(element: Element): Element | null {
+    const rootNode = element.getRootNode();
+
+    if (rootNode instanceof ShadowRoot) {
+        return rootNode.activeElement;
+    }
+
+    return document.activeElement;
+}