From 52539154eacfb7111040611d631e372ed7e33942 Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Thu, 22 Aug 2024 15:26:28 +0300
Subject: [PATCH 01/19] Added navigation hint announcement on store's idling

---
 package-lock.json                             | 40 +++++++++++++-
 packages/text-annotator-react/package.json    |  4 +-
 .../TextAnnotatorPopup/TextAnnotatorPopup.tsx |  3 +-
 .../text-annotator-react/src/hooks/index.ts   |  3 +-
 .../src/hooks/useAnnouncePopupOpening.ts      | 55 +++++++++++++++++++
 5 files changed, 101 insertions(+), 4 deletions(-)
 create mode 100644 packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts

diff --git a/package-lock.json b/package-lock.json
index 4f2222bb..e64a9570 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1286,6 +1286,15 @@
         "url": "^0.11.0"
       }
     },
+    "node_modules/@react-aria/live-announcer": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@react-aria/live-announcer/-/live-announcer-3.3.4.tgz",
+      "integrity": "sha512-w8lxs35QrRrn6pBNzVfyGOeqWdxeVKf9U6bXIVwhq7rrTqRULL8jqy8RJIMfIs1s8G5FpwWYjyBOjl2g5Cu1iA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@recogito/react-text-annotator": {
       "resolved": "packages/text-annotator-react",
       "link": true
@@ -1653,6 +1662,15 @@
         "string-argv": "~0.3.1"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.12",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.12.tgz",
+      "integrity": "sha512-KMZNXiGibsW9kvZAO1Pam2JPTDBm+KSHMMHWdsyI/1DbIZjT2A6Gy3hblVXUMEDvUAKq+e0vL0X0o54owWji7g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@types/argparse": {
       "version": "1.0.38",
       "resolved": "https://registry.npmjs.org/@types/argparse/-/argparse-1.0.38.tgz",
@@ -3868,6 +3886,12 @@
         }
       }
     },
+    "node_modules/tslib": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+      "license": "0BSD"
+    },
     "node_modules/typescript": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
@@ -3887,6 +3911,18 @@
       "integrity": "sha512-mIDEX2ek50x0OlRgxryxsenE5XaQD4on5U2inY7RApK3SOJpofyw7uW2AyfMKkhAxXIceo2DeWGVGwyvng1GNQ==",
       "dev": true
     },
+    "node_modules/unique-random": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unique-random/-/unique-random-4.0.0.tgz",
+      "integrity": "sha512-lrIvMDF5M9DOCy6j1YdNkMkAZkQAd0Bk7PWazA/Kr3cy2L0NhanxdeFmBFg+tDUirNHrIcQf3K7oIeBTCXpIFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/universalify": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
@@ -4404,9 +4440,11 @@
         "@annotorious/core": "^3.0.0-rc.31",
         "@annotorious/react": "^3.0.0-rc.31",
         "@floating-ui/react": "^0.26.20",
+        "@react-aria/live-announcer": "^3.3.4",
         "@recogito/text-annotator": "3.0.0-rc.39",
         "@recogito/text-annotator-tei": "3.0.0-rc.39",
-        "CETEIcean": "^1.9.3"
+        "CETEIcean": "^1.9.3",
+        "unique-random": "^4.0.0"
       },
       "devDependencies": {
         "@types/react-dom": "^18.3.0",
diff --git a/packages/text-annotator-react/package.json b/packages/text-annotator-react/package.json
index 632db0bc..16de603b 100644
--- a/packages/text-annotator-react/package.json
+++ b/packages/text-annotator-react/package.json
@@ -48,8 +48,10 @@
     "@annotorious/core": "^3.0.0-rc.31",
     "@annotorious/react": "^3.0.0-rc.31",
     "@floating-ui/react": "^0.26.20",
+    "@react-aria/live-announcer": "^3.3.4",
     "@recogito/text-annotator": "3.0.0-rc.39",
     "@recogito/text-annotator-tei": "3.0.0-rc.39",
-    "CETEIcean": "^1.9.3"
+    "CETEIcean": "^1.9.3",
+    "unique-random": "^4.0.0"
   }
 }
diff --git a/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx b/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
index 98f37570..5eb8da09 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 { useRestoreSelectionCaret } from '../hooks';
+import { useAnnouncePopupOpening, useRestoreSelectionCaret } from '../hooks';
 import './TextAnnotatorPopup.css';
 
 interface TextAnnotationPopupProps {
@@ -128,6 +128,7 @@ export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
   }, [update]);
 
   useRestoreSelectionCaret({ floatingOpen: isOpen });
