From fcee2546606cf214d74fa3ea6745cfec9138fd4b Mon Sep 17 00:00:00 2001
From: Sev Furneaux <sevfurneaux@gmail.com>
Date: Tue, 11 Feb 2025 13:47:46 +0000
Subject: [PATCH] react/kiezradar: fix github issues

---
 .../components_user_facing/_kiezradar.scss    |  6 ++++++
 meinberlin/react/kiezradar/KiezradarMap.jsx   | 20 ++++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/meinberlin/assets/scss/components_user_facing/_kiezradar.scss b/meinberlin/assets/scss/components_user_facing/_kiezradar.scss
index 7ed7bc122b..1c2f855e0a 100644
--- a/meinberlin/assets/scss/components_user_facing/_kiezradar.scss
+++ b/meinberlin/assets/scss/components_user_facing/_kiezradar.scss
@@ -297,6 +297,12 @@
   margin: 0;
   cursor: pointer;
 
+  &:focus {
+    outline: 3px auto Highlight;
+    outline: 3px auto -webkit-focus-ring-color;
+    outline-offset: 3px;
+  }
+
   &::-webkit-slider-thumb {
     appearance: none;
     width: 1.25rem;
diff --git a/meinberlin/react/kiezradar/KiezradarMap.jsx b/meinberlin/react/kiezradar/KiezradarMap.jsx
index c7102ad4e4..692693d08f 100644
--- a/meinberlin/react/kiezradar/KiezradarMap.jsx
+++ b/meinberlin/react/kiezradar/KiezradarMap.jsx
@@ -2,7 +2,7 @@ import L from 'leaflet'
 import React, { useRef } from 'react'
 import { createPortal } from 'react-dom'
 import django from 'django'
-import { Circle, MapContainer, Marker, useMap, ZoomControl } from 'react-leaflet'
+import { Circle, MapContainer, Marker, useMap, useMapEvents, ZoomControl } from 'react-leaflet'
 import { AddressSearch } from 'adhocracy4'
 import ControlWrapper from 'adhocracy4/adhocracy4/maps_react/static/a4maps_react/ControlWrapper'
 import MaplibreGlLayer from 'adhocracy4/adhocracy4/maps_react/static/a4maps_react/MaplibreGlLayer'
@@ -65,6 +65,24 @@ function Radius ({
   onChange
 }) {
   const markerRef = useRef(null)
+  const isTouchDevice = window.matchMedia('(pointer: coarse)').matches
+
+  useMapEvents({
+    click: (e) => {
+      if (isTouchDevice) {
+        onChange({
+          point: {
+            type: 'Feature',
+            geometry: {
+              type: 'Point',
+              coordinates: [e.latlng.lng, e.latlng.lat]
+            }
+          },
+          radius
+        })
+      }
+    }
+  })
 
   const radiusControls = (
     <RadiusControls