Update e2e

Author: sea-snake

src/frontend/src/lib/components/ui/Popover.svelte

@@ -2,7 +2,7 @@
   import type { HTMLAttributes } from "svelte/elements";
   import { fade } from "svelte/transition";
   import Dialog from "$lib/components/ui/Dialog.svelte";
-  import { nonNullish } from "@dfinity/utils";
+  import { isNullish, nonNullish } from "@dfinity/utils";
 
   type Direction = "up" | "right" | "down" | "left";
   type Align = "start" | "center" | "end";
@@ -81,6 +81,18 @@
       tracking = false;
     };
   });
+
+  // Scroll into view if out of view e.g. mobile
+  $effect(() => {
+    if (isNullish(popoverRef)) {
+      return;
+    }
+    popoverRef.scrollIntoView({
+      block: "nearest",
+      inline: "nearest",
+      behavior: "smooth",
+    });
+  });
 </script>
 
 <svelte:window bind:innerWidth={windowWidth} />

src/frontend/src/lib/components/ui/Select.svelte

@@ -71,29 +71,29 @@
     onClose={() => (isOpen = false)}
     class={["!w-max !p-1.5 !shadow-lg", className]}
   >
-    <ul class="flex flex-col">
+    <div class="flex flex-col" role="menu">
       {#each options as option, index}
-        <li class="contents" aria-label={option.label}>
-          <Button
-            onclick={() => handleClick(option, index)}
-            variant="tertiary"
-            class={[
-              "justify-start gap-2.5 !px-3 text-start",
-              option.selected && "[ul:not(:hover)_&]:bg-bg-primary_hover",
-            ]}
-          >
-            {#if nonNullish(option.icon)}
-              {@const Icon = option.icon}
-              <div
-                class="text-fg-quaternary dark:text-fg-tertiary [&_svg]:size-4"
-              >
-                <Icon />
-              </div>
-            {/if}
-            <span>{option.label}</span>
-          </Button>
-        </li>
+        <Button
+          onclick={() => handleClick(option, index)}
+          variant="tertiary"
+          class={[
+            "justify-start gap-2.5 !px-3 text-start",
+            option.selected && "[ul:not(:hover)_&]:bg-bg-primary_hover",
+          ]}
+          role="menuitem"
+          aria-label={option.label}
+        >
+          {#if nonNullish(option.icon)}
+            {@const Icon = option.icon}
+            <div
+              class="text-fg-quaternary dark:text-fg-tertiary [&_svg]:size-4"
+            >
+              <Icon />
+            </div>
+          {/if}
+          <span>{option.label}</span>
+        </Button>
       {/each}
-    </ul>
+    </div>
   </Popover>
 {/if}

src/frontend/tests/e2e-playwright/dashboard/removePasskey.spec.ts

@@ -213,7 +213,7 @@ test("User can cancel passkey removal", async ({ page }) => {
     .filter({ hasText: "Current passkey" })
     .getByRole("button", { name: "More options" })
     .click();
-  await page.getByRole("listitem", { name: "Remove" }).click();
+  await page.getByRole("menuitem", { name: "Remove" }).click();
 
   // Wait for the remove dialog to open
   await expect(

src/frontend/tests/e2e-playwright/dashboard/renamePasskeys.spec.ts

@@ -152,7 +152,7 @@ test("User cannot rename passkey to an empty name nor is it renamed on cancel",
     .filter({ hasText: "Chrome" })
     .getByRole("button", { name: "More options" })
     .click();
-  await page.getByRole("listitem", { name: "Rename" }).click();
+  await page.getByRole("menuitem", { name: "Rename" }).click();
 
   // Wait for the rename dialog to open
   await expect(

src/frontend/tests/e2e-playwright/utils.ts

@@ -178,7 +178,7 @@ export const renamePasskey = async (
     .filter({ hasText: currentName })
     .getByRole("button", { name: "More options" })
     .click();
-  await page.getByRole("listitem", { name: "Rename" }).click();
+  await page.getByRole("menuitem", { name: "Rename" }).click();
 
   // Wait for the rename dialog to open
   await expect(
@@ -189,7 +189,7 @@ export const renamePasskey = async (
   await expect(input).toHaveValue(currentName);
   await input.clear();
   await input.fill(nextName);
-  await page.getByRole("button", { name: "Save" }).click();
+  await page.getByRole("button", { name: "Save changes" }).click();
 
   // Wait for the rename dialog to close
   await expect(
@@ -208,7 +208,7 @@ export const removePasskey = async (
     .filter({ hasText: name })
     .getByRole("button", { name: "More options" })
     .click();
-  await page.getByRole("listitem", { name: "Remove" }).click();
+  await page.getByRole("menuitem", { name: "Remove" }).click();
 
   // Wait for the remove dialog to open with the correct message
   await expect(