+  useAnnouncePopupOpening({ floatingOpen: isOpen });
 
   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 61a73d75..8442845c 100644
--- a/packages/text-annotator-react/src/hooks/index.ts
+++ b/packages/text-annotator-react/src/hooks/index.ts
@@ -1 +1,2 @@
-export { useRestoreSelectionCaret } from './useRestoreSelectionCaret';
+export * from './useRestoreSelectionCaret';
+export * from './useAnnouncePopupOpening';
diff --git a/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts b/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts
new file mode 100644
index 00000000..3611e1c6
--- /dev/null
+++ b/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts
@@ -0,0 +1,55 @@
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
+
+import { Origin, useAnnotationStore, useSelection } from '@annotorious/react';
+import type { TextAnnotation } from '@recogito/text-annotator';
+import { announce, clearAnnouncer, destroyAnnouncer } from '@react-aria/live-announcer';
+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: { floatingOpen: boolean }) => {
+  const { floatingOpen } = args;
+
+  const store = useAnnotationStore()
+  const { event } = useSelection<TextAnnotation>();
+
+  /**
+   * Initialize the `LiveAnnouncer` helper
+   * and append live areas to the DOM
+   */
+  useLayoutEffect(() => {
+    announce('', 'polite');
+    return () => destroyAnnouncer()
+  }, [])
+
+
+  const announcePopupNavigation = useCallback(() => {
+    /**
+     * Screen reader requires messages to always be unique!
+     * Otherwise, the hint will be announced only a single time.
+     * To imitate the uniqueness w/o mutating the message - we can append spaces at the end.
+     */
+    const spaces = Array.from({ length: uniqueRandom() }).map(() => ' ').join('');
+    announce(`Press Tab to move to Highlights and Comments Dialog ${spaces}`, 'polite');
+  }, []);
+
+  const idleTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (!floatingOpen || event?.type !== 'keydown') return;
+
+    const scheduleIdleAnnouncement = () => {
+      const { current: idleTimeout } = idleTimeoutRef;
+      if (idleTimeout)
+        clearTimeout(idleTimeout);
+
+      idleTimeoutRef.current = setTimeout(announcePopupNavigation, 1000);
+    }
+
+    scheduleIdleAnnouncement()
+    store.observe(scheduleIdleAnnouncement, { origin: Origin.LOCAL });
+
+    return () => store.unobserve(scheduleIdleAnnouncement)
+  }, [store, announcePopupNavigation, floatingOpen, event?.type]);
+};

From c3e469880a479c424da430a421cfe07eacc7b27d Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Thu, 22 Aug 2024 15:53:55 +0300
Subject: [PATCH 02/19] Removed message repetition on subsequent floating
 openings

---
 .../src/hooks/useAnnouncePopupOpening.ts      | 35 +++++++++++--------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts b/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts
index 3611e1c6..37c4eb0c 100644
--- a/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts
+++ b/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 
 import { Origin, useAnnotationStore, useSelection } from '@annotorious/react';
 import type { TextAnnotation } from '@recogito/text-annotator';
@@ -15,41 +15,46 @@ export const useAnnouncePopupOpening = (args: { floatingOpen: boolean }) => {
   const { event } = useSelection<TextAnnotation>();
 
   /**
-   * Initialize the `LiveAnnouncer` helper
-   * and append live areas to the DOM
+   * Initialize the `LiveAnnouncer` class and
+   * its `polite` announcements live area
    */
   useLayoutEffect(() => {
     announce('', 'polite');
     return () => destroyAnnouncer()
   }, [])
 
+  /**
+   * Screen reader requires messages to always be unique!
+   * Otherwise, the hint will be announced once per page.
+   */
+  const announcementSeed = useMemo(() => floatingOpen ? uniqueRandom() : 0, [floatingOpen])
 
   const announcePopupNavigation = useCallback(() => {
     /**
-     * Screen reader requires messages to always be unique!
-     * Otherwise, the hint will be announced only a single time.
-     * To imitate the uniqueness w/o mutating the message - we can append spaces at the end.
+     * To imitate the uniqueness of the announced message
+     * w/o mutating it - we can append spaces at the end.
      */
-    const spaces = Array.from({ length: uniqueRandom() }).map(() => ' ').join('');
-    announce(`Press Tab to move to Highlights and Comments Dialog ${spaces}`, 'polite');
-  }, []);
+    const uniqueSpaces = Array.from({ length: announcementSeed }).map(() => ' ').join('');
+    announce(`Press Tab to move to Highlights and Comments Dialog ${uniqueSpaces}`, 'polite');
+  }, [announcementSeed]);
 
