Recovery phrase set-up e2e tests. (dfinity#3517)

Recovery phrase set-up e2e tests.

# Changes

- Make dialog close button accessible.
- Make recovery phrase verification step buttons accessible (wrap in
unordered list and aria-pressable attribute).
- Add `readClipboard` to e2e utils that avoids CSP errors.

# Tests

Implemented e2e tests to cover all currently possible flows on the new
recovery phrase setup page.











<!-- SCREENSHOTS REPORT START -->

<!-- SCREENSHOTS REPORT STOP -->

Author: sea-snake

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

@@ -5,6 +5,7 @@
   import { nonNullish } from "@dfinity/utils";
   import Button from "$lib/components/ui/Button.svelte";
   import { XIcon } from "@lucide/svelte";
+  import { t } from "$lib/stores/locale.store";
 
   type Props = HTMLAttributes<HTMLDialogElement> & {
     onClose?: () => void;
@@ -133,8 +134,9 @@
         type="button"
         class="absolute top-2 right-2 z-2 !rounded-full"
         onclick={onClose}
+        aria-label={$t`Close`}
       >
-        <XIcon class="size-5" />
+        <XIcon class="size-5" aria-hidden="true" />
       </Button>
     {/if}
   </div>

src/frontend/src/lib/components/wizards/createRecoveryPhrase/views/Verify.svelte

@@ -20,16 +20,29 @@
       .sort((a, b) => a.sort - b.sort)
       .map(({ index }) => index),
   );
+  const selectedWords = $derived(
+    selectedIndexes.map((index) => recoveryPhrase[index]),
+  );
   const isCheckingOrder = $derived(
-    selectedIndexes.length === recoveryPhrase.length,
+    selectedWords.length === recoveryPhrase.length,
   );
 
+  const handleSelect = (index: number) => {
+    selectedIndexes = [...selectedIndexes, index];
+  };
+  const handleUndo = () => {
+    selectedIndexes = selectedIndexes.slice(0, -1);
+  };
+  const handleClear = () => {
+    selectedIndexes = [];
+  };
+
   // Auto-submit after the last word has been selected
   $effect(() => {
-    if (selectedIndexes.length !== recoveryPhrase.length) {
+    if (!isCheckingOrder) {
       return;
     }
-    onCompleted(selectedIndexes.map((index) => recoveryPhrase[index]));
+    onCompleted(selectedWords);
   });
 </script>
 
@@ -54,57 +67,58 @@
     <Trans>Select each word in the correct order</Trans>
   {/if}
 </p>
-<div class={["mb-8 grid grid-cols-3 gap-3"]}>
+<ul class={["mb-8 grid grid-cols-3 gap-3"]}>
   {#each shuffledIndexes as index}
     {@const word = recoveryPhrase[index]}
     {@const selectedPosition = selectedIndexes.indexOf(index)}
     {@const isSelected = selectedPosition !== -1 && !isCheckingOrder}
     {@const isLastSelected = selectedIndexes.slice(-1)[0] === index}
-    <button
-      onclick={() =>
-        (selectedIndexes = isLastSelected
-          ? selectedIndexes.slice(0, -1)
-          : [...selectedIndexes, index])}
-      class={[
-        "border-border-primary hover:not-disabled:bg-bg-primary_hover focus-visible:not-disabled:bg-bg-primary_hover flex h-7 flex-row items-center rounded-full border px-1.5 outline-none",
-        isSelected && "!border-fg-primary",
-        isCheckingOrder && "!bg-bg-disabled !border-border-disabled_subtle",
-      ]}
-      disabled={(isSelected && !isLastSelected) || isCheckingOrder}
-    >
-      <span
-        class={[
-          "text-text-secondary w-4 text-center text-xs font-semibold tabular-nums select-none",
-          isSelected ? "!text-text-primary" : "-translate-y-0.25",
-          isCheckingOrder && "!text-text-disabled",
-        ]}
-      >
-        {isSelected || isCheckingOrder
-          ? `${selectedPosition + 1}`.padStart(2, "0")
-          : "＿"}
-      </span>
-      <span
+    <li class="contents">
+      <button
+        onclick={isLastSelected ? handleUndo : () => handleSelect(index)}
         class={[
-          "border-border-secondary mx-1 h-full border-r",
+          "border-border-primary hover:not-disabled:bg-bg-primary_hover focus-visible:not-disabled:bg-bg-primary_hover flex h-7 flex-row items-center rounded-full border px-1.5 outline-none",
           isSelected && "!border-fg-primary",
-          isCheckingOrder && "!border-border-disabled_subtle",
-        ]}
-      ></span>
-      <span
-        class={[
-          "text-text-secondary -translate-y-0.25 text-base select-none",
-          word.length > 7 && "tracking-tight",
-          isSelected && "!text-text-primary font-semibold",
-          isCheckingOrder && "!text-text-disabled",
+          isCheckingOrder && "!bg-bg-disabled !border-border-disabled_subtle",
         ]}
+        disabled={(isSelected && !isLastSelected) || isCheckingOrder}
+        aria-pressed={isSelected ? "true" : "false"}
       >
-        {word}
-      </span>
-    </button>
+        <span
+          class={[
+            "text-text-secondary w-4 text-center text-xs font-semibold tabular-nums select-none",
+            isSelected ? "!text-text-primary" : "-translate-y-0.25",
+            isCheckingOrder && "!text-text-disabled",
+          ]}
+          aria-hidden="true"
+        >
+          {isSelected || isCheckingOrder
+            ? `${selectedPosition + 1}`.padStart(2, "0")
+            : "＿"}
+        </span>
+        <span
+          class={[
+            "border-border-secondary mx-1 h-full border-r",
+            isSelected && "!border-fg-primary",
+            isCheckingOrder && "!border-border-disabled_subtle",
+          ]}
+        ></span>
+        <span
+          class={[
+            "text-text-secondary -translate-y-0.25 text-base select-none",
+            word.length > 7 && "tracking-tight",
+            isSelected && "!text-text-primary font-semibold",
+            isCheckingOrder && "!text-text-disabled",
+          ]}
+        >
+          {word}
+        </span>
+      </button>
+    </li>
   {/each}
-</div>
+</ul>
 <Button
-  onclick={() => (selectedIndexes = [])}
+  onclick={handleClear}
   variant="secondary"
   size="lg"
   disabled={selectedIndexes.length === 0 || isCheckingOrder}