Accessibility: improve keyboard only flow (see #1181); remove some legacy use of Svelte

src/UI/Image/AttributedImage.svelte

@@ -13,11 +13,12 @@
     }
 
     let imgEl: HTMLImageElement
+    export let imgClass: string = undefined
 </script>
 
 
 <div class="relative">
-  <img bind:this={imgEl} src={image.url} on:error={(event) => {
+  <img bind:this={imgEl} src={image.url} class={imgClass ?? ""} on:error={(event) => {
     if(fallbackImage){
       imgEl.src = fallbackImage
     }

src/UI/Image/ImageOperations.svelte

@@ -7,9 +7,10 @@ import ImageAttribution from "./ImageAttribution.svelte"
 import ImagePreview from "./ImagePreview.svelte"
 import { DownloadIcon } from "@rgossiaux/svelte-heroicons/solid"
 import { Utils } from "../../Utils"
+import { twMerge } from "tailwind-merge";
 
 export let image: ProvidedImage
-
+export let clss: string = undefined
 async function download() {
     const response = await fetch(image.url)
     const blob = await response.blob()
@@ -20,7 +21,7 @@ async function download() {
 
 </script>
 
-<div class="w-full h-full relative">
+<div class={twMerge("w-full h-full relative", clss)}>
   <div class="absolute top-0 left-0 w-full h-full overflow-hidden">
     <ImagePreview image={image} />
   </div>

src/UI/Image/ImagePreview.svelte

@@ -13,7 +13,7 @@
     $: {
         if (panzoomEl) {
             panzoomInstance = panzoom(panzoomEl, { bounds: true,
-                boundsPadding: 1,
+                boundsPadding: 0.49,
                 minZoom: 1,
                 maxZoom: 25,
                 initialZoom: 1.2

src/UI/Image/LinkableImage.svelte

@@ -64,7 +64,9 @@
 </script>
 
 <div class="flex w-fit shrink-0 flex-col">
-  <AttributedImage image={providedImage} />
+  <div on:click={() => state.previewedImage.setData(providedImage)}>
+    <AttributedImage image={providedImage} imgClass="max-h-64 w-auto"/>
+  </div>
   {#if linkable}
     <label>
       <input bind:checked={isLinked} type="checkbox" />

src/UI/Image/NearbyImagesCollapsed.svelte

@@ -1,52 +1,49 @@
 <script lang="ts">
-  import { Store } from "../../Logic/UIEventSource"
-  import type { OsmTags } from "../../Models/OsmFeature"
-  import type { SpecialVisualizationState } from "../SpecialVisualization"
-  import type { Feature } from "geojson"
-  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
-  import Translations from "../i18n/Translations"
-  import Tr from "../Base/Tr.svelte"
-  import NearbyImages from "./NearbyImages.svelte"
-  import Svg from "../../Svg"
-  import ToSvelte from "../Base/ToSvelte.svelte"
-  import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
-  import exp from "constants"
-  import Camera_plus from "../../assets/svg/Camera_plus.svelte"
-  import LoginToggle from "../Base/LoginToggle.svelte"
+  import { Store } from "../../Logic/UIEventSource";
+  import type { OsmTags } from "../../Models/OsmFeature";
+  import type { SpecialVisualizationState } from "../SpecialVisualization";
+  import type { Feature } from "geojson";
+  import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
+  import Translations from "../i18n/Translations";
+  import Tr from "../Base/Tr.svelte";
+  import NearbyImages from "./NearbyImages.svelte";
+  import { XCircleIcon } from "@babeard/svelte-heroicons/solid";
+  import Camera_plus from "../../assets/svg/Camera_plus.svelte";
+  import LoginToggle from "../Base/LoginToggle.svelte";
 
-  export let tags: Store<OsmTags>
-  export let state: SpecialVisualizationState
-  export let lon: number
-  export let lat: number
-  export let feature: Feature
+  export let tags: Store<OsmTags>;
+  export let state: SpecialVisualizationState;
+  export let lon: number;
+  export let lat: number;
+  export let feature: Feature;
 
-  export let linkable: boolean = true
-  export let layer: LayerConfig
-  const t = Translations.t.image.nearby
+  export let linkable: boolean = true;
+  export let layer: LayerConfig;
+  const t = Translations.t.image.nearby;
 
-  let expanded = false
+  let expanded = false;
 </script>
 <LoginToggle {state}>
-  
-{#if expanded}
-  <NearbyImages {tags} {state} {lon} {lat} {feature} {linkable}>
-    <XCircleIcon
-      slot="corner"
-      class="h-6 w-6 cursor-pointer"
-      on:click={() => {
+
+  {#if expanded}
+    <NearbyImages {tags} {state} {lon} {lat} {feature} {linkable}>
+      <button slot="corner"
+              class="h-6 w-6 cursor-pointer no-image-background p-0 border-none"
+              on:click={() => {
         expanded = false
-      }}
-    />
-  </NearbyImages>
-{:else}
-  <button
-    class="flex w-full items-center"
-    on:click={() => {
+        }}>
+        <XCircleIcon />
+      </button>
+    </NearbyImages>
+  {:else}
+    <button
+      class="flex w-full items-center"
+      on:click={() => {
       expanded = true
     }}
-  >
-    <Camera_plus class="mr-2 block h-8 w-8 p-1" />
-    <Tr t={t.seeNearby} />
-  </button>
-{/if}
+    >
+      <Camera_plus class="mr-2 block h-8 w-8 p-1" />
+      <Tr t={t.seeNearby} />
+    </button>
+  {/if}
 </LoginToggle>

src/UI/Image/UploadImage.svelte

@@ -56,9 +56,9 @@
       multiple={true}
       on:submit={(e) => handleFiles(e.detail)}
     >
-      <div class="flex items-center">
+      <div class="flex items-center" >
         {#if image !== undefined}
-          <img src={image} />
+          <img src={image} aria-hidden="true" />
         {:else}
           <Camera_plus class="block h-12 w-12 p-1 text-4xl" />
         {/if}
@@ -70,15 +70,15 @@
       </div>
     </FileSelector>
     <div class="text-sm">
-      <Tr t={t.respectPrivacy} />
-      <a
-        class="cursor-pointer"
+      <button
+        class="link small "
         on:click={() => {
           state.guistate.openUsersettings("picture-license")
         }}
       >
         <Tr t={t.currentLicense.Subs({ license: $licenseStore })} />
-      </a>
+      </button>
+        <Tr t={t.respectPrivacy} />
     </div>
   </div>
 </LoginToggle>