Added navigation hint disabled based on the event

recogito · Aug 22, 2024 · 2c1a1da · 2c1a1da
1 parent f09e612
commit 2c1a1da
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git 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
@@ -1,2 +1,2 @@
 export * from './useRestoreSelectionCaret';
-export * from './useAnnouncePopupOpening';
+export * from './useAnnouncePopupNavigation';
diff --git a/...eact/src/hooks/useAnnouncePopupOpening.ts → ...t/src/hooks/useAnnouncePopupNavigation.ts b/...eact/src/hooks/useAnnouncePopupOpening.ts → ...t/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);