allow DOM pass-through of aria-disabled on Button

Author: kylemh

packages/@react-types/button/src/index.d.ts

@@ -47,6 +47,8 @@ export interface LinkButtonProps<T extends ElementType = 'button'> extends AriaB
 }
 
 interface AriaBaseButtonProps extends FocusableDOMProps, AriaLabelingProps {
+  /** Indicates whether the element is disabled to users of assistive technology. */
+  'aria-disabled'?: boolean | 'true' | 'false',
   /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
   'aria-expanded'?: boolean | 'true' | 'false',
   /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */

packages/react-aria-components/src/Button.tsx

@@ -147,7 +147,7 @@ export const Button = /*#__PURE__*/ createHideableComponent(function Button(prop
       ref={ref}
       aria-labelledby={ariaLabelledby}
       slot={props.slot || undefined}
-      aria-disabled={isPending ? 'true' : buttonProps['aria-disabled']}
+      aria-disabled={isPending ? 'true' : (buttonProps['aria-disabled'])}
       data-disabled={props.isDisabled || undefined}
       data-pressed={renderValues.isPressed || undefined}
       data-hovered={isHovered || undefined}

packages/react-aria-components/test/Button.test.js

@@ -57,6 +57,18 @@ describe('Button', () => {
     expect(button).toHaveAttribute('aria-current', 'page');
   });
 
+  it('should not have aria-disabled defined by default', () => {
+    let {getByRole} = render(<Button>Test</Button>);
+    let button = getByRole('button');
+    expect(button).not.toHaveAttribute('aria-disabled');
+  });
+
+  it('should support aria-disabled passthrough', () => {
+    let {getByRole} = render(<Button aria-disabled="true">Test</Button>);
+    let button = getByRole('button');
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+  });
+
   it('should support slot', () => {
     let {getByRole} = render(
       <ButtonContext.Provider value={{slots: {test: {'aria-label': 'test'}}}}>