fix: accessibility & lints

webui/src/components/AddModal.svelte

@@ -39,7 +39,7 @@
 
     try {
       const addresses = await Promise.all(
-        files.map(async (file) => api.putBlob(file))
+        files.map(async (file) => api.putBlob(file)),
       );
 
       navigate(`/browse/${addresses.join(",")}`);
@@ -59,6 +59,9 @@
   }
 </script>
 
+<svelte:body on:keydown={(ev) => ev.key === "Escape" && reset()} />
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="addmodal-container" class:visible class:uploading on:click={reset}>
   <div class="addmodal" on:click|stopPropagation>
     <div class="files">

webui/src/components/BrowseAdd.svelte

@@ -16,7 +16,14 @@
   $: editable && selector && selector.focus();
 </script>
 
-<div class="view" class:editable on:click={() => (editable = true)}>
+<div
+  class="view"
+  class:editable
+  on:click={() => (editable = true)}
+  on:keydown={(ev) => {
+    if (["Space", "Enter"].includes(ev.key)) editable = true;
+  }}
+>
   <div class="icon">
     <Icon name="plus-circle" />
   </div>

webui/src/components/Inspect.svelte

@@ -488,7 +488,6 @@
       on:click={() => (showAsEntries = !showAsEntries)}
     />
   </div>
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <IconButton
     name="trash"
     outline

webui/src/components/display/blobs/AudioViewer.svelte

@@ -350,9 +350,11 @@
         </div>
         {#if editable}
           <div class="existControls">
-            <div class="button" on:click={() => currentAnnotation.remove()}>
-              <Icon name="trash" />
-            </div>
+            <IconButton
+              outline
+              name="trash"
+              on:click={() => currentAnnotation.remove()}
+            />
             <!-- <div class="button">
             <Icon name="check" />
           </div> -->

webui/src/components/display/blobs/ImageViewer.svelte

@@ -241,6 +241,9 @@
     class="image"
     class:zoomable={!editable && !hasAnnotations}
     on:click={clicked}
+    on:keydown={(ev) => {
+      if (ev.key === "Enter") clicked();
+    }}
   >
     <img
       class="preview-image"

webui/src/components/display/blobs/TextViewer.svelte

@@ -32,6 +32,11 @@
         class="tab"
         class:active={mode == targetMode}
         on:click={() => (mode = targetMode)}
+        on:keydown={(ev) => {
+          if (ev.key === "Enter") {
+            mode = targetMode;
+          }
+        }}
       >
         <IconButton
           name={icon}

webui/src/components/layout/Footer.svelte

@@ -13,8 +13,14 @@
   <div class="notifications">
     <Notifications />
   </div>
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="status" class:togglable on:click={() => (hidden = !hidden)}>
+  <div
+    class="status"
+    class:togglable
+    on:click={() => (hidden = !hidden)}
+    on:keydown={(ev) => {
+      if (["Space", "Enter"].includes(ev.key)) hidden = !hidden;
+    }}
+  >
     <div class="info">
       {#if activeJobs > 0}
         {$i18n.t("Active jobs:")} {activeJobs}

webui/src/components/layout/Jobs.svelte

@@ -78,8 +78,4 @@
       margin-right: 2em;
     }
   }
-
-  .job-annotation {
-    opacity: 0.75;
-  }
 </style>

webui/src/components/utils/Editable.svelte

@@ -18,7 +18,6 @@
   $: if (!focus && !hover) editing = false;
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="editable"
   class:editing

webui/src/components/utils/LabelBorder.svelte

@@ -10,6 +10,9 @@
         hidden = !hidden;
       }
     }}
+    on:keydown={(ev) => {
+      if (["Space", "Enter"].includes(ev.key) && hide) hidden = !hidden;
+    }}
   >
     <slot name="header-full">
       <h3><slot name="header" /></h3>

webui/src/components/widgets/EntityList.svelte

@@ -5,7 +5,7 @@
   import { query } from "../../lib/entity";
   import UpObject from "../display/UpObject.svelte";
   import UpObjectCard from "../display/UpObjectCard.svelte";
-  import { ATTR_IN, ATTR_LABEL } from "upend/constants";
+  import { ATTR_LABEL } from "upend/constants";
   import { i18n } from "../../i18n";
   import Icon from "../utils/Icon.svelte";
   import IconButton from "../utils/IconButton.svelte";