From f99bd15fabd6d7b361794f756a69d6f05a50701f Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Tue, 26 Nov 2024 22:35:28 -0800
Subject: warnings

---
 src/components/Account.svelte       | 16 ++++++++++++----
 src/components/AppHeader.svelte     |  8 ++++++--
 src/components/Code.svelte          | 29 ++++++++++-------------------
 src/components/PasswordInput.svelte | 19 +++++++++++++++----
 src/components/Pin.svelte           |  9 ++++-----
 5 files changed, 47 insertions(+), 34 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index 4db77066..e075b130 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -21,17 +21,25 @@
   class="block space-y-2 border-primary py-4 cursor-pointer"
   class:border-b-8={!last}
   onclick={go}
+  aria-label="Payments"
 >
   <div class="flex">
     <Balance {balance} {user} {rate} />
-    <a href={`/payments`} class="contents" onclick={setAccount}>
+    <a
+      href={`/payments`}
+      class="contents"
+      onclick={setAccount}
+      aria-label="Payments"
+    >
       <button class="ml-auto flex gap-1 mb-auto pb-4 pl-4">
-        <iconify-icon icon="ph:clock-bold" width="32"></iconify-icon>
+        <iconify-icon icon="ph:clock-bold" width="32" aria-label="Payments"
+        ></iconify-icon>
       </button>
     </a>
-    <a href={`/account/${id}`} class="contents">
+    <a href={`/account/${id}`} class="contents" aria-label="Settings">
       <button class="flex gap-1 mb-auto pb-4 pl-4">
-        <iconify-icon icon="ph:gear-bold" width="32"></iconify-icon>
+        <iconify-icon icon="ph:gear-bold" width="32" aria-label="Settings"
+        ></iconify-icon>
       </button>
     </a>
   </div>
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 495e855b..39f97d4e 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -27,19 +27,23 @@
     {
       href: `/${user?.username}`,
       icon: "ph:house-bold",
+      label: "Home",
     },
     {
       href: `/${user?.username}/receive`,
       icon: "ph:hand-coins-bold",
       flip: "horizontal",
+      label: "Receive",
     },
     {
       href: `/payments`,
       icon: "ph:clock-bold",
+      label: "Payments",
     },
     {
       href: `/send`,
       icon: "ph:paper-plane-right-bold",
+      label: "Send",
     },
   ];
 
@@ -59,8 +63,8 @@
   >
     <nav class="flex justify-end items-center space-x-4 p-5">
       {#if user}
-        {#each links as { href, icon, flip }}
-          <a {href} data-sveltekit-preload-code="eager">
+        {#each links as { href, icon, flip, label }}
+          <a {href} data-sveltekit-preload-code="eager" aria-label={label}>
             <button class="btn-menu {opacity(href)}">
               <iconify-icon {icon} width={w > 640 ? 32 : 24} {flip}
               ></iconify-icon>
diff --git a/src/components/Code.svelte b/src/components/Code.svelte
index 52c6bcf2..1c25feb8 100644
--- a/src/components/Code.svelte
+++ b/src/components/Code.svelte
@@ -4,28 +4,19 @@
   let { sample } = $props();
 </script>
 
+{#snippet cp(something)}
+  <button type="button" class="ml-auto" onclick={() => copy(something)}>
+    <iconify-icon icon="ph:copy-bold" width="42"></iconify-icon>
+  </button>
+{/snippet}
+
 <div
   class="bg-primary text-primary-content rounded-lg p-4 flex gap-4 whitespace-pre-wrap font-mono items-center"
 >
-  <div class="overflow-x-scroll max-w-full scrollbar-hide">
+  <div
+    class="overflow-x-scroll max-w-full [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
+  >
     <div class="break-all min-w-[800px]">{samples[sample]}</div>
   </div>
-  <iconify-icon
-    icon="ph:copy-bold"
-    onclick={() => copy(samples[sample])}
-    width="42"
-    class="ml-auto cursor-pointer"
-  ></iconify-icon>
+  {@render cp(samples[sample])}
 </div>
-
-<style>
-  .scrollbar-hide::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* For IE, Edge and Firefox */
-  .scrollbar-hide {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-</style>
diff --git a/src/components/PasswordInput.svelte b/src/components/PasswordInput.svelte
index bac00134..eb5b0d6c 100644
--- a/src/components/PasswordInput.svelte
+++ b/src/components/PasswordInput.svelte
@@ -1,7 +1,11 @@
 <script>
-  let { value = $bindable(), focus = () => {} } = $props();
+  let {
+    show = $bindable(),
+    value = $bindable(),
+    focus = () => {},
+    placeholder,
+  } = $props();
   let toggle = (e) => (show = !show);
-  let show = $state(false);
   let icon = $derived(show ? "ph:eye-bold" : "ph:eye-slash-bold");
 </script>
 
@@ -10,9 +14,16 @@
   class="input flex items-center justify-center gap-2 w-full"
 >
   {#if show}
-    <input name="password" type="text" bind:value class="clean" />
+    <input name="password" type="text" bind:value class="clean" {placeholder} />
   {:else}
-    <input name="password" type="password" bind:value class="clean" use:focus />
+    <input
+      name="password"
+      type="password"
+      bind:value
+      class="clean"
+      use:focus
+      {placeholder}
+    />
   {/if}
   <button type="button" aria-label="Toggle" onclick={toggle} class="contents">
     <iconify-icon {icon} width="32"></iconify-icon>
diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte
index fb17c612..a429e976 100644
--- a/src/components/Pin.svelte
+++ b/src/components/Pin.svelte
@@ -45,23 +45,22 @@
 
 {#if loaded}
   <div
+    role="dialog"
     class="fixed bg-base-100 bg-opacity-90 inset-0 h-full w-full z-50 cursor-default"
     on:click|preventDefault
+    aria-labelledby="title"
   >
     <div
       class="mx-auto p-5 border shadow-lg rounded-md bg-base-100 space-y-5 max-w-lg"
     >
-      <h1 class="text-center text-2xl font-semibold">{title}</h1>
+      <h1 id="title" class="text-center text-2xl font-semibold">{title}</h1>
       <Pinpad bind:v={p} {cancel} />
 
       <div>
         <label for="locktime" class="font-bold"
           >{$t("user.settings.rememberFor")}</label
         >
-        <select
-          name="locktime"
-          bind:value={locktime}
-        >
+        <select name="locktime" bind:value={locktime}>
           <option value={30}>30 {$t("user.settings.seconds")}</option>
           <option value={5 * 60}>5 {$t("user.settings.minutes")}</option>
           <option value={10 * 60}>10 {$t("user.settings.minutes")}</option>
-- 
cgit v1.2.3