From c27b761e871c2b90b475cd5c8a6358389d5c4608 Mon Sep 17 00:00:00 2001
From: Prabhdip Gill <pg53@rice.edu>
Date: Thu, 9 Jul 2026 16:34:08 -0700
Subject: [PATCH 1/7] Add tooltip to checkboxes

---
 src/components/Checkbox/Checkbox.stories.tsx  |  6 +++
 src/components/Checkbox/Checkbox.tsx          | 38 +++++++++++++++----
 .../__snapshots__/Checkbox.spec.tsx.snap      | 16 ++++----
 .../Tree/__snapshots__/Tree.spec.tsx.snap     |  4 +-
 4 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index 248c2190b..513e7cbed 100644
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -46,3 +46,9 @@ export const Disabled = () => <>
   {renderDisabledCheckboxes('light', 1.6)}
   {renderDisabledCheckboxes('light', 2)}
 </>
+
+export const WithTooltip = () => <CheckboxGroup>
+  <Checkbox tooltipText="Tooltip text for checkbox goes here">Checkbox label</Checkbox>
+  <Checkbox disabled tooltipText="This option is unavailable">Disabled label with tooltip</Checkbox>
+  <Checkbox disabled defaultChecked tooltipText="This option is unavailable">Disabled checked label with tooltip</Checkbox>
+</CheckboxGroup>;
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 55dbe89b5..2ca993082 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,7 +1,10 @@
-import { LabelHTMLAttributes, PropsWithChildren } from "react";
+import React, { LabelHTMLAttributes, PropsWithChildren } from "react";
 import {  checkboxLabelStyles, checkboxInputStyles, CheckboxVariant, CheckboxSize } from "./sharedCheckboxStyles";
 import styled from "styled-components";
 import { InputHTMLAttributes } from "react";
+import {useTooltipTriggerState} from 'react-stately';
+import {useTooltipTrigger} from 'react-aria';
+import { CustomTooltip } from '../Tooltip';
 
 const StyledLabel = styled.label<{ bold: boolean; variant: CheckboxVariant; isDisabled?: boolean; }>`
   ${checkboxLabelStyles}
@@ -12,19 +15,38 @@ const StyledInput = styled.input<{ variant: CheckboxVariant; checkboxSize: Check
   ${checkboxInputStyles}
 `;
 
+const LabelWithTooltipWrapper = styled.div`
+  display: inline-block;
+  position: relative;
+`;
+
 type CheckboxProps = PropsWithChildren<
   Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
   variant?: CheckboxVariant;
   size?: CheckboxSize;
   bold?: boolean;
   labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
+  tooltipText?: string;
 }>;
 
