Added navigation hint disabled based on the event

Author: oleksandr-danylchenko

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>

packages/text-annotator-react/src/hooks/index.ts

@@ -1,2 +1,2 @@
 export * from './useRestoreSelectionCaret';
-export * from './useAnnouncePopupOpening';
+export * from './useAnnouncePopupNavigation';

packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts renamed to 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);