From fef7e5cc001c5079d0f6064c068a5ca28246a9d7 Mon Sep 17 00:00:00 2001
From: FleetAdmiralJakob <jakob.roessner@outlook.de>
Date: Tue, 2 Jan 2024 13:07:24 +0100
Subject: [PATCH] refactor: Improved the accessibility of the contact page and
 a contact page test

---
 e2e-tests/email.spec.ts     |  9 ++++-----
 src/pages/contact/index.tsx | 14 ++++++++++----
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/e2e-tests/email.spec.ts b/e2e-tests/email.spec.ts
index 251e383b..bb60dd3c 100644
--- 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
index 81fc54dd..3b36acde 100644
--- 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")}