From 1b6c1fed18ef2ddbc1ab9b6522d4524dd18ff4f2 Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Thu, 22 Aug 2024 19:11:21 +0300
Subject: [PATCH] Added navigation hint disabled based on the event

---
 .../src/TextAnnotatorPopup/TextAnnotatorPopup.tsx   | 13 +++++++++++--
 packages/text-annotator-react/src/hooks/index.ts    |  2 +-
 ...opupOpening.ts => useAnnouncePopupNavigation.ts} | 13 ++++++++++---
 3 files changed, 22 insertions(+), 6 deletions(-)
 rename packages/text-annotator-react/src/hooks/{useAnnouncePopupOpening.ts => useAnnouncePopupNavigation.ts} (87%)

diff --git a/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx b/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
index c10b878c..02c128fd 100644
--- a/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
+++ b/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
@@ -16,7 +16,7 @@ import {
 import { useAnnotator, useSelection } from '@annotorious/react';
 import type { TextAnnotation, TextAnnotator } from '@recogito/text-annotator';
 
-import { useAnnouncePopupOpening, useRestoreSelectionCaret } from '../hooks';
+import { useAnnouncePopupNavigation, useRestoreSelectionCaret } from '../hooks';
 import './TextAnnotatorPopup.css';
 
 interface TextAnnotationPopupProps {
@@ -132,7 +132,16 @@ export const TextAnnotatorPopup: FC<TextAnnotationPopupProps> = (props) => {
   }, [update]);
 
   useRestoreSelectionCaret({ floatingOpen: isOpen });
-  useAnnouncePopupOpening({ message: popupNavigationMessage, floatingOpen: isOpen });
+
+  /**
+   * Announce the navigation hint only on the keyboard selection,
+   * because the focus isn't shifted to the popup automatically then
+   */
+  useAnnouncePopupNavigation({
+    disabled: event?.type !== 'keydown',
+    floatingOpen: isOpen,
+    message: popupNavigationMessage,
+  });
 
   return isOpen && selected.length > 0 ? (
     <FloatingPortal>
diff --git a/packages/text-annotator-react/src/hooks/index.ts b/packages/text-annotator-react/src/hooks/index.ts
index 8442845c..dbdefdd8 100644
--- a/packages/text-annotator-react/src/hooks/index.ts
+++ b/packages/text-annotator-react/src/hooks/index.ts
@@ -1,2 +1,2 @@
 export * from './useRestoreSelectionCaret';
-export * from './useAnnouncePopupOpening';
+export * from './useAnnouncePopupNavigation';
diff --git a/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts b/packages/text-annotator-react/src/hooks/useAnnouncePopupNavigation.ts
similarity index 87%
rename from packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts
rename to packages/text-annotator-react/src/hooks/useAnnouncePopupNavigation.ts
index 0745c54e..61ae8958 100644
--- a/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts
+++ b/packages/text-annotator-react/src/hooks/useAnnouncePopupNavigation.ts
@@ -8,10 +8,17 @@ import { exhaustiveUniqueRandom } from 'unique-random';
 // Generate random numbers that do not repeat until the entire range has appeared
 const uniqueRandom = exhaustiveUniqueRandom(1, 300);
 
-export const useAnnouncePopupOpening = (args: { message?: string, floatingOpen: boolean }) => {
+interface AnnouncePopupOpeningArgs {
+    message?: string;
+    floatingOpen: boolean;
+    disabled?: boolean;
+}
+
+export const useAnnouncePopupNavigation = (args: AnnouncePopupOpeningArgs) => {
   const {
     message = 'Press Tab to move to Notes Dialog',
-    floatingOpen
+    floatingOpen,
+    disabled = false
   } = args;
 
   const store = useAnnotationStore();
@@ -47,7 +54,7 @@ export const useAnnouncePopupOpening = (args: { message?: string, floatingOpen:
   const idleTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
-    if (!floatingOpen || event?.type !== 'keydown' || !message) return;
+    if (disabled || !floatingOpen || !message) return;
 
     const scheduleIdleAnnouncement = () => {
       clearTimeout(idleTimeoutRef.current);