Add screen reader announcements for Reset, Run, and Stop sketch actions within code blocks

Author: tsengwoody

src/components/CodeEmbed/index.jsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef } from "preact/hooks";
+import { useLiveRegion } from '../hooks/useLiveRegion';
 import CodeMirror, { EditorView } from "@uiw/react-codemirror";
 import { javascript } from "@codemirror/lang-javascript";
 import { cdnLibraryUrl, cdnSoundUrl } from "@/src/globals/globals";
@@ -25,6 +26,7 @@ import { Icon } from "../Icon";
  * }
  */
 export const CodeEmbed = (props) => {
+  const { ref: liveRegionRef, announce } = useLiveRegion();
   const [rendered, setRendered] = useState(false);
   const initialCode = props.initialValue ?? "";
   // Source code from Google Docs sometimes uses a unicode non-breaking space
@@ -59,6 +61,7 @@ export const CodeEmbed = (props) => {
     } else {
       setPreviewCodeString(codeString);
     }
+    announce("Sketch is running");
   };
 
   const [previewCodeString, setPreviewCodeString] = useState(codeString);
@@ -108,6 +111,7 @@ export const CodeEmbed = (props) => {
               className="bg-bg-gray-40"
               onClick={() => {
                 setPreviewCodeString("");
+                announce("Sketch stopped");
               }}
               ariaLabel="Stop sketch"
             >
@@ -148,6 +152,7 @@ export const CodeEmbed = (props) => {
             onClick={() => {
               setCodeString(initialCode);
               setPreviewCodeString(initialCode);
+              announce("Code reset to initial value.");
             }}
             ariaLabel="Reset code to initial value"
             className="bg-white text-black"
@@ -156,6 +161,7 @@ export const CodeEmbed = (props) => {
           </CircleButton>
         </div>
       </div>
+      <span ref={liveRegionRef} aria-live="polite" class="sr-only" />
     </div>
   );
 };