From de10d0441209a2025b4dc71ca79245e967ff716e Mon Sep 17 00:00:00 2001 From: justian Date: Mon, 9 Dec 2024 11:11:36 +0100 Subject: [PATCH 1/5] fix: spacing between zoom in and zoom out button MapDialog, set dark mode preview url in env in vercel environments, outlining issues mobile MapDialog --- src/app/[locale]/incident/add/components/MapDialog.tsx | 6 +++--- src/app/globals.css | 4 +++- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/app/[locale]/incident/add/components/MapDialog.tsx b/src/app/[locale]/incident/add/components/MapDialog.tsx index 6689b7b0..047505bd 100644 --- a/src/app/[locale]/incident/add/components/MapDialog.tsx +++ b/src/app/[locale]/incident/add/components/MapDialog.tsx @@ -322,7 +322,7 @@ const MapDialog = ({ {trigger} - + {/* TODO: Overleggen welke titel hier het meest vriendelijk is voor de gebruiker, multi-language support integreren */} @@ -346,7 +346,7 @@ const MapDialog = ({ -
+
{field?.meta.language.title @@ -398,7 +398,7 @@ const MapDialog = ({
{config && ( -
+
Date: Mon, 9 Dec 2024 13:29:21 +0100 Subject: [PATCH 2/5] fix: location errors in en and nl --- .../incident/add/components/MapDialog.tsx | 16 ++++++++++++++-- translations/en.json | 3 +++ translations/nl.json | 3 +++ 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/app/[locale]/incident/add/components/MapDialog.tsx b/src/app/[locale]/incident/add/components/MapDialog.tsx index 047505bd..ec6e8cea 100644 --- a/src/app/[locale]/incident/add/components/MapDialog.tsx +++ b/src/app/[locale]/incident/add/components/MapDialog.tsx @@ -269,7 +269,15 @@ const MapDialog = ({ dialogRef.current?.showModal() }, (locationError) => { - setError(locationError.message) + // For documentation see: https://developer.mozilla.org/en-US/docs/Web/API/GeolocationPositionError. + // We map a custom error message here to the locationError.code + const locationErrors: { [key: number]: string } = { + 1: t('current_location_permission_error'), + 2: t('current_location_position_error'), + 3: t('current_location_timeout_error'), + } + + setError(locationErrors[locationError.code]) dialogRef.current?.showModal() } ) @@ -332,7 +340,11 @@ const MapDialog = ({ {t('dialog_description')} - +
{error} diff --git a/translations/en.json b/translations/en.json index 0b993ac3..127f43b7 100644 --- a/translations/en.json +++ b/translations/en.json @@ -36,6 +36,9 @@ "close_alert_notification": "Close notification", "address_search_label": "Search by address", "outside_max_bound_error": "Your location is outside the map bounds and is therefore not visible.", + "current_location_permission_error": "Failed to retrieve location data because the page does not have the necessary permissions. Check if location usage is allowed in the settings or if the website's policy is blocking it.", + "current_location_timeout_error": "Failed to retrieve location data because it took too long. Ensure that your device has a good connection and try again.", + "current_location_position_error": "Failed to retrieve location data because an internal error occurred while determining the position. Try again later or check your device settings.", "max_number_of_assets_error": "You can select at most {max, plural, one {# object} other {# objects}}.", "go_further_without_selected_object": "Continue without object", "zoom_for_object": "Zoom in to see the objects", diff --git a/translations/nl.json b/translations/nl.json index 97fbbcd2..f37b43eb 100644 --- a/translations/nl.json +++ b/translations/nl.json @@ -34,6 +34,9 @@ "dialog_description": "Kies een locatie op de kaart voor de locatie van uw melding.", "current_location": "Mijn locatie", "outside_max_bound_error": "Uw locatie valt buiten de kaart en is daardoor niet te zien.", + "current_location_permission_error": "Het ophalen van locatiegegevens is mislukt omdat de pagina niet over de benodigde toestemmingen beschikt. Controleer of locatiegebruik is toegestaan in de instellingen of of het beleid van de website dit blokkeert.", + "current_location_timeout_error": "Het ophalen van locatiegegevens duurde te lang. Zorg ervoor dat uw apparaat een goede verbinding heeft en probeer het opnieuw.", + "current_location_position_error": "Het ophalen van locatiegegevens is mislukt omdat een interne fout optrad bij het bepalen van de positie. Probeer het later opnieuw of controleer uw apparaatinstellingen.", "close_alert_notification": "Sluit melding", "address_search_label": "Zoek op adres", "max_number_of_assets_error": "U kunt maximaal {max, plural, one {# object} other {# objecten}} selecteren.", From e9871d5c71533d5778da7ea23e8b9d8392d038db Mon Sep 17 00:00:00 2001 From: justian Date: Mon, 9 Dec 2024 15:28:37 +0100 Subject: [PATCH 3/5] fix: focus asset in tab order step two --- .../add/components/FeatureListItem.tsx | 16 +++++++++++- .../incident/add/components/MapDialog.tsx | 25 +++++++++++++------ src/app/globals.css | 7 ++++++ 3 files changed, 40 insertions(+), 8 deletions(-) diff --git a/src/app/[locale]/incident/add/components/FeatureListItem.tsx b/src/app/[locale]/incident/add/components/FeatureListItem.tsx index d0d98094..2be0d653 100644 --- a/src/app/[locale]/incident/add/components/FeatureListItem.tsx +++ b/src/app/[locale]/incident/add/components/FeatureListItem.tsx @@ -16,6 +16,7 @@ type FeatureListItemProps = { setError: Dispatch> dialogRef: RefObject configUrl?: string + setFocusedItemId: Dispatch> } export const FeatureListItem = ({ @@ -24,6 +25,7 @@ export const FeatureListItem = ({ setError, dialogRef, configUrl, + setFocusedItemId, }: FeatureListItemProps) => { const t = useTranslations('describe_add.map') const { formState, updateForm } = useFormStore() @@ -85,7 +87,19 @@ export const FeatureListItem = ({ // TODO: iets van een label toevoegen zodat voor een SR duidelijk wordt om welke lantaarnpaal, adres etc het gaat? return featureDescription ? (
  • - + { + setTimeout(() => { + setFocusedItemId(featureId) + }, 10) + }} + onBlur={(e) => { + setTimeout(() => { + setFocusedItemId(null) + }, 0) + }} + > {!formState.selectedFeatures.some( (featureItem) => featureItem.id === featureId ) ? ( diff --git a/src/app/[locale]/incident/add/components/MapDialog.tsx b/src/app/[locale]/incident/add/components/MapDialog.tsx index ec6e8cea..8578e335 100644 --- a/src/app/[locale]/incident/add/components/MapDialog.tsx +++ b/src/app/[locale]/incident/add/components/MapDialog.tsx @@ -67,6 +67,7 @@ const MapDialog = ({ const t = useTranslations('describe_add.map') const [marker, setMarker] = useState<[number, number] | []>([]) const [error, setError] = useState(null) + const [focusedItemId, setFocusedItemId] = useState(null) const { formState, updateForm } = useFormStore() const { dialogMap } = useMap() const { loading, config } = useConfig() @@ -343,7 +344,10 @@ const MapDialog = ({ {error} @@ -387,6 +391,7 @@ const MapDialog = ({ field={field} setError={setError} dialogRef={dialogRef} + setFocusedItemId={setFocusedItemId} /> ))} @@ -448,13 +453,19 @@ const MapDialog = ({ onClick={(e) => handleFeatureMarkerClick(e, feature)} > {!formState.selectedFeatures.some( - (featureItem) => featureItem.id === feature.id + (featureItem) => featureItem.id === id ) ? ( - - - + focusedItemId === id ? ( + +
    +     + ) : ( + + + + ) ) : ( Date: Wed, 11 Dec 2024 15:50:22 +0100 Subject: [PATCH 4/5] a11y: fix 400% zoom issues for Asset and Location select, fix flickering issues --- .../[locale]/incident/add/components/MapDialog.tsx | 14 ++++++++++---- translations/en.json | 3 ++- translations/nl.json | 3 ++- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/app/[locale]/incident/add/components/MapDialog.tsx b/src/app/[locale]/incident/add/components/MapDialog.tsx index 8578e335..15f91436 100644 --- a/src/app/[locale]/incident/add/components/MapDialog.tsx +++ b/src/app/[locale]/incident/add/components/MapDialog.tsx @@ -331,7 +331,7 @@ const MapDialog = ({ {trigger} - + {/* TODO: Overleggen welke titel hier het meest vriendelijk is voor de gebruiker, multi-language support integreren */} @@ -362,8 +362,8 @@ const MapDialog = ({     -
    -
    +
    +
    {field?.meta.language.title ? field.meta.language.title @@ -373,6 +373,11 @@ const MapDialog = ({ updatePosition={updatePosition} setIsMapSelected={setIsMapSelected} /> +
    + + {t('scroll_for_map')} + +
    {isAssetSelect && dialogMap && config && @@ -415,7 +420,7 @@ const MapDialog = ({
    {config && ( -
    +
    setViewState(evt.viewState)} style={{ blockSize: '100%', inlineSize: '100%' }} mapStyle={mapStyle} + scrollZoom={false} attributionControl={false} maxBounds={ config.base.map.maxBounds as [ diff --git a/translations/en.json b/translations/en.json index 127f43b7..13b4d747 100644 --- a/translations/en.json +++ b/translations/en.json @@ -41,7 +41,8 @@ "current_location_position_error": "Failed to retrieve location data because an internal error occurred while determining the position. Try again later or check your device settings.", "max_number_of_assets_error": "You can select at most {max, plural, one {# object} other {# objects}}.", "go_further_without_selected_object": "Continue without object", - "zoom_for_object": "Zoom in to see the objects", + "zoom_for_object": "Zoom in on the map to see the objects", + "scroll_for_map": "Scroll down to display the map", "map_zoom-in_button_label": "Zoom in on the map", "map_zoom-out_button_label": "Zoom out on the map", "map_close_button_label": "Close the map", diff --git a/translations/nl.json b/translations/nl.json index f37b43eb..20c0295c 100644 --- a/translations/nl.json +++ b/translations/nl.json @@ -41,7 +41,8 @@ "address_search_label": "Zoek op adres", "max_number_of_assets_error": "U kunt maximaal {max, plural, one {# object} other {# objecten}} selecteren.", "go_further_without_selected_object": "Ga verder zonder object", - "zoom_for_object": "Zoom in om de objecten te zien", + "zoom_for_object": "Zoom in op de kaart om de objecten te zien", + "scroll_for_map": "Scroll naar onder om de kaart te weergeven", "map_zoom-in_button_label": "Zoom in op de kaart", "map_zoom-out_button_label": "Zoom uit op de kaart", "map_close_button_label": "Sluit de kaart", From bd14302dabf08402686a80e06d755a2b2090622c Mon Sep 17 00:00:00 2001 From: justian Date: Wed, 11 Dec 2024 16:28:12 +0100 Subject: [PATCH 5/5] a11y: fix 400% zoom issues for Asset and Location select, fix flickering issues --- .../incident/add/components/MapDialog.tsx | 26 +++++++++++++++++-- translations/en.json | 1 + translations/nl.json | 1 + 3 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/app/[locale]/incident/add/components/MapDialog.tsx b/src/app/[locale]/incident/add/components/MapDialog.tsx index 15f91436..3406ded5 100644 --- a/src/app/[locale]/incident/add/components/MapDialog.tsx +++ b/src/app/[locale]/incident/add/components/MapDialog.tsx @@ -24,6 +24,7 @@ import { } from '@/components' import { useConfig } from '@/hooks/useConfig' import { + IconChevronDown, IconCurrentLocation, IconMinus, IconPlus, @@ -72,6 +73,7 @@ const MapDialog = ({ const { dialogMap } = useMap() const { loading, config } = useConfig() const dialogRef = useRef(null) + const mapContainerRef = useRef(null) const [isMapSelected, setIsMapSelected] = useState(null) const [mapFeatures, setMapFeatures] = useState() const { setValue } = useFormContext() @@ -375,7 +377,24 @@ const MapDialog = ({ />
    - {t('scroll_for_map')} +
    + {t('scroll_for_map')} + + mapContainerRef.current?.scrollIntoView({ + behavior: 'smooth', + block: 'center', + }) + } + className="ml-2" + > + + + + +
    {isAssetSelect && @@ -420,7 +439,10 @@ const MapDialog = ({
    {config && ( -
    +