Revert "Revert the Button's disabled state (#2340)" (#2351)

.changeset/cold-buses-fail.md

@@ -1,5 +1,5 @@
 ---
-'@sumup/circuit-ui': minor
+'@sumup/circuit-ui': major
 ---
 
 Changed the NotificationInline's action from the Button to the Anchor component. Update the action props if necessary.

.changeset/old-schools-walk.md

@@ -1,5 +1,5 @@
 ---
-'@sumup/circuit-ui': minor
+'@sumup/circuit-ui': major
 ---
 
 Changed the default size of the CloseButton from 40px to 48px to match the Button component.

.changeset/orange-squids-hammer.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': major
+---
+
+Improved the accessibility of disabled Buttons. The `disabled` attribute has been replaced with the `aria-disabled` attribute which enables the disabled element to receive focus and be perceived by screenreader users. Interactions with the disabled element are blocked by a dummy click handler.

packages/circuit-ui/components/Button/base.module.css

@@ -204,9 +204,6 @@
 .base[disabled],
 .base[aria-disabled="true"] {
   color: var(--cui-fg-normal-disabled);
-
-  /* TODO: Remove in the next major version */
-  pointer-events: none;
   cursor: not-allowed;
   background-color: var(--cui-bg-highlight-disabled);
   border-color: transparent;

packages/circuit-ui/components/Button/base.spec.tsx

@@ -72,7 +72,6 @@ describe('Button', () => {
 
       const button = screen.getByRole('button');
 
-      expect(button).toBeDisabled();
       expect(button).toHaveAttribute('aria-disabled', 'true');
     });
 
@@ -81,7 +80,6 @@ describe('Button', () => {
 
       const button = screen.getByRole('button');
 
-      expect(button).toBeDisabled();
       expect(button).toHaveAttribute('aria-disabled', 'true');
     });
 

packages/circuit-ui/components/Button/base.tsx

@@ -190,10 +190,6 @@ export function createButtonComponent<Props>(
           'aria-live': 'polite',
           'aria-busy': Boolean(isLoading),
         })}
-        // TODO: Remove in the next major version
-        {...(!isLink && {
-          disabled: isDisabled,
-        })}
         {...(isDisabled && {
           'aria-disabled': true,
         })}