refactor: Improved the accessibility of the contact page and a contac…

…t page test
The-Creative-Programming-Group · Jan 2, 2024 · fef7e5c · fef7e5c
1 parent 3bcb50a
commit fef7e5c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/e2e-tests/email.spec.ts b/e2e-tests/email.spec.ts
@@ -1,4 +1,5 @@
 import { expect, type Page, test } from "@playwright/test";
+import contactTranslations from "../public/locales/en/contact.json";
 
 const goToContactAndFillForm = async (
   page: Page,
@@ -42,9 +43,7 @@ test("invalid email", async ({ page }) => {
   await page.click("button[type=submit]");
 
   // Check the error element
-  expect(
-    (
-      await page.waitForSelector('p[data-testId="email error message"]')
-    ).isVisible(),
-  ).toBeTruthy();
+  await expect(
+    page.getByText(contactTranslations["invalid email"]),
+  ).toBeVisible();
 });
diff --git a/src/pages/contact/index.tsx b/src/pages/contact/index.tsx
@@ -80,7 +80,9 @@ const ContactUs = () => {
             <div className="mb-2 ml-5 mr-5 mt-5 flex flex-col md:w-1/3 md:flex-row">
               <div className="mb-2 flex w-60 flex-col md:mb-0 md:mr-4 md:w-full">
                 {errors.firstName && (
-                  <p className="text-red-500">{errors.firstName.message}</p>
+                  <p className="text-red-500" role="alert">
+                    {errors.firstName.message}
+                  </p>
                 )}
                 <label className="ml-2" htmlFor="firstname">
                   {translationContact("first name")}
@@ -94,7 +96,9 @@ const ContactUs = () => {
               </div>
               <div className="flex w-60 flex-col md:w-full">
                 {errors.lastName && (
-                  <p className="text-red-500">{errors.lastName.message}</p>
+                  <p className="text-red-500" role="alert">
+                    {errors.lastName.message}
+                  </p>
                 )}
                 <label className="ml-2" htmlFor="lastname">
                   {translationContact("last name")}
@@ -108,7 +112,7 @@ const ContactUs = () => {
             </div>
             <div className="mb-2 flex w-60 flex-col md:w-4/12">
               {errors.email && (
-                <p className="text-red-500" data-testId="email error message">
+                <p className="text-red-500" role="alert">
                   {errors.email.message}
                 </p>
               )}
@@ -124,7 +128,9 @@ const ContactUs = () => {
             </div>
             <div className="mb-8 flex w-60 flex-col md:w-4/12">
               {errors.message && (
-                <p className="text-red-500">{errors.message.message}</p>
+                <p className="text-red-500" role="alert">
+                  {errors.message.message}
+                </p>
               )}
               <label className="ml-2" htmlFor="message">
                 {translationContact("message")}