Changes from feedback

Author: TylerJDev

packages/react/src/SegmentedControl/SegmentedControl.examples.stories.tsx

@@ -15,7 +15,7 @@ export const WithDisabledButtons = () => (
     <SegmentedControl.Button aria-label={'Raw'} leadingIcon={FileCodeIcon}>
       Raw
     </SegmentedControl.Button>
-    <SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon} disabled>
+    <SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon} aria-disabled={true}>
       Blame
     </SegmentedControl.Button>
   </SegmentedControl>

packages/react/src/SegmentedControl/SegmentedControl.tsx

@@ -167,15 +167,21 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
         const sharedChildProps = {
           onClick: onChange
             ? (event: React.MouseEvent<HTMLButtonElement>) => {
-                const isDisabled = child.props.disabled === true || child.props['aria-disabled'] === true
+                const isDisabled =
+                  child.props.disabled === true ||
+                  child.props['aria-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 isDisabled = child.props.disabled === true || child.props['aria-disabled'] === true
+                const isDisabled =
+                  child.props.disabled === true ||
+                  child.props['aria-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,8 +19,6 @@ 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
   /** Optional counter to display on the right side of the button */
   count?: number | string
 } & ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>
@@ -31,12 +29,13 @@ const SegmentedControlButton: FCWithSlotMarker<React.PropsWithChildren<Segmented
   selected,
   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,
   count,
-  ...rest
+  ...props
 }) => {
+  const {'aria-disabled': ariaDisabled, ...rest} = props
+
   return (
     <li className={clsx(classes.Item)} data-selected={selected ? '' : undefined}>
       <button

packages/react/src/SegmentedControl/SegmentedControlIconButton.stories.tsx

@@ -14,7 +14,6 @@ export default {
     selected: false,
     defaultSelected: false,
     disabled: false,
-    'aria-disabled': false,
   },
   argTypes: {
     icon: {
@@ -31,9 +30,6 @@ export default {
     disabled: {
       type: 'boolean',
     },
-    'aria-disabled': {
-      type: 'boolean',
-    },
   },
   decorators: [
     Story => {

packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx

@@ -22,8 +22,6 @@ export type SegmentedControlIconButtonProps = {
   tooltipDirection?: TooltipDirection
   /** Whether the button is disabled. */
   disabled?: boolean
-  /** Whether the button is aria-disabled. */
-  'aria-disabled'?: boolean
 } & ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>
 
 export const SegmentedControlIconButton: FCWithSlotMarker<React.PropsWithChildren<SegmentedControlIconButtonProps>> = ({
@@ -34,9 +32,10 @@ export const SegmentedControlIconButton: FCWithSlotMarker<React.PropsWithChildre
   description,
   tooltipDirection,
   disabled,
-  'aria-disabled': ariaDisabled,
-  ...rest
+  ...props
 }) => {
+  const {'aria-disabled': ariaDisabled, ...rest} = props
+
   return (
     <li className={clsx(classes.Item, className)} data-selected={selected || undefined}>
       <Tooltip