+  const idleTimeoutMs = 700;
   const idleTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
     if (!floatingOpen || event?.type !== 'keydown') return;
 
     const scheduleIdleAnnouncement = () => {
-      const { current: idleTimeout } = idleTimeoutRef;
-      if (idleTimeout)
-        clearTimeout(idleTimeout);
-
-      idleTimeoutRef.current = setTimeout(announcePopupNavigation, 1000);
+      clearTimeout(idleTimeoutRef.current);
+      idleTimeoutRef.current = setTimeout(announcePopupNavigation, idleTimeoutMs);
     }
 
     scheduleIdleAnnouncement()
     store.observe(scheduleIdleAnnouncement, { origin: Origin.LOCAL });
 
-    return () => store.unobserve(scheduleIdleAnnouncement)
+    return () => {
+      clearTimeout(idleTimeoutRef.current);
+      store.unobserve(scheduleIdleAnnouncement);
+    }
   }, [store, announcePopupNavigation, floatingOpen, event?.type]);
 };

From ce63a24d0ff6060ae7c4cf78f937a4b2efc83f16 Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Thu, 22 Aug 2024 16:02:06 +0300
Subject: [PATCH 03/19] Made navigation message configurable

---
 .../TextAnnotatorPopup/TextAnnotatorPopup.tsx | 12 +++++---
 .../src/hooks/useAnnouncePopupOpening.ts      | 29 ++++++++++---------
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx b/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
index 5eb8da09..c10b878c 100644
--- a/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
+++ b/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
@@ -1,4 +1,4 @@
-import React, { PointerEvent, ReactNode, useCallback, useEffect, useState } from 'react';
+import React, { FC, PointerEvent, ReactNode, useCallback, useEffect, useState } from 'react';
 import {
   autoUpdate,
   flip,
@@ -21,6 +21,8 @@ import './TextAnnotatorPopup.css';
 
 interface TextAnnotationPopupProps {
 
+  popupNavigationMessage?: string;
+
   popup(props: TextAnnotatorPopupProps): ReactNode;
 
 }
@@ -31,7 +33,9 @@ export interface TextAnnotatorPopupProps {
 
 }
 
-export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
+export const TextAnnotatorPopup: FC<TextAnnotationPopupProps> = (props) => {
+
+  const { popup, popupNavigationMessage } = props;
 
   const r = useAnnotator<TextAnnotator>();
 
@@ -128,7 +132,7 @@ export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
   }, [update]);
 
   useRestoreSelectionCaret({ floatingOpen: isOpen });
-  useAnnouncePopupOpening({ floatingOpen: isOpen });
+  useAnnouncePopupOpening({ message: popupNavigationMessage, floatingOpen: isOpen });
 
   return isOpen && selected.length > 0 ? (
     <FloatingPortal>
@@ -151,7 +155,7 @@ export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
           style={floatingStyles}
           {...getFloatingProps()}
           {...getStopEventsPropagationProps()}>
-          {props.popup({ selected })}
+          {popup({ selected })}
 
           {/* It lets keyboard/sr users to know that the dialog closes when they focus out of its */}
           <button className="popup-close-message" onClick={handleClose}>
diff --git a/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts b/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts
index 37c4eb0c..04b38b34 100644
--- a/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts
+++ b/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts
@@ -2,16 +2,19 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react'
 
 import { Origin, useAnnotationStore, useSelection } from '@annotorious/react';
 import type { TextAnnotation } from '@recogito/text-annotator';
-import { announce, clearAnnouncer, destroyAnnouncer } from '@react-aria/live-announcer';
+import { announce, destroyAnnouncer } from '@react-aria/live-announcer';
 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: { floatingOpen: boolean }) => {
-  const { floatingOpen } = args;
+export const useAnnouncePopupOpening = (args: { message?: string, floatingOpen: boolean }) => {
+  const {
+    message = 'Press Tab to move to Notes Dialog',
+    floatingOpen
+  } = args;
 
-  const store = useAnnotationStore()
+  const store = useAnnotationStore();
   const { event } = useSelection<TextAnnotation>();
 
   /**
@@ -20,14 +23,14 @@ export const useAnnouncePopupOpening = (args: { floatingOpen: boolean }) => {
    */
   useLayoutEffect(() => {
     announce('', 'polite');
-    return () => destroyAnnouncer()
-  }, [])
+    return () => destroyAnnouncer();
+  }, []);
 
   /**
    * Screen reader requires messages to always be unique!
    * Otherwise, the hint will be announced once per page.
    */
