From 4bc319a709d27bcdb805294e019d53e25f6e00c5 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Tue, 3 Feb 2026 11:41:09 -0800
Subject: fix warnings

---
 src/components/Account.svelte                      |  2 +-
 src/components/Amount.svelte                       | 29 ++++++++-----
 src/components/AppForm.svelte                      | 24 +++++++++--
 src/components/AppHeader.svelte                    |  2 +-
 src/components/Balance.svelte                      |  2 +-
 src/components/Code.svelte                         |  7 +++-
 src/components/Event.svelte                        |  4 +-
 src/components/InvoiceActions.svelte               |  4 +-
 src/components/InvoiceData.svelte                  |  2 +-
 src/components/InvoiceTypes.svelte                 |  2 +-
 src/components/ItemForm.svelte                     | 42 +++++++++++--------
 src/components/LocationsMap.svelte                 |  2 +
 src/components/Media.svelte                        |  4 +-
 src/components/Menu.svelte                         |  8 +++-
 src/components/Payments.svelte                     |  6 ++-
 src/components/Pin.svelte                          |  2 +
 src/components/Pinpad.svelte                       |  7 +++-
 src/components/Qr.svelte                           | 26 +++++++++---
 .../(app)/[username]/(profile)/+layout.svelte      | 39 ++++++++++++++----
 src/routes/(app)/[username]/(profile)/+page.svelte |  4 +-
 .../[username]/(profile)/followers/+page.svelte    |  5 +--
 .../[username]/(profile)/follows/+page.svelte      |  2 +-
 .../(app)/[username]/accepted/[text]/+page.svelte  | 10 ++++-
 src/routes/(app)/[username]/receive/+page.svelte   |  6 +--
 src/routes/(app)/account/ark/+page.svelte          | 42 ++++++++++++-------
 src/routes/(app)/account/cash/+page.svelte         |  4 +-
 src/routes/(app)/account/pass/+page.svelte         | 32 ++++++++++-----
 src/routes/(app)/account/seed/+page.svelte         |  6 ++-
 src/routes/(app)/account/setup/+page.svelte        |  4 +-
 .../(app)/apps/[pubkey]/payments/+page.svelte      |  2 +-
 src/routes/(app)/fund/[id]/+page.svelte            |  2 +-
 src/routes/(app)/fund/[id]/access/+page.svelte     |  7 +++-
 src/routes/(app)/fund/[id]/gift/+page.svelte       | 10 +++--
 src/routes/(app)/fund/[id]/withdraw/+page.svelte   |  2 +-
 src/routes/(app)/invoice/[id]/+page.svelte         |  8 +++-
 src/routes/(app)/invoice/[id]/tip/+page.svelte     | 11 +++--
 src/routes/(app)/invoices/+page.svelte             |  8 ++--
 src/routes/(app)/ln/withdrawal/sent/+page.svelte   |  2 +-
 src/routes/(app)/messages/[recipient]/+page.svelte |  7 +++-
 .../(app)/pay/[username]/[...amount]/+page.svelte  | 11 +++--
 src/routes/(app)/payment/[id]/+page.svelte         |  4 +-
 src/routes/(app)/payment/[id]/plain/+page.svelte   |  2 +-
 src/routes/(app)/payments/[...page]/+page.svelte   |  2 +-
 src/routes/(app)/pos/+page.svelte                  | 36 +++++++++++++----
 src/routes/(app)/reset/[code]/+page.svelte         |  4 +-
 src/routes/(app)/send/[...text]/+page.svelte       | 13 +++++-
 src/routes/(app)/send/ark/[address]/+page.svelte   |  2 +-
 .../(app)/send/bitcoin/[address]/+page.svelte      |  2 +-
 .../send/fund/[...name]/[...amount]/+page.svelte   |  2 +-
 .../send/lightning/[payreq]/[...memo]/+page.svelte |  2 +-
 .../(app)/send/zap/[id]/[...amount]/+page.svelte   |  2 +-
 src/routes/(app)/settings/account/+page.svelte     |  5 ++-
 src/routes/(app)/settings/nostr/+page.svelte       |  2 +-
 src/routes/(app)/settings/profile/+page.svelte     | 47 ++++++++++++++++------
 src/routes/(app)/settings/security/+page.svelte    |  2 +-
 src/routes/(app)/settings/shopify/+page.svelte     |  5 ++-
 src/routes/(app)/verify/[code]/+page.svelte        |  2 +-
 src/routes/(static)/bounties/+page.svelte          |  2 +-
 src/routes/(static)/docs/+page.svelte              |  7 +++-
 src/routes/(static)/login/+page.svelte             |  4 +-
 src/routes/(static)/register/+page.svelte          |  3 +-
 61 files changed, 384 insertions(+), 165 deletions(-)

(limited to 'src')

diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index b8ba94d8..7c231219 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -71,7 +71,7 @@
         class="contents"
         aria-label="Settings"
       >
-        <button class="flex gap-1 mb-auto pb-4 pl-4 ml-auto">
+        <button class="flex gap-1 mb-auto pb-4 pl-4 ml-auto" aria-label="Settings">
           <iconify-icon
             noobserver
             icon="ph:gear-bold"
diff --git a/src/components/Amount.svelte b/src/components/Amount.svelte
index 2df2f702..f59d3c2c 100644
--- a/src/components/Amount.svelte
+++ b/src/components/Amount.svelte
@@ -20,10 +20,15 @@
       class="text-2xl md:text-3xl font-semibold flex items-end cursor-copy"
       class:justify-center={align !== "left"}
     >
-      <div class="flex items-center" onclick={() => copy(amount)}>
+      <button
+        type="button"
+        class="flex items-center"
+        onclick={() => copy(amount)}
+        aria-label="Copy amount"
+      >
         <iconify-icon noobserver {icon} class="text-yellow-300"
         ></iconify-icon>{s(amount, locale)}
