diff --git a/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx b/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx index 890cd5858d1..2cc0127e2fe 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx @@ -13,12 +13,46 @@ export default { parameters: {controls: {exclude: excludedControlKeys}}, } as Meta +export const WithAriaDisabled = () => { + const handleOnClick = () => { + alert('Button clicked!') + } + + return ( + + + Preview + + + Raw + + + Blame + + + ) +} + export const WithDisabled = () => { - const handleOnClick = (event: React.MouseEvent) => { - const isDisabled = event.currentTarget.getAttribute('disabled') === 'true' - if (isDisabled) { - return - } + const handleOnClick = () => { alert('Button clicked!') } diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx index 144e39b5caa..8c362ee55a7 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.tsx @@ -172,16 +172,16 @@ const Root: React.FC> = ({ const sharedChildProps = { onClick: onChange ? (event: React.MouseEvent) => { - const isAriaDisabled = child.props.disabled === true - if (!isAriaDisabled) { + const isDisabled = child.props.disabled === true || child.props['aria-disabled'] === true + if (!isDisabled) { onChange(index) isUncontrolled && setSelectedIndexInternalState(index) child.props.onClick && child.props.onClick(event) } } : (event: React.MouseEvent) => { - const isAriaDisabled = child.props.disabled === true - if (!isAriaDisabled) { + const isDisabled = child.props.disabled === true || child.props['aria-disabled'] === true + if (!isDisabled) { child.props.onClick && child.props.onClick(event) isUncontrolled && setSelectedIndexInternalState(index) } diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx index a4de432e4fb..0c31ea5c1d9 100644 --- a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx @@ -19,6 +19,8 @@ export type SegmentedControlButtonProps = { leadingIcon?: React.FunctionComponent> | React.ReactElement /** Applies `aria-disabled` to the button. This will disable certain functionality, such as `onClick` events. */ disabled?: boolean + /** Applies `aria-disabled` to the button. This will disable certain functionality, such as `onClick` events. */ + 'aria-disabled'?: boolean } & SxProp & ButtonHTMLAttributes @@ -29,6 +31,7 @@ const SegmentedControlButton: React.FC { diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx index 5dcd7a8f326..414b757cdf2 100644 --- a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx @@ -21,6 +21,10 @@ export type SegmentedControlIconButtonProps = { description?: string /** The direction for the tooltip.*/ tooltipDirection?: TooltipDirection + /** Whether the button is disabled. */ + disabled?: boolean + /** Whether the button is aria-disabled. */ + 'aria-disabled'?: boolean } & SxProp & ButtonHTMLAttributes @@ -32,6 +36,8 @@ export const SegmentedControlIconButton: React.FC { return ( @@ -52,6 +58,7 @@ export const SegmentedControlIconButton: React.FC {isElement(Icon) ? Icon : }