-export const Checkbox = ({ children, disabled, variant = 'primary', bold = false, size = 1.6, labelProps, ...props }: CheckboxProps) => {
-  return (
-    <StyledLabel bold={bold} variant={variant} isDisabled={disabled} {...labelProps}>
-      <StyledInput {...props} type="checkbox" variant={variant} checkboxSize={size} isDisabled={disabled} disabled={disabled} />
-      {children}
-    </StyledLabel>
-  );
+export const Checkbox = ({ children, disabled, variant = 'primary', bold = false, size = 1.6, labelProps, tooltipText, ...props }: CheckboxProps) => {
+  const state = useTooltipTriggerState({delay: 0});
+  const ref = React.useRef(null);
+
+  const { triggerProps, tooltipProps } = useTooltipTrigger({delay: 0}, state, ref);
+
+  return tooltipText
+    ? <LabelWithTooltipWrapper>
+        <StyledLabel ref={ref} bold={bold} variant={variant} isDisabled={disabled} {...triggerProps} {...labelProps}>
+          <StyledInput {...props} type="checkbox" onFocus={() => state.open()} variant={variant} checkboxSize={size} isDisabled={disabled} disabled={disabled} />
+          {children}
+          {state.isOpen && (
+            <CustomTooltip state={state} {...tooltipProps} placement='right'>{tooltipText}</CustomTooltip>
+          )}
+        </StyledLabel>
+      </LabelWithTooltipWrapper>
+    : <StyledLabel bold={bold} variant={variant} isDisabled={disabled} {...labelProps}>
+        <StyledInput {...props} type="checkbox" variant={variant} checkboxSize={size} isDisabled={disabled} disabled={disabled} />
+        {children}
+      </StyledLabel>;
 };
diff --git a/src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap b/src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap
index 3669d188f..fef9c1890 100644
--- a/src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap
+++ b/src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap
@@ -3,10 +3,10 @@
 exports[`Checkbox allows setting props on label 1`] = `
 <label
   aria-label="custom label"
-  className="sc-bczRLJ XfrOB"
+  className="sc-hKMtZM gNqItn"
 >
   <input
-    className="sc-gsnTZi dskNep"
+    className="sc-eCYdqJ gpoUA"
     type="checkbox"
   />
   Click Me
@@ -15,10 +15,10 @@ exports[`Checkbox allows setting props on label 1`] = `
 
 exports[`Checkbox handles disabled state 1`] = `
 <label
-  className="sc-bczRLJ jDFcYw"
+  className="sc-hKMtZM uiIZG"
 >
   <input
-    className="sc-gsnTZi dJvfbo"
+    className="sc-eCYdqJ fBIvaF"
     disabled={true}
     type="checkbox"
   />
@@ -28,10 +28,10 @@ exports[`Checkbox handles disabled state 1`] = `
 
 exports[`Checkbox handles options 1`] = `
 <label
-  className="sc-bczRLJ XfrOB"
+  className="sc-hKMtZM gNqItn"
 >
   <input
-    className="sc-gsnTZi dskNep"
+    className="sc-eCYdqJ gpoUA"
     type="checkbox"
   />
   Click Me
@@ -40,10 +40,10 @@ exports[`Checkbox handles options 1`] = `
 
 exports[`Checkbox matches snapshot 1`] = `
 <label
-  className="sc-bczRLJ fIuhsq"
+  className="sc-hKMtZM dHABFU"
 >
   <input
-    className="sc-gsnTZi ehAXiz"
+    className="sc-eCYdqJ glqLW"
     type="checkbox"
   />
   Click Me
diff --git a/src/components/Tree/__snapshots__/Tree.spec.tsx.snap b/src/components/Tree/__snapshots__/Tree.spec.tsx.snap
index 4a01f9c08..08f1a8990 100644
--- a/src/components/Tree/__snapshots__/Tree.spec.tsx.snap
+++ b/src/components/Tree/__snapshots__/Tree.spec.tsx.snap
@@ -41,10 +41,10 @@ exports[`Tree matches snapshot 1`] = `
         style="display: contents;"
       >
         <label
-          class="sc-jSMfEi fnAjTL"
+          class="sc-ftvSup kBXYav"
         >
           <input
-            class="sc-gKXOVf bROlip"
+            class="sc-papXJ eMMRLt"
             slot="check"
             type="checkbox"
             value="one"

From 52d497d860185e3928ec72fdde790307b63bd464 Mon Sep 17 00:00:00 2001
From: Prabhdip Gill <pg53@rice.edu>
Date: Thu, 9 Jul 2026 17:10:52 -0700
Subject: [PATCH 2/7] Add to story and refactor

---
 src/components/Checkbox/Checkbox.stories.tsx | 32 +++++++++++++++++---
 src/components/Checkbox/Checkbox.tsx         | 19 ++++--------
 src/components/Radio.tsx                     | 23 +++++---------
 src/components/Tooltip.tsx                   | 22 ++++++++++++--
 4 files changed, 60 insertions(+), 36 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index 513e7cbed..ef3e3e065 100644
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -47,8 +47,30 @@ export const Disabled = () => <>
   {renderDisabledCheckboxes('light', 2)}
 </>
 
-export const WithTooltip = () => <CheckboxGroup>
-  <Checkbox tooltipText="Tooltip text for checkbox goes here">Checkbox label</Checkbox>
-  <Checkbox disabled tooltipText="This option is unavailable">Disabled label with tooltip</Checkbox>
-  <Checkbox disabled defaultChecked tooltipText="This option is unavailable">Disabled checked label with tooltip</Checkbox>
-</CheckboxGroup>;
+const VerticalCheckboxGroup = styled.div`
+  text-transform: capitalize;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  & + & {
+    margin-top: 3.2rem;
+  }
+`;
+
+export const WithTooltip = () => <>
+  <VerticalCheckboxGroup>
+    <h2>Primary</h2>
+    <Checkbox variant="primary" tooltipText="Tooltip text for checkbox goes here">Checkbox label</Checkbox>
+    <Checkbox variant="primary" defaultChecked tooltipText="Tooltip text for checkbox goes here">Checked label with tooltip</Checkbox>
+    <Checkbox variant="primary" disabled tooltipText="This option is unavailable">Disabled label with tooltip</Checkbox>
+    <Checkbox variant="primary" disabled defaultChecked tooltipText="This option is unavailable">Disabled checked label with tooltip</Checkbox>
+  </VerticalCheckboxGroup>
+  <VerticalCheckboxGroup>
+    <h2>Light</h2>
+    <Checkbox variant="light" tooltipText="Tooltip text for checkbox goes here">Checkbox label</Checkbox>
+    <Checkbox variant="light" defaultChecked tooltipText="Tooltip text for checkbox goes here">Checked label with tooltip</Checkbox>
+    <Checkbox variant="light" disabled tooltipText="This option is unavailable">Disabled label with tooltip</Checkbox>
+    <Checkbox variant="light" disabled defaultChecked tooltipText="This option is unavailable">Disabled checked label with tooltip</Checkbox>
+  </VerticalCheckboxGroup>
+</>;
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 2ca993082..8e8e64189 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,10 +1,8 @@
-import React, { LabelHTMLAttributes, PropsWithChildren } from "react";
+import { LabelHTMLAttributes, PropsWithChildren } from "react";
 import {  checkboxLabelStyles, checkboxInputStyles, CheckboxVariant, CheckboxSize } from "./sharedCheckboxStyles";
 import styled from "styled-components";
 import { InputHTMLAttributes } from "react";
-import {useTooltipTriggerState} from 'react-stately';
-import {useTooltipTrigger} from 'react-aria';
-import { CustomTooltip } from '../Tooltip';
+import { useLabelTooltip } from '../Tooltip';
 
 const StyledLabel = styled.label<{ bold: boolean; variant: CheckboxVariant; isDisabled?: boolean; }>`
   ${checkboxLabelStyles}
@@ -30,19 +28,14 @@ type CheckboxProps = PropsWithChildren<
 }>;
 
 export const Checkbox = ({ children, disabled, variant = 'primary', bold = false, size = 1.6, labelProps, tooltipText, ...props }: CheckboxProps) => {
-  const state = useTooltipTriggerState({delay: 0});
-  const ref = React.useRef(null);
-
-  const { triggerProps, tooltipProps } = useTooltipTrigger({delay: 0}, state, ref);
+  const { triggerRef, triggerProps, openTooltip, tooltip } = useLabelTooltip(tooltipText);
 
   return tooltipText
     ? <LabelWithTooltipWrapper>
-        <StyledLabel ref={ref} bold={bold} variant={variant} isDisabled={disabled} {...triggerProps} {...labelProps}>
-          <StyledInput {...props} type="checkbox" onFocus={() => state.open()} variant={variant} checkboxSize={size} isDisabled={disabled} disabled={disabled} />
+        <StyledLabel ref={triggerRef} bold={bold} variant={variant} isDisabled={disabled} {...triggerProps} {...labelProps}>
+          <StyledInput {...props} type="checkbox" onFocus={openTooltip} variant={variant} checkboxSize={size} isDisabled={disabled} disabled={disabled} />
           {children}
-          {state.isOpen && (
-            <CustomTooltip state={state} {...tooltipProps} placement='right'>{tooltipText}</CustomTooltip>
-          )}
+          {tooltip}
         </StyledLabel>
       </LabelWithTooltipWrapper>
     : <StyledLabel bold={bold} variant={variant} isDisabled={disabled} {...labelProps}>
diff --git a/src/components/Radio.tsx b/src/components/Radio.tsx
index 14e10de8f..3a48323de 100644
--- a/src/components/Radio.tsx
+++ b/src/components/Radio.tsx
@@ -1,11 +1,8 @@
-import React from 'react';
 import { PropsWithChildren } from "react";
 import { colors } from "../theme";
 import styled from "styled-components";
 import { InputHTMLAttributes } from "react";
-import {useTooltipTriggerState} from 'react-stately';
-import {useTooltipTrigger} from 'react-aria';
-import { CustomTooltip } from './Tooltip';
+import { useLabelTooltip } from './Tooltip';
 
 export const StyledLabel = styled.label<{isDisabled?: boolean}>`
   font-size: 1.6rem;
@@ -54,25 +51,19 @@ const LabelWithTooltipWrapper = styled.div`
 type RadioProps = PropsWithChildren<
   Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>>;
 
-export const Radio = ({ children, disabled, labelAs, ...props }: RadioProps & {
+export const Radio = ({ children, disabled, labelAs, tooltipText, ...props }: RadioProps & {
   tooltipText?: string;
   labelAs?: string;
 }) => {
+  const { triggerRef, triggerProps, openTooltip, tooltip } = useLabelTooltip(tooltipText);
 
-  const state = useTooltipTriggerState({delay: 0});
-  const ref = React.useRef(null);
-
-  const { triggerProps, tooltipProps } = useTooltipTrigger({delay: 0}, state, ref);
-
-  return props.tooltipText
+  return tooltipText
     ? <div>
         <LabelWithTooltipWrapper>
-          <StyledLabel ref={ref} as={labelAs as any} isDisabled={disabled} {...triggerProps}>
-            <StyledInput type="radio" onFocus={() => state.open()} isDisabled={disabled} disabled={disabled} {...props} />
+          <StyledLabel ref={triggerRef} as={labelAs as any} isDisabled={disabled} {...triggerProps}>
+            <StyledInput type="radio" onFocus={openTooltip} isDisabled={disabled} disabled={disabled} {...props} />
             {children}
-          {state.isOpen && (
-            <CustomTooltip state={state} {...tooltipProps} placement='right'>{props.tooltipText}</CustomTooltip>
-          )}
+          {tooltip}
           </StyledLabel>
         </LabelWithTooltipWrapper>
       </div>
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 021a49914..4493555ac 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -1,8 +1,10 @@
+import { useRef } from 'react';
 import styled from 'styled-components';
 import { colors } from '../theme';
 import { Button, OverlayArrow, Tooltip as AriaTooltip, TooltipTrigger } from 'react-aria-components';
 import { Info } from './svgs/Info';
-import {mergeProps, Placement, useTooltip} from 'react-aria';
+import { useTooltipTriggerState } from 'react-stately';
+import {mergeProps, Placement, useTooltip, useTooltipTrigger} from 'react-aria';
 
 const tooltipStyles = `
   box-shadow: 0 0.8rem 2rem rgba(0 0 0 / 0.1);
@@ -113,4 +115,20 @@ export const CustomTooltip = ({ state, ...props }: any) => {
       </OverlayArrow>
     </StyledCustomTooltip>
   );
-}
\ No newline at end of file
+}
+
+// Shared logic for showing a CustomTooltip on a label-wrapped input (Checkbox, Radio).
+export const useLabelTooltip = (tooltipText?: string, placement: Placement = 'right') => {
+  const state = useTooltipTriggerState({ delay: 0 });
+  const triggerRef = useRef(null);
+  const { triggerProps, tooltipProps } = useTooltipTrigger({ delay: 0 }, state, triggerRef);
+
+  return {
+    triggerRef,
+    triggerProps,
+    openTooltip: () => state.open(),
+    tooltip: tooltipText && state.isOpen
+      ? <CustomTooltip state={state} {...tooltipProps} placement={placement}>{tooltipText}</CustomTooltip>
+      : null,
+  };
+};
\ No newline at end of file