-      </div>
+      </button>
 
       {#if tip}
         <div class="flex items-center text-lg ml-2">
@@ -37,14 +42,20 @@
     <h3
       class="flex text-secondary md:text-lg cursor-copy items-center gap-1"
       class:justify-center={align !== "left"}
-      onclick={() => copy(toFiat(amount, rate).toFixed(2))}
     >
-      {f(toFiat(amount, rate), currency, locale)}
-      {#if tip}
-        <span class="text-base">
-          +{f(toFiat(tip, rate), currency, locale)}
-        </span>
-      {/if}
+      <button
+        type="button"
+        class="flex items-center gap-1"
+        onclick={() => copy(toFiat(amount, rate).toFixed(2))}
+        aria-label="Copy fiat amount"
+      >
+        {f(toFiat(amount, rate), currency, locale)}
+        {#if tip}
+          <span class="text-base">
+            +{f(toFiat(tip, rate), currency, locale)}
+          </span>
+        {/if}
+      </button>
     </h3>
   </div>
 {/if}
diff --git a/src/components/AppForm.svelte b/src/components/AppForm.svelte
index 25baad88..f5b8afaa 100644
--- a/src/components/AppForm.svelte
+++ b/src/components/AppForm.svelte
@@ -128,11 +128,12 @@
         bind:value={pubkey}
         class="grow"
         readonly={secret}
-      />
+      ></textarea>
       <button
         type="button"
         onclick={() => copy(pubkey)}
         class="btn !w-auto shrink"
+        aria-label="Copy public key"
       >
         <iconify-icon icon="ph:copy-bold" width="32"></iconify-icon>
       </button>
@@ -145,14 +146,29 @@
         >{$t("accounts.secret")}</label
       >
       <div class="flex gap-1 items-center">
-        <textarea rows={3} name="secret" bind:value={secret} lcass="grow" />
+        <textarea
+          rows={3}
+          name="secret"
+          bind:value={secret}
+          class="grow"
+        ></textarea>
 
         <div class="space-y-2 w-24">
-          <button type="button" onclick={generate} class="btn">
+          <button
+            type="button"
+            onclick={generate}
+            class="btn"
+            aria-label="Generate secret"
+          >
             <iconify-icon noobserver icon="ph:dice-three-bold" width="32"
             ></iconify-icon>
           </button>
-          <button type="button" onclick={() => copy(secret)} class="btn">
+          <button
+            type="button"
+            onclick={() => copy(secret)}
+            class="btn"
+            aria-label="Copy secret"
+          >
             <iconify-icon icon="ph:copy-bold" width="32"></iconify-icon>
           </button>
         </div>
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 0a3497c4..27fc7266 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -68,7 +68,7 @@
       {#if user}
         {#each links as { href, icon, flip, label }}
           <a {href} data-sveltekit-preload-code="eager" aria-label={label}>
-            <button class="btn-menu {opacity(href)}">
+            <button class="btn-menu {opacity(href)}" aria-label={label}>
               <iconify-icon noobserver {icon} width={w > 640 ? 32 : 24} {flip}
               ></iconify-icon>
             </button>
diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index dfa5f616..9b8839ca 100644
--- a/src/components/Balance.svelte
+++ b/src/components/Balance.svelte
@@ -8,7 +8,7 @@
   let show = $state();
   let { id, user, rate, balance } = $props();
   let { currency, locked } = $derived(user);
-  let locale = loc(user);
+  let locale = $derived(() => loc(user));
   let toggleShow = (e) => {
     e.preventDefault();
     e.stopPropagation();
diff --git a/src/components/Code.svelte b/src/components/Code.svelte
index 9ad9bf29..774dd7b7 100644
--- a/src/components/Code.svelte
+++ b/src/components/Code.svelte
@@ -5,7 +5,12 @@
 </script>
 
 {#snippet cp(something)}
-  <button type="button" class="ml-auto" onclick={() => copy(something)}>
+  <button
+    type="button"
+    class="ml-auto"
+    onclick={() => copy(something)}
+    aria-label="Copy value"
+  >
     <iconify-icon noobserver icon="ph:copy-bold" width="42"></iconify-icon>
   </button>
 {/snippet}
diff --git a/src/components/Event.svelte b/src/components/Event.svelte
index eb26de0a..d31ae437 100644
--- a/src/components/Event.svelte
+++ b/src/components/Event.svelte
@@ -97,7 +97,7 @@
 
 {#if !(minimal || user?.pubkey === pubkey)}
   <div class="justify-center flex">
-    <btn onclick={zap} class="btn btn-accent items-center">
+    <button type="button" onclick={zap} class="btn btn-accent items-center">
       <div class="flex gap-1 items-center">
         <iconify-icon
           noobserver
@@ -107,6 +107,6 @@
         ></iconify-icon>
         <div>Zap</div>
       </div>
-    </btn>
+    </button>
   </div>
 {/if}
diff --git a/src/components/InvoiceActions.svelte b/src/components/InvoiceActions.svelte
index b6005217..db1583e2 100644
--- a/src/components/InvoiceActions.svelte
+++ b/src/components/InvoiceActions.svelte
@@ -30,7 +30,7 @@
     class:hidden={type !== types.ecash}
     onclick={setType(types.ecash)}
   >
-    <img src="/images/cash.png" class="w-8 my-auto" />
+    <img src="/images/cash.png" class="w-8 my-auto" alt="Ecash" />
     <div class="my-auto text-lg">Ecash</div>
   </button>
 
@@ -175,7 +175,7 @@
   {#if aid === user.id}
     <button type="button" class="btn" onclick={toggleType}>
       <img src="/images/liquid.svg" class="w-8" alt="Liquid" />
-      <img src="/images/cash.png" class="w-8 my-auto" />
+      <img src="/images/cash.png" class="w-8 my-auto" alt="Ecash" />
       <div class="my-auto">{t("payments.moreOptions")}</div>
     </button>
   {/if}
diff --git a/src/components/InvoiceData.svelte b/src/components/InvoiceData.svelte
index e08916fe..58348962 100644
--- a/src/components/InvoiceData.svelte
+++ b/src/components/InvoiceData.svelte
@@ -59,7 +59,7 @@
   >
     {txt}
 
-    <button onclick={() => copy(txt)}>
+    <button type="button" onclick={() => copy(txt)} aria-label="Copy invoice">
       <iconify-icon noobserver icon="ph:copy-bold" width="32"></iconify-icon>
     </button>
   </div>
diff --git a/src/components/InvoiceTypes.svelte b/src/components/InvoiceTypes.svelte
index a238dcde..4c4177a6 100644
--- a/src/components/InvoiceTypes.svelte
+++ b/src/components/InvoiceTypes.svelte
@@ -152,7 +152,7 @@
       class:hidden={activeOnly && type !== types.ecash}
       onclick={() => (activeOnly ? toggleType() : setType(types.ecash))}
     >
-      <img src="/images/cash.png" class="w-8 my-auto" />
+      <img src="/images/cash.png" class="w-8 my-auto" alt="Ecash" />
       <div class="my-auto text-lg">Ecash</div>
     </button>
 
diff --git a/src/components/ItemForm.svelte b/src/components/ItemForm.svelte
index d3ea88c0..d92b63a3 100644
--- a/src/components/ItemForm.svelte
+++ b/src/components/ItemForm.svelte
@@ -101,28 +101,38 @@
     <div class="grid sm:grid-cols-2 gap-4">
       <div class="h-64 rounded-2xl overflow-hidden">
         {#if src}
-          <img
-            {src}
-            alt={item.name}
-            class="object-cover w-full h-full"
+          <button
+            type="button"
+            class="block w-full h-full"
             onclick={select}
-            onkeydown={select}
-          />
+            aria-label="Select image"
+          >
+            <img
+              {src}
+              alt={item.name}
+              class="object-cover w-full h-full"
+            />
+          </button>
         {:else if item.image}
-          <img
-            src={`/api/public/${item.image}.webp`}
-            alt={item.name}
-            class="object-cover w-full h-full"
+          <button
+            type="button"
+            class="block w-full h-full"
             onclick={select}
-            onkeydown={select}
-          />
+            aria-label="Select image"
+          >
+            <img
+              src={`/api/public/${item.image}.webp`}
+              alt={item.name}
+              class="object-cover w-full h-full"
+            />
+          </button>
         {:else}
-          <div
+          <button
+            type="button"
             class="bg-gradient-to-r from-primary to-gradient mb-4 cursor-pointer hover:opacity-80 w-full h-full"
             onclick={select}
-            onkeydown={select}
-            alt="Banner"
-></div>
+            aria-label="Select image"
+          ></button>
         {/if}
       </div>
     </div>
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index b676d276..5de5ac56 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -304,12 +304,14 @@
       <button
         class="rounded-full border-2 border-primary bg-base-100/80 w-16 h-16 flex items-center justify-center"
         onclick={toggleList}
+        aria-label="Toggle location list"
       >
         <iconify-icon noobserver icon="ph:list-bold" width="24"></iconify-icon>
       </button>
       <button
         class="rounded-full border-2 border-primary bg-base-100/80 w-16 h-16 flex items-center justify-center"
         onclick={toggle}
+        aria-label={timeout ? "Resume map" : "Pause map"}
       >
         {#if timeout}
           <iconify-icon noobserver icon="ph:pause-bold" width="24"></iconify-icon>
diff --git a/src/components/Media.svelte b/src/components/Media.svelte
index bd681f6f..9c2c21f8 100644
--- a/src/components/Media.svelte
+++ b/src/components/Media.svelte
@@ -12,8 +12,8 @@
 {#if !!isImage(value.url)}
   <img src={value.url} alt={""} class="py-4" />
 {:else if isVideo(value.url)}
-  <!-- svelte-ignore a11y-media-has-caption -->
-  <video src={value.url} controls class="py-4" />
+  <!-- svelte-ignore a11y_media_has_caption -->
+  <video src={value.url} controls class="py-4"></video>
 {:else if isAudio(value.url)}
   <audio src={value.url} controls>
     <a href={value.url}>{value.url.replace(/https?:\/\/(www\.)?/, "")}</a>
diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte
index e0ef8779..b3f99b2c 100644
--- a/src/components/Menu.svelte
+++ b/src/components/Menu.svelte
@@ -26,7 +26,11 @@
 
 <div>
   <OutClick onOutClick={hideMenu}>
-    <button class="btn-menu {opacity('/support')}" onclick={toggleMenu}
+    <button
+      class="btn-menu {opacity('/support')}"
+      onclick={toggleMenu}
+      aria-label="Open menu"
+    >
       ><iconify-icon noobserver icon="ph:list-bold" width={w > 640 ? 32 : 24}
       ></iconify-icon>
     </button>
@@ -60,7 +64,7 @@
         {/each}
       </ul>
       <hr class="my-4" />
-      <a href="/?stay=true"
+      <a href="/?stay=true" aria-label="Coinos home"
         ><iconify-icon noobserver icon="coinos:logo" width="160"></iconify-icon></a
       >
     </div>
diff --git a/src/components/Payments.svelte b/src/components/Payments.svelte
index 0f07cc2b..dd153ec6 100644
--- a/src/components/Payments.svelte
+++ b/src/components/Payments.svelte
@@ -17,6 +17,10 @@
       class:border-b-0={i === payments.length - 1}
       class:text-error={amount < 0}
       onclick={() => goto(`/payment/${p.id}`)}
+      onkeydown={(e) =>
+        (e.key === "Enter" || e.key === " ") && goto(`/payment/${p.id}`)}
+      role="button"
+      tabindex="0"
     >
       <div class="whitespace-nowrap my-auto col-span-3">
         <div class="font-bold flex items-center">
@@ -86,7 +90,7 @@
                 class="text-yellow-300 text-3xl"
               ></iconify-icon>
             {:else if p.type === types.ecash}
-              <img src="/images/cash.png" class="w-12" />
+              <img src="/images/cash.png" class="w-12" alt="Ecash" />
             {:else if p.type === types.reconcile}
               <iconify-icon noobserver icon="ph:scales-bold" width="32"
               ></iconify-icon>
diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte
index 06faeeb7..ab5decf1 100644
--- a/src/components/Pin.svelte
+++ b/src/components/Pin.svelte
@@ -51,7 +51,9 @@
     role="dialog"
     class="fixed bg-base-100/90 inset-0 h-full w-full z-50 cursor-default"
     on:click|preventDefault
+    on:keydown|preventDefault
     aria-labelledby="title"
+    tabindex="-1"
   >
     <div
       class="mx-auto p-5 border shadow-lg rounded-md bg-base-100 space-y-5 max-w-lg"
diff --git a/src/components/Pinpad.svelte b/src/components/Pinpad.svelte
index 6abbfb17..65c9bd6c 100644
--- a/src/components/Pinpad.svelte
+++ b/src/components/Pinpad.svelte
@@ -68,7 +68,12 @@
       placeholder="_ _ _ _ _ _"
     />
   {/if}
-  <button type="button" class="contents" onclick={toggle}>
+  <button
+    type="button"
+    class="contents"
+    onclick={toggle}
+    aria-label={hide ? "Show PIN" : "Hide PIN"}
+  >
     <iconify-icon noobserver icon={hide ? "ph:eye-slash-bold" : "ph:eye-bold"} width="32"
     ></iconify-icon></button
   >
diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte
index da4ceb00..1fe4a84d 100644
--- a/src/components/Qr.svelte
+++ b/src/components/Qr.svelte
@@ -1,18 +1,32 @@
 <script>
-  import screenfull from "screenfull";
+  import { onMount } from "svelte";
+  import { browser } from "$app/environment";
   let { icon, text } = $props();
   let qr = $state();
+  let screenfull;
 
-  let src = `/qr/${encodeURIComponent(text)}`;
-  if (icon) src += `/${icon}`;
-  else src += "/raw";
+  onMount(async () => {
+    if (!browser) return;
+    screenfull = (await import("screenfull")).default;
+  });
+
+  let src = $derived(() => {
+    let url = `/qr/${encodeURIComponent(text)}`;
+    if (icon) url += `/${icon}`;
+    else url += "/raw";
+    return url;
+  });
 </script>
 
 <div
   class="w-72 sm:w-80 mx-auto cursor-pointer"
   bind:this={qr}
-  onclick={() => screenfull.toggle(qr)}
-  onkeydown={() => screenfull.toggle(qr)}
+  onclick={() => screenfull?.toggle?.(qr)}
+  onkeydown={(e) =>
+    (e.key === "Enter" || e.key === " ") && screenfull?.toggle?.(qr)}
+  role="button"
+  tabindex="0"
+  aria-label="Toggle fullscreen QR"
 >
   <img {src} class="mx-auto" alt="QR Code" />
 </div>
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 5d9611a5..fc1fc93d 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -1,7 +1,6 @@
 <script>
   import { invalidate } from "$app/navigation";
   import { browser } from "$app/environment";
-  import { hexToUint8Array } from "uint8array-extras";
   import {
     copy,
     f,
@@ -37,7 +36,7 @@
   } = $derived(data);
 
   let { currency, npub, username: n, display } = $derived(subject);
-  let locale = loc(user);
+  let locale = $derived(() => loc(user));
 
   let list = $state([]);
   let follow = async () => {
@@ -136,7 +135,7 @@
         <iconify-icon noobserver icon="ph:list-bold" width="32"></iconify-icon>
       </button>
       {#if subject.id === user?.id}
-        <a href="/settings/profile" class="btn contents">
+        <a href="/settings/profile" class="btn contents" aria-label="Edit profile">
           <iconify-icon noobserver icon="ph:pencil-bold" width="32"
           ></iconify-icon>
         </a>
@@ -151,7 +150,9 @@
         class="text-secondary mx-auto text-center lg:mx-0 break-words space-y-1"
         class:line-clamp-2={!showBio}
         onclick={toggleBio}
-        onkeydown={toggleBio}
+        onkeydown={(e) => (e.key === "Enter" || e.key === " ") && toggleBio()}
+        role="button"
+        tabindex="0"
       >
         <div>
           {subject.about}
@@ -194,11 +195,20 @@
                 {lnaddr}
               </div>
               <div class="flex mb-auto gap-1">
-                <button class="my-auto" onclick={() => copy(lnaddr)}
+                <button
+                  type="button"
+                  class="my-auto"
+                  aria-label="Copy lightning address"
+                  onclick={() => copy(lnaddr)}
+                >
                   ><iconify-icon noobserver icon="ph:copy-bold" width="32"
                   ></iconify-icon></button
                 >
-                <a href={`/qr/${encodeURIComponent(lnaddr)}`} class="my-auto">
+                <a
+                  href={`/qr/${encodeURIComponent(lnaddr)}`}
+                  class="my-auto"
+                  aria-label="Show lightning address QR"
+                >
                   <iconify-icon noobserver icon="ph:qr-code-bold" width="32"
                   ></iconify-icon>
                 </a>
@@ -213,7 +223,12 @@
               {profile}
             </div>
             <div class="flex mb-auto gap-1">
-              <button class="my-auto" onclick={() => copy(profile)}
+              <button
+                type="button"
+                class="my-auto"
+                aria-label="Copy profile URL"
+                onclick={() => copy(profile)}
+              >
                 ><iconify-icon noobserver icon="ph:copy-bold" width="32"
                 ></iconify-icon></button
               >
@@ -222,6 +237,7 @@
                   `${$page.url.protocol}//${profile}`,
                 )}`}
                 class="my-auto"
+                aria-label="Show profile URL QR"
               >
                 <iconify-icon noobserver icon="ph:qr-code-bold" width="32"
                 ></iconify-icon>
@@ -236,13 +252,19 @@
               {lnurl}
             </div>
             <div class="flex mb-auto gap-1">
-              <button class="my-auto" onclick={() => copy(`lightning:${lnurl}`)}
+              <button
+                type="button"
+                class="my-auto"
+                aria-label="Copy LNURL"
+                onclick={() => copy(`lightning:${lnurl}`)}
+              >
                 ><iconify-icon noobserver icon="ph:copy-bold" width="32"
                 ></iconify-icon></button
               >
               <a
                 href={`/${n}/accepted/${encodeURIComponent(`lightning:${lnurl}`)}`}
                 class="my-auto"
+                aria-label="Show LNURL QR"
               >
                 <iconify-icon noobserver icon="ph:qr-code-bold" width="32"
                 ></iconify-icon>
@@ -307,6 +329,7 @@
           <button
             type="submit"
             class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-60"
+            aria-label="Reset password"
           >
             <div class="mx-auto flex">
               <iconify-icon noobserver icon="ph:clock" width="32"
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 7d342994..a3ced17d 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -27,7 +27,9 @@
   };
 
   let pubkey = $state();
-  if (user) user.savings = 0;
+  $effect(() => {
+    if (user) user.savings = 0;
+  });
   let { host } = $derived($page.url);
 </script>
 
diff --git a/src/routes/(app)/[username]/(profile)/followers/+page.svelte b/src/routes/(app)/[username]/(profile)/followers/+page.svelte
index 28b4c6f0..13a8a65b 100644
--- a/src/routes/(app)/[username]/(profile)/followers/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/followers/+page.svelte
@@ -24,10 +24,7 @@
             data-sveltekit-preload-data="tap"
             rel="nofollow"
           >
-            <div
-              class="flex border-b last:border-b-0 py-4 text-2xl text-secondary"
-              :key={data.pubkey}
-            >
+            <div class="flex border-b last:border-b-0 py-4 text-2xl text-secondary">
               <div class="mb-auto mr-2">
                 <div class="md:hidden">
                   <Avatar size={12} user={data} disabled={true} />
diff --git a/src/routes/(app)/[username]/(profile)/follows/+page.svelte b/src/routes/(app)/[username]/(profile)/follows/+page.svelte
index 585cb32e..fe9dc81d 100644
--- a/src/routes/(app)/[username]/(profile)/follows/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/follows/+page.svelte
@@ -27,7 +27,7 @@
               data-sveltekit-preload-data="tap"
               rel="nofollow"
             >
-              <div class="flex py-4 text-lg text-secondary" :key={data.pubkey}>
+              <div class="flex py-4 text-lg text-secondary">
                 <div class="mb-auto mr-2">
                   <div class="md:hidden">
                     <Avatar size={12} user={data} disabled={true} />
diff --git a/src/routes/(app)/[username]/accepted/[text]/+page.svelte b/src/routes/(app)/[username]/accepted/[text]/+page.svelte
index 1483a294..93a06903 100644
--- a/src/routes/(app)/[username]/accepted/[text]/+page.svelte
+++ b/src/routes/(app)/[username]/accepted/[text]/+page.svelte
@@ -10,7 +10,7 @@
   let { data } = $props();
   let { nfc, text } = $derived(data);
   let { username } = $derived(data.subject);
-  let url = `https://coinos.io/p/${username.toLowerCase()}`;
+  let url = $derived(() => `https://coinos.io/p/${username.toLowerCase()}`);
 
   let lnurl = $derived(
     `https://${PUBLIC_DOMAIN}/ln/${encode(
@@ -29,7 +29,11 @@
   >
     <div class="flex gap-2 mx-auto justify-center">
       <!-- <img src="/images/bitcoin.png" class="w-16 h-16 my-auto" /> -->
-      <img src="/images/bitcoin-logo.png" class="my-auto w-[400px]" />
+      <img
+        src="/images/bitcoin-logo.png"
+        class="my-auto w-[400px]"
+        alt="Bitcoin"
+      />
       <!-- <h3 class="text-5xl font-bold text-center my-auto"> -->
       <!--   bitcoin -->
       <!-- </h3> -->
@@ -38,10 +42,12 @@
       <img
         src="/images/tap.png"
         class="w-24 absolute top-52 left-4 rotate-[-10deg]"
+        alt="Tap"
       />
       <img
         src="/images/arrow.png"
         class="w-24 scale-x-[-1] rotate-[120deg] absolute top-52 left-32 w-20 h-52"
+        alt="Arrow"
       />
     {/if}
     <Qr {text} icon="icon.png" />
diff --git a/src/routes/(app)/[username]/receive/+page.svelte b/src/routes/(app)/[username]/receive/+page.svelte
index cd692abf..368af25c 100644
--- a/src/routes/(app)/[username]/receive/+page.svelte
+++ b/src/routes/(app)/[username]/receive/+page.svelte
@@ -32,14 +32,14 @@
 
   let id = $state();
   let { rate, subject, user, text } = $derived(data);
-  let locale = loc(user);
+  let locale = $derived(() => loc(user));
 
-  let { currency, username } = subject;
+  let { currency, username } = $derived(subject);
   let type = types.lightning;
   let hash = "";
   let qr;
 
-  let aid = subject.id;
+  let aid = $derived(subject.id);
   let invoice = $derived({
     aid,
     type: types.lightning,
diff --git a/src/routes/(app)/account/ark/+page.svelte b/src/routes/(app)/account/ark/+page.svelte
index 6d1d73f2..4036d140 100644
--- a/src/routes/(app)/account/ark/+page.svelte
+++ b/src/routes/(app)/account/ark/+page.svelte
@@ -97,12 +97,14 @@
 
         {#if showNsec}
           <div class="space-y-2">
-            <div
-              class="break-all p-4 rounded-lg cursor-pointer border"
+            <button
+              type="button"
+              class="break-all p-4 rounded-lg cursor-pointer border text-left w-full"
               onclick={() => copy(nsec)}
+              aria-label="Copy backup key"
             >
               {nsec}
-            </div>
+            </button>
           </div>
 
           <div class="flex gap-2">
@@ -151,13 +153,18 @@
             />
           {/if}
 
-          <iconify-icon
-            noobserver
-            class="cursor-pointer ml-auto"
+          <button
+            type="button"
+            class="ml-auto"
+            aria-label="Toggle password visibility"
             onclick={() => (revealPassword = !revealPassword)}
-            icon={revealPassword ? "ph:eye-bold" : "ph:eye-slash-bold"}
-            width="32"
-          ></iconify-icon>
+          >
+            <iconify-icon
+              noobserver
+              icon={revealPassword ? "ph:eye-bold" : "ph:eye-slash-bold"}
+              width="32"
+            ></iconify-icon>
+          </button>
         </label>
 
         <label
@@ -184,13 +191,18 @@
               class="clean"
             />
           {/if}
-          <iconify-icon
-            noobserver
-            class="cursor-pointer ml-auto"
+          <button
+            type="button"
+            class="ml-auto"
+            aria-label="Toggle confirmation visibility"
             onclick={() => (revealConfirm = !revealConfirm)}
-            icon={revealConfirm ? "ph:eye-bold" : "ph:eye-slash-bold"}
-            width="32"
-          ></iconify-icon>
+          >
+            <iconify-icon
+              noobserver
+              icon={revealConfirm ? "ph:eye-bold" : "ph:eye-slash-bold"}
+              width="32"
+            ></iconify-icon>
+          </button>
         </label>
 
         <div class="flex gap-2">
diff --git a/src/routes/(app)/account/cash/+page.svelte b/src/routes/(app)/account/cash/+page.svelte
index b0e2e757..8b2ddc68 100644
--- a/src/routes/(app)/account/cash/+page.svelte
+++ b/src/routes/(app)/account/cash/+page.svelte
@@ -10,7 +10,7 @@
     <div class="space-y-5">
       <a href="/account/cash" class="block">
         <div class="shadow p-8 rounded-xl flex gap-4 hover:bg-primary">
-          <img src="/icons/logo-symbol.svg" class="w-20" />
+          <img src="/icons/logo-symbol.svg" class="w-20" alt="Coinos" />
           <div>
             <div class="text-xl">Coinos</div>
             <div class="text-secondary">https://mint.coinos.io</div>
@@ -19,7 +19,7 @@
       </a>
       <a href="/account/cash" class="block">
         <div class="shadow p-8 rounded-xl flex gap-4 hover:bg-primary">
-          <img src="/images/minibits.png" class="w-20" />
+          <img src="/images/minibits.png" class="w-20" alt="Minibits" />
           <div>
             <div class="text-xl">Minibits</div>
             <div class="text-secondary">https://mint.minibits.cash/bitcoin</div>
diff --git a/src/routes/(app)/account/pass/+page.svelte b/src/routes/(app)/account/pass/+page.svelte
index 3be7628d..7de18184 100644
--- a/src/routes/(app)/account/pass/+page.svelte
+++ b/src/routes/(app)/account/pass/+page.svelte
@@ -107,12 +107,18 @@
         />
       {/if}
 
-      <iconify-icon noobserver
-        class="cursor-pointer ml-auto"
+      <button
+        type="button"
+        class="ml-auto"
+        aria-label="Toggle password visibility"
         onclick={() => (revealPassword = !revealPassword)}
-        icon={revealPassword ? "ph:eye-bold" : "ph:eye-slash-bold"}
-        width="32"
-      ></iconify-icon>
+      >
+        <iconify-icon
+          noobserver
+          icon={revealPassword ? "ph:eye-bold" : "ph:eye-slash-bold"}
+          width="32"
+        ></iconify-icon>
+      </button>
     </label>
 
     <label
@@ -139,12 +145,18 @@
           class="clean"
         />
       {/if}
-      <iconify-icon noobserver
-        class="cursor-pointer ml-auto"
+      <button
+        type="button"
+        class="ml-auto"
+        aria-label="Toggle confirmation visibility"
         onclick={() => (revealConfirm = !revealConfirm)}
-        icon={revealConfirm ? "ph:eye-bold" : "ph:eye-slash-bold"}
-        width="32"
-      ></iconify-icon>
+      >
+        <iconify-icon
+          noobserver
+          icon={revealConfirm ? "ph:eye-bold" : "ph:eye-slash-bold"}
+          width="32"
+        ></iconify-icon>
+      </button>
     </label>
 
     <div class="flex gap-2">
diff --git a/src/routes/(app)/account/seed/+page.svelte b/src/routes/(app)/account/seed/+page.svelte
index 9df891d6..73d15f00 100644
--- a/src/routes/(app)/account/seed/+page.svelte
+++ b/src/routes/(app)/account/seed/+page.svelte
@@ -32,12 +32,14 @@
     {/if}
 
     <button type="button" class="btn" onclick={generate}>
-      <iconify-icon noobserver icon="ph:dice-three-bold" width="32" />
+      <iconify-icon noobserver icon="ph:dice-three-bold" width="32"
+      ></iconify-icon>
       <div class="my-auto">{$t("accounts.regenerate")}</div>
     </button>
 
     <button type="button" class="btn" onclick={() => copy($mnemonic)}>
-      <iconify-icon noobserver icon="ph:copy-bold" width="32" />
+      <iconify-icon noobserver icon="ph:copy-bold" width="32"
+      ></iconify-icon>
       <div class="my-auto">
         {$t("payments.copy")}
       </div>
diff --git a/src/routes/(app)/account/setup/+page.svelte b/src/routes/(app)/account/setup/+page.svelte
index 24b6e248..237df0bb 100644
--- a/src/routes/(app)/account/setup/+page.svelte
+++ b/src/routes/(app)/account/setup/+page.svelte
@@ -8,7 +8,7 @@
   <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
     <a href="/account/cash" class="block">
       <div class="shadow p-8 rounded-xl flex gap-4 hover:bg-primary">
-        <img src="/images/cash.png" class="w-20 my-auto" />
+        <img src="/images/cash.png" class="w-20 my-auto" alt="Cash account" />
         <div>
           <div class="text-xl">Cash</div>
           <div class="text-secondary">
@@ -19,7 +19,7 @@
     </a>
     <a href="/account/savings" class="block">
       <div class="shadow p-8 rounded-xl flex gap-4 hover:bg-primary">
-        <img src="/images/keys.png" class="w-20 my-auto" />
+        <img src="/images/keys.png" class="w-20 my-auto" alt="Savings account" />
         <div>
           <div class="text-xl">Savings</div>
           <div class="text-secondary">
diff --git a/src/routes/(app)/apps/[pubkey]/payments/+page.svelte b/src/routes/(app)/apps/[pubkey]/payments/+page.svelte
index 1feda3b3..e5a6f14c 100644
--- a/src/routes/(app)/apps/[pubkey]/payments/+page.svelte
+++ b/src/routes/(app)/apps/[pubkey]/payments/+page.svelte
@@ -5,7 +5,7 @@
 
   let { data } = $props();
   let { app, user } = $derived(data);
-  let locale = loc(user);
+  let locale = $derived(() => loc(user));
   let { payments } = $derived(app);
 </script>
 
diff --git a/src/routes/(app)/fund/[id]/+page.svelte b/src/routes/(app)/fund/[id]/+page.svelte
index da869fed..73e13819 100644
--- a/src/routes/(app)/fund/[id]/+page.svelte
+++ b/src/routes/(app)/fund/[id]/+page.svelte
@@ -16,7 +16,7 @@
 
   let { amount, payments, managers, rate, user } = data;
   let { id } = $page.params;
-  let locale = loc(user);
+  let locale = $derived(() => loc(user));
 
   let currency = user ? user.currency : "CAD";
 
diff --git a/src/routes/(app)/fund/[id]/access/+page.svelte b/src/routes/(app)/fund/[id]/access/+page.svelte
index cc2921c5..470729c4 100644
--- a/src/routes/(app)/fund/[id]/access/+page.svelte
+++ b/src/routes/(app)/fund/[id]/access/+page.svelte
@@ -37,7 +37,12 @@
             <div class="my-auto text-left">
               <p class="ml-1 text-lg break-words">{c.username}</p>
             </div>
-            <button onclick={(e) => del(e, c)} class="ml-auto">
+            <button
+              type="button"
+              onclick={(e) => del(e, c)}
+              class="ml-auto"
+              aria-label={`Remove ${c.username}`}
+            >
               <iconify-icon icon="ph:trash-bold" width="32"></iconify-icon>
             </button>
           </div>
diff --git a/src/routes/(app)/fund/[id]/gift/+page.svelte b/src/routes/(app)/fund/[id]/gift/+page.svelte
index 7c65d314..b53c7c70 100644
--- a/src/routes/(app)/fund/[id]/gift/+page.svelte
+++ b/src/routes/(app)/fund/[id]/gift/+page.svelte
@@ -9,8 +9,8 @@
   let { data } = $props();
   let { id, user, amount, rate } = $derived(data);
   let text = $page.url.href.replace("gift", "sweep");
-  let currency = user ? user.currency : "CAD";
-  let locale = loc(user);
+  let currency = $derived(() => (user ? user.currency : "CAD"));
+  let locale = $derived(() => loc(user));
 </script>
 
 <div class="container px-4 max-w-4xl mx-auto space-y-5 pb-10">
@@ -33,7 +33,11 @@
       <div class="my-auto break-all min-w-0 !w-auto max-w-full">{text}</div>
     </button>
 
-    <a href={`/qr/${encodeURIComponent(text)}`} class="btn !w-auto">
+    <a
+      href={`/qr/${encodeURIComponent(text)}`}
+      class="btn !w-auto"
+      aria-label="Show gift QR"
+    >
       <iconify-icon icon="ph:qr-code-bold" width={32}></iconify-icon>
     </a>
   </div>
diff --git a/src/routes/(app)/fund/[id]/withdraw/+page.svelte b/src/routes/(app)/fund/[id]/withdraw/+page.svelte
index 69a74a3f..54725f03 100644
--- a/src/routes/(app)/fund/[id]/withdraw/+page.svelte
+++ b/src/routes/(app)/fund/[id]/withdraw/+page.svelte
@@ -16,7 +16,7 @@
   let loading = $state();
   let { id, balance, rate } = $derived(data);
   let { amount } = $state(data);
-  let locale = loc(user);
+  let locale = $derived(() => loc(user));
 
   let submit = $state();
   let submitting = $state();
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 30fa3dce..a2c204d1 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -42,12 +42,16 @@
   let { id, subject, user } = $state(data);
   let { invoice, src } = $derived(data);
   let { aid, amount, rate, tip, hash, text, type } = $derived(invoice);
-  let { memo } = $state(invoice);
+  let memo = $state();
   let { username, currency } = $derived(invoice.user);
-  let locale = loc(user);
+  let locale = $derived(() => loc(user));
 
   let tipPercent = $derived(tip ? (tip / amount) * 100 : 0);
 
+  $effect(() => {
+    if (typeof memo === "undefined") memo = invoice.memo;
+  });
+
   // if (browser && !subbed[id])
   //   send("subscribe", invoice)
   //     .then(() => (subbed[id] = true))
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index a1ea3586..2dca611e 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -76,10 +76,10 @@
     tip,
     user: { username },
   } = $state(invoice);
-  let locale = $derived(loc(user));
+  let locale = $derived(() => loc(user));
 
   let qr;
-  let tipPercent = $state((tip / amount) * 100);
+  let tipPercent = $state();
 
   let fullscreen;
 
@@ -87,6 +87,7 @@
   let rate = invoice.rate * (data.rate / data.invoiceRate);
 
   $effect(() => {
+    if (typeof tipPercent === "undefined") tipPercent = (tip / amount) * 100;
     tip = Math.round((amount / 100) * untrack(() => tipPercent));
   });
 
@@ -173,7 +174,11 @@
       </div>
     {/if}
 
-    <button type="submit" bind:this={submit}></button>
+    <button
+      type="submit"
+      bind:this={submit}
+      aria-label="Submit tip"
+    ></button>
   </form>
 
   {#if showCustomAmount}
diff --git a/src/routes/(app)/invoices/+page.svelte b/src/routes/(app)/invoices/+page.svelte
index fbacb2df..fa2ad549 100644
--- a/src/routes/(app)/invoices/+page.svelte
+++ b/src/routes/(app)/invoices/+page.svelte
@@ -15,13 +15,15 @@
         {#if show[i.id]}
           <div class="md:col-span-8">{i.hash}</div>
         {:else}
-          <div
-            class="cursor-pointer grow md:col-span-6"
+          <button
+            type="button"
+            class="cursor-pointer grow md:col-span-6 text-left"
             onclick={() => display(i.id)}
+            aria-label="Show full invoice hash"
           >
             {i.hash.substr(0, 12)}
             {#if !show[i.id]}...{/if}
-          </div>
+          </button>
         {/if}
         <div class="md:col-span-2 whitespace-nowrap">
           {i.received} / {i.amount}
diff --git a/src/routes/(app)/ln/withdrawal/sent/+page.svelte b/src/routes/(app)/ln/withdrawal/sent/+page.svelte
index e06e3c2c..961fa7a9 100644
--- a/src/routes/(app)/ln/withdrawal/sent/+page.svelte
+++ b/src/routes/(app)/ln/withdrawal/sent/+page.svelte
@@ -19,7 +19,7 @@
   <h1 class="text-3xl md:text-4xl font-bold mb-6">Request Sent!</h1>
 </div>
 
-<a href={`/payments`}>
+<a href={`/payments`} aria-label="Back to payments">
   <div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50"></div>
 </a>
 
diff --git a/src/routes/(app)/messages/[recipient]/+page.svelte b/src/routes/(app)/messages/[recipient]/+page.svelte
index d383d576..9c916d3d 100644
--- a/src/routes/(app)/messages/[recipient]/+page.svelte
+++ b/src/routes/(app)/messages/[recipient]/+page.svelte
@@ -147,7 +147,6 @@
             class="rounded-2xl px-4 py-2 max-w-[300px] mb-1 text-lg"
             class:ours
             class:theirs
-            :key={id}
           >
             {message}
           </div>
@@ -177,7 +176,11 @@
       class="grow break-all py-4 outline-none mt-0 pl-4"
       bind:innerHTML={message}
       onkeydown={keydown}
-></div>
+      role="textbox"
+      aria-multiline="true"
+      aria-label="Message"
+      tabindex="0"
+    ></div>
     <button type="submit" class="my-auto shrink-0">
       <Icon icon="send" style="w-8" />
     </button>
diff --git a/src/routes/(app)/pay/[username]/[...amount]/+page.svelte b/src/routes/(app)/pay/[username]/[...amount]/+page.svelte
index 618504ca..82fa3750 100644
--- a/src/routes/(app)/pay/[username]/[...amount]/+page.svelte
+++ b/src/routes/(app)/pay/[username]/[...amount]/+page.svelte
@@ -12,14 +12,19 @@
 
   let { subject, rate, user } = $state(data);
   let currency = subject?.currency || "USD";
-  let locale = $derived(loc(subject));
+  let locale = $derived(() => loc(subject));
   let next = $state();
 
   let initialAmount = $derived(form?.amount || data.amount);
-  let amount = $state(initialAmount);
-  let fiat = $state(!initialAmount);
+  let amount = $state();
+  let fiat = $state();
   let formElement = $state();
 
+  $effect(() => {
+    if (typeof amount === "undefined") amount = initialAmount;
+    if (typeof fiat === "undefined") fiat = !initialAmount;
+  });
+
   let setMax = async (e) => {
     e.preventDefault();
     let body = new FormData(formElement);
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index 0667291e..3ccf5a37 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -24,7 +24,7 @@
   let { data } = $props();
   let { user, payment: p } = $state(data);
   let locale = user ? locales[user.language] : locales["en"];
-  let userLocale = loc(user);
+  let userLocale = $derived(() => loc(user));
 
   let {
     id,
@@ -170,7 +170,7 @@
   {:else if memo?.includes("9734")}
     {@const eid = JSON.parse(memo).tags.find((t) => t[0] === "e")[1]}
     <a href={`/e/${eid}`} class="btn btn-accent">
-      <img src="/images/nostr.png" class="w-8" />
+      <img src="/images/nostr.png" class="w-8" alt="Nostr" />
       <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"
       ></iconify-icon>{$t("payments.zappedEvent")}
     </a>
diff --git a/src/routes/(app)/payment/[id]/plain/+page.svelte b/src/routes/(app)/payment/[id]/plain/+page.svelte
index 24031e1e..c78428bb 100644
--- a/src/routes/(app)/payment/[id]/plain/+page.svelte
+++ b/src/routes/(app)/payment/[id]/plain/+page.svelte
@@ -83,6 +83,6 @@
   {/if}
 </div>
 
-<a href={`/payment/${id}`}>
+<a href={`/payment/${id}`} aria-label="View payment details">
   <div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50"></div>
 </a>
diff --git a/src/routes/(app)/payments/[...page]/+page.svelte b/src/routes/(app)/payments/[...page]/+page.svelte
index e833d4ca..a7039e5d 100644
--- a/src/routes/(app)/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/payments/[...page]/+page.svelte
@@ -22,7 +22,7 @@
     page: p,
   } = $derived(data);
 
-  let locale = loc(user);
+  let locale = $derived(() => loc(user));
 
   let change = ({ target: { value } }) => goto(value);
   let link = (p) => {
diff --git a/src/routes/(app)/pos/+page.svelte b/src/routes/(app)/pos/+page.svelte
index 871c355d..2a072f5a 100644
--- a/src/routes/(app)/pos/+page.svelte
+++ b/src/routes/(app)/pos/+page.svelte
@@ -167,8 +167,15 @@
           <div class="text-center text-2xl">Config written ✔</div>
         {:else}
           <div>Generated config file (<b>{bytes.length} bytes</b>)</div>
-          <label class="label mt-2">LittleFS address (hex)</label>
-            <input class="input" bind:value={littlefsAddress} onchange={(e) => (littlefsAddress = Number(e.target.value))} />
+          <label class="label mt-2" for="littlefs-address"
+            >LittleFS address (hex)</label
+          >
+          <input
+            id="littlefs-address"
+            class="input"
+            bind:value={littlefsAddress}
+            onchange={(e) => (littlefsAddress = Number(e.target.value))}
+          />
           <div class="mt-3">
             <button class="btn" onclick={flashConfig}>Flash config</button>
           </div>
@@ -185,11 +192,26 @@
     {:else}
       <!-- NEW FIRMWARE FLOW -->
       <div class="space-y-3">
-        <label class="label">Select .ino.bin (firmware)</label>
-        <input type="file" accept=".bin,application/octet-stream" class="input" onchange={onPickFw} />
-
-        <label class="label">Firmware address (hex, default 0x10000)</label>
-        <input class="input" bind:value={fwAddress} onchange={(e) => (fwAddress = Number(e.target.value))} />
+        <label class="label" for="firmware-file"
+          >Select .ino.bin (firmware)</label
+        >
+        <input
+          id="firmware-file"
+          type="file"
+          accept=".bin,application/octet-stream"
+          class="input"
+          onchange={onPickFw}
+        />
+
+        <label class="label" for="firmware-address"
+          >Firmware address (hex, default 0x10000)</label
+        >
+        <input
+          id="firmware-address"
+          class="input"
+          bind:value={fwAddress}
+          onchange={(e) => (fwAddress = Number(e.target.value))}
+        />
 
         <label class="flex items-center gap-2 mt-2">
           <input type="checkbox" bind:checked={fwEraseAll} />
diff --git a/src/routes/(app)/reset/[code]/+page.svelte b/src/routes/(app)/reset/[code]/+page.svelte
index ce43a79d..c13bb7b1 100644
--- a/src/routes/(app)/reset/[code]/+page.svelte
+++ b/src/routes/(app)/reset/[code]/+page.svelte
@@ -12,8 +12,8 @@
 
   let { form } = $props();
   let email;
-  let loading;
-  let recaptchaToken = "";
+  let loading = $state(false);
+  let recaptchaToken = $state("");
   let recaptchaSiteKey = PUBLIC_RECAPTCHA_SITE_KEY;
   let isTor = browser && location.hostname.endsWith(".onion");
 
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index 52b92501..28ef4a19 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -147,13 +147,22 @@
                 <p class="ml-1 text-lg break-words">{c.username}</p>
               </div>
               <div class="flex ml-auto gap-1">
-                <button onclick={(e) => pin(e, c)}>
+                <button
+                  type="button"
+                  onclick={(e) => pin(e, c)}
+                  aria-label={c.pinned ? "Unpin contact" : "Pin contact"}
+                >
                   <iconify-icon
                     icon={c.pinned ? "ph:push-pin-fill" : "ph:push-pin-bold"}
                     width={32}
                   ></iconify-icon>
                 </button>
-                <button class="ml-auto" onclick={(e) => trust(e, c)}>
+                <button
+                  type="button"
+                  class="ml-auto"
+                  onclick={(e) => trust(e, c)}
+                  aria-label={c.trusted ? "Untrust contact" : "Trust contact"}
+                >
                   <iconify-icon
                     icon={c.trusted ? "ph:star-fill" : "ph:star-bold"}
                     width={32}
diff --git a/src/routes/(app)/send/ark/[address]/+page.svelte b/src/routes/(app)/send/ark/[address]/+page.svelte
index 4f355ec1..014df2fb 100644
--- a/src/routes/(app)/send/ark/[address]/+page.svelte
+++ b/src/routes/(app)/send/ark/[address]/+page.svelte
@@ -13,7 +13,7 @@
   let { balance, user } = data;
   let { address } = $page.params;
   let { currency, username } = user;
-  let locale = loc(user);
+  let locale = $derived(() => loc(user));
 
   let amount = $state(0);
   let a = $state(0);
diff --git a/src/routes/(app)/send/bitcoin/[address]/+page.svelte b/src/routes/(app)/send/bitcoin/[address]/+page.svelte
index 529e2691..77b5b1cb 100644
--- a/src/routes/(app)/send/bitcoin/[address]/+page.svelte
+++ b/src/routes/(app)/send/bitcoin/[address]/+page.svelte
@@ -12,7 +12,7 @@
   let { balance, user } = data;
   let { address } = $page.params;
   let { currency, username } = user;
-  let locale = loc(user);
+  let locale = $derived(() => loc(user));
 
   let amount = $state(0);
   let a = $state(0);
diff --git a/src/routes/(app)/send/fund/[...name]/[...amount]/+page.svelte b/src/routes/(app)/send/fund/[...name]/[...amount]/+page.svelte
index d34ed073..021a37bf 100644
--- a/src/routes/(app)/send/fund/[...name]/[...amount]/+page.svelte
+++ b/src/routes/(app)/send/fund/[...name]/[...amount]/+page.svelte
@@ -15,7 +15,7 @@
   let { name, rate } = $derived(data);
   let loading = $state();
   let fiat = $state();
-  let locale = loc(user);
+  let locale = $derived(() => loc(user));
 
   let submit = $state();
   let submitting = $state();
diff --git a/src/routes/(app)/send/lightning/[payreq]/[...memo]/+page.svelte b/src/routes/(app)/send/lightning/[payreq]/[...memo]/+page.svelte
index 2b7c008a..af66cebf 100644
--- a/src/routes/(app)/send/lightning/[payreq]/[...memo]/+page.svelte
+++ b/src/routes/(app)/send/lightning/[payreq]/[...memo]/+page.svelte
@@ -14,7 +14,7 @@
   let { alias, memo, payreq, ourfee, user } = $derived({ ...data, ...form });
   let a = $state();
   let { currency, locked } = $derived(user);
-  let locale = loc(user);
+  let locale = $derived(() => loc(user));
 
   $effect(() => ($rate ||= data.rate));
   $effect(() => form && (loading = false));
diff --git a/src/routes/(app)/send/zap/[id]/[...amount]/+page.svelte b/src/routes/(app)/send/zap/[id]/[...amount]/+page.svelte
index e6dd1384..551a84e4 100644
--- a/src/routes/(app)/send/zap/[id]/[...amount]/+page.svelte
+++ b/src/routes/(app)/send/zap/[id]/[...amount]/+page.svelte
@@ -17,7 +17,7 @@
   let { id, request, user } = $derived({ ...data, ...form });
   let a = $state(data.amount);
   let { currency } = $derived(user);
-  let locale = loc(user);
+  let locale = $derived(() => loc(user));
   let event = $state();
 
   $effect(() => ($rate ||= data.rate));
diff --git a/src/routes/(app)/settings/account/+page.svelte b/src/routes/(app)/settings/account/+page.svelte
index c51c2928..30161ee2 100644
--- a/src/routes/(app)/settings/account/+page.svelte
+++ b/src/routes/(app)/settings/account/+page.svelte
@@ -16,7 +16,7 @@
   let { user } = $state(data);
   let { connect, rates, subscriptions } = data;
   let { currency, email, tip, verified } = $state(user);
-  let rate = rates[currency];
+  let rate = $derived(() => rates[currency]);
 
   let fiats = Object.keys(rates).sort((a, b) => a.localeCompare(b));
   let keypress = (e) => e.key === "Enter" && (e.preventDefault() || el.click());
@@ -325,7 +325,7 @@
 
 {#if connect !== "connected"}
   <a href={connect} class="btn flex">
-    <img src="/images/square.svg" class="w-12" />
+    <img src="/images/square.svg" class="w-12" alt="Square" />
     <div>{$t("user.settings.connectSquare")}</div></a
   >
 {:else}
@@ -334,6 +334,7 @@
       src="/images/square.svg"
       class="w-12"
       class:invert={$theme === "dark"}
+      alt="Square"
     />
     <div>{$t("user.settings.revokeSquare")}</div>
   </button>
diff --git a/src/routes/(app)/settings/nostr/+page.svelte b/src/routes/(app)/settings/nostr/+page.svelte
index 7168f4f7..06bc97d5 100644
--- a/src/routes/(app)/settings/nostr/+page.svelte
+++ b/src/routes/(app)/settings/nostr/+page.svelte
@@ -188,7 +188,7 @@
 
   {#if extensionAvailable}
     <button class="btn" type="button" onclick={getPubkey}>
-      <img src="/images/alby.svg" width="32" />
+      <img src="/images/alby.svg" width="32" alt="Alby" />
       {$t("user.settings.syncWithExtension")}</button
     >
   {/if}
diff --git a/src/routes/(app)/settings/profile/+page.svelte b/src/routes/(app)/settings/profile/+page.svelte
index 3b7de9d3..8e9983a9 100644
--- a/src/routes/(app)/settings/profile/+page.svelte
+++ b/src/routes/(app)/settings/profile/+page.svelte
@@ -7,8 +7,12 @@
 
   let { data } = $props();
   let { user } = $derived(data);
-  let { id } = user;
-  let { about, banner, picture, display, username } = $state(user);
+  let { id } = $derived(user);
+  let about = $state();
+  let banner = $state();
+  let picture = $state();
+  let display = $state();
+  let username = $state();
 
   let avatarFile,
     avatarInput = $state(),
@@ -55,6 +59,15 @@
   let url = $derived(`${$page.url.host}/${username}`);
   let full = $derived(`${$page.url.protocol}//${url}`);
   let addr = $derived(`${username}@${$page.url.host}`);
+
+  $effect(() => {
+    if (!user) return;
+    if (typeof about === "undefined") about = user.about;
+    if (typeof banner === "undefined") banner = user.banner;
+    if (typeof picture === "undefined") picture = user.picture;
+    if (typeof display === "undefined") display = user.display;
+    if (typeof username === "undefined") username = user.username;
+  });
 </script>
 
 <div>
@@ -91,7 +104,9 @@
       <div
         class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto hover:opacity-80 cursor-pointer"
         onclick={selectAvatar}
-        onkeydown={selectAvatar}
+        onkeydown={(e) => (e.key === "Enter" || e.key === " ") && selectAvatar()}
+        role="button"
+        tabindex="0"
       >
         <img
           src={$avatar?.src || picture}
@@ -103,7 +118,9 @@
       <div
         class="rounded-full border-4 border-base-100 p-4 bg-base-200 w-24 h-24 my-auto hover:opacity-80 cursor-pointer"
         onclick={selectAvatar}
-        onkeydown={selectAvatar}
+        onkeydown={(e) => (e.key === "Enter" || e.key === " ") && selectAvatar()}
+        role="button"
+        tabindex="0"
       ></div>
     {/if}
     <div class="ml-2 p-2">
@@ -134,19 +151,25 @@
   </div>
 
   {#if $bannerStore || banner}
-    <img
-      src={$bannerStore ? $bannerStore.src : banner}
-      class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
+    <button
+      type="button"
+      class="w-full"
       onclick={selectBanner}
-      onkeydown={selectBanner}
-      alt="Banner"
-    />
+      aria-label="Select banner"
+    >
+      <img
+        src={$bannerStore ? $bannerStore.src : banner}
+        class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
+        alt="Banner"
+      />
+    </button>
   {:else}
     <div
       class="bg-base-200 w-full h-48 mb-4 cursor-pointer hover:opacity-80"
       onclick={selectBanner}
-      onkeydown={selectBanner}
-      alt="Banner"
+      onkeydown={(e) => (e.key === "Enter" || e.key === " ") && selectBanner()}
+      role="button"
+      tabindex="0"
     ></div>
   {/if}
 
diff --git a/src/routes/(app)/settings/security/+page.svelte b/src/routes/(app)/settings/security/+page.svelte
index 8c38bca1..77723230 100644
--- a/src/routes/(app)/settings/security/+page.svelte
+++ b/src/routes/(app)/settings/security/+page.svelte
@@ -11,7 +11,7 @@
 
   let { data } = $props();
   let { user } = $derived(data);
-  let { id } = user;
+  let { id } = $derived(user);
   let { haspin } = $derived(user);
 
   let confirming2fa = $state(),
diff --git a/src/routes/(app)/settings/shopify/+page.svelte b/src/routes/(app)/settings/shopify/+page.svelte
index 04f82009..e67be691 100644
--- a/src/routes/(app)/settings/shopify/+page.svelte
+++ b/src/routes/(app)/settings/shopify/+page.svelte
@@ -25,7 +25,10 @@
         "/settings/apps/development",
   );
 
-  let script = `<script src="${$page.url.protocol}//${$page.url.host}/${user.username}/shopify.js"><\/script>`;
+  let script = $derived(
+    () =>
+      `<script src="${$page.url.protocol}//${$page.url.host}/${user.username}/shopify.js"><\/script>`,
+  );
 </script>
 
 <div>
diff --git a/src/routes/(app)/verify/[code]/+page.svelte b/src/routes/(app)/verify/[code]/+page.svelte
index 1fe5d898..57d22a3f 100644
--- a/src/routes/(app)/verify/[code]/+page.svelte
+++ b/src/routes/(app)/verify/[code]/+page.svelte
@@ -26,7 +26,7 @@
   {/if}
 </div>
 
-<a href={`/${user.username}`}>
+<a href={`/${user.username}`} aria-label="Go to profile">
   <div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50"></div>
 </a>
 
diff --git a/src/routes/(static)/bounties/+page.svelte b/src/routes/(static)/bounties/+page.svelte
index 695eae3e..03a9cb8f 100644
--- a/src/routes/(static)/bounties/+page.svelte
+++ b/src/routes/(static)/bounties/+page.svelte
@@ -113,7 +113,7 @@
               noobserver
               icon="ph:lightning-fill"
               class="text-yellow-300"
-            />
+            ></iconify-icon>
             <span class="text-sm font-semibold tabular-nums">
               {s(amount, "en-CA")}
             </span>
diff --git a/src/routes/(static)/docs/+page.svelte b/src/routes/(static)/docs/+page.svelte
index c323f9bd..37cc44bc 100644
--- a/src/routes/(static)/docs/+page.svelte
+++ b/src/routes/(static)/docs/+page.svelte
@@ -21,7 +21,12 @@
 </script>
 
 {#snippet cp(something)}
-  <button type="button" class="ml-auto" onclick={() => copy(something)}>
+  <button
+    type="button"
+    class="ml-auto"
+    onclick={() => copy(something)}
+    aria-label="Copy value"
+  >
     <iconify-icon noobserver icon="ph:copy-bold" width="42"></iconify-icon>
   </button>
 {/snippet}
diff --git a/src/routes/(static)/login/+page.svelte b/src/routes/(static)/login/+page.svelte
index 28e82e09..d25c6e51 100644
--- a/src/routes/(static)/login/+page.svelte
+++ b/src/routes/(static)/login/+page.svelte
@@ -208,7 +208,7 @@
           <Spinner />
         </div>
       {:else}
-        <img src="/images/nostr.png" class="w-8" />
+        <img src="/images/nostr.png" class="w-8" alt="Nostr" />
       {/if}
       <div class="my-auto">{$t("login.nostr")}</div>
     </button>
@@ -229,8 +229,10 @@
   <div
     class="fixed bg-base-100/90 inset-0 h-full w-full z-50 cursor-default"
     onclick={(e) => e.stopPropagation()}
+    onkeydown={(e) => e.stopPropagation()}
     role="dialog"
     aria-labelledby="title"
+    tabindex="-1"
   >
     <div
       class="mx-auto p-5 border shadow-lg rounded-md bg-base-100 space-y-5 max-w-lg"
diff --git a/src/routes/(static)/register/+page.svelte b/src/routes/(static)/register/+page.svelte
index bb3af128..5a2f966f 100644
--- a/src/routes/(static)/register/+page.svelte
+++ b/src/routes/(static)/register/+page.svelte
@@ -22,7 +22,6 @@
     NumberDictionary,
     uniqueNamesGenerator,
     colors,
-    adjectives,
     animals,
   } from "unique-names-generator";
   import { sign } from "$lib/nostr";
@@ -382,7 +381,7 @@
           <Spinner />
         </div>
       {:else}
-        <img src="/images/nostr.png" class="w-8" />
+        <img src="/images/nostr.png" class="w-8" alt="Nostr" />
       {/if}
       <div class="my-auto">{$t("login.nostr")}</div>
     </button>
-- 
cgit v1.2.3