fix(client): use requestAnimationFrame to focus editor on mount in Firefox (#66405)

client/src/templates/Challenges/classic/editor.tsx

@@ -1115,10 +1115,12 @@ const Editor = (props: EditorProps): JSX.Element => {
     if (!editor || !canFocusOnMountRef.current) return;
     if (!props.usesMultifileEditor) {
       // Only one editor? Focus it.
-      editor.focus();
+      // Use requestAnimationFrame to ensure focus works in browsers like
+      // Firefox that have stricter programmatic focus policies.
+      requestAnimationFrame(() => editor.focus());
       canFocusOnMountRef.current = false;
     } else if (hasEditableRegion()) {
-      editor.focus();
+      requestAnimationFrame(() => editor.focus());
       canFocusOnMountRef.current = false;
     }
   }

e2e/independent-lower-jaw.spec.ts

@@ -23,6 +23,12 @@ test.use({
   viewport: { width: 1080, height: 720 }
 });
 
+test('Editor is focused on load', async ({ page }) => {
+  await page.goto(workshopChallengeUrl);
+
+  await expect(getEditors(page)).toBeFocused();
+});
+
 test('Clicking "Check Your Code" reveals failing feedback', async ({
   page
 }) => {