From 6df07802441a1ffb0372b1519f9f5b4f801b94d6 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 6 Mar 2023 12:39:41 +0800
Subject: [PATCH] Implement labelFor on label filters so the whole area can be
 clicked

---
 .../components/templates/homeFeed/LibraryFilterMenu.tsx   | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
index e6fb4fc81..43c3983f4 100644
--- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
@@ -286,6 +286,7 @@ type LabelButtonProps = {
 }
 
 function LabelButton(props: LabelButtonProps): JSX.Element {
+  const labelId = `checkbox-label-${props.label.id}`
   const state = useMemo(() => {
     const term = props.searchTerm ?? ''
     if (term.indexOf(`label:\"${props.label.name}\"`) >= 0) {
@@ -316,14 +317,17 @@ function LabelButton(props: LabelButtonProps): JSX.Element {
       alignment="center"
       distribution="start"
     >
-      <Circle size={9} color={props.label.color} weight="fill" />
-      <SpanBox css={{ pl: '10px' }}>{props.label.name}</SpanBox>
+      <label htmlFor={labelId} style={{ width: '100%' }}>
+        <Circle size={9} color={props.label.color} weight="fill" />
+        <SpanBox css={{ pl: '10px' }}>{props.label.name}</SpanBox>
+      </label>
       <SpanBox
         css={{
           ml: 'auto',
         }}
       >
         <input
+          id={labelId}
           type="checkbox"
           checked={state === 'on'}
           onChange={(e) => {