chore: svelte lint issues

thisdot · Jul 13, 2023 · 07fded0 · 07fded0
1 parent 1fde3c2
commit 07fded0
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 31 deletions.
diff --git a/svelte-kit-scss/.eslintrc.json b/svelte-kit-scss/.eslintrc.json
@@ -4,20 +4,21 @@
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:svelte/recommended",
     "prettier",
     "plugin:storybook/recommended"
   ],
-  "plugins": ["svelte3", "@typescript-eslint", "prettier"],
+  "plugins": ["@typescript-eslint", "prettier"],
   "ignorePatterns": ["*.cjs"],
   "overrides": [
     {
       "files": ["*.svelte"],
-      "processor": "svelte3/svelte3"
+      "parser": "svelte-eslint-parser",
+      "parserOptions": {
+        "parser": "@typescript-eslint/parser"
+      }
     }
   ],
-  "settings": {
-    "svelte3/typescript": true
-  },
   "parserOptions": {
     "sourceType": "module",
     "ecmaVersion": 2020

diff --git a/svelte-kit-scss/package-lock.json b/svelte-kit-scss/package-lock.json
diff --git a/svelte-kit-scss/src/lib/components/FileExplorer/FileExplorerNav/BranchesSelectList.svelte b/svelte-kit-scss/src/lib/components/FileExplorer/FileExplorerNav/BranchesSelectList.svelte
@@ -27,6 +27,8 @@
         class:current={isCurrent(option)}
         on:click={async () => await handleItemClick(option)}
         on:keypress={async () => await handleItemClick(option)}
+        role="button"
+        tabindex="0"
       >
         <div class="checkbox">
           <Check16 />

diff --git a/svelte-kit-scss/src/lib/components/FileExplorer/FileExplorerReadme/FileExplorerReadme.svelte b/svelte-kit-scss/src/lib/components/FileExplorer/FileExplorerReadme/FileExplorerReadme.svelte
@@ -11,6 +11,7 @@
   </div>
   <div class="content">
     <span class="markdown">
+      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
       {@html html}
     </span>
   </div>

diff --git a/svelte-kit-scss/src/lib/components/NavBar/NavBar.svelte b/svelte-kit-scss/src/lib/components/NavBar/NavBar.svelte
@@ -39,12 +39,13 @@
         <MarkGithub16 height="32" width="32" fill="white" />
       </a>
     </li>
-    <li on:click={closeDropdown} on:keypress={closeDropdown} class="dropdown">
+    <li class="dropdown">
       <button
         type="button"
         class="dropdown-title"
         aria-controls="nav-dropdown"
         on:click|stopPropagation={toggleMenu}
+        on:blur={closeDropdown}
         data-testid="nav-dropdown"
       >
         <img src={userAvatar} alt="{username} avatar" />

diff --git a/svelte-kit-scss/src/lib/components/shared/Dropdown/DropdownMenu.svelte b/svelte-kit-scss/src/lib/components/shared/Dropdown/DropdownMenu.svelte
@@ -19,7 +19,12 @@
 </script>
 
 <div class="dropdown-container noselect" use:clickOutside on:clickoutside={close}>
-  <div on:click|stopPropagation={toggle} on:keypress|stopPropagation={toggle}>
+  <div
+    role="button"
+    tabindex="0"
+    on:click|stopPropagation={toggle}
+    on:keypress|stopPropagation={toggle}
+  >
     <slot />
   </div>
   {#if isOpen}
@@ -30,7 +35,7 @@
     >
       <div class="header">
         <div class="description">{descriptionDisplay}</div>
-        <div class="close" on:click={close} on:keypress={close}>
+        <div class="close" on:click={close} on:keypress={close} role="button" tabindex="0">
           <X16 class="close-icon" />
         </div>
       </div>

diff --git a/...-kit-scss/src/lib/components/shared/Dropdown/DropdownMenuSelect/DropdownMenuSelect.svelte b/...-kit-scss/src/lib/components/shared/Dropdown/DropdownMenuSelect/DropdownMenuSelect.svelte
@@ -4,7 +4,7 @@
   import DropdownItemTemplateCheckbox from '../item-templates/DropdownItemTemplateCheckbox.svelte';
   export let description: string | undefined;
 
-  type TOption = $$Generic;
+  type TOption = $$Generic; /* eslint-disable-line no-undef */
   export let options: TOption[];
   export let labelAccessor = (option: TOption) => String(option);
   export let checkedPredicate: (option: TOption) => boolean = () => false;
@@ -26,6 +26,8 @@
         class="dropdown-menu-item-layout"
         on:click={() => handleOptionClick(option)}
         on:keypress={() => handleOptionClick(option)}
+        role="button"
+        tabindex="0"
       >
         {#if $$slots.option}
           <slot

diff --git a/svelte-kit-scss/src/lib/components/shared/FilterDropdown/FilterDropdown.svelte b/svelte-kit-scss/src/lib/components/shared/FilterDropdown/FilterDropdown.svelte
@@ -53,7 +53,13 @@
     >
       <div class="header">
         <div class="description">{description}</div>
-        <div class="close" on:click={closeDropdown} on:keypress={closeDropdown}>
+        <div
+          class="close"
+          on:click={closeDropdown}
+          on:keypress={closeDropdown}
+          role="button"
+          tabindex="0"
+        >
           <span class:invisible={current?.value === defaultFilter}>
             <X16 />
           </span>
@@ -62,15 +68,17 @@
 
       <ul class="items">
         {#each items as item}
-          <li
-            class="item noselect"
-            on:click={() => handleFilterOptionClick(item)}
-            on:keypress={() => handleFilterOptionClick(item)}
-          >
-            <span class="icon" class:invisible={item !== current}>
-              <Check16 />
-            </span>
-            <span>{item.label}</span>
+          <li class="item noselect">
+            <button
+              type="button"
+              on:click={() => handleFilterOptionClick(item)}
+              on:keypress={() => handleFilterOptionClick(item)}
+            >
+              <span class="icon" class:invisible={item !== current}>
+                <Check16 />
+              </span>
+              <span>{item.label}</span>
+            </button>
           </li>
         {/each}
       </ul>