From 892f21210b6bc114f76ca46365ed185f4c6148f3 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Thu, 4 Nov 2021 13:15:03 +0300
Subject: [PATCH] fix(react): make instructions elements ids unique

---
 .../src/components/CodeEditor/CodeMirror.tsx  | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
index 862a3e29c..59ca8e17f 100644
--- a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
+++ b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
@@ -24,7 +24,7 @@ import * as React from "react";
 import { useSandpack } from "../../hooks/useSandpack";
 import { useSandpackTheme } from "../../hooks/useSandpackTheme";
 import type { EditorState as SandpackEditorState } from "../../types";
-import { getFileName } from "../../utils/stringUtils";
+import { getFileName, generateRandomId } from "../../utils/stringUtils";
 
 import { highlightDecorators } from "./highlightDecorators";
 import { highlightInlineError } from "./highlightInlineError";
@@ -88,6 +88,7 @@ export const CodeMirror = React.forwardRef<HTMLElement, CodeMirrorProps>(
     const [internalCode, setInternalCode] = React.useState<string>(code);
     const c = useClasser("sp");
     const { listen } = useSandpack();
+    const ariaId = React.useRef<string>(generateRandomId());
 
     React.useEffect(() => {
       if (!wrapper.current) {
@@ -195,7 +196,10 @@ export const CodeMirror = React.forwardRef<HTMLElement, CodeMirrorProps>(
 
       if (!readOnly) {
         view.contentDOM.setAttribute("tabIndex", "-1");
-        view.contentDOM.setAttribute("aria-describedby", "exit-instructions");
+        view.contentDOM.setAttribute(
+          "aria-describedby",
+          `exit-instructions-${ariaId.current}`
+        );
       }
 
       cmView.current = view;
@@ -299,7 +303,7 @@ export const CodeMirror = React.forwardRef<HTMLElement, CodeMirrorProps>(
       /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
       <div
         ref={combinedRef}
-        aria-describedby="enter-instructions"
+        aria-describedby={`enter-instructions-${ariaId.current}`}
         aria-label={
           filePath ? `Code Editor for ${getFileName(filePath)}` : `Code Editor`
         }
@@ -319,11 +323,17 @@ export const CodeMirror = React.forwardRef<HTMLElement, CodeMirrorProps>(
         </pre>
 
         <>
-          <p id="enter-instructions" style={{ display: "none" }}>
+          <p
+            id={`enter-instructions-${ariaId.current}`}
+            style={{ display: "none" }}
+          >
             To enter the code editing mode, press Enter. To exit the edit mode,
             press Escape
           </p>
-          <p id="exit-instructions" style={{ display: "none" }}>
+          <p
+            id={`exit-instructions-${ariaId.current}`}
+            style={{ display: "none" }}
+          >
             You are editing the code. To exit the edit mode, press Escape
           </p>
         </>