diff --git a/assets/layers/usersettings/usersettings.json b/assets/layers/usersettings/usersettings.json index 5e42f16595..ed64e2bcca 100644 --- a/assets/layers/usersettings/usersettings.json +++ b/assets/layers/usersettings/usersettings.json @@ -113,6 +113,33 @@ "*": "{logout()}" } }, + { + "id": "a11y-features", + "question": { + "en": "What accessibility features should be applied?" + }, + "mappings": [ + { + "if": "mapcomplete-a11y=default", + "alsoShowIf": "mapcomplete-a11y=", + "then": { + "en": "Enable accessibility features when arrow keys are used to navigate the map" + } + }, + { + "if": "mapcomplete-a11y=always", + "then": { + "en": "Always enable accessibility features" + } + }, + { + "if": "mapcomplete-a11y=never", + "then": { + "en": "Never enable accessibility features" + } + } + ] + }, { "id": "background-layer-readonly", "condition": { diff --git a/assets/themes/mapcomplete-changes/mapcomplete-changes.json b/assets/themes/mapcomplete-changes/mapcomplete-changes.json index 5c67882b0c..6c73765960 100644 --- a/assets/themes/mapcomplete-changes/mapcomplete-changes.json +++ b/assets/themes/mapcomplete-changes/mapcomplete-changes.json @@ -1,16 +1,13 @@ { "id": "mapcomplete-changes", "title": { - "en": "Changes made with MapComplete", - "de": "Mit MapComplete vorgenommene Änderungen" + "en": "Changes made with MapComplete" }, "shortDescription": { - "en": "Shows changes made by MapComplete", - "de": "Zeigt die von MapComplete vorgenommenen Änderungen an" + "en": "Shows changes made by MapComplete" }, "description": { - "en": "This maps shows all the changes made with MapComplete", - "de": "Diese Karte zeigt alle mit MapComplete vorgenommenen Änderungen" + "en": "This maps shows all the changes made with MapComplete" }, "icon": "./assets/svg/logo.svg", "hideFromOverview": true, @@ -23,8 +20,7 @@ { "id": "mapcomplete-changes", "name": { - "en": "Changeset centers", - "de": "Zentrum der Änderungssätze" + "en": "Changeset centers" }, "minzoom": 0, "source": { @@ -35,48 +31,41 @@ }, "title": { "render": { - "en": "Changeset for {theme}", - "de": "Änderungssatz für {theme}" + "en": "Changeset for {theme}" } }, "description": { - "en": "Shows all MapComplete changes", - "de": "Zeigt alle MapComplete-Änderungen" + "en": "Shows all MapComplete changes" }, "tagRenderings": [ { "id": "show_changeset_id", "render": { - "en": "Changeset {id}", - "de": "Änderungssatz {id}" + "en": "Changeset {id}" } }, { "id": "contributor", "question": { - "en": "What contributor did make this change?", - "de": "Wer hat diese Änderung vorgenommen?" + "en": "What contributor did make this change?" }, "freeform": { "key": "user" }, "render": { - "en": "Change made by {user}", - "de": "Änderung von {user}" + "en": "Change made by {user}" } }, { "id": "theme-id", "question": { - "en": "What theme was used to make this change?", - "de": "Welches Theme wurde für diese Änderung verwendet?" + "en": "What theme was used to make this change?" }, "freeform": { "key": "theme" }, "render": { - "en": "Change with theme {theme}", - "de": "Geändert mit Thema {theme}" + "en": "Change with theme {theme}" } }, { @@ -85,23 +74,19 @@ "key": "locale" }, "question": { - "en": "What locale (language) was this change made in?", - "de": "In welcher Benutzersprache wurde diese Änderung vorgenommen?" + "en": "What locale (language) was this change made in?" }, "render": { - "en": "User locale is {locale}", - "de": "Benutzersprache {locale}" + "en": "User locale is {locale}" } }, { "id": "host", "render": { - "en": "Change with with {host}", - "de": "Geändert über {host}" + "en": "Change with with {host}" }, "question": { - "en": "What host (website) was this change made with?", - "de": "Über welchen Host (Webseite) wurde diese Änderung vorgenommen?" + "en": "What host (website) was this change made with?" }, "freeform": { "key": "host" @@ -122,12 +107,10 @@ { "id": "version", "question": { - "en": "What version of MapComplete was used to make this change?", - "de": "Welche Version von MapComplete wurde verwendet, um diese Änderung vorzunehmen?" + "en": "What version of MapComplete was used to make this change?" }, "render": { - "en": "Made with {editor}", - "de": "Erstellt mit {editor}" + "en": "Made with {editor}" }, "freeform": { "key": "editor" @@ -477,8 +460,7 @@ } ], "question": { - "en": "Themename contains {search}", - "de": "Themename enthält {search}" + "en": "Themename contains {search}" } } ] @@ -494,8 +476,7 @@ } ], "question": { - "en": "Themename does not contain {search}", - "de": "Der Name enthält nicht {search}" + "en": "Themename does not contain {search}" } } ] @@ -511,8 +492,7 @@ } ], "question": { - "en": "Made by contributor {search}", - "de": "Der Name enthält nicht {search}" + "en": "Made by contributor {search}" } } ] @@ -528,8 +508,7 @@ } ], "question": { - "en": "Not made by contributor {search}", - "de": "Nicht erstellt von {search}" + "en": "Not made by contributor {search}" } } ] @@ -546,8 +525,7 @@ } ], "question": { - "en": "Made before {search}", - "de": "Erstellt vor {search}" + "en": "Made before {search}" } } ] @@ -564,8 +542,7 @@ } ], "question": { - "en": "Made after {search}", - "de": "Erstellt nach {search}" + "en": "Made after {search}" } } ] @@ -581,8 +558,7 @@ } ], "question": { - "en": "User language (iso-code) {search}", - "de": "Benutzersprache (ISO-Code) {search}" + "en": "User language (iso-code) {search}" } } ] @@ -598,8 +574,7 @@ } ], "question": { - "en": "Made with host {search}", - "de": "Erstellt mit Host {search}" + "en": "Made with host {search}" } } ] @@ -610,8 +585,7 @@ { "osmTags": "add-image>0", "question": { - "en": "Changeset added at least one image", - "de": "Änderungssatz hat mindestens ein Bild hinzugefügt" + "en": "Changeset added at least one image" } } ] @@ -622,8 +596,7 @@ { "osmTags": "theme!=grb", "question": { - "en": "Exclude GRB theme", - "de": "GRB-Theme ausschließen" + "en": "Exclude GRB theme" } } ] @@ -634,8 +607,7 @@ { "osmTags": "theme!=etymology", "question": { - "en": "Exclude etymology theme", - "de": "Etymologie-Thema ausschließen" + "en": "Exclude etymology theme" } } ] @@ -650,8 +622,7 @@ { "id": "link_to_more", "render": { - "en": "More statistics can be found here", - "de": "Mehr Statistiken gibt es hier" + "en": "More statistics can be found here" } }, { diff --git a/langs/nl.json b/langs/nl.json index f0b614ee63..7c4ffe1555 100644 --- a/langs/nl.json +++ b/langs/nl.json @@ -376,7 +376,7 @@ "islocked": "Bewegen vergrendeld rond je huidige locatie. Duw op de geolocatie-knop om te ontgrendelen.", "locked": "Bewegen vergrendeld rond jouw huidige locatie.", "navigation": "Gebruik de pijltjestoetsen om te bewegen. Druk op spatie om het meest centrale punt te selecteren. Druk op een cijfertoets om andere items te selecteren.", - "noCloseFeatures": "Niet in beeld", + "noCloseFeatures": "Geen objecten in beeld", "north": "Naar het noorden", "oneFeatureInView": "Eén object in beeld.", "out": "Aan het uitzoomen naar zoomlevel {z}", diff --git a/src/Logic/State/UserRelatedState.ts b/src/Logic/State/UserRelatedState.ts index 3c437dfee2..5cfe3416de 100644 --- a/src/Logic/State/UserRelatedState.ts +++ b/src/Logic/State/UserRelatedState.ts @@ -41,6 +41,7 @@ export default class UserRelatedState { public readonly showTags: UIEventSource<"no" | undefined | "always" | "yes" | "full"> public readonly showCrosshair: UIEventSource<"yes" | "always" | "no" | undefined> public readonly fixateNorth: UIEventSource + public readonly a11y: UIEventSource public readonly homeLocation: FeatureSource /** * The language as saved into the preferences of the user, if logged in. @@ -109,6 +110,10 @@ export default class UserRelatedState { this.showTags = >this.osmConnection.GetPreference("show_tags") this.showCrosshair = >this.osmConnection.GetPreference("show_crosshair") this.fixateNorth = >this.osmConnection.GetPreference("fixate-north") + this.a11y = >( + this.osmConnection.GetPreference("a11y") + ) + this.mangroveIdentity = new MangroveIdentity( this.osmConnection.GetLongPreference("identity", "mangrove") ) diff --git a/src/Models/ThemeViewState.ts b/src/Models/ThemeViewState.ts index 5db88f912b..41515bb2fa 100644 --- a/src/Models/ThemeViewState.ts +++ b/src/Models/ThemeViewState.ts @@ -452,7 +452,17 @@ export default class ThemeViewState implements SpecialVisualizationState { * Various small methods that need to be called */ private miscSetup() { + this.userRelatedState.a11y.addCallbackAndRunD((a11y) => { + if (a11y === "always") { + this.visualFeedback.setData(true) + } else if (a11y === "never") { + this.visualFeedback.setData(false) + } + }) this.mapProperties.onKeyNavigationEvent((keyEvent) => { + if (this.userRelatedState.a11y.data === "never") { + return + } if (["north", "east", "south", "west"].indexOf(keyEvent.key) >= 0) { this.visualFeedback.setData(true) return true // Our job is done, unregister @@ -482,7 +492,9 @@ export default class ThemeViewState implements SpecialVisualizationState { * @private */ private selectClosestAtCenter(i: number = 0) { - this.visualFeedback.setData(true) + if (this.userRelatedState.a11y.data !== "never") { + this.visualFeedback.setData(true) + } const toSelect = this.closestFeatures.features?.data?.[i] if (!toSelect) { window.requestAnimationFrame(() => { diff --git a/src/UI/BigComponents/Geosearch.svelte b/src/UI/BigComponents/Geosearch.svelte index 3dbab11ef3..2aeca7eda4 100644 --- a/src/UI/BigComponents/Geosearch.svelte +++ b/src/UI/BigComponents/Geosearch.svelte @@ -10,6 +10,7 @@ import { createEventDispatcher, onDestroy } from "svelte" import { placeholder } from "../../Utils/placeholder" import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid" + import { ariaLabel } from "../../Utils/ariaLabel" export let perLayer: ReadonlyMap | undefined = undefined export let bounds: UIEventSource @@ -116,6 +117,7 @@ }} bind:value={searchContents} use:placeholder={Translations.t.general.search.search} + use:ariaLabel={Translations.t.general.search.search} /> {#if feedback !== undefined} diff --git a/src/UI/Map/MapLibreAdaptor.ts b/src/UI/Map/MapLibreAdaptor.ts index c97dd5d9f1..505d47b4ee 100644 --- a/src/UI/Map/MapLibreAdaptor.ts +++ b/src/UI/Map/MapLibreAdaptor.ts @@ -511,15 +511,25 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap { await Utils.waitFor(250) } } - public installCustomKeyboardHandler(viewport: Store) { - viewport.mapD( + public installCustomKeyboardHandler(viewportStore: UIEventSource) { + viewportStore.mapD( (viewport) => { const map = this._maplibreMap.data if (!map) { return } const oldKeyboard = map.keyboard - oldKeyboard._panStep = viewport.getBoundingClientRect().width + const w = viewport.getBoundingClientRect().width + if (w < 10) { + /// this is weird, but definitively wrong! + console.log("Got a very small bound", w, viewport) + // We try again later on + window.requestAnimationFrame(() => { + viewportStore.ping() + }) + return + } + oldKeyboard._panStep = w }, [this._maplibreMap] ) diff --git a/src/UI/Popup/TagRendering/TagRenderingAnswer.svelte b/src/UI/Popup/TagRendering/TagRenderingAnswer.svelte index 1ca9bfc808..12a53e0bdf 100644 --- a/src/UI/Popup/TagRendering/TagRenderingAnswer.svelte +++ b/src/UI/Popup/TagRendering/TagRenderingAnswer.svelte @@ -29,9 +29,9 @@ {#if config !== undefined && (config?.condition === undefined || config.condition.matchesProperties($tags))} -
+
{#if $trs.length === 1} - + {/if} {#if $trs.length > 1}
    diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte index d3c3f222e7..3e67960209 100644 --- a/src/UI/ThemeViewGUI.svelte +++ b/src/UI/ThemeViewGUI.svelte @@ -79,7 +79,7 @@ let layout = state.layout let maplibremap: UIEventSource = state.map let selectedElement: UIEventSource = new UIEventSource(undefined) - + selectedElement.addCallbackAndRun(se => console.log("Selected element", se)) let compass = Orientation.singleton.alpha let compassLoaded = Orientation.singleton.gotMeasurement Orientation.singleton.startMeasurements() @@ -189,9 +189,11 @@
    + {#if $selectedElement === undefined}
    + {/if}