From 1e4c94339237696b631213bed4ca93b1fc7b1729 Mon Sep 17 00:00:00 2001
From: Paul Chavard <github@paul.chavard.net>
Date: Wed, 7 Jul 2021 14:12:50 +0200
Subject: [PATCH] Fix map controls checkbox labels

---
 .../components/shared/mapbox/MapStyleControl.jsx           | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/javascript/components/shared/mapbox/MapStyleControl.jsx b/app/javascript/components/shared/mapbox/MapStyleControl.jsx
index cd05313ba..a94c07aa7 100644
--- a/app/javascript/components/shared/mapbox/MapStyleControl.jsx
+++ b/app/javascript/components/shared/mapbox/MapStyleControl.jsx
@@ -4,6 +4,7 @@ import { Popover, RadioGroup } from '@headlessui/react';
 import { usePopper } from 'react-popper';
 import { MapIcon } from '@heroicons/react/outline';
 import { Slider } from '@reach/slider';
+import { useId } from '@reach/auto-id';
 import '@reach/slider/styles.css';
 
 import { getMapStyle, getLayerName, NBS } from './styles';
@@ -82,6 +83,7 @@ function MapStyleControl({
   const configurableLayers = Object.entries(layers).filter(
     ([, { configurable }]) => configurable
   );
+  const mapId = useId();
 
   return (
     <div className="form map-style-control mapboxgl-ctrl-group">
@@ -135,6 +137,7 @@ function MapStyleControl({
                 <li key={layer}>
                   <div className="flex mb-1">
                     <input
+                      id={`${mapId}-${layer}`}
                       className="m-0 p-0 mr-1"
                       type="checkbox"
                       checked={enabled}
@@ -142,7 +145,9 @@ function MapStyleControl({
                         setLayerEnabled(layer, event.target.checked);
                       }}
                     />
-                    <label className="m-0">{name}</label>
+                    <label className="m-0" htmlFor={`${mapId}-${layer}`}>
+                      {name}
+                    </label>
                   </div>
                   <Slider
                     min={10}