From 6c219334cbfca3c2036c0e4240e35e8d7ff50d4a Mon Sep 17 00:00:00 2001
From: Prabhdip Gill <pg53@rice.edu>
Date: Thu, 9 Jul 2026 17:25:54 -0700
Subject: [PATCH 3/7] Fix style inconsistency

---
 src/components/Checkbox/Checkbox.tsx                      | 2 +-
 .../Checkbox/__snapshots__/Checkbox.spec.tsx.snap         | 8 ++++----
 src/components/Tree/__snapshots__/Tree.spec.tsx.snap      | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 8e8e64189..26230b4e6 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -6,6 +6,7 @@ import { useLabelTooltip } from '../Tooltip';
 
 const StyledLabel = styled.label<{ bold: boolean; variant: CheckboxVariant; isDisabled?: boolean; }>`
   ${checkboxLabelStyles}
+  position: relative;
 `;
 
 // https://moderncss.dev/pure-css-custom-checkbox-style/
@@ -15,7 +16,6 @@ const StyledInput = styled.input<{ variant: CheckboxVariant; checkboxSize: Check
 
 const LabelWithTooltipWrapper = styled.div`
   display: inline-block;
-  position: relative;
 `;
 
 type CheckboxProps = PropsWithChildren<
diff --git a/src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap b/src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap
index fef9c1890..9979d4127 100644
--- a/src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap
+++ b/src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Checkbox allows setting props on label 1`] = `
 <label
   aria-label="custom label"
-  className="sc-hKMtZM gNqItn"
+  className="sc-hKMtZM bMKdZ"
 >
   <input
     className="sc-eCYdqJ gpoUA"
@@ -15,7 +15,7 @@ exports[`Checkbox allows setting props on label 1`] = `
 
 exports[`Checkbox handles disabled state 1`] = `
 <label
-  className="sc-hKMtZM uiIZG"
+  className="sc-hKMtZM lmlvsI"
 >
   <input
     className="sc-eCYdqJ fBIvaF"
@@ -28,7 +28,7 @@ exports[`Checkbox handles disabled state 1`] = `
 
 exports[`Checkbox handles options 1`] = `
 <label
-  className="sc-hKMtZM gNqItn"
+  className="sc-hKMtZM bMKdZ"
 >
   <input
     className="sc-eCYdqJ gpoUA"
@@ -40,7 +40,7 @@ exports[`Checkbox handles options 1`] = `
 
 exports[`Checkbox matches snapshot 1`] = `
 <label
-  className="sc-hKMtZM dHABFU"
+  className="sc-hKMtZM jKnytq"
 >
   <input
     className="sc-eCYdqJ glqLW"
diff --git a/src/components/Tree/__snapshots__/Tree.spec.tsx.snap b/src/components/Tree/__snapshots__/Tree.spec.tsx.snap
index 08f1a8990..b9a0f2308 100644
--- a/src/components/Tree/__snapshots__/Tree.spec.tsx.snap
+++ b/src/components/Tree/__snapshots__/Tree.spec.tsx.snap
@@ -41,7 +41,7 @@ exports[`Tree matches snapshot 1`] = `
         style="display: contents;"
       >
         <label
-          class="sc-ftvSup kBXYav"
+          class="sc-ftvSup dQOzVx"
         >
           <input
             class="sc-papXJ eMMRLt"

From 3bef30f073226f99b6c4811d73a1ad7252bd9ede Mon Sep 17 00:00:00 2001
From: Prabhdip Gill <pg53@rice.edu>
Date: Mon, 13 Jul 2026 23:59:49 -0700
Subject: [PATCH 4/7] Made tooltip sibling of StyledLabel

---
 src/components/Checkbox/Checkbox.tsx                     | 9 +++++----
 .../Checkbox/__snapshots__/Checkbox.spec.tsx.snap        | 8 ++++----
 src/components/Radio.tsx                                 | 8 +++++---
 src/components/Tooltip.tsx                               | 5 +++--
 src/components/Tree/__snapshots__/Tree.spec.tsx.snap     | 2 +-
 5 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 26230b4e6..8ced02e10 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -6,7 +6,6 @@ import { useLabelTooltip } from '../Tooltip';
 
 const StyledLabel = styled.label<{ bold: boolean; variant: CheckboxVariant; isDisabled?: boolean; }>`
   ${checkboxLabelStyles}
-  position: relative;
 `;
 
 // https://moderncss.dev/pure-css-custom-checkbox-style/
@@ -16,6 +15,8 @@ const StyledInput = styled.input<{ variant: CheckboxVariant; checkboxSize: Check
 
 const LabelWithTooltipWrapper = styled.div`
   display: inline-block;
+  position: relative;
+  font-size: 1.6rem;
 `;
 
 type CheckboxProps = PropsWithChildren<
@@ -28,15 +29,15 @@ type CheckboxProps = PropsWithChildren<
 }>;
 
 export const Checkbox = ({ children, disabled, variant = 'primary', bold = false, size = 1.6, labelProps, tooltipText, ...props }: CheckboxProps) => {
-  const { triggerRef, triggerProps, openTooltip, tooltip } = useLabelTooltip(tooltipText);
+  const { triggerRef, triggerProps, inputProps, tooltip } = useLabelTooltip(tooltipText);
 
   return tooltipText
     ? <LabelWithTooltipWrapper>
         <StyledLabel ref={triggerRef} bold={bold} variant={variant} isDisabled={disabled} {...triggerProps} {...labelProps}>
-          <StyledInput {...props} type="checkbox" onFocus={openTooltip} variant={variant} checkboxSize={size} isDisabled={disabled} disabled={disabled} />
+          <StyledInput {...props} type="checkbox" {...inputProps} variant={variant} checkboxSize={size} isDisabled={disabled} disabled={disabled} />
           {children}
-          {tooltip}
         </StyledLabel>
+        {tooltip}
       </LabelWithTooltipWrapper>
     : <StyledLabel bold={bold} variant={variant} isDisabled={disabled} {...labelProps}>
         <StyledInput {...props} type="checkbox" variant={variant} checkboxSize={size} isDisabled={disabled} disabled={disabled} />
diff --git a/src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap b/src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap
index 9979d4127..fef9c1890 100644
--- a/src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap
+++ b/src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Checkbox allows setting props on label 1`] = `
 <label
   aria-label="custom label"
-  className="sc-hKMtZM bMKdZ"
+  className="sc-hKMtZM gNqItn"
 >
   <input
     className="sc-eCYdqJ gpoUA"
@@ -15,7 +15,7 @@ exports[`Checkbox allows setting props on label 1`] = `
 
 exports[`Checkbox handles disabled state 1`] = `
 <label
-  className="sc-hKMtZM lmlvsI"
+  className="sc-hKMtZM uiIZG"
 >
   <input
     className="sc-eCYdqJ fBIvaF"
@@ -28,7 +28,7 @@ exports[`Checkbox handles disabled state 1`] = `
 
 exports[`Checkbox handles options 1`] = `
 <label
-  className="sc-hKMtZM bMKdZ"
+  className="sc-hKMtZM gNqItn"
 >
   <input
     className="sc-eCYdqJ gpoUA"
@@ -40,7 +40,7 @@ exports[`Checkbox handles options 1`] = `
 
 exports[`Checkbox matches snapshot 1`] = `
 <label
-  className="sc-hKMtZM jKnytq"
+  className="sc-hKMtZM dHABFU"
 >
   <input
     className="sc-eCYdqJ glqLW"
diff --git a/src/components/Radio.tsx b/src/components/Radio.tsx
index 3a48323de..1e87f50db 100644
--- a/src/components/Radio.tsx
+++ b/src/components/Radio.tsx
@@ -46,6 +46,8 @@ export const StyledInput = styled.input<{isDisabled?: boolean}>`
 
 const LabelWithTooltipWrapper = styled.div`
   display: inline-block;
+  position: relative;
+  font-size: 1.6rem;
 `;
 
 type RadioProps = PropsWithChildren<
