Fix warnings

src/lib/components/CardList.svelte

@@ -2,17 +2,30 @@
   import { t } from '$lib/translations';
   import renderFileToCanvas from '$lib/file-renderer';
 
+  /**
+   * @type {ArrayLike<any>}
+   */
   export let files = [];
+
+  /**
+   * @type {HTMLElement}
+   */
+  let errorMessageRef;
   let canvasRefs = [];
   let colorRefs = [];
   let stitchesRefs = [];
   let sizeRefs = [];
-  let errorMessageRef;
   let localizedStrings = {
     stitches: $t('viewer.stitches'),
     dimensions: $t('viewer.dimensions'),
   };
 
+  /**
+   * Downloads a given HTMLCanvasElement as a PNG image.
+   *
+   * @param {HTMLCanvasElement} canvas - The canvas element to export as an image.
+   * @param {string} filename - The desired name of the downloaded file (extension will be replaced with `.png`).
+   */
   const downloadCanvasAsImage = (canvas, filename) => {
     const image = canvas
       .toDataURL('image/png')
@@ -24,9 +37,15 @@
     link.click();
   };
 
+  /**
+   * Cliks the button to render the files when user press enter.
+   *
+   * @param {KeyboardEvent} evt - The event that triggered the language switch.
+   */
   const onKeydown = (evt) => {
     if (evt.key === 'Enter') {
-      document.getElementById('download-button').click();
+      const button = document.getElementById('download-button');
+      if (button) button.click();
     }
   };
 </script>
@@ -44,8 +63,8 @@
           id="download-button"
           role="button"
           tabindex="0"
-          on:keydown={onKeydown}
+          onkeydown={onKeydown}
-          on:click={() => downloadCanvasAsImage(canvasRefs[i], file.name)}
+          onclick={() => downloadCanvasAsImage(canvasRefs[i], file.name)}
         >
           {$t('viewer.download')}
         </div>

src/lib/components/Dropzone.svelte

@@ -11,6 +11,7 @@
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <div
   id="dropzone"
   tabindex={0}

src/lib/components/FileList.svelte

@@ -1,5 +1,8 @@
 <script>
   export let title;
+  /**
+   * @type {ArrayLike<any>}
+   */
   export let files = [];
   export let isError = false;
 </script>

src/lib/components/Header.svelte

@@ -1,15 +1,28 @@
 <script>
-  import { t, locale, locales, SUPPORTED_LOCALES } from '$lib/translations';
+  import { t, locale, SUPPORTED_LOCALES } from '$lib/translations';
   import logo from '$lib/assets/logo.webp';
   import MediaQuery from './MediaQuery.svelte';
 
-  const configsFor = (/** @type {boolean} */ matches) => {
+  /**
+   *
+   * Returns logo image configuration based on the screen size match.
+   *
+   * @param {boolean} matches - The event that triggered the language switch.
+   */
+  const configsFor = (matches) => {
     return matches
       ? { src: logo, width: 150, height: 70 } // mobile
       : { src: logo, width: 150, height: 100 }; // desktop
   };
 
-  const onSwitchToOppositeLang = () => {
+  /**
+   * Switches the current locale to the opposite language (EN_US <-> PT_BR).
+   * Prevents the default link behavior (e.g., page jump).
+   *
+   * @param {MouseEvent | KeyboardEvent} e - The event that triggered the language switch.
+   */
+  const onSwitchToOppositeLang = (e) => {
+    e.preventDefault();
     $locale =
       $locale === SUPPORTED_LOCALES.EN_US
         ? SUPPORTED_LOCALES.PT_BR
@@ -38,7 +51,7 @@
     <MediaQuery query="(max-width: 768px)" let:matches>
       <slot let-matches>
         {#if matches}
-          <button class="hamburger" on:click={() => (isMenuOpen = !isMenuOpen)}>
+          <button class="hamburger" onclick={() => (isMenuOpen = !isMenuOpen)}>
             {#if isMenuOpen}x{:else}☰{/if}
           </button>
         {/if}
@@ -61,17 +74,22 @@
       </ul>
     </nav>
 
-    <a
+    <button
+      type="button"
       class="common-switch {$locale === SUPPORTED_LOCALES.EN_US
         ? 'portuguese-switch'
         : 'english-switch'}"
-      href="#"
+      onclick={onSwitchToOppositeLang}
-      on:click|preventDefault={onSwitchToOppositeLang}
+      onkeydown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          onSwitchToOppositeLang(e);
+        }
+      }}
     >
       <div style="display: flex; width: fit-content;">
         <span style="font-size: 20px;">{$t('header.languageSwitch')}</span>
       </div>
-    </a>
+    </button>
   </div>
 </header>
 
@@ -130,7 +148,10 @@
   }
 
   .common-switch {
+    border: none;
+    background-color: unset;
     width: fit-content;
+    cursor: pointer;
   }
 
   .portuguese-switch {

src/routes/viewer/+page.svelte

@@ -24,7 +24,14 @@
     maxSize: 1000000,
   };
 
-  function onSubmit() {
+  /**
+   * Update the flag that indicates that the files were rendered.
+   *
+   * @param {SubmitEvent} e
+   */
+  function onSubmit(e) {
+    e.preventDefault();
+    e.stopPropagation();
     areAcceptedFilesRendered = true;
   }
 
@@ -78,11 +85,7 @@
 
 <Seo {...metadata} />
 
-<form
+<form id="form" enctype="multipart/form-data" onsubmit={onSubmit}>
-  id="form"
-  enctype="multipart/form-data"
-  on:submit|preventDefault|stopPropagation={onSubmit}
->
   <div class="title-container">
     <h2>{$t('viewer.title')}</h2>
   </div>