UX: update gps-label indication if GPS is not available physically

src/UI/Base/MapControlButton.svelte

@@ -2,7 +2,7 @@
   import { createEventDispatcher } from "svelte"
   import { twJoin } from "tailwind-merge"
   import { Translation } from "../i18n/Translation"
-  import { ariaLabel } from "../../Utils/ariaLabel"
+  import { ariaLabel, ariaLabelStore } from "../../Utils/ariaLabel"
   import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
 
   /**
@@ -12,18 +12,21 @@
   export let cls = "m-0.5 p-0.5 sm:p-1 md:m-1"
   export let enabled: Store<boolean> = new ImmutableStore(true)
   export let arialabel: Translation = undefined
+  export let arialabelDynamic : Store<Translation> = new ImmutableStore(arialabel)
+  let arialabelString = arialabelDynamic.bind(tr => tr?.current)
   export let htmlElem: UIEventSource<HTMLElement> = undefined
   let _htmlElem: HTMLElement
   $: {
     htmlElem?.setData(_htmlElem)
   }
+
 </script>
 
 <button
   bind:this={_htmlElem}
   on:click={(e) => dispatch("click", e)}
   on:keydown
-  use:ariaLabel={arialabel}
+  use:ariaLabelStore={arialabelString}
   class={twJoin(
     "pointer-events-auto relative h-fit w-fit rounded-full",
     cls,

src/UI/BigComponents/GeolocationControl.svelte

@@ -14,6 +14,7 @@
   let allowMoving = geolocationstate.allowMoving
   let currentGPSLocation = state.geolocation.geolocationState.currentGPSLocation
   let geolocationControlState = state.geolocationControl
+  let isAvailable = state.geolocation.geolocationState.gpsAvailable
   let lastClickWasRecent = geolocationControlState.lastClickWithinThreeSecs
 </script>
 
@@ -31,7 +32,7 @@
 {:else if $geopermission === "requested"}
   <!-- Even though disabled, when clicking we request the location again in case the contributor dismissed the location popup -->
   <Location class="h-8 w-8" style="animation: 3s linear 0s infinite normal none running spin;" />
-{:else if $geopermission === "denied"}
+{:else if $geopermission === "denied" || !$isAvailable}
   <Location_refused class="h-8 w-8" />
 {:else}
   <Location class="h-8 w-8" style="animation: 3s linear 0s infinite normal none running spin;" />

src/UI/ThemeViewGUI.svelte

@@ -19,7 +19,7 @@
     EyeIcon,
     HeartIcon,
     MenuIcon,
-    XCircleIcon
+    XCircleIcon,
   } from "@rgossiaux/svelte-heroicons/solid"
   import Tr from "./Base/Tr.svelte"
   import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte"
@@ -120,15 +120,15 @@
   let visualFeedback = state.visualFeedback
   let viewport: UIEventSource<HTMLDivElement> = new UIEventSource<HTMLDivElement>(undefined)
   let mapproperties: MapProperties = state.mapProperties
-  let usersettingslayer = new LayerConfig(<LayerConfigJson> usersettings, "usersettings", true)
+  let usersettingslayer = new LayerConfig(<LayerConfigJson>usersettings, "usersettings", true)
   state.mapProperties.installCustomKeyboardHandler(viewport)
   let canZoomIn = mapproperties.maxzoom.map(
     (mz) => mapproperties.zoom.data < mz,
-    [mapproperties.zoom]
+    [mapproperties.zoom],
   )
   let canZoomOut = mapproperties.minzoom.map(
     (mz) => mapproperties.zoom.data > mz,
-    [mapproperties.zoom]
+    [mapproperties.zoom],
   )
 
   function updateViewport() {
@@ -144,7 +144,7 @@
     const bottomRight = mlmap.unproject([rect.right, rect.bottom])
     const bbox = new BBox([
       [topLeft.lng, topLeft.lat],
-      [bottomRight.lng, bottomRight.lat]
+      [bottomRight.lng, bottomRight.lat],
     ])
     state.visualFeedbackViewportBounds.setData(bbox)
   }
@@ -165,7 +165,7 @@
   onDestroy(
     rasterLayer.addCallbackAndRunD((l) => {
       rasterLayerName = l.properties.name
-    })
+    }),
   )
   let previewedImage = state.previewedImage
 
@@ -196,7 +196,7 @@
   let openMapButton: UIEventSource<HTMLElement> = new UIEventSource<HTMLElement>(undefined)
   let openMenuButton: UIEventSource<HTMLElement> = new UIEventSource<HTMLElement>(undefined)
   let openCurrentViewLayerButton: UIEventSource<HTMLElement> = new UIEventSource<HTMLElement>(
-    undefined
+    undefined,
   )
   let _openNewElementButton: HTMLButtonElement
   let openNewElementButton: UIEventSource<HTMLElement> = new UIEventSource<HTMLElement>(undefined)
@@ -207,6 +207,31 @@
   let openFilterButton: UIEventSource<HTMLElement> = new UIEventSource<HTMLElement>(undefined)
   let openBackgroundButton: UIEventSource<HTMLElement> = new UIEventSource<HTMLElement>(undefined)
   let addNewFeatureMode = state.userRelatedState.addNewFeatureMode
+
+  let gpsButtonAriaLabel = state.geolocation.geolocationState.gpsAvailable.map(available => {
+    if (!available) {
+      return Translations.t.general.labels.locationNotAvailable
+    }
+    if (state.geolocation.geolocationState.permission.data === "denied") {
+      return Translations.t.general.geopermissionDenied
+    }
+
+    if (state.geolocation.geolocationState.permission.data === "requested") {
+      return Translations.t.general.waitingForGeopermission
+    }
+
+
+    if (!state.geolocation.geolocationState.allowMoving.data) {
+      return Translations.t.general.visualFeedback.islocked
+    }
+
+    if (state.geolocation.geolocationState.currentGPSLocation.data === undefined) {
+      return Translations.t.general.waitingForLocation
+    }
+
+    return Translations.t.general.labels.jumpToLocation
+  }, [state.geolocation.geolocationState.allowMoving, state.geolocation.geolocationState.permission])
+
 </script>
 
 <main>
@@ -408,7 +433,7 @@
         <If condition={featureSwitches.featureSwitchGeolocation}>
           <div class="relative m-0">
             <MapControlButton
-              arialabel={Translations.t.general.labels.jumpToLocation}
+              arialabelDynamic={gpsButtonAriaLabel}
               on:click={() => state.geolocationControl.handleClick()}
               on:keydown={forwardEventToMap}
             >
@@ -465,7 +490,7 @@
       }}
       >
         <span slot="close-button" />
-         <SelectedElementPanel absolute={false} {state} selected={$selectedElement} />
+        <SelectedElementPanel absolute={false} {state} selected={$selectedElement} />
       </FloatOver>
     {:else}
       <FloatOver
@@ -525,7 +550,7 @@
         </div>
 
         <div slot="content2" class="m-2 flex flex-col">
-          <CopyrightPanel {state}/>
+          <CopyrightPanel {state} />
         </div>
 
         <div class="flex" slot="title3">
@@ -659,7 +684,7 @@
             <Tr t={Translations.t.general.menu.aboutMapComplete} />
           </h2>
           <AboutMapComplete {state} />
-          <CopyrightPanel {state}/>
+          <CopyrightPanel {state} />
         </div>
       </div>
     </FloatOver>