Allow user to override Button and IconButton aria-disabled (#4426)

* Allow user to override button `aria-disabled`

* Add test

* Add changeset

Author: iansan5653

.changeset/smart-cameras-sip.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fixes a bug where consumers cannot override buttons' aria-disabled attribute

packages/react/src/Button/ButtonBase.tsx

@@ -89,14 +89,14 @@ const ButtonBase = forwardRef(
         <StyledButton
           as={Component}
           sx={sxStyles}
+          aria-disabled={loading ? true : undefined}
           {...rest}
           ref={innerRef}
           data-block={block ? 'block' : null}
           data-inactive={inactive ? true : undefined}
           data-loading={Boolean(loading)}
           data-no-visuals={!LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined}
           data-size={size === 'small' || size === 'large' ? size : undefined}
-          aria-disabled={loading ? true : undefined}
           aria-describedby={[loadingAnnouncementID, ariaDescribedBy]
             .filter(descriptionID => Boolean(descriptionID))
             .join(' ')}

packages/react/src/Button/__tests__/Button.test.tsx

@@ -238,6 +238,12 @@ describe('Button', () => {
     }, 0)
   })
 
+  it('allows the consumer to override `aria-disabled`', () => {
+    const container = render(<Button aria-disabled>content</Button>)
+
+    expect(container.getByRole('button')).toHaveAttribute('aria-disabled', 'true')
+  })
+
   it('should preserve the accessible button name when the button is in a loading state', () => {
     const container = render(<Button loading>content</Button>)