From c66014b3fe5d4ffb061439db4a880dce999f25c6 Mon Sep 17 00:00:00 2001
From: jspurlin <jspurlin@microsoft.com>
Date: Fri, 25 Aug 2023 08:02:30 -0700
Subject: [PATCH 1/2] Keytip: Make keytip data align with which instance is
 visible (for duplicate registrations)

---
 .../components/KeytipLayer/KeytipLayer.base.tsx  | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx b/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx
index d9de9b12f361db..6f539afcfd1d7b 100644
--- a/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx
+++ b/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx
@@ -12,6 +12,7 @@ import {
   Async,
   initializeComponentRef,
   KeyCodes,
+  isElementVisibleAndNotHidden,
 } from '../../Utilities';
 import { KeytipManager } from '../../utilities/keytips/KeytipManager';
 import { KeytipTree } from './KeytipTree';
@@ -376,10 +377,23 @@ export class KeytipLayerBase extends React.Component<IKeytipLayerProps, IKeytipL
         keytipId = sequencesToID(mergeOverflows(keytip.keySequences, keytip.overflowSetSequence));
       }
       seenIds[keytipId] = seenIds[keytipId] ? seenIds[keytipId] + 1 : 1;
-      return keytip.visible && seenIds[keytipId] === 1;
+
+      // Return true only if the keytip is visible and the corresponding target is also visible
+      return keytip.visible && this._isKeytipInstanceTargetVisible(keytip.keySequences, seenIds[keytipId]);
     });
   }
 
+  private _isKeytipInstanceTargetVisible = (keySequences: string[], instanceCount: number): boolean => {
+    const targetSelector = ktpTargetFromSequences(keySequences);
+    const matchingElements = document.querySelectorAll(targetSelector);
+
+    // If there are multiple elements for the keytip sequence, return true if the element instance
+    // that corresponds to the keytip instance is visible, otherwise return if there is only one instance
+    return matchingElements.length > 1 && instanceCount <= matchingElements.length
+      ? isElementVisibleAndNotHidden(matchingElements[instanceCount - 1] as HTMLElement)
+      : instanceCount === 1;
+  };
+
   private _onDismiss = (ev?: React.MouseEvent<HTMLElement>): void => {
     // if we are in keytip mode, then exit keytip mode
     if (this.state.inKeytipMode) {

From 9cfb4454591aacf6ddc378197d425b82d57b7157 Mon Sep 17 00:00:00 2001
From: jspurlin <jspurlin@microsoft.com>
Date: Fri, 25 Aug 2023 08:07:24 -0700
Subject: [PATCH 2/2] changefile

---
 ...luentui-react-26552add-8a6c-42a8-93ca-965284270f1f.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-26552add-8a6c-42a8-93ca-965284270f1f.json

diff --git a/change/@fluentui-react-26552add-8a6c-42a8-93ca-965284270f1f.json b/change/@fluentui-react-26552add-8a6c-42a8-93ca-965284270f1f.json
new file mode 100644
index 00000000000000..6d6c60570229f2
--- /dev/null
+++ b/change/@fluentui-react-26552add-8a6c-42a8-93ca-965284270f1f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Keytip: Make keytip data align with which instance is visible (for duplicate registrations)",
+  "packageName": "@fluentui/react",
+  "email": "jspurlin@microsoft.com",
+  "dependentChangeType": "patch"
+}