From 7f8e2db596277e78fddd88a6c99444ca64f5e771 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Fri, 5 Apr 2024 15:45:41 -0700
Subject: [PATCH] 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 <=>
---
 ...oundation-452bb1d9-58ef-4cb0-a6fa-0ed41d1ad057.json |  7 +++++++
 .../fast-foundation/src/toolbar/toolbar.ts             | 10 +++++++++-
 .../src/utilities/root-active-element.ts               | 10 ++++++++++
 3 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 change/@microsoft-fast-foundation-452bb1d9-58ef-4cb0-a6fa-0ed41d1ad057.json
 create mode 100644 packages/web-components/fast-foundation/src/utilities/root-active-element.ts

diff --git a/change/@microsoft-fast-foundation-452bb1d9-58ef-4cb0-a6fa-0ed41d1ad057.json b/change/@microsoft-fast-foundation-452bb1d9-58ef-4cb0-a6fa-0ed41d1ad057.json
new file mode 100644
index 00000000000..332f1fa1066
--- /dev/null
+++ b/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"
+}
diff --git a/packages/web-components/fast-foundation/src/toolbar/toolbar.ts b/packages/web-components/fast-foundation/src/toolbar/toolbar.ts
index abb667b799f..71b151341d8 100644
--- a/packages/web-components/fast-foundation/src/toolbar/toolbar.ts
+++ b/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();
+        }
     }
 
     /**
diff --git a/packages/web-components/fast-foundation/src/utilities/root-active-element.ts b/packages/web-components/fast-foundation/src/utilities/root-active-element.ts
new file mode 100644
index 00000000000..85999915cbc
--- /dev/null
+++ b/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;
+}