fix warnings

18 files changed, 124 insertions, 51 deletions

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>