Fix all Svelte UI warnings

Author: rianadon

src/routes/+page.svelte

@@ -279,7 +279,7 @@
     </p>
     <p class="font-system">Come see the unique keyboards we all are making on the Discord server.</p>
     <div class="bg-gray-800 inline-flex my-6 py-2 px-4 rounded items-center gap-4">
-      <img src="{base}/cosmos-icon.png" class="w-12 h-12 rounded-4" />
+      <img src="{base}/cosmos-icon.png" class="w-12 h-12 rounded-4" alt="" />
       <div class="text-left mr-8">
         <p class="text-lg">Cosmos Keyboards</p>
         <p class="text-gray-400 mt--1">
@@ -336,7 +336,7 @@
         Discord server will keep you up to date with the changes.
       </p>
       <div class="bg-gray-700 inline-flex my-6 py-2 px-4 rounded items-center gap-4">
-        <img src="{base}/cosmos-icon.png" class="w-12 h-12 rounded-4" />
+        <img src="{base}/cosmos-icon.png" class="w-12 h-12 rounded-4" alt="" />
         <div class="text-left mr-8">
           <p class="text-lg">Cosmos Keyboards</p>
           <p class="text-gray-400 mt--1">

src/routes/beta/App.svelte

@@ -724,18 +724,23 @@
                   class:selected={$view == 'right'}><Icon name="kb-right" /></button
                 >
               </div>
+              <!-- svelte-ignore a11y-label-has-associated-control -->
               <label class="flex items-center mt-2 mb-4">
                 <Checkbox small purple basic bind:value={$showGrid} /> Show Grid
               </label>
+              <!-- svelte-ignore a11y-label-has-associated-control -->
               <label class="flex items-center my-2">
                 <Checkbox small purple basic bind:value={$noWall} /> Hide Wall
               </label>
+              <!-- svelte-ignore a11y-label-has-associated-control -->
               <label class="flex items-center my-2">
                 <Checkbox small purple basic bind:value={$noBase} /> Hide Base
               </label>
+              <!-- svelte-ignore a11y-label-has-associated-control -->
               <label class="flex items-center my-2">
                 <Checkbox small purple basic bind:value={$noLabels} /> Hide Labels
               </label>
+              <!-- svelte-ignore a11y-label-has-associated-control -->
               <label class="flex items-center my-2">
                 <Checkbox small purple basic bind:value={$noBlanks} /> Hide Shapers
               </label>
