From fa3a37420f854adb8190ba50c346042e9dae74b5 Mon Sep 17 00:00:00 2001
From: Kate Higa <16447748+khiga8@users.noreply.github.com>
Date: Thu, 4 Sep 2025 11:46:25 -0400
Subject: [PATCH 1/3] Aria-disabled and disabled

---
 .../SegmentedControl.dev.stories.tsx          | 44 ++++++++++++++++---
 .../src/SegmentedControl/SegmentedControl.tsx |  8 ++--
 .../SegmentedControlButton.tsx                |  3 +-
 .../SegmentedControlIconButton.stories.tsx    |  8 ++++
 .../SegmentedControlIconButton.tsx            |  7 +++
 5 files changed, 60 insertions(+), 10 deletions(-)

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<typeof SegmentedControl>
 
+export const WithAriaDisabled = () => {
+  const handleOnClick = () => {
+    alert('Button clicked!')
+  }
+
+  return (
+    <SegmentedControl aria-label="File view" className="testCustomClassnameMono">
+      <SegmentedControl.IconButton
+        onClick={handleOnClick}
+        aria-label={'Preview'}
+        aria-disabled={true}
+        icon={EyeIcon}
+        className="testCustomClassnameColor"
+      >
+        Preview
+      </SegmentedControl.IconButton>
+      <SegmentedControl.IconButton
+        aria-disabled={true}
+        onClick={handleOnClick}
+        aria-label={'Raw'}
+        icon={FileCodeIcon}
+        className="testCustomClassnameColor"
+      >
+        Raw
+      </SegmentedControl.IconButton>
+      <SegmentedControl.IconButton
+        aria-disabled={true}
+        onClick={handleOnClick}
+        aria-label={'Blame'}
+        icon={PeopleIcon}
+        className="testCustomClassnameColor"
+      >
+        Blame
+      </SegmentedControl.IconButton>
+    </SegmentedControl>
+  )
+}
+
 export const WithDisabled = () => {
-  const handleOnClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    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<React.PropsWithChildren<SegmentedControlProps>> = ({
         const sharedChildProps = {
           onClick: onChange
             ? (event: React.MouseEvent<HTMLButtonElement>) => {
-                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<HTMLButtonElement>) => {
-                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..28e310c4ba0 100644
--- a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
@@ -29,6 +29,7 @@ const SegmentedControlButton: React.FC<React.PropsWithChildren<SegmentedControlB
   sx: sxProp,
   className,
   disabled,
+  'aria-disabled': ariaDisabled,
   // Note: this value is read in the `SegmentedControl` component to determine which button is selected but we do not need to apply it to an underlying element
   defaultSelected: _defaultSelected,
   ...rest
@@ -38,7 +39,7 @@ const SegmentedControlButton: React.FC<React.PropsWithChildren<SegmentedControlB
       <BoxWithFallback
         as="button"
         aria-current={selected}
-        aria-disabled={disabled}
+        aria-disabled={disabled || ariaDisabled || undefined}
         className={clsx(classes.Button, className)}
         type="button"
         {...rest}
diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.stories.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.stories.tsx
index c62b0661f0b..efff701208f 100644
--- a/packages/react/src/SegmentedControl/SegmentedControlIconButton.stories.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControlIconButton.stories.tsx
@@ -13,6 +13,8 @@ export default {
     icon: FileCodeIcon,
     selected: false,
     defaultSelected: false,
+    disabled: false,
+    'aria-disabled': false,
   },
   argTypes: {
     icon: {
@@ -26,6 +28,12 @@ export default {
     defaultSelected: {
       type: 'boolean',
     },
+    disabled: {
+      type: 'boolean',
+    },
+    'aria-disabled': {
+      type: 'boolean',
+    },
   },
   decorators: [
     Story => {
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<HTMLButtonElement | HTMLLIElement>
 
@@ -32,6 +36,8 @@ export const SegmentedControlIconButton: React.FC<React.PropsWithChildren<Segmen
   className,
   description,
   tooltipDirection,
+  disabled,
+  'aria-disabled': ariaDisabled,
   ...rest
 }) => {
   return (
@@ -52,6 +58,7 @@ export const SegmentedControlIconButton: React.FC<React.PropsWithChildren<Segmen
           // If description is provided, we will use the tooltip to describe the button, so we need to keep the aria-label to label the button.
           aria-label={description ? ariaLabel : undefined}
           className={clsx(classes.Button, classes.IconButton)}
+          aria-disabled={disabled || ariaDisabled || undefined}
           {...rest}
         >
           <span className={clsx(classes.Content, 'segmentedControl-content')}>{isElement(Icon) ? Icon : <Icon />}</span>

From 9f33a68937a881d61195638a6eb3d61657178e16 Mon Sep 17 00:00:00 2001
From: Kate Higa <16447748+khiga8@users.noreply.github.com>
Date: Thu, 4 Sep 2025 13:29:23 -0400
Subject: [PATCH 2/3] Update SegmentedControlButton.tsx

---
 packages/react/src/SegmentedControl/SegmentedControlButton.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
index 28e310c4ba0..47cea32cde1 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.PropsWithChildren<IconProps>> | 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. */
+  ariaDisabled?: boolean
 } & SxProp &
   ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>
 

From 7c78904f09ea1ab44f10dad881b2977b21282c0d Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Thu, 4 Sep 2025 14:57:27 -0400
Subject: [PATCH 3/3] adjust naming

---
 packages/react/src/SegmentedControl/SegmentedControlButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
index 47cea32cde1..0c31ea5c1d9 100644
--- a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
@@ -20,7 +20,7 @@ export type SegmentedControlButtonProps = {
   /** 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. */
-  ariaDisabled?: boolean
+  'aria-disabled'?: boolean
 } & SxProp &
   ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>