@@ -55,16 +57,16 @@ export const Radio = ({ children, disabled, labelAs, tooltipText, ...props }: Ra
   tooltipText?: string;
   labelAs?: string;
 }) => {
-  const { triggerRef, triggerProps, openTooltip, tooltip } = useLabelTooltip(tooltipText);
+  const { triggerRef, triggerProps, inputProps, tooltip } = useLabelTooltip(tooltipText);
 
   return tooltipText
     ? <div>
         <LabelWithTooltipWrapper>
           <StyledLabel ref={triggerRef} as={labelAs as any} isDisabled={disabled} {...triggerProps}>
-            <StyledInput type="radio" onFocus={openTooltip} isDisabled={disabled} disabled={disabled} {...props} />
+            <StyledInput {...props} type="radio" {...inputProps} isDisabled={disabled} disabled={disabled} />
             {children}
-          {tooltip}
           </StyledLabel>
+          {tooltip}
         </LabelWithTooltipWrapper>
       </div>
     : <StyledLabel isDisabled={disabled} as={labelAs as any}>
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 4493555ac..c7e25a09c 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -122,11 +122,12 @@ export const useLabelTooltip = (tooltipText?: string, placement: Placement = 'ri
   const state = useTooltipTriggerState({ delay: 0 });
   const triggerRef = useRef(null);
   const { triggerProps, tooltipProps } = useTooltipTrigger({ delay: 0 }, state, triggerRef);
+  const { 'aria-describedby': describedBy, ...labelTriggerProps } = triggerProps;
 
   return {
     triggerRef,
-    triggerProps,
-    openTooltip: () => state.open(),
+    triggerProps: labelTriggerProps,
+    inputProps: describedBy ? { 'aria-describedby': describedBy } : {},
     tooltip: tooltipText && state.isOpen
       ? <CustomTooltip state={state} {...tooltipProps} placement={placement}>{tooltipText}</CustomTooltip>
       : null,
diff --git a/src/components/Tree/__snapshots__/Tree.spec.tsx.snap b/src/components/Tree/__snapshots__/Tree.spec.tsx.snap
index b9a0f2308..08f1a8990 100644
--- a/src/components/Tree/__snapshots__/Tree.spec.tsx.snap
+++ b/src/components/Tree/__snapshots__/Tree.spec.tsx.snap
@@ -41,7 +41,7 @@ exports[`Tree matches snapshot 1`] = `
         style="display: contents;"
       >
         <label
-          class="sc-ftvSup dQOzVx"
+          class="sc-ftvSup kBXYav"
         >
           <input
             class="sc-papXJ eMMRLt"

From eb14526f87b3982fa5c2605ba23d40eb7aa004c3 Mon Sep 17 00:00:00 2001
From: Prabhdip Gill <pg53@rice.edu>
Date: Tue, 14 Jul 2026 09:36:17 -0700
Subject: [PATCH 5/7] Fix label issue for screen reader

---
 src/components/Checkbox/Checkbox.tsx | 5 +++--
 src/components/Radio.tsx             | 5 +++--
 src/components/Tooltip.tsx           | 9 +++++----
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 8ced02e10..ce544f69d 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -29,13 +29,14 @@ type CheckboxProps = PropsWithChildren<
 }>;
 
 export const Checkbox = ({ children, disabled, variant = 'primary', bold = false, size = 1.6, labelProps, tooltipText, ...props }: CheckboxProps) => {
-  const { triggerRef, triggerProps, inputProps, tooltip } = useLabelTooltip(tooltipText);
+  const { triggerRef, triggerProps, labelDescription, tooltip } = useLabelTooltip(tooltipText);
 
   return tooltipText
     ? <LabelWithTooltipWrapper>
         <StyledLabel ref={triggerRef} bold={bold} variant={variant} isDisabled={disabled} {...triggerProps} {...labelProps}>
-          <StyledInput {...props} type="checkbox" {...inputProps} variant={variant} checkboxSize={size} isDisabled={disabled} disabled={disabled} />
+          <StyledInput {...props} type="checkbox" variant={variant} checkboxSize={size} isDisabled={disabled} disabled={disabled} />
           {children}
+          {labelDescription}
         </StyledLabel>
         {tooltip}
       </LabelWithTooltipWrapper>
diff --git a/src/components/Radio.tsx b/src/components/Radio.tsx
index 1e87f50db..aa71721c8 100644
--- a/src/components/Radio.tsx
+++ b/src/components/Radio.tsx
@@ -57,14 +57,15 @@ export const Radio = ({ children, disabled, labelAs, tooltipText, ...props }: Ra
   tooltipText?: string;
   labelAs?: string;
 }) => {
-  const { triggerRef, triggerProps, inputProps, tooltip } = useLabelTooltip(tooltipText);
+  const { triggerRef, triggerProps, labelDescription, tooltip } = useLabelTooltip(tooltipText);
 
   return tooltipText
     ? <div>
         <LabelWithTooltipWrapper>
           <StyledLabel ref={triggerRef} as={labelAs as any} isDisabled={disabled} {...triggerProps}>
-            <StyledInput {...props} type="radio" {...inputProps} isDisabled={disabled} disabled={disabled} />
+            <StyledInput {...props} type="radio" isDisabled={disabled} disabled={disabled} />
             {children}
+            {labelDescription}
           </StyledLabel>
           {tooltip}
         </LabelWithTooltipWrapper>
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index c7e25a09c..1c45581fe 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -4,7 +4,7 @@ import { colors } from '../theme';
 import { Button, OverlayArrow, Tooltip as AriaTooltip, TooltipTrigger } from 'react-aria-components';
 import { Info } from './svgs/Info';
 import { useTooltipTriggerState } from 'react-stately';
-import {mergeProps, Placement, useTooltip, useTooltipTrigger} from 'react-aria';
+import {mergeProps, Placement, useTooltip, useTooltipTrigger, VisuallyHidden} from 'react-aria';
 
 const tooltipStyles = `
   box-shadow: 0 0.8rem 2rem rgba(0 0 0 / 0.1);
@@ -122,14 +122,15 @@ export const useLabelTooltip = (tooltipText?: string, placement: Placement = 'ri
   const state = useTooltipTriggerState({ delay: 0 });
   const triggerRef = useRef(null);
   const { triggerProps, tooltipProps } = useTooltipTrigger({ delay: 0 }, state, triggerRef);
-  const { 'aria-describedby': describedBy, ...labelTriggerProps } = triggerProps;
+
+  const { 'aria-describedby': _unusedDescribedBy, ...labelTriggerProps } = triggerProps;
 
   return {
     triggerRef,
     triggerProps: labelTriggerProps,
-    inputProps: describedBy ? { 'aria-describedby': describedBy } : {},
+    labelDescription: tooltipText ? <VisuallyHidden>{tooltipText}</VisuallyHidden> : null,
     tooltip: tooltipText && state.isOpen
-      ? <CustomTooltip state={state} {...tooltipProps} placement={placement}>{tooltipText}</CustomTooltip>
+      ? <CustomTooltip state={state} {...tooltipProps} placement={placement} aria-hidden={true}>{tooltipText}</CustomTooltip>
       : null,
   };
 };
\ No newline at end of file

From 107e5b3ddd52ff366220147ef9f77640b0fe1602 Mon Sep 17 00:00:00 2001
From: Prabhdip Gill <43251544+P-Gill97@users.noreply.github.com>
Date: Tue, 14 Jul 2026 10:38:49 -0700
Subject: [PATCH 6/7] Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 src/components/Checkbox/Checkbox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index ce544f69d..fe89743b5 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -33,7 +33,7 @@ export const Checkbox = ({ children, disabled, variant = 'primary', bold = false
 
   return tooltipText
     ? <LabelWithTooltipWrapper>
-        <StyledLabel ref={triggerRef} bold={bold} variant={variant} isDisabled={disabled} {...triggerProps} {...labelProps}>
+        <StyledLabel ref={triggerRef} bold={bold} variant={variant} isDisabled={disabled} {...labelProps} {...triggerProps}>
           <StyledInput {...props} type="checkbox" variant={variant} checkboxSize={size} isDisabled={disabled} disabled={disabled} />
           {children}
           {labelDescription}

From b2bfd8e309cf4e419875576199e239cf8309c3c8 Mon Sep 17 00:00:00 2001
From: Prabhdip Gill <pg53@rice.edu>
Date: Tue, 14 Jul 2026 10:48:03 -0700
Subject: [PATCH 7/7] Add merge props

---
 src/components/Checkbox/Checkbox.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index fe89743b5..0b8ccbf7a 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -2,6 +2,7 @@ import { LabelHTMLAttributes, PropsWithChildren } from "react";
 import {  checkboxLabelStyles, checkboxInputStyles, CheckboxVariant, CheckboxSize } from "./sharedCheckboxStyles";
 import styled from "styled-components";
 import { InputHTMLAttributes } from "react";
+import { mergeProps } from 'react-aria';
 import { useLabelTooltip } from '../Tooltip';
 
 const StyledLabel = styled.label<{ bold: boolean; variant: CheckboxVariant; isDisabled?: boolean; }>`
@@ -33,7 +34,7 @@ export const Checkbox = ({ children, disabled, variant = 'primary', bold = false
 
   return tooltipText
     ? <LabelWithTooltipWrapper>
-        <StyledLabel ref={triggerRef} bold={bold} variant={variant} isDisabled={disabled} {...labelProps} {...triggerProps}>
+        <StyledLabel ref={triggerRef} bold={bold} variant={variant} isDisabled={disabled} {...mergeProps(triggerProps, labelProps)}>
           <StyledInput {...props} type="checkbox" variant={variant} checkboxSize={size} isDisabled={disabled} disabled={disabled} />
           {children}
           {labelDescription}