feat: add unique id to each tab and tab panel for aria-* attributes

codesandbox · Sep 1, 2024 · a127706 · a127706
1 parent 435e26a
commit a127706
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/sandpack-react/src/components/CodeEditor/CodeEditor.stories.tsx b/sandpack-react/src/components/CodeEditor/CodeEditor.stories.tsx
@@ -71,7 +71,7 @@ export const ClosableTabs: React.FC = () => (
   <SandpackProvider
     options={{ visibleFiles: ["/App.js", "/index.js", "/styles.css"] }}
     template="react"
-    theme="dark"
+    theme="light"
   >
     <SandpackCodeEditor closableTabs />
   </SandpackProvider>

diff --git a/sandpack-react/src/components/CodeEditor/index.tsx b/sandpack-react/src/components/CodeEditor/index.tsx
@@ -6,6 +6,7 @@ import { useActiveCode } from "../../hooks/useActiveCode";
 import { useSandpack } from "../../hooks/useSandpack";
 import type { CustomLanguage, SandpackInitMode } from "../../types";
 import { useClassNames } from "../../utils/classNames";
+import { useSandpackId } from "../../utils/useAsyncSandpackId";
 import { FileTabs } from "../FileTabs";
 import { RunButton } from "../common/RunButton";
 import { SandpackStack } from "../common/Stack";
@@ -94,14 +95,21 @@ export const SandpackCodeEditor = forwardRef<CodeMirrorRef, CodeEditorProps>(
       updateCode(newCode, shouldUpdatePreview);
     };
 
+    const activeFileUniqueId = useSandpackId();
+
     return (
       <SandpackStack className={classNames("editor", [className])} {...props}>
-        {shouldShowTabs && <FileTabs closableTabs={closableTabs} />}
+        {shouldShowTabs && (
+          <FileTabs
+            activeFileUniqueId={activeFileUniqueId}
+            closableTabs={closableTabs}
+          />
+        )}
 
         <div
-          aria-labelledby={`${activeFile}-tab`}
+          aria-labelledby={`${activeFile}-${activeFileUniqueId}-tab`}
           className={classNames("code-editor", [editorClassName])}
-          id={`${activeFile}-tab-panel`}
+          id={`${activeFile}-${activeFileUniqueId}-tab-panel`}
           role="tabpanel"
         >
           <CodeMirror

diff --git a/sandpack-react/src/components/CodeEditor/styles.ts b/sandpack-react/src/components/CodeEditor/styles.ts
@@ -27,6 +27,9 @@ export const editorClassName = css({
   [`.${placeholderClassName}`]: {
     padding: "$space$4 0",
   },
+  "&:focus-within": {
+    outline: "$colors$accent auto 1px",
+  },
 
   /**
    * For iOS: prevent browser zoom when clicking on sandbox.

diff --git a/sandpack-react/src/components/FileTabs/index.tsx b/sandpack-react/src/components/FileTabs/index.tsx
@@ -73,6 +73,11 @@ export interface FileTabsProps {
    * This adds a close button next to each file with a unique trigger to close it.
    */
   closableTabs?: boolean;
+  /**
+   * unique id appended with active files. This is
+   * used in aria-controls value along the combination of activeFile
+   */
+  activeFileUniqueId: string;
 }
 
 /**
@@ -202,11 +207,11 @@ export const FileTabs = ({
           >
             <button
               key={filePath}
-              aria-controls={`${filePath}-tab-panel`}
+              aria-controls={`${filePath}-${props.activeFileUniqueId}-tab-panel`}
               aria-selected={filePath === activeFile}
               className={classNames("tab-button", [buttonClassName, tabButton])}
               data-active={filePath === activeFile}
-              id={`${filePath}-tab`}
+              id={`${filePath}-${props.activeFileUniqueId}-tab`}
               onClick={(): void => setActiveFile(filePath)}
               role="tab"
               tabIndex={filePath === activeFile ? 0 : -1}