a11y: fix 400% zoom issues for Asset and Location select, fix flicker…

…ing issues
delta10 · Dec 11, 2024 · bd14302 · bd14302
1 parent 5521205
commit bd14302
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git 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<HTMLDialogElement>(null)
+  const mapContainerRef = useRef<HTMLDivElement>(null)
   const [isMapSelected, setIsMapSelected] = useState<boolean | null>(null)
   const [mapFeatures, setMapFeatures] = useState<FeatureCollection | null>()
   const { setValue } = useFormContext()
@@ -375,7 +377,24 @@ const MapDialog = ({
               />
               <div className="block md:hidden">
                 <Alert>
-                  <Paragraph>{t('scroll_for_map')}</Paragraph>
+                  <div className="flex flex-row items-center">
+                    <Paragraph>{t('scroll_for_map')}</Paragraph>
+                    <IconButton
+                      appearance="secondary-action-button"
+                      label={t('scroll_to_map_button')}
+                      onClick={() =>
+                        mapContainerRef.current?.scrollIntoView({
+                          behavior: 'smooth',
+                          block: 'center',
+                        })
+                      }
+                      className="ml-2"
+                    >
+                      <Icon>
+                        <IconChevronDown />
+                      </Icon>
+                    </IconButton>
+                  </div>
                 </Alert>
               </div>
               {isAssetSelect &&
@@ -420,7 +439,10 @@ const MapDialog = ({
             </div>
           </div>
           {config && (
-            <div className="col-span-1 md:col-span-2 min-h-[100vh] max-h-[50vh] md:max-h-screen relative">
+            <div
+              className="col-span-1 md:col-span-2 min-h-[100vh] max-h-[50vh] md:max-h-screen relative"
+              ref={mapContainerRef}
+            >
               <Map
                 {...viewState}
                 id="dialogMap"

diff --git a/translations/en.json b/translations/en.json
@@ -43,6 +43,7 @@
       "go_further_without_selected_object": "Continue without object",
       "zoom_for_object": "Zoom in on the map to see the objects",
       "scroll_for_map": "Scroll down to display the map",
+      "scroll_to_map_button": "Scroll down",
       "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
@@ -43,6 +43,7 @@
       "go_further_without_selected_object": "Ga verder zonder object",
       "zoom_for_object": "Zoom in op de kaart om de objecten te zien",
       "scroll_for_map": "Scroll naar onder om de kaart te weergeven",
+      "scroll_to_map_button": "Naar beneden",
       "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",