A11y: more feedback, add translations, fix some bugs with OH

src/UI/Base/DirectionIndicator.svelte

@@ -84,8 +84,8 @@
       const lang = Locale.language.data
       let bearingHuman: string
       if (compass.data !== undefined) {
-        console.log("compass:", compass.data)
         const bearingRelative = bearing - compass.data
+        console.log(feature.properties.id, "compass:", compass.data, "relative:", bearingRelative)
         const t = relativeDirections[GeoOperations.bearingToHumanRelative(bearingRelative)]
         bearingHuman = t.textFor(lang)
       } else {
@@ -119,22 +119,27 @@
 </script>
 
 {#if $bearingAndDistGps === undefined}
-  <button
-    class={twMerge("soft relative rounded-full p-1", size)}
+  <!-- 
+  Important: one would expect this to be a button - it certainly behaves as one
+  However, this breaks the live-reading functionality (at least with Orca+FF),
+  so we use a 'div' and add on:click manually
+  -->
+  <div
+    class={twMerge("soft relative rounded-full p-1 cursor-pointer border border-black", size)}
     on:click={() => focusMap()}
     use:ariaLabelStore={label}
   >
     <Center class="h-7 w-7" />
-  </button>
+  </div>
 {:else}
-  <button
-    class={twMerge("soft relative rounded-full", size)}
+  <div
+    class={twMerge("soft relative rounded-full border-black border", size)}
     on:click={() => focusMap()}
     use:ariaLabelStore={label}
   >
     <div
       class={twMerge(
-        "absolute top-0 left-0 flex items-center justify-center break-words text-sm",
+        "absolute top-0 left-0 flex items-center justify-center break-words text-xs cursor-pointer",
         size
       )}
     >
@@ -148,5 +153,5 @@
         />
       </div>
     {/if}
-  </button>
+  </div>
 {/if}

src/UI/BigComponents/Summary.svelte

@@ -29,6 +29,6 @@
       {state}
       {tags}
     />
+    <DirectionIndicator {feature} {state} />
   </a>
-  <DirectionIndicator {feature} {state} />
 </span>

src/UI/Map/RasterLayerHandler.ts

@@ -98,7 +98,12 @@ class SingleBackgroundHandler {
             addLayerBeforeId = undefined
         }
         if (!map.getSource(background.id)) {
-            map.addSource(background.id, RasterLayerHandler.prepareWmsSource(background))
+            try {
+                map.addSource(background.id, RasterLayerHandler.prepareWmsSource(background))
+            } catch (e) {
+                console.error("Could not add source", e)
+                return
+            }
         }
         if (!map.getLayer(background.id)) {
             addLayerBeforeId ??= map
@@ -202,14 +207,5 @@ export default class RasterLayerHandler {
     /**
      * Performs all necessary updates
      */
-    public setBackground() {
-        this.update().catch((e) => console.error(e))
-    }
-
-    private async update() {
-        const map = this._map.data
-        if (!map) {
-            return
-        }
-    }
+    public setBackground() {}
 }

src/UI/OpeningHours/OpeningHours.ts

@@ -910,6 +910,19 @@ This list will be sorted
 }
 
 export class ToTextualDescription {
+    /**
+     * const oh = new opening_hours("mon 12:00-16:00")
+     * const ranges = OH.createRangesForApplicableWeek(oh)
+     * const tr = ToTextualDescription.createTextualDescriptionFor(oh, ranges.ranges)
+     * tr.textFor("en") // => "On monday from 12:00 till 16:00"
+     * tr.textFor("nl") // => "Op maandag van 12:00 tot 16:00"
+     *
+     * const oh = new opening_hours("mon 12:00-16:00; tu 13:00-14:00")
+     * const ranges = OH.createRangesForApplicableWeek(oh)
+     * const tr = ToTextualDescription.createTextualDescriptionFor(oh, ranges.ranges)
+     * tr.textFor("en") // => "On monday from 12:00 till 16:00. On tuesday from 13:00 till 14:00"
+     * tr.textFor("nl") // => "Op maandag van 12:00 tot 16:00. Op dinsdag van 13:00 tot 14:00"
+     */
     public static createTextualDescriptionFor(
         oh: opening_hours,
         ranges: OpeningRange[][]
@@ -985,10 +998,16 @@ export class ToTextualDescription {
     }
 
     private static chain(trs: Translation[]): Translation {
-        let chainer = new TypedTranslation<{ a; b }>({ "*": "{a}. {b}" })
+        const languages: Record<string, string> = {}
+        for (const tr1 of trs) {
+            for (const supportedLanguage of tr1.SupportedLanguages()) {
+                languages[supportedLanguage] = "{a}. {b}"
+            }
+        }
+        let chainer = new TypedTranslation<{ a; b }>(languages)
         let tr = trs[0]
         for (let i = 1; i < trs.length; i++) {
-            tr = chainer.Subs({ a: tr, b: trs[i] })
+            tr = chainer.PartialSubsTr("a", tr).PartialSubsTr("b", trs[i])
         }
         return tr
     }

src/UI/OpeningHours/OpeningHoursVisualization.ts

@@ -11,6 +11,7 @@ import { Translation } from "../i18n/Translation"
 import { OsmConnection } from "../../Logic/Osm/OsmConnection"
 import Loading from "../Base/Loading"
 import opening_hours from "opening_hours"
+import Locale from "../i18n/Locale"
 
 export default class OpeningHoursVisualization extends Toggle {
     private static readonly weekdays: Translation[] = [
@@ -53,8 +54,9 @@ export default class OpeningHoursVisualization extends Toggle {
                     applicableWeek.ranges,
                     applicableWeek.startingMonday
                 )
-                textual.current.addCallbackAndRunD((descr) => {
-                    vis.ConstructElement().ariaLabel = descr
+                Locale.language.mapD((lng) => {
+                    console.log("Setting OH description to", lng, textual)
+                    vis.ConstructElement().ariaLabel = textual.textFor(lng)
                 })
                 return vis
             })