-  const announcementSeed = useMemo(() => floatingOpen ? uniqueRandom() : 0, [floatingOpen])
+  const announcementSeed = useMemo(() => floatingOpen ? uniqueRandom() : 0, [floatingOpen]);
 
   const announcePopupNavigation = useCallback(() => {
     /**
@@ -35,8 +38,8 @@ export const useAnnouncePopupOpening = (args: { floatingOpen: boolean }) => {
      * w/o mutating it - we can append spaces at the end.
      */
     const uniqueSpaces = Array.from({ length: announcementSeed }).map(() => ' ').join('');
-    announce(`Press Tab to move to Highlights and Comments Dialog ${uniqueSpaces}`, 'polite');
-  }, [announcementSeed]);
+    announce(`${message} ${uniqueSpaces}`, 'polite');
+  }, [message, announcementSeed]);
 
   const idleTimeoutMs = 700;
   const idleTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -47,14 +50,14 @@ export const useAnnouncePopupOpening = (args: { floatingOpen: boolean }) => {
     const scheduleIdleAnnouncement = () => {
       clearTimeout(idleTimeoutRef.current);
       idleTimeoutRef.current = setTimeout(announcePopupNavigation, idleTimeoutMs);
-    }
+    };
 
-    scheduleIdleAnnouncement()
+    scheduleIdleAnnouncement();
     store.observe(scheduleIdleAnnouncement, { origin: Origin.LOCAL });
 
     return () => {
       clearTimeout(idleTimeoutRef.current);
       store.unobserve(scheduleIdleAnnouncement);
-    }
-  }, [store, announcePopupNavigation, floatingOpen, event?.type]);
+    };
+  }, [floatingOpen, event?.type, announcePopupNavigation, store]);
 };

From fc9bc7a16d52ce5c5338f3f840b7cd384d5c93ac Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Thu, 22 Aug 2024 16:19:14 +0300
Subject: [PATCH 04/19] Removed keyboard event limitation for the live area

---
 .../text-annotator-react/src/hooks/useAnnouncePopupOpening.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts b/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts
