fix(a11y): replace native disabled with isDisabled and aria-disabled in Button.

Author: WioletaKolodziej

code/addons/onboarding/src/features/IntentSurvey/IntentSurvey.stories.tsx

@@ -21,23 +21,23 @@ export const Default: Story = {};
 export const Submitting: Story = {
   play: async ({ args }) => {
     const button = await screen.findByRole('button', { name: 'Submit' });
-    await expect(button).toBeDisabled();
+    await expect(button).toHaveAttribute('aria-disabled', 'true');
 
     await userEvent.click(await screen.findByText('Design system'));
-    await expect(button).toBeDisabled();
+    await expect(button).toHaveAttribute('aria-disabled', 'true');
 
     await userEvent.click(await screen.findByText('Functional testing'));
     await userEvent.click(await screen.findByText('Accessibility testing'));
     await userEvent.click(await screen.findByText('Visual testing'));
-    await expect(button).toBeDisabled();
+    await expect(button).toHaveAttribute('aria-disabled', 'true');
 
     await userEvent.selectOptions(screen.getByRole('combobox'), ['We use it at work']);
-    await expect(button).not.toBeDisabled();
+    await expect(button).not.toHaveAttribute('aria-disabled', 'true');
 
     await userEvent.click(button);
 
     await waitFor(async () => {
-      await expect(button).toBeDisabled();
+      await expect(button).toHaveAttribute('aria-disabled', 'true');
       await expect(args.onComplete).toHaveBeenCalledWith({
         building: {
           'application-ui': false,

code/core/src/components/components/Button/Button.stories.tsx

@@ -6,7 +6,7 @@ import { fn } from 'storybook/test';
 import { styled } from 'storybook/theming';
 
 import preview from '../../../../../.storybook/preview';
-import { Button } from './Button';
+import { Button, type ButtonProps } from './Button';
 
 const meta = preview.meta({
   id: 'button-component',
@@ -291,6 +291,32 @@ export const Disabled = meta.story({
     ariaLabel: false,
     disabled: true,
     children: 'Disabled Button',
+    onClick: fn(),
+  },
+  render: (args) => (
+    <Row>
+      <Button variant="solid" {...args}>
+        Disabled Button
+      </Button>
+    </Row>
+  ),
+  play: async ({ args, canvas, step }) => {
+    const button = canvas.getByRole('button', { name: 'Disabled Button' });
+
+    await step('Disabled button should be aria-disabled', async () => {
+      expect(button).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    await step('Disabled button should not be clickable', async () => {
+      button.click();
+      expect(args.onClick).not.toHaveBeenCalled();
+    });
+
+    await step('Disabled button should be focusable for accessibility', async () => {
+      const button = canvas.getByRole('button', { name: 'Disabled Button' });
+      button.focus();
+      expect(button).toHaveFocus();
+    });
   },
 });
 

code/core/src/components/components/Button/Button.tsx

@@ -138,12 +138,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             variant={variant}
             size={size}
             padding={padding}
-            disabled={disabled || readOnly}
+            aria-disabled={disabled || readOnly ? 'true' : undefined}
             readOnly={readOnly}
             active={active}
             animating={isAnimating}
             animation={animation}
-            onClick={handleClick}
+            onClick={disabled || readOnly ? undefined : handleClick}
             aria-label={!readOnly && ariaLabel !== false ? ariaLabel : undefined}
             aria-keyshortcuts={readOnly ? undefined : shortcutAttribute}
             {...(readOnly ? {} : ariaDescriptionAttrs)}

code/e2e-tests/addon-toolbars.spec.ts

@@ -31,7 +31,7 @@ test.describe('addon-toolbars', () => {
     await sbPage.navigateToStory('core/toolbars/globals', 'override-locale');
     await expect(sbPage.previewRoot()).toContainText('안녕하세요');
 
-    const button = sbPage.page.getByLabel('Internationalization locale');
-    await expect(button).toBeDisabled();
+    const button = sbPage.page.getByTitle('Internationalization locale');
+    await expect(button).toHaveAttribute('aria-disabled', 'true');
   });
 });

code/e2e-tests/addon-viewport.spec.ts

@@ -54,6 +54,6 @@ test.describe('addon-viewport', () => {
 
     const toolbar = page.getByLabel('Viewport size');
 
-    await expect(toolbar).toBeDisabled();
+    await expect(toolbar).toHaveAttribute('aria-disabled', 'true');
   });
 });

test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts

@@ -238,7 +238,8 @@ test.describe("component testing", () => {
 
     await runTestsButton.click();
 
-    await expect(watchModeButton).toBeDisabled();
+    // The test button will be disabled as tests are running
+    expect(watchModeButton).toHaveAttribute("aria-disabled", "true"),
 
     // Wait for test results to appear
     await expect(page.locator("#testing-module-description")).toHaveText(