chore: Improved the accessibility in the search and locationsettings …

…page. Added an E2E test for the main workflow and enabled some more test devices/browsers.

e2e-tests/main-workflow.spec.ts

@@ -0,0 +1,17 @@
+import { expect, test } from "@playwright/test";
+
+test("main workflow", async ({ page }) => {
+  await page.goto("http://localhost:3000");
+
+  await page.click("a");
+
+  await page.waitForURL("**/search");
+
+  await page.fill("input[type=text]", "Munich");
+  await page.waitForSelector("button[aria-label=Munich]");
+  await page.press("input[type=text]", "Enter");
+
+  await page.waitForURL("**/home");
+
+  expect(page.url()).toBe("http://localhost:3000/home");
+});

playwright.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from "@playwright/test";
 
 /**
  * Read environment variables from file.
@@ -10,7 +10,7 @@ import { defineConfig, devices } from '@playwright/test';
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: './e2e-tests',
+  testDir: "./e2e-tests",
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -20,52 +20,52 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: "html",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
     // baseURL: 'http://127.0.0.1:3000',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: "on-first-retry",
   },
 
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
     },
 
     {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
     },
 
     {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
     },
 
     /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
+    {
+      name: "Mobile Chrome",
+      use: { ...devices["Pixel 5"] },
+    },
+    {
+      name: "Mobile Safari",
+      use: { ...devices["iPhone 12"] },
+    },
 
     /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
+    {
+      name: "Microsoft Edge",
+      use: { ...devices["Desktop Edge"], channel: "msedge" },
+    },
+    {
+      name: "Google Chrome",
+      use: { ...devices["Desktop Chrome"], channel: "chrome" },
+    },
   ],
 
   /* Run your local dev server before starting the tests */

src/pages/locationsettings/index.tsx

@@ -211,14 +211,15 @@ const LocationSettings = observer(() => {
                   .startsWith(searchValue.name.toLowerCase())
               ) {
                 return (
-                  <div
+                  <button
                     className={
                       isInputActive
-                        ? "flex h-auto w-9/12 cursor-pointer items-center justify-between border-b-2 border-gray-400 bg-[#d8d5db] p-5 md:w-5/12"
+                        ? "flex h-auto w-9/12 items-center justify-between border-b-2 border-gray-400 bg-[#d8d5db] p-5 md:w-5/12"
                         : "hidden"
                     }
+                    aria-label={city.name}
                     key={city.id}
-                    onMouseDown={() => {
+                    onClick={() => {
                       setSearchValue((prevSearchValue): ICity => {
                         return {
                           ...prevSearchValue,
@@ -255,11 +256,11 @@ const LocationSettings = observer(() => {
                     </span>
                     <div className="flex w-1/2 flex-row-reverse items-center gap-0.5 sm:w-1/4 sm:gap-3">
                       <span className="text-gray-500">{city.country}</span>
-                      <span className="w-2/3 overflow-hidden overflow-ellipsis text-gray-500 sm:w-full">
+                      <span className="w-2/3 overflow-hidden overflow-ellipsis text-left text-gray-500 sm:w-full">
                         {city.region}
                       </span>{" "}
                     </div>
-                  </div>
+                  </button>
                 );
               }
             })}

src/pages/search/index.tsx

@@ -204,14 +204,15 @@ const Search = () => {
             city.name.toLowerCase().startsWith(searchValue.name.toLowerCase())
           ) {
             return (
-              <div
+              <button
                 className={
                   isInputActive
-                    ? "z-20 flex h-auto w-9/12 cursor-pointer items-center justify-between border-b-2 border-gray-400 bg-[#383b53] p-5 text-amber-50 md:w-6/12"
+                    ? "z-20 flex h-auto w-9/12 items-center justify-between border-b-2 border-gray-400 bg-[#383b53] p-5 text-amber-50 md:w-6/12"
                     : "hidden"
                 }
+                aria-label={city.name}
                 key={city.id}
-                onMouseDown={() => {
+                onClick={() => {
                   setSearchValue((prevSearchValue): ICity => {
                     return {
                       ...prevSearchValue,
@@ -247,11 +248,11 @@ const Search = () => {
                 </span>
                 <div className="flex w-1/2 flex-row-reverse items-center gap-0.5 sm:w-1/4 sm:gap-3">
                   <span>{city.country}</span>
-                  <span className="w-2/3 overflow-hidden overflow-ellipsis sm:w-full">
+                  <span className="w-2/3 overflow-hidden overflow-ellipsis text-left sm:w-full">
                     {city.region}
                   </span>{" "}
                 </div>
-              </div>
+              </button>
             );
           }
         })}