index 04b38b34..88e61d56 100644
--- a/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts
+++ b/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts
@@ -45,7 +45,7 @@ export const useAnnouncePopupOpening = (args: { message?: string, floatingOpen:
   const idleTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
-    if (!floatingOpen || event?.type !== 'keydown') return;
+    if (!floatingOpen) return;
 
     const scheduleIdleAnnouncement = () => {
       clearTimeout(idleTimeoutRef.current);

From 7b61c22a1f19cf1bc85abe3b1d7823495fe64fd9 Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Thu, 22 Aug 2024 16:20:18 +0300
Subject: [PATCH 05/19] Removed live area init when there's no message present

---
 .../text-annotator-react/src/hooks/useAnnouncePopupOpening.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts b/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts
index 88e61d56..e1a7197f 100644
--- a/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts
+++ b/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts
@@ -22,6 +22,8 @@ export const useAnnouncePopupOpening = (args: { message?: string, floatingOpen:
    * its `polite` announcements live area
    */
   useLayoutEffect(() => {
+    if (!message) return;
+
     announce('', 'polite');
     return () => destroyAnnouncer();
   }, []);
@@ -45,7 +47,7 @@ export const useAnnouncePopupOpening = (args: { message?: string, floatingOpen:
   const idleTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
-    if (!floatingOpen) return;
+    if (!floatingOpen || !message) return;
 
     const scheduleIdleAnnouncement = () => {
       clearTimeout(idleTimeoutRef.current);

From f09e612be21605e64f4ed60b9f6168ce9e89d7aa Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Thu, 22 Aug 2024 16:22:07 +0300
Subject: [PATCH 06/19] Revert "Removed keyboard event limitation for the live
 area"

This reverts commit fc9bc7a1
---
 .../src/hooks/useAnnouncePopupOpening.ts                    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts b/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts
index e1a7197f..0745c54e 100644
--- a/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts
+++ b/packages/text-annotator-react/src/hooks/useAnnouncePopupOpening.ts
@@ -26,7 +26,7 @@ export const useAnnouncePopupOpening = (args: { message?: string, floatingOpen:
 
     announce('', 'polite');
     return () => destroyAnnouncer();
-  }, []);
+  }, [message]);
 
   /**
    * Screen reader requires messages to always be unique!
@@ -47,7 +47,7 @@ export const useAnnouncePopupOpening = (args: { message?: string, floatingOpen:
   const idleTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
-    if (!floatingOpen || !message) return;
+    if (!floatingOpen || event?.type !== 'keydown' || !message) return;
 
     const scheduleIdleAnnouncement = () => {
       clearTimeout(idleTimeoutRef.current);
@@ -61,5 +61,5 @@ export const useAnnouncePopupOpening = (args: { message?: string, floatingOpen:
       clearTimeout(idleTimeoutRef.current);
       store.unobserve(scheduleIdleAnnouncement);
     };
-  }, [floatingOpen, event?.type, announcePopupNavigation, store]);
+  }, [floatingOpen, event?.type, message, announcePopupNavigation, store]);
 };

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 07/19] 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);

From 1fff84442bfc16aa192bd45c09597693d731e0cb Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Thu, 22 Aug 2024 20:09:37 +0300
Subject: [PATCH 08/19] Added random generator into the hook

---
 .../src/hooks/useAnnouncePopupNavigation.ts                 | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/text-annotator-react/src/hooks/useAnnouncePopupNavigation.ts b/packages/text-annotator-react/src/hooks/useAnnouncePopupNavigation.ts
index 61ae8958..474d6bf3 100644
--- a/packages/text-annotator-react/src/hooks/useAnnouncePopupNavigation.ts
+++ b/packages/text-annotator-react/src/hooks/useAnnouncePopupNavigation.ts
@@ -5,9 +5,6 @@ import type { TextAnnotation } from '@recogito/text-annotator';
 import { announce, destroyAnnouncer } from '@react-aria/live-announcer';
 import { exhaustiveUniqueRandom } from 'unique-random';
 
-// Generate random numbers that do not repeat until the entire range has appeared
-const uniqueRandom = exhaustiveUniqueRandom(1, 300);
-
 interface AnnouncePopupOpeningArgs {
     message?: string;
     floatingOpen: boolean;
@@ -24,6 +21,9 @@ export const useAnnouncePopupNavigation = (args: AnnouncePopupOpeningArgs) => {
   const store = useAnnotationStore();
   const { event } = useSelection<TextAnnotation>();
 
+  // Generate random numbers that do not repeat until the entire 1-10000 range has appeared
+  const uniqueRandom = useCallback(exhaustiveUniqueRandom(1, 10000), []);
+
   /**
    * Initialize the `LiveAnnouncer` class and
    * its `polite` announcements live area

From dd45bcd8f89cd8ee160061e4110186c2bd5df23b Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Fri, 23 Aug 2024 16:00:11 +0300
Subject: [PATCH 09/19] Made `idle` timeout configurable

---
 .../src/hooks/useAnnouncePopupNavigation.ts                  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/text-annotator-react/src/hooks/useAnnouncePopupNavigation.ts b/packages/text-annotator-react/src/hooks/useAnnouncePopupNavigation.ts
index 474d6bf3..4588135e 100644
--- a/packages/text-annotator-react/src/hooks/useAnnouncePopupNavigation.ts
+++ b/packages/text-annotator-react/src/hooks/useAnnouncePopupNavigation.ts
@@ -7,6 +7,7 @@ import { exhaustiveUniqueRandom } from 'unique-random';
 
 interface AnnouncePopupOpeningArgs {
     message?: string;
+    idle?: number;
     floatingOpen: boolean;
     disabled?: boolean;
 }
@@ -14,6 +15,7 @@ interface AnnouncePopupOpeningArgs {
 export const useAnnouncePopupNavigation = (args: AnnouncePopupOpeningArgs) => {
   const {
     message = 'Press Tab to move to Notes Dialog',
+    idle = 700,
     floatingOpen,
     disabled = false
   } = args;
@@ -50,7 +52,6 @@ export const useAnnouncePopupNavigation = (args: AnnouncePopupOpeningArgs) => {
     announce(`${message} ${uniqueSpaces}`, 'polite');
   }, [message, announcementSeed]);
 
-  const idleTimeoutMs = 700;
   const idleTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
@@ -58,7 +59,7 @@ export const useAnnouncePopupNavigation = (args: AnnouncePopupOpeningArgs) => {
 
     const scheduleIdleAnnouncement = () => {
       clearTimeout(idleTimeoutRef.current);
-      idleTimeoutRef.current = setTimeout(announcePopupNavigation, idleTimeoutMs);
+      idleTimeoutRef.current = setTimeout(announcePopupNavigation, idle);
     };
 
     scheduleIdleAnnouncement();

From 1f3ba2968f58983c5e7c3ee8b5cbd6fffb0694c7 Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Fri, 23 Aug 2024 16:09:21 +0300
Subject: [PATCH 10/19] Added reaction to the `disabled` change

---
 .../src/hooks/useAnnouncePopupNavigation.ts               | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/text-annotator-react/src/hooks/useAnnouncePopupNavigation.ts b/packages/text-annotator-react/src/hooks/useAnnouncePopupNavigation.ts
index 4588135e..314143ba 100644
--- a/packages/text-annotator-react/src/hooks/useAnnouncePopupNavigation.ts
+++ b/packages/text-annotator-react/src/hooks/useAnnouncePopupNavigation.ts
@@ -9,6 +9,7 @@ interface AnnouncePopupOpeningArgs {
     message?: string;
     idle?: number;
     floatingOpen: boolean;
+    floatingFocused?: boolean;
     disabled?: boolean;
 }
 
@@ -31,11 +32,11 @@ export const useAnnouncePopupNavigation = (args: AnnouncePopupOpeningArgs) => {
    * its `polite` announcements live area
    */
   useLayoutEffect(() => {
-    if (!message) return;
+    if (disabled || !message) return;
 
     announce('', 'polite');
     return () => destroyAnnouncer();
-  }, [message]);
+  }, [disabled, message]);
 
   /**
    * Screen reader requires messages to always be unique!
@@ -69,5 +70,6 @@ export const useAnnouncePopupNavigation = (args: AnnouncePopupOpeningArgs) => {
       clearTimeout(idleTimeoutRef.current);
       store.unobserve(scheduleIdleAnnouncement);
     };
-  }, [floatingOpen, event?.type, message, announcePopupNavigation, store]);
+  }, [disabled, floatingOpen, event?.type, message, announcePopupNavigation, store]);
+
 };

From faa30fed508ad29080cae8a56a7c62cefb316b31 Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Fri, 23 Aug 2024 16:18:49 +0300
Subject: [PATCH 11/19] Added navigation announce dismissal when the floating
 is already focused

---
 .../TextAnnotatorPopup/TextAnnotatorPopup.tsx    | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx b/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
index 26f09e2b..e97ee19f 100644
--- a/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
+++ b/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
@@ -43,10 +43,14 @@ export const TextAnnotatorPopup: FC<TextAnnotationPopupProps> = (props) => {
   const annotation = selected[0]?.annotation;
 
   const [isOpen, setOpen] = useState(selected?.length > 0);
+  const handleClose = () => r?.cancelSelected();
 
-  const handleClose = () => {
-    r?.cancelSelected();
-  }
+  const [isFloatingFocused, setFloatingFocused] = useState(false);
+  const handleFloatingFocus = () => setFloatingFocused(true);
+  const handleFloatingBlur = () => setFloatingFocused(false);
+  useEffect(() => {
+    if (!isOpen) handleFloatingBlur();
+  }, [isOpen, handleFloatingBlur]);
 
   const { refs, floatingStyles, update, context } = useFloating({
     placement: 'top',
@@ -64,7 +68,7 @@ export const TextAnnotatorPopup: FC<TextAnnotationPopupProps> = (props) => {
            */
           event instanceof FocusEvent
         ) {
-          r?.cancelSelected();
+          handleClose();
         }
       }
     },
@@ -138,7 +142,7 @@ export const TextAnnotatorPopup: FC<TextAnnotationPopupProps> = (props) => {
    * because the focus isn't shifted to the popup automatically then
    */
   useAnnouncePopupNavigation({
-    disabled: event?.type !== 'keydown',
+    disabled: isFloatingFocused,
     floatingOpen: isOpen,
     message: popupNavigationMessage,
   });
@@ -162,6 +166,8 @@ export const TextAnnotatorPopup: FC<TextAnnotationPopupProps> = (props) => {
           className="annotation-popup text-annotation-popup not-annotatable"
           ref={refs.setFloating}
           style={floatingStyles}
+          onFocus={handleFloatingFocus}
+          onBlur={handleFloatingBlur}
           {...getFloatingProps()}
           {...getStopEventsPropagationProps()}>
           {popup({ selected })}

From cacc57586c2955e65fd07795d96cde4c6add07f9 Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Wed, 28 Aug 2024 18:43:18 +0300
Subject: [PATCH 12/19] Removed testing log

---
 .../src/TextAnnotatorPopup/TextAnnotatorPopup.tsx                | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx b/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
index 76cac2ea..9488c188 100644
--- a/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
+++ b/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
@@ -60,7 +60,6 @@ export const TextAnnotatorPopup: FC<TextAnnotationPopupProps> = (props) => {
 
       if (!open) {
         if (reason === 'escape-key' || reason === 'focus-out') {
-          console.log('FOCUS OUT!');
           handleClose();
         }
       }

From 1c970111751a4ffa96c5d861220932d5e005aa44 Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Wed, 28 Aug 2024 19:30:00 +0300
Subject: [PATCH 13/19] Added back global hooks re-export

---
 packages/text-annotator-react/src/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/text-annotator-react/src/index.ts b/packages/text-annotator-react/src/index.ts
index 645d635f..1c1ab44b 100644
--- a/packages/text-annotator-react/src/index.ts
+++ b/packages/text-annotator-react/src/index.ts
@@ -1,4 +1,5 @@
 export * from './tei';
+export * from './hooks';
 export * from './TextAnnotator';
 export * from './TextAnnotatorPopup';
 export * from './TextAnnotatorPlugin';

From 37cdb131ddbb4839605b337808d252d2ba4ffd7c Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Mon, 7 Oct 2024 18:38:20 +0300
Subject: [PATCH 14/19] Renamed `popupNavigationMessage` ->
 `ariaNavigationMessage`

---
 .../src/TextAnnotatorPopup/TextAnnotatorPopup.tsx           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx b/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
index 5d201adf..1d0ba28f 100644
--- a/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
+++ b/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
@@ -22,7 +22,7 @@ import './TextAnnotatorPopup.css';
 
 interface TextAnnotationPopupProps {
 
-  popupNavigationMessage?: string;
+  ariaNavigationMessage?: string;
 
   ariaCloseWarning?: string;
 
@@ -42,7 +42,7 @@ export interface TextAnnotationPopupContentProps {
 
 export const TextAnnotatorPopup: FC<TextAnnotationPopupProps> = (props) => {
 
-  const { popup, popupNavigationMessage } = props;
+  const { popup, ariaNavigationMessage } = props;
 
   const r = useAnnotator<TextAnnotator>();
 
@@ -145,7 +145,7 @@ export const TextAnnotatorPopup: FC<TextAnnotationPopupProps> = (props) => {
   useAnnouncePopupNavigation({
     disabled: isFloatingFocused,
     floatingOpen: isOpen,
-    message: popupNavigationMessage,
+    message: ariaNavigationMessage,
   });
 
   return isOpen && annotation ? (

From 820c6282de86ddba2dbaac27620c09626658db38 Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Thu, 10 Oct 2024 16:44:34 +0300
Subject: [PATCH 15/19] Added missing `useCallback` for the focus handlers

---
 .../TextAnnotatorPopup/TextAnnotatorPopup.tsx    | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx b/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
index 1d0ba28f..dc5e6771 100644
--- a/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
+++ b/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
@@ -53,12 +53,12 @@ export const TextAnnotatorPopup: FC<TextAnnotationPopupProps> = (props) => {
   const [isOpen, setOpen] = useState(selected?.length > 0);
   const handleClose = () => r?.cancelSelected();
 
-  const [isFloatingFocused, setFloatingFocused] = useState(false);
-  const handleFloatingFocus = () => setFloatingFocused(true);
-  const handleFloatingBlur = () => setFloatingFocused(false);
+  const [isFocused, setFocused] = useState(false);
+  const handleFocus = useCallback(() => setFocused(true), []);
+  const handleBlur = useCallback(() => setFocused(false), []);
   useEffect(() => {
-    if (!isOpen) handleFloatingBlur();
-  }, [isOpen, handleFloatingBlur]);
+    if (!isOpen) handleBlur();
+  }, [isOpen, handleBlur]);
 
   const { refs, floatingStyles, update, context } = useFloating({
     placement: isMobile() ? 'bottom' : 'top',
@@ -143,7 +143,7 @@ export const TextAnnotatorPopup: FC<TextAnnotationPopupProps> = (props) => {
    * because the focus isn't shifted to the popup automatically then
    */
   useAnnouncePopupNavigation({
-    disabled: isFloatingFocused,
+    disabled: isFocused,
     floatingOpen: isOpen,
     message: ariaNavigationMessage,
   });
@@ -160,8 +160,8 @@ export const TextAnnotatorPopup: FC<TextAnnotationPopupProps> = (props) => {
           className="a9s-popup r6o-popup annotation-popup r6o-text-popup not-annotatable"
           ref={refs.setFloating}
           style={floatingStyles}
-          onFocus={handleFloatingFocus}
-          onBlur={handleFloatingBlur}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
           {...getFloatingProps()}
           {...getStopEventsPropagationProps()}>
           {popup({

From 0f0f8c311de20149e5eff694490a90c3cd57610f Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Tue, 29 Oct 2024 15:45:54 +0200
Subject: [PATCH 16/19] Added proper event handlers population to the floating

---
 .../src/TextAnnotatorPopup/TextAnnotatorPopup.tsx        | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx b/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
index eb211dbf..a9276599 100644
--- a/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
+++ b/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
@@ -155,10 +155,11 @@ export const TextAnnotatorPopup: FC<TextAnnotationPopupProps> = (props) => {
           className="a9s-popup r6o-popup annotation-popup r6o-text-popup not-annotatable"
           ref={refs.setFloating}
           style={floatingStyles}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          {...getFloatingProps()}
-          {...getStopEventsPropagationProps()}>
+          {...getFloatingProps({
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            ...getStopEventsPropagationProps()
+          })}>
           {popup({
             annotation: selected[0].annotation,
             editable: selected[0].editable,

From c9a0727092348aafe0faeddb07a979dd55be1b7d Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Mon, 4 Nov 2024 14:25:00 +0200
Subject: [PATCH 17/19] Added spacing

---
 .../src/TextAnnotatorPopup/TextAnnotatorPopup.tsx                | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx b/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
index 0981b52b..ec5c1a8b 100644
--- a/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
+++ b/packages/text-annotator-react/src/TextAnnotatorPopup/TextAnnotatorPopup.tsx
@@ -19,6 +19,7 @@ import {
 
 import { isMobile } from './isMobile';
 import { useAnnouncePopupNavigation } from '../hooks';
+
 import './TextAnnotatorPopup.css';
 
 interface TextAnnotationPopupProps {

From 9456ade018462e2f5149af7409e1c06b2be2362d Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Mon, 11 Nov 2024 13:54:40 +0200
Subject: [PATCH 18/19] Removed react-specific pointer event usage

---
 .../src/TextAnnotationPopup/TextAnnotationPopup.tsx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.tsx b/packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.tsx
index f6f0031e..b1ec16a9 100644
--- a/packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.tsx
+++ b/packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.tsx
@@ -1,4 +1,4 @@
-import { FC, PointerEvent, ReactNode, useCallback, useRef, useEffect, useMemo, useState } from 'react';
+import { FC, ReactNode, useCallback, useRef, useEffect, useMemo, useState } from 'react';
 
 import { useAnnotator, useSelection } from '@annotorious/react';
 import { isRevived, NOT_ANNOTATABLE_CLASS, type TextAnnotation, type TextAnnotator } from '@recogito/text-annotator';

From f8029aedfcacc3788c9c6fdc2b51a99d5ab6af17 Mon Sep 17 00:00:00 2001
From: Oleksandr Danylchenko <oleksandr.danylchenko@binary-studio.com>
Date: Thu, 21 Nov 2024 17:33:36 +0200
Subject: [PATCH 19/19] Formatting

---
 .../src/TextAnnotationPopup/TextAnnotationPopup.tsx       | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.tsx b/packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.tsx
index baf5d494..e7deafc9 100644
--- a/packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.tsx
+++ b/packages/text-annotator-react/src/TextAnnotationPopup/TextAnnotationPopup.tsx
@@ -62,8 +62,6 @@ const toViewportBounds = (annotationBounds: DOMRect, container: HTMLElement): DO
 
 export const TextAnnotationPopup: FC<TextAnnotationPopupProps> = (props) => {
 
-  const { popup, ariaNavigationMessage } = props;
-
   const r = useAnnotator<TextAnnotator>();
 
   const { selected, event } = useSelection<TextAnnotation>();
@@ -165,7 +163,7 @@ export const TextAnnotationPopup: FC<TextAnnotationPopupProps> = (props) => {
   useAnnouncePopupNavigation({
     disabled: isFocused,
     floatingOpen: isOpen,
-    message: ariaNavigationMessage,
+    message: props.ariaNavigationMessage,
   });
 
   return isOpen && annotation ? (
@@ -185,12 +183,12 @@ export const TextAnnotationPopup: FC<TextAnnotationPopupProps> = (props) => {
             onBlur: handleBlur,
             ...getStopEventsPropagationProps()
           })}>
-          {popup({
+          {props.popup({
             annotation: selected[0].annotation,
             editable: selected[0].editable,
             event
           })}
-{props.arrow && (
+          {props.arrow && (
             <FloatingArrow
               ref={arrowRef}
               context={context}