More work on A11y

src/Models/ThemeConfig/Json/QuestionableTagRenderingConfigJson.ts

@@ -105,6 +105,12 @@ export interface MappingConfigJson {
      */
     hideInAnswer?: boolean | TagConfigJson
 
+    /**
+     * Also show this 'then'-option if the feature matches these tags.
+     * Ideal for outdated tags.
+     */
+    alsoShowIf?: TagConfigJson
+
     /**
      * question: What tags should be applied if this mapping is _not_ chosen?
      *

src/Models/ThemeConfig/Json/TagRenderingConfigJson.ts

@@ -168,6 +168,7 @@ export interface TagRenderingConfigJson {
          * This can be an substituting-tag as well, e.g. {'if': 'addr:street:={_calculated_nearby_streetname}', 'then': '{_calculated_nearby_streetname}'}
          */
         if: TagConfigJson
+
         /**
          * question: What text should be shown?
          *

src/Models/ThemeConfig/TagRenderingConfig.ts

@@ -25,6 +25,7 @@ export interface Icon {}
 
 export interface Mapping {
     readonly if: UploadableTag
+    readonly alsoShowIf: Tag | undefined
     readonly ifnot?: UploadableTag
     readonly then: TypedTranslation<object>
     readonly icon: string
@@ -383,7 +384,9 @@ export default class TagRenderingConfig {
             }
         }
         const prioritySearch =
-            mapping.priorityIf !== undefined ? TagUtils.Tag(mapping.priorityIf) : undefined
+            mapping.priorityIf !== undefined
+                ? TagUtils.Tag(mapping.priorityIf, `${ctx}.priorityIf`)
+                : undefined
         const mp = <Mapping>{
             if: TagUtils.Tag(mapping.if, `${ctx}.if`),
             ifnot:
@@ -391,6 +394,10 @@ export default class TagRenderingConfig {
                     ? TagUtils.Tag(mapping.ifnot, `${ctx}.ifnot`)
                     : undefined,
             then: Translations.T(mapping.then, `${ctx}.then`),
+            alsoShowIf:
+                mapping.alsoShowIf !== undefined
+                    ? TagUtils.Tag(mapping.alsoShowIf, `${ctx}.alsoShowIf`)
+                    : undefined,
             hideInAnswer,
             icon,
             iconClass,
@@ -530,6 +537,9 @@ export default class TagRenderingConfig {
                 if (mapping.if.matchesProperties(tags)) {
                     return mapping
                 }
+                if (mapping.alsoShowIf?.matchesProperties(tags)) {
+                    return mapping
+                }
             }
         }
 
@@ -818,6 +828,7 @@ export default class TagRenderingConfig {
         for (const m of this.mappings ?? []) {
             tags.push(m.if)
             tags.push(m.priorityIf)
+            tags.push(m.alsoShowIf)
             tags.push(...(m.addExtraTags ?? []))
             if (typeof m.hideInAnswer !== "boolean") {
                 tags.push(m.hideInAnswer)

src/Models/ThemeViewState.ts

@@ -119,6 +119,11 @@ export default class ThemeViewState implements SpecialVisualizationState {
     readonly previewedImage = new UIEventSource<ProvidedImage>(undefined)
 
     readonly addNewPoint: UIEventSource<boolean> = new UIEventSource<boolean>(false)
+    /**
+     * When using arrow keys to move, the accessibility mode is activated, which has a small rectangle set.
+     * This is the 'viewport' which 'closestFeatures' uses to filter wilt
+     */
+    readonly visualFeedbackViewportBounds: UIEventSource<BBox> = new UIEventSource<BBox>(undefined)
 
     readonly lastClickObject: LastClickFeatureSource
     readonly overlayLayerStates: ReadonlyMap<
@@ -351,9 +356,11 @@ export default class ThemeViewState implements SpecialVisualizationState {
         this.closestFeatures = new NearbyFeatureSource(
             this.mapProperties.location,
             this.perLayerFiltered,
-            3,
-            this.layerState,
-            this.mapProperties.zoom
+            {
+                currentZoom: this.mapProperties.zoom,
+                layerState: this.layerState,
+                bounds: this.visualFeedbackViewportBounds,
+            }
         )
         this.hasDataInView = new NoElementsInViewDetector(this).hasFeatureInView
         this.imageUploadManager = new ImageUploadManager(
@@ -476,8 +483,18 @@ export default class ThemeViewState implements SpecialVisualizationState {
      */
     private selectClosestAtCenter(i: number = 0) {
         this.visualFeedback.setData(true)
-        const toSelect = this.closestFeatures.features.data[i]
+        const toSelect = this.closestFeatures.features?.data?.[i]
         if (!toSelect) {
+            window.requestAnimationFrame(() => {
+                const toSelect = this.closestFeatures.features?.data?.[i]
+                if (!toSelect) {
+                    return
+                }
+                const layer = this.layout.getMatchingLayer(toSelect.properties)
+                this.selectedElement.setData(undefined)
+                this.selectedLayer.setData(layer)
+                this.selectedElement.setData(toSelect)
+            })
             return
         }
         const layer = this.layout.getMatchingLayer(toSelect.properties)