From a0f37ae0091a1f799df5db07b030706503104de4 Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Tue, 24 Mar 2026 17:44:54 +0700
Subject: [PATCH] fix(a11y): add initial focus to play button in speaking modal
 (#66419)

---
 .../templates/Challenges/components/speaking-modal.tsx |  9 ++++++++-
 e2e/multiple-choice-question-challenge.spec.ts         | 10 +++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/client/src/templates/Challenges/components/speaking-modal.tsx b/client/src/templates/Challenges/components/speaking-modal.tsx
index ccd071bf80f..4c028ba334d 100644
--- a/client/src/templates/Challenges/components/speaking-modal.tsx
+++ b/client/src/templates/Challenges/components/speaking-modal.tsx
@@ -151,6 +151,7 @@ const SpeakingModal = ({
     useState<ComparisonResult | null>(null);
   const [hasStartedRecording, setHasStartedRecording] = useState(false);
   const [previouslyListening, setPreviouslyListening] = useState(false);
+  const playButtonRef = useRef<HTMLButtonElement | null>(null);
   const audioRef = useRef<HTMLAudioElement | null>(null);
   const stopListeningTimeoutRef = useRef<
     ReturnType<typeof setTimeout> | undefined
@@ -311,7 +312,12 @@ const SpeakingModal = ({
   };
 
   return (
-    <Modal onClose={closeSpeakingModal} open={isSpeakingModalOpen} size='large'>
+    <Modal
+      onClose={closeSpeakingModal}
+      open={isSpeakingModalOpen}
+      size='large'
+      initialFocus={playButtonRef}
+    >
       <Modal.Header closeButtonClassNames='close'>
         {t('speaking-modal.heading')}
       </Modal.Header>
@@ -323,6 +329,7 @@ const SpeakingModal = ({
             {sentence}
           </p>
           <Button
+            ref={playButtonRef}
             size='medium'
             onClick={() => void handlePlay()}
             aria-describedby='speaking-sentence'
diff --git a/e2e/multiple-choice-question-challenge.spec.ts b/e2e/multiple-choice-question-challenge.spec.ts
index 1f5e11ebdbd..3cc6117afb3 100644
--- a/e2e/multiple-choice-question-challenge.spec.ts
+++ b/e2e/multiple-choice-question-challenge.spec.ts
@@ -47,11 +47,11 @@ test.describe('Multiple Choice Question Challenge - With Speaking Modal', () =>
 
     await expect(page.getByRole('dialog')).toBeVisible();
 
-    await expect(
-      page.getByRole('button', {
-        name: translations['speaking-modal']['play']
-      })
-    ).toBeVisible();
+    const playButton = page.getByRole('button', {
+      name: translations['speaking-modal']['play']
+    });
+    await expect(playButton).toBeVisible();
+    await expect(playButton).toBeFocused(); // The button is focused by default
     await expect(
       page.getByRole('button', {
         name: translations['speaking-modal']['record']