A11y: add labels to previously unlabeled buttons, fix order

src/Logic/ImageProviders/Mapillary.ts

@@ -1,10 +1,10 @@
 import ImageProvider, { ProvidedImage } from "./ImageProvider"
 import BaseUIElement from "../../UI/BaseUIElement"
-import Svg from "../../Svg"
 import { Utils } from "../../Utils"
 import { LicenseInfo } from "./LicenseInfo"
 import Constants from "../../Models/Constants"
-import Link from "../../UI/Base/Link"
+import SvelteUIElement from "../../UI/Base/SvelteUIElement"
+import MapillaryIcon from "./MapillaryIcon.svelte"
 
 export class Mapillary extends ImageProvider {
     public static readonly singleton = new Mapillary()
@@ -112,11 +112,11 @@ export class Mapillary extends ImageProvider {
             lat: number
         }
     ): BaseUIElement {
-        const icon = Svg.mapillary_svg()
-        if (!id) {
-            return icon
+        let url: string = undefined
+        if (id) {
+            url = Mapillary.createLink(location, 16, "" + id)
         }
-        return new Link(icon, Mapillary.createLink(location, 16, "" + id), true)
+        return new SvelteUIElement(MapillaryIcon, { url })
     }
 
     async ExtractUrls(key: string, value: string): Promise<Promise<ProvidedImage>[]> {

src/Logic/ImageProviders/MapillaryIcon.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import Mapillary from "../../assets/svg/Mapillary.svelte"
+  import { ariaLabel } from "../../Utils/ariaLabel"
+  import Translations from "../../UI/i18n/Translations"
+
+  /**
+   * Accessible, linked mapillary icon
+   */
+  export let url: string = undefined
+</script>
+
+{#if url}
+  <a href={url} 
+     use:ariaLabel={Translations.t.general.attribution.seeOnMapillary}
+     target="_blank"
+     rel="noopener nofollower" >
+  <Mapillary />
+  </a>
+{:else}
+  <Mapillary />
+{/if}