allow DOM pass-through of aria-disabled on Button (adobe#8756)

Author: snowystinger

packages/@react-aria/button/src/useButton.ts

@@ -114,7 +114,8 @@ export function useButton(props: AriaButtonOptions<ElementType>, ref: RefObject<
       'aria-expanded': props['aria-expanded'],
       'aria-controls': props['aria-controls'],
       'aria-pressed': props['aria-pressed'],
-      'aria-current': props['aria-current']
+      'aria-current': props['aria-current'],
+      'aria-disabled': props['aria-disabled']
     })
   };
 }

packages/@react-aria/button/test/useButton.test.js

@@ -61,4 +61,11 @@ describe('useButton tests', function () {
     expect(typeof result.current.buttonProps.onKeyDown).toBe('function');
     expect(result.current.buttonProps.rel).toBeUndefined();
   });
+
+  it('handles aria-disabled passthrough for button elements', function () {
+    let props = {'aria-disabled': 'true'};
+    let {result} = renderHook(() => useButton(props));
+    expect(result.current.buttonProps['aria-disabled']).toBeTruthy();
+    expect(result.current.buttonProps['disabled']).toBeUndefined();
+  });
 });

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/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'}}}}>