Aria-disabled and disabled

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!')
   }
 

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)
                 }

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. */
+  'aria-disabled'?: boolean
 } & SxProp &
   ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>
 
@@ -29,6 +31,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 +41,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}

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 => {

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>