fix: Checkbox must be associated with label using id

ECMWFCode4Earth · Oct 2, 2024 · 4be99f0 · 4be99f0
1 parent 3695cda
commit 4be99f0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git 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
@@ -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}