, '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, labelDescription, 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
?
-
- state.open()} isDisabled={disabled} disabled={disabled} {...props} />
+
+
{children}
- {state.isOpen && (
- {props.tooltipText}
- )}
+ {labelDescription}
+ {tooltip}
:
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 021a49914..1c45581fe 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, VisuallyHidden} from 'react-aria';
const tooltipStyles = `
box-shadow: 0 0.8rem 2rem rgba(0 0 0 / 0.1);
@@ -113,4 +115,22 @@ export const CustomTooltip = ({ state, ...props }: any) => {
);
-}
\ 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);
+
+ const { 'aria-describedby': _unusedDescribedBy, ...labelTriggerProps } = triggerProps;
+
+ return {
+ triggerRef,
+ triggerProps: labelTriggerProps,
+ labelDescription: tooltipText ? {tooltipText} : null,
+ tooltip: tooltipText && state.isOpen
+ ? {tooltipText}
+ : null,
+ };
+};
\ No newline at end of file
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;"
>