From 4be99f06f6e56ed18fe7c969544139170aa8f1fc Mon Sep 17 00:00:00 2001
From: Chris Wilton-Magras <chriswilty@zoho.com>
Date: Wed, 2 Oct 2024 10:07:57 +0100
Subject: [PATCH] fix: Checkbox must be associated with label using id

---
 .../src/components/summary-view/MapViewHeader.tsx     | 11 +++++++++--
 .../src/components/summary-view/SummaryViewHeader.tsx | 10 ++++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/air-quality-ui/src/components/summary-view/MapViewHeader.tsx b/air-quality-ui/src/components/summary-view/MapViewHeader.tsx
index f5c7dddd..aaf7a0ca 100644
--- a/air-quality-ui/src/components/summary-view/MapViewHeader.tsx
+++ b/air-quality-ui/src/components/summary-view/MapViewHeader.tsx
@@ -1,4 +1,5 @@
 import Switch from '@mui/material/Switch'
+import { ChangeEvent, useId } from 'react'
 
 import classes from './MapViewHeader.module.css'
 
@@ -11,15 +12,21 @@ export const MapViewHeader = ({
   showMap,
   setShowMap,
 }: MapViewHeaderProps): JSX.Element => {
+  const switchId = useId()
+
   return (
     <div className={classes['table-header']}>
       <div className={`ag-theme-quartz ${classes['table-switch-container']}`}>
-        <label className={`ag-theme-quartz ${classes['table-switch-label']}`}>
+        <label
+          htmlFor={switchId}
+          className={`ag-theme-quartz ${classes['table-switch-label']}`}
+        >
           Show map view (experimental)
         </label>
         <Switch
+          id={switchId}
           className={classes['table-switch']}
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+          onChange={(event: ChangeEvent<HTMLInputElement>) => {
             setShowMap(event.target.checked)
           }}
           checked={showMap}
diff --git a/air-quality-ui/src/components/summary-view/SummaryViewHeader.tsx b/air-quality-ui/src/components/summary-view/SummaryViewHeader.tsx
index 926d101b..d2d93e36 100644
--- a/air-quality-ui/src/components/summary-view/SummaryViewHeader.tsx
+++ b/air-quality-ui/src/components/summary-view/SummaryViewHeader.tsx
@@ -1,4 +1,5 @@
 import Switch from '@mui/material/Switch'
+import { ChangeEvent, useId } from 'react'
 
 import classes from './SummaryViewHeader.module.css'
 import { useForecastContext } from '../../context'
@@ -13,6 +14,7 @@ export const SummaryViewHeader = ({
   setShowAllColoured,
 }: SummaryViewHeaderProps): JSX.Element => {
   const { forecastDetails } = useForecastContext()
+  const switchId = useId()
 
   return (
     <div className={classes['table-header']}>
@@ -22,12 +24,16 @@ export const SummaryViewHeader = ({
         {forecastDetails.maxMeasurementDate.toFormat('dd MMM HH:mm ZZZZ')}
       </div>
       <div className={`ag-theme-quartz ${classes['table-switch-container']}`}>
-        <label className={`ag-theme-quartz ${classes['table-switch-label']}`}>
+        <label
+          htmlFor={switchId}
+          className={`ag-theme-quartz ${classes['table-switch-label']}`}
+        >
           Highlight all AQI values
         </label>
         <Switch
+          id={switchId}
           className={classes['table-switch']}
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+          onChange={(event: ChangeEvent<HTMLInputElement>) => {
             setShowAllColoured(event.target.checked)
           }}
           checked={showAllColoured}