@@ -847,7 +852,7 @@
           <ViewerLayout {geometry} {darkMode} conf={config} confError={$confError} />
         {:else if viewer == 'programming'}
           {#if hasLemon}
-            <ViewerPea {geometry} {darkMode} confError={$confError} bind:fullMatrix />
+            <ViewerPea {geometry} confError={$confError} bind:fullMatrix />
           {:else}
             <ViewerMatrix {geometry} {darkMode} confError={$confError} />
           {/if}
@@ -1141,7 +1146,7 @@
   <Dialog big on:close={() => (kleView = false)}>
     <span slot="title">KLE Export</span>
     <div slot="content">
-      <KleView conf={config} geo={geometry} />
+      <KleView geo={geometry} />
     </div>
   </Dialog>
 {/if}

src/routes/beta/lib/ConfError.svelte

@@ -247,15 +247,9 @@ wristRestOrigin,
   .errorMsg {
     --at-apply: 'absolute text-white m-4 right-[80px] rounded p-4 top-[5%] flex z-40';
   }
-  .errorMsg.custom {
-    --at-apply: 'top-[10%]';
-  }
   .errorMsg.expand {
     --at-apply: 'top-[5%] left-0 right-0 block';
   }
-  .errorMsg.expand.custom {
-    --at-apply: 'top-[20%] left-0';
-  }
 
   .expandedMsg + .expandedMsg {
     --at-apply: 'pt-2 border-t-2 border-t-white';

src/routes/beta/lib/dialogs/AssemblyView.svelte

@@ -76,7 +76,7 @@
       <Icon size={24} path={mdiChevronLeft} />
       Back to Generator
     </button>
-    <img src={modelImg} class="w-full" />
+    <img src={modelImg} class="w-full" alt="Preview of your keyboard model" />
     <p class="my-8">
       Your Keyboard arrives pre-assembled, pre-programmed, and ready to immediately start typing on!
     </p>
@@ -105,9 +105,13 @@
       >
         <div>
           <div class="flex items-center gap-4 my--1">
-            <img src={vendor.logo} class="size-12 rounded-2 pointer-events-none flex-none" />
+            <img src={vendor.logo} class="size-12 rounded-2 pointer-events-none flex-none" alt="" />
             <h2 class="text-2xl font-medium my-3 flex-shrink-0">Order from {vendor.name}</h2>
-            <img src={vendor.banner} class="h-12 pointer-events-none flex-grow self-start flex-grow-0" />
+            <img
+              src={vendor.banner}
+              class="h-12 pointer-events-none flex-grow self-start flex-grow-0"
+              alt=""
+            />
           </div>
           <p class="my-3 text-justify">{vendor.description}</p>
           <p class="my-3 text-gray-600 dark:text-gray-400">

src/routes/beta/lib/dialogs/ConnectorsView.svelte

@@ -172,9 +172,6 @@
   .button {
     --at-apply: 'bg-slate-300 dark:bg-gray-900  hover:bg-teal-500 dark:hover:bg-pink-700 dark:text-white font-bold py-2 px-4 rounded focus:outline-none border border-transparent focus:border-pink-500 flex items-center gap-2';
   }
-  .button2 {
-    --at-apply: 'bg-slate-300 dark:bg-purple-900  hover:bg-teal-500 dark:hover:bg-pink-700 dark:text-white font-bold py-1 px-1 rounded focus:outline-none border border-transparent focus:border-pink-500 flex items-center gap-2';
-  }
   .button-thin {
     --at-apply: 'bg-slate-300 dark:bg-gray-900  hover:bg-teal-500 dark:hover:bg-pink-700 dark:text-white font-bold py-1 px-1 rounded focus:outline-none border border-transparent focus:border-pink-500 flex items-center gap-2';
   }

src/routes/beta/lib/dialogs/KleView.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
-  import type { Cuttleform, FullCuttleform } from '$lib/worker/config'
   import { download } from '$lib/browser'
   import { toKLE } from '../firmware/kle'
   import type { FullGeometry } from '../viewers/viewer3dHelpers'
 
-  export let conf: FullCuttleform
   export let geo: FullGeometry
 
   function downloadKLE() {

src/routes/beta/lib/editor/SelectMicrocontrollerInner.svelte

@@ -44,7 +44,7 @@
   >
     <div use:melt={$arrow} />
     <div class="px-6 py-4 max-w-80 cosmosprofileinfo">
-      <img src={ucURL(option.key)} class="w-72 h-36 mx-auto" />
+      <img src={ucURL(option.key)} class="w-72 h-36 mx-auto" alt="" />
 
       {#if boardProps.soldByCosmos}
         <p
@@ -97,8 +97,4 @@
   .cosmos .requirements {
     --at-apply: 'bg-purple-300';
   }
-
-  img.disable {
-    opacity: 40%;
-  }
 </style>

src/routes/beta/lib/editor/SelectProfileInner.svelte

@@ -49,6 +49,7 @@
   <img
     src={thumbURL(option.key)}
     class="size-4 inline mr-1 align-baseline pointer-events-none light:(filter-invert opacity-60)"
+    alt=""
   />
   <span>{option.label}</span>
 </div>
@@ -68,7 +69,7 @@
           transition:fly={{ x: flyAmount }}
         >
           {#each allProfiles as prof}
-            <img src={profileURL(prof)} class="size-16" class:disable={prof != option.key} />
+            <img src={profileURL(prof)} class="size-16" class:disable={prof != option.key} alt="" />
           {/each}
         </div>
       </div>

src/routes/beta/lib/editor/SelectProfileLabel.svelte

@@ -12,5 +12,6 @@
 <img
   src={thumbURL(option.value)}
   class="size-4 inline mr-0.5 align-baseline pointer-events-none light:(filter-invert opacity-60)"
+  alt=""
 />
 <span>{option.label}</span>

src/routes/beta/lib/editor/ShapingSection.svelte

@@ -54,7 +54,7 @@
       </tr>
       <tr>
         <th />
-        <th class="font-normal pb-0.5 pl-4 text-left {staggerStyle[0]}" :>Thumb</th>
+        <th class="font-normal pb-0.5 pl-4 text-left {staggerStyle[0]}">Thumb</th>
         <th class="font-normal pb-0.5 pl-4 text-left {staggerStyle[1]}">Index</th>
         <th class="font-normal pb-0.5 pl-4 text-left {staggerStyle[2]}">Middle</th>
         <th class="font-normal pb-0.5 pl-4 text-left {staggerStyle[3]}">Ring</th>
@@ -125,10 +125,6 @@
     --at-apply: 'appearance-none w-[5.45rem] rounded ml-2.5 input-basic text-ellipsis';
   }
 
-  input:focus + div > div {
-    --at-apply: 'border-teal-500';
-  }
-
   .preset {
     --at-apply: 'bg-[#99F0DC] dark:bg-gray-900 hover:bg-teal-500 dark:hover:bg-teal-700 dark:text-white py-1 px-4 rounded focus:outline-none border border-transparent focus:border-teal-500 mb-2';
   }