From dfd11c4e6c9e6820d2cbb2e33f7ab565fbe381d0 Mon Sep 17 00:00:00 2001
From: Tirthraj Chavan <tirthraj01@Tirthrajs-MacBook-Air.local>
Date: Wed, 16 Sep 2026 01:02:14 +0530
Subject: [PATCH 1/2] fix(dropdown): make radio and checkbox icons clickable
 (#1590)

---
 .../AccessibilitySettings/index.tsx           |  3 +-
 src/components/Dropdown/index.tsx             | 90 +++++++++----------
 src/components/Dropdown/styles.module.scss    | 14 +--
 3 files changed, 54 insertions(+), 53 deletions(-)

diff --git a/src/components/AccessibilitySettings/index.tsx b/src/components/AccessibilitySettings/index.tsx
index 80064c7e0d..aadc1870b7 100644
--- a/src/components/AccessibilitySettings/index.tsx
+++ b/src/components/AccessibilitySettings/index.tsx
@@ -56,8 +56,7 @@ export const AccessibilitySettings = ({
       dropdownLabel={dropdownLabel}
       onChange={(option) => toggleSetting(option.value as PossibleA11ySettings)}
       iconKind="settings"
-      variant="radio"
+      variant="checkbox"
       initialSelected={selectedSettings}
     />
   );
-};
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
index 9b16804ffc..62fa6ab713 100644
--- a/src/components/Dropdown/index.tsx
+++ b/src/components/Dropdown/index.tsx
@@ -23,7 +23,7 @@ export const Dropdown = ({
   dropdownLabel,
   onChange,
   iconKind,
-  variant = "dropdown",
+  variant?: "dropdown" | "radio" | "checkbox";,
 }: DropdownProps) => {
   const [selected, setSelected] = useState(initialSelected);
   const [isOpen, setIsOpen] = useState(false);
@@ -62,15 +62,16 @@ export const Dropdown = ({
       setIsOpen(false);
     }
 
-    // With a radio variant, multiple options can be selected
-    if (variant === "radio" && Array.isArray(selected)) {
-      const newSelected = selected.includes(option.value)
-        ? selected.filter((value) => value !== option.value)
-        : [...selected, option.value];
-      setSelected(newSelected);
-    }
-    onChange(option);
-  };
+    // With a radio or checkbox variant, multiple options can be selected
+if (
+  (variant === "radio" || variant === "checkbox") &&
+  Array.isArray(selected)
+) {
+  const newSelected = selected.includes(option.value)
+    ? selected.filter((value) => value !== option.value)
+    : [...selected, option.value];
+  setSelected(newSelected);
+}
 
   // Handle keyboard navigation
   const handleKeyDown = (event: KeyboardEvent) => {
@@ -137,41 +138,40 @@ export const Dropdown = ({
   const renderExpandedDropdown = () => (
     <ul className={styles.options} role="listbox" tabIndex={-1}>
       {options.map((option, index) => (
-        <li
-          key={option.value}
-          className={styles.option}
-          role="option"
-          aria-selected={isSelected(option)}
-        >
-          <div className={styles.icon}>
-            <Icon
-              kind={
-                isSelected(option) ? "option-selected" : "option-unselected"
-              }
-            />
-          </div>
-          <button
-            onClick={() => handleOptionClick(option)}
-            ref={el => {
-              optionRefs.current[index] = el as HTMLButtonElement
-            }}
-            onBlur={handleBlur}
-          >
-            <span>{option.label}</span>
-          </button>
-        </li>
-      ))}
-      {variant === "radio" ? (
-        <button onClick={() => setIsOpen(false)} className={styles.chevron}>
-          <Icon kind="chevron-up" />
-        </button>
-      ) : (
-        <div className={styles.chevron}>
-          <Icon kind="chevron-up" />
-        </div>
-      )}
-    </ul>
-  );
+  <li
+    key={option.value}
+    className={styles.option}
+    role="option"
+    aria-selected={isSelected(option)}
+  >
+    <button
+      onClick={() => handleOptionClick(option)}
+      ref={(el) => {
+        optionRefs.current[index] = el as HTMLButtonElement;
+      }}
+      onBlur={handleBlur}
+    >
+      <div className={styles.icon}>
+        <Icon
+          kind={
+            isSelected(option) ? "option-selected" : "option-unselected"
+          }
+        />
+      </div>
+      <span>{option.label}</span>
+    </button>
+  </li>
+))}
+
+      {variant === "radio" || variant === "checkbox" ? (
+  <button onClick={() => setIsOpen(false)} className={styles.chevron}>
+    <Icon kind="chevron-up" />
+  </button>
+) : (
+  <div className={styles.chevron}>
+    <Icon kind="chevron-up" />
+  </div>
+)}
 
   return (
     <div
diff --git a/src/components/Dropdown/styles.module.scss b/src/components/Dropdown/styles.module.scss
index 60bd666887..42f8f3f446 100644
--- a/src/components/Dropdown/styles.module.scss
+++ b/src/components/Dropdown/styles.module.scss
@@ -51,24 +51,26 @@
 
 .option {
   cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-xs);
+  padding: 0;
 
   .icon {
     position: static;
+    display: flex;
+    align-items: center;
   }
 
   button {
-    flex: 1;
+    width: 100%;
     display: flex;
     align-items: center;
+    gap: var(--spacing-xs);
+    padding: var(--spacing-xs);
     text-align: left;
     background: none;
     border: none;
     cursor: pointer;
-    padding: 0;
+    color: inherit;
+    font: inherit;
   }
 }
 

From 53f46a96b20925cf4afe219e7ef3ce5e7f7253a3 Mon Sep 17 00:00:00 2001
From: Tirthraj Chavan <tirthraj01@Tirthrajs-MacBook-Air.local>
Date: Wed, 16 Sep 2026 01:22:49 +0530
Subject: [PATCH 2/2] fix(dropdown): resolve TypeScript and JSX syntax errors

---
 .../AccessibilitySettings/index.tsx           |  1 +
 src/components/Dropdown/index.tsx             | 93 ++++++++++---------
 2 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/src/components/AccessibilitySettings/index.tsx b/src/components/AccessibilitySettings/index.tsx
index aadc1870b7..dc8957e599 100644
--- a/src/components/AccessibilitySettings/index.tsx
+++ b/src/components/AccessibilitySettings/index.tsx
@@ -60,3 +60,4 @@ export const AccessibilitySettings = ({
       initialSelected={selectedSettings}
     />
   );
+};
\ No newline at end of file
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
index 62fa6ab713..4b170cd764 100644
--- a/src/components/Dropdown/index.tsx
+++ b/src/components/Dropdown/index.tsx
@@ -13,7 +13,7 @@ type DropdownProps = {
   initialSelected: string | string[];
   onChange: (option: DropdownOption) => void;
   iconKind: IconKind;
-  variant?: "dropdown" | "radio";
+  variant?: "dropdown" | "radio" | "checkbox";
   dropdownLabel?: string;
 };
 
@@ -23,7 +23,7 @@ export const Dropdown = ({
   dropdownLabel,
   onChange,
   iconKind,
-  variant?: "dropdown" | "radio" | "checkbox";,
+  variant = "dropdown",
 }: DropdownProps) => {
   const [selected, setSelected] = useState(initialSelected);
   const [isOpen, setIsOpen] = useState(false);
@@ -63,15 +63,17 @@ export const Dropdown = ({
     }
 
     // With a radio or checkbox variant, multiple options can be selected
-if (
-  (variant === "radio" || variant === "checkbox") &&
-  Array.isArray(selected)
-) {
-  const newSelected = selected.includes(option.value)
-    ? selected.filter((value) => value !== option.value)
-    : [...selected, option.value];
-  setSelected(newSelected);
-}
+    if (
+      (variant === "radio" || variant === "checkbox") &&
+      Array.isArray(selected)
+    ) {
+      const newSelected = selected.includes(option.value)
+        ? selected.filter((value) => value !== option.value)
+        : [...selected, option.value];
+      setSelected(newSelected);
+    }
+    onChange(option);
+  };
 
   // Handle keyboard navigation
   const handleKeyDown = (event: KeyboardEvent) => {
@@ -138,40 +140,41 @@ if (
   const renderExpandedDropdown = () => (
     <ul className={styles.options} role="listbox" tabIndex={-1}>
       {options.map((option, index) => (
-  <li
-    key={option.value}
-    className={styles.option}
-    role="option"
-    aria-selected={isSelected(option)}
-  >
-    <button
-      onClick={() => handleOptionClick(option)}
-      ref={(el) => {
-        optionRefs.current[index] = el as HTMLButtonElement;
-      }}
-      onBlur={handleBlur}
-    >
-      <div className={styles.icon}>
-        <Icon
-          kind={
-            isSelected(option) ? "option-selected" : "option-unselected"
-          }
-        />
-      </div>
-      <span>{option.label}</span>
-    </button>
-  </li>
-))}
-
+        <li
+          key={option.value}
+          className={styles.option}
+          role="option"
+          aria-selected={isSelected(option)}
+        >
+          <button
+            onClick={() => handleOptionClick(option)}
+            ref={(el) => {
+              optionRefs.current[index] = el as HTMLButtonElement;
+            }}
+            onBlur={handleBlur}
+          >
+            <div className={styles.icon}>
+              <Icon
+                kind={
+                  isSelected(option) ? "option-selected" : "option-unselected"
+                }
+              />
+            </div>
+            <span>{option.label}</span>
+          </button>
+        </li>
+      ))}
       {variant === "radio" || variant === "checkbox" ? (
-  <button onClick={() => setIsOpen(false)} className={styles.chevron}>
-    <Icon kind="chevron-up" />
-  </button>
-) : (
-  <div className={styles.chevron}>
-    <Icon kind="chevron-up" />
-  </div>
-)}
+        <button onClick={() => setIsOpen(false)} className={styles.chevron}>
+          <Icon kind="chevron-up" />
+        </button>
+      ) : (
+        <div className={styles.chevron}>
+          <Icon kind="chevron-up" />
+        </div>
+      )}
+    </ul>
+  );
 
   return (
     <div
@@ -182,4 +185,4 @@ if (
       {isOpen ? renderExpandedDropdown() : renderCollapsedDropdown()}
     </div>
   );
-};
+};
\ No newline at end of file