Workaround for in-context translation error caused by DOM change (#604)

Author: microbit-grace

src/components/PredictedAction.tsx

@@ -3,7 +3,13 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { HStack, Text, VisuallyHidden, VStack } from "@chakra-ui/react";
+import {
+  HStack,
+  Text,
+  TextProps,
+  VisuallyHidden,
+  VStack,
+} from "@chakra-ui/react";
 import debounce from "lodash.debounce";
 import { useEffect, useMemo, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -28,6 +34,15 @@ const PredictedAction = () => {
     setLiveRegionEstimatedActionDebounced(estimatedAction);
   }, [setLiveRegionEstimatedActionDebounced, estimatedAction]);
 
+  const commonEstimatedActionProps: TextProps = {
+    size: "md",
+    fontWeight: "bold",
+    color: predictionResult?.detected ? "brand2.600" : "gray.600",
+    isTruncated: true,
+    textAlign: "center",
+    w: `${predictedActionDisplayWidth}px`,
+  };
+
   return (
     <VStack
       className={tourElClassname.estimatedAction}
@@ -63,15 +78,18 @@ const PredictedAction = () => {
           isTriggered
         />
       </VStack>
+      {/* Display workaround for in-context translation error caused by DOM change. */}
+      <Text
+        {...commonEstimatedActionProps}
+        display={estimatedAction ? "block" : "none"}
+      >
+        {estimatedAction}
+      </Text>
       <Text
-        size="md"
-        fontWeight="bold"
-        color={predictionResult?.detected ? "brand2.600" : "gray.600"}
-        isTruncated
-        textAlign="center"
-        w={`${predictedActionDisplayWidth}px`}
+        {...commonEstimatedActionProps}
+        display={estimatedAction ? "none" : "block"}
       >
-        {estimatedAction ?? <FormattedMessage id="unknown" />}
+        <FormattedMessage id="unknown" />
       </Text>
     </VStack>
   );