From 2dcbda7a932aa04566abcced4a7514a1bdb660dd Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Wed, 11 Oct 2023 16:09:42 +0700
Subject: [PATCH] refactor: use a different approach to visually hide input
 elements (#51743)

---
 client/src/templates/Challenges/odin/show.tsx |  2 +-
 client/src/templates/Challenges/video.css     |  5 --
 e2e/template-challenges-show.spec.ts          | 48 +++++++++++++++++++
 3 files changed, 49 insertions(+), 6 deletions(-)
 create mode 100644 e2e/template-challenges-show.spec.ts

diff --git a/client/src/templates/Challenges/odin/show.tsx b/client/src/templates/Challenges/odin/show.tsx
index 1084aba620c..2bbcc4ae40b 100644
--- a/client/src/templates/Challenges/odin/show.tsx
+++ b/client/src/templates/Challenges/odin/show.tsx
@@ -312,7 +312,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                         <input
                           aria-label={t('aria.answer')}
                           checked={this.state.selectedOption === index}
-                          className='video-quiz-input-hidden'
+                          className='sr-only'
                           name='quiz'
                           onChange={this.handleOptionChange}
                           type='radio'
diff --git a/client/src/templates/Challenges/video.css b/client/src/templates/Challenges/video.css
index ff4462c7498..13ffe992c83 100644
--- a/client/src/templates/Challenges/video.css
+++ b/client/src/templates/Challenges/video.css
@@ -72,11 +72,6 @@
   border-bottom: 4px solid var(--tertiary-background);
 }
 
-.video-quiz-input-hidden {
-  position: absolute;
-  left: -9999px;
-}
-
 .video-quiz-input-visible {
   margin-inline-end: 15px;
   position: relative;
diff --git a/e2e/template-challenges-show.spec.ts b/e2e/template-challenges-show.spec.ts
new file mode 100644
index 00000000000..5f848050639
--- /dev/null
+++ b/e2e/template-challenges-show.spec.ts
@@ -0,0 +1,48 @@
+import { test, expect } from '@playwright/test';
+
+import translations from '../client/i18n/locales/english/translations.json';
+
+test.describe('Template Challenges Show', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(
+      '/learn/foundational-c-sharp-with-microsoft/write-your-first-code-using-c-sharp/write-your-first-c-sharp-code'
+    );
+  });
+
+  test.afterEach(async ({ page }) => {
+    await page.close();
+  });
+
+  test('should display a success dialog when the user submits the form, and they have completed the quiz and the assignments correctly', async ({
+    page
+  }) => {
+    // Tick the assignment box
+    await page.getByRole('checkbox').check();
+
+    // Find and click the third quiz option, which is the correct answer.
+    // Set `force: true` to bypass Playwright's check
+    // as the radio is visually hidden and the click event is intercepted by the `span` element.
+    const quizOptions = await page.getByRole('radio').all();
+    await quizOptions[2].check({ force: true });
+
+    await page
+      .getByRole('button', { name: translations.buttons['check-answer'] })
+      .click();
+
+    await expect(
+      page.getByText(translations.learn['assignment-not-complete'])
+    ).not.toBeVisible();
+
+    await expect(
+      page.getByText(translations.learn['wrong-answer'])
+    ).not.toBeVisible();
+
+    // There are two elements with the `dialog` role in the DOM.
+    // This appears to be semantically incorrect and should be resolved
+    // once we have migrated the component to use Dialog from the `ui-components` library.
+    expect(page.getByRole('dialog').all()).toBeTruthy();
+    await expect(
+      page.getByRole('button', { name: translations.buttons['go-to-next'] })
+    ).toBeVisible();
+  });
+});