From b83ea98670de23056c9d24c4806c8ba3434d10b9 Mon Sep 17 00:00:00 2001
From: Robert Knight <robert@microbit.org>
Date: Tue, 19 Nov 2024 14:16:27 +0000
Subject: [PATCH 1/3] Debounce estimated action aria-live announcement

---
 src/components/PredictedAction.tsx | 38 ++++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/components/PredictedAction.tsx b/src/components/PredictedAction.tsx
index 5b9846f83..a76da0e3f 100644
--- a/src/components/PredictedAction.tsx
+++ b/src/components/PredictedAction.tsx
@@ -1,14 +1,44 @@
-import { HStack, Text, VisuallyHidden, VStack } from "@chakra-ui/react";
+import {
+  HStack,
+  Text,
+  usePrevious,
+  VisuallyHidden,
+  VStack,
+} from "@chakra-ui/react";
+import debounce from "lodash.debounce";
+import { useEffect, useMemo, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
+import { useStore } from "../store";
 import { tourElClassname } from "../tours";
 import InfoToolTip from "./InfoToolTip";
 import LedIcon from "./LedIcon";
 import { predictedActionDisplayWidth } from "./LiveGraphPanel";
-import { useStore } from "../store";
 
 const PredictedAction = () => {
   const intl = useIntl();
   const predictionResult = useStore((s) => s.predictionResult);
+  const [estimatedAction, setEstimatedAction] = useState<string>(
+    intl.formatMessage({ id: "unknown" })
+  );
+  const debouncedEstimatedAction = useMemo(
+    () =>
+      debounce((name: string | undefined) => {
+        if (name) {
+          setEstimatedAction(name);
+        } else {
+          setEstimatedAction(intl.formatMessage({ id: "unknown" }));
+        }
+      }, 500),
+    [intl]
+  );
+
+  const prevEstimatedAction = usePrevious(predictionResult?.detected?.name);
+  useEffect(() => {
+    if (prevEstimatedAction !== predictionResult?.detected?.name) {
+      debouncedEstimatedAction(predictionResult?.detected?.name);
+    }
+  }, [debouncedEstimatedAction, predictionResult, prevEstimatedAction]);
+
   return (
     <VStack
       className={tourElClassname.estimatedAction}
@@ -22,9 +52,7 @@ const PredictedAction = () => {
         <FormattedMessage
           id="estimated-action-aria"
           values={{
-            action:
-              predictionResult?.detected?.name ??
-              intl.formatMessage({ id: "unknown" }),
+            action: estimatedAction,
           }}
         />
       </VisuallyHidden>

From a4b16dcd0844452662c8b3447f4d1e5928fa76ae Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Fri, 22 Nov 2024 12:26:32 +0000
Subject: [PATCH 2/3] Simplified

---
 src/components/PredictedAction.tsx | 42 ++++++++++--------------------
 1 file changed, 14 insertions(+), 28 deletions(-)

diff --git a/src/components/PredictedAction.tsx b/src/components/PredictedAction.tsx
index a76da0e3f..843130c2c 100644
--- a/src/components/PredictedAction.tsx
+++ b/src/components/PredictedAction.tsx
@@ -1,10 +1,4 @@
-import {
-  HStack,
-  Text,
-  usePrevious,
-  VisuallyHidden,
-  VStack,
-} from "@chakra-ui/react";
+import { HStack, Text, VisuallyHidden, VStack } from "@chakra-ui/react";
 import debounce from "lodash.debounce";
 import { useEffect, useMemo, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -17,27 +11,17 @@ import { predictedActionDisplayWidth } from "./LiveGraphPanel";
 const PredictedAction = () => {
   const intl = useIntl();
   const predictionResult = useStore((s) => s.predictionResult);
-  const [estimatedAction, setEstimatedAction] = useState<string>(
-    intl.formatMessage({ id: "unknown" })
+  const estimatedAction = predictionResult?.detected?.name;
+  const [liveRegionEstimatedAction, setLiveRegionEstimatedAction] = useState<
+    string | undefined
+  >(estimatedAction);
+  const setLiveRegionEstimatedActionDebounced = useMemo(
+    () => debounce(setLiveRegionEstimatedAction, 500, { leading: true }),
+    []
   );
-  const debouncedEstimatedAction = useMemo(
-    () =>
-      debounce((name: string | undefined) => {
-        if (name) {
-          setEstimatedAction(name);
-        } else {
-          setEstimatedAction(intl.formatMessage({ id: "unknown" }));
-        }
-      }, 500),
-    [intl]
-  );
-
-  const prevEstimatedAction = usePrevious(predictionResult?.detected?.name);
   useEffect(() => {
-    if (prevEstimatedAction !== predictionResult?.detected?.name) {
-      debouncedEstimatedAction(predictionResult?.detected?.name);
-    }
-  }, [debouncedEstimatedAction, predictionResult, prevEstimatedAction]);
+    setLiveRegionEstimatedActionDebounced(estimatedAction);
+  }, [setLiveRegionEstimatedActionDebounced, estimatedAction]);
 
   return (
     <VStack
@@ -52,7 +36,9 @@ const PredictedAction = () => {
         <FormattedMessage
           id="estimated-action-aria"
           values={{
-            action: estimatedAction,
+            action:
+              liveRegionEstimatedAction ??
+              intl.formatMessage({ id: "unknown" }),
           }}
         />
       </VisuallyHidden>
@@ -80,7 +66,7 @@ const PredictedAction = () => {
         textAlign="center"
         w={`${predictedActionDisplayWidth}px`}
       >
-        {predictionResult?.detected?.name ?? <FormattedMessage id="unknown" />}
+        {estimatedAction ?? <FormattedMessage id="unknown" />}
       </Text>
     </VStack>
   );

From cd7a778489e5c4a69506da89a5c72140b7a172af Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <44397098+microbit-matt-hillsdon@users.noreply.github.com>
Date: Fri, 22 Nov 2024 13:41:21 +0000
Subject: [PATCH 3/3] Remove leading which causes queuing for Rob

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

diff --git a/src/components/PredictedAction.tsx b/src/components/PredictedAction.tsx
index 843130c2c..0e598880a 100644
--- a/src/components/PredictedAction.tsx
+++ b/src/components/PredictedAction.tsx
@@ -16,7 +16,7 @@ const PredictedAction = () => {
     string | undefined
   >(estimatedAction);
   const setLiveRegionEstimatedActionDebounced = useMemo(
-    () => debounce(setLiveRegionEstimatedAction, 500, { leading: true }),
+    () => debounce(setLiveRegionEstimatedAction, 500),
     []
   );
   useEffect(() => {