Click check labels

kavigupta · Sep 17, 2024 · f88d3f5 · f88d3f5
1 parent 1ebc43a
commit f88d3f5
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/react/src/components/related-button.tsx b/react/src/components/related-button.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React, { ReactNode, useId } from 'react'
 
 import './related.css'
 import { article_link } from '../navigation/links'
@@ -69,6 +69,8 @@ function RelatedList(props: { articleType: string, buttonType: string, regions:
  return name
  }
 
+ const checkId = useId()
+
  return (
  <li className="list_of_lists">
  <div style={{ display: 'flex' }}>
@@ -78,6 +80,7 @@ function RelatedList(props: { articleType: string, buttonType: string, regions:
  name=""
  setting_key={setting_key}
  classNameToUse="related_checkbox"
+ id={checkId}
  />
  </div>
  </div>
@@ -95,7 +98,9 @@ function RelatedList(props: { articleType: string, buttonType: string, regions:
  paddingTop: '1pt', fontWeight: 500,
  }}
  >
- {displayName(relationship_type)}
+ <label htmlFor={checkId}>
+ {displayName(relationship_type)}
+ </label>
  </li>
  {
  regions.map((row, i) => (

diff --git a/react/src/components/sidebar.tsx b/react/src/components/sidebar.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React, { ReactNode, useId } from 'react'
 
 import '../style.css'
 import './sidebar.css'
@@ -101,7 +101,7 @@ export function Sidebar(): ReactNode {
 // type representing a key of SettingsDictionary that have boolean values
 type BooleanSettingKey = keyof { [K in keyof SettingsDictionary as SettingsDictionary[K] extends boolean ? K : never]: boolean }
 
-export function CheckboxSetting<K extends BooleanSettingKey>(props: { name: string, setting_key: K, classNameToUse?: string }): ReactNode {
+export function CheckboxSetting<K extends BooleanSettingKey>(props: { name: string, setting_key: K, classNameToUse?: string, id?: string }): ReactNode {
  const [checked, setChecked] = useSetting(props.setting_key)
 
  return (
@@ -118,21 +118,25 @@ export function CheckboxSetting<K extends BooleanSettingKey>(props: { name: stri
  }
  }}
  classNameToUse={props.classNameToUse}
+ id={props.id}
  />
  )
 };
 
-export function CheckboxSettingCustom<K extends string>(props: { name: string, setting_key: K, settings: Record<K, boolean>, set_setting: (key: K, value: boolean) => void, classNameToUse?: string }): ReactNode {
+export function CheckboxSettingCustom<K extends string>(props: { name: string, setting_key: K, settings: Record<K, boolean>, set_setting: (key: K, value: boolean) => void, classNameToUse?: string, id?: string }): ReactNode {
  // like CheckboxSetting, but doesn't use useSetting, instead using the callbacks
+ const id = useId()
+ const inputId = props.id ?? id
  return (
  <div className={props.classNameToUse ?? 'checkbox-setting'}>
  <input
+ id={inputId}
  type="checkbox"
  checked={props.settings[props.setting_key] || false}
  onChange={(e) => { props.set_setting(props.setting_key, e.target.checked) }}
  style={{ accentColor: '#5a7dc3' }}
  />
- <label>{props.name}</label>
+ <label htmlFor={inputId}>{props.name}</label>
  </div>
  )
 };