fix(integrations): Keep disabled integration buttons reachable by keyboard

static/app/views/settings/organizationIntegrations/addIntegrationButton.spec.tsx

@@ -1,7 +1,7 @@
 import {IntegrationProviderFixture} from 'sentry-fixture/integrationProvider';
 import {OrganizationFixture} from 'sentry-fixture/organization';
 
-import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {act, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import * as pipelineModal from 'sentry/components/pipeline/modal';
 import {AddIntegrationButton} from 'sentry/views/settings/organizationIntegrations/addIntegrationButton';
@@ -36,4 +36,31 @@ describe('AddIntegrationButton', () => {
       })
     );
   });
+
+  it('keeps the button focusable with a tooltip when the provider cannot be added', async () => {
+    const openPipelineModalSpy = jest
+      .spyOn(pipelineModal, 'openPipelineModal')
+      .mockImplementation(() => {});
+
+    render(
+      <AddIntegrationButton
+        provider={{...provider, canAdd: false}}
+        onAddIntegration={jest.fn()}
+        organization={OrganizationFixture()}
+      />
+    );
+
+    const button = screen.getByRole('button', {name: 'Add integration'});
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+
+    act(() => button.focus());
+    expect(
+      await screen.findByText(
+        `Integration cannot be added on Sentry. Enable this integration via the ${provider.name} instance.`
+      )
+    ).toBeInTheDocument();
+
+    await userEvent.click(button);
+    expect(openPipelineModalSpy).not.toHaveBeenCalled();
+  });
 });

static/app/views/settings/organizationIntegrations/addIntegrationButton.tsx

@@ -1,6 +1,5 @@
 import type {ButtonProps} from '@sentry/scraps/button';
 import {Button} from '@sentry/scraps/button';
-import {Tooltip} from '@sentry/scraps/tooltip';
 
 import {t} from 'sentry/locale';
 import type {IntegrationWithConfig} from 'sentry/types/integrations';
@@ -55,34 +54,44 @@ export function AddIntegrationButton({
   });
 
   return (
-    <Tooltip
-      disabled={provider.canAdd}
-      title={`Integration cannot be added on Sentry. Enable this integration via the ${provider.name} instance.`}
-    >
-      <Button
-        disabled={!provider.canAdd}
-        aria-label={t('Add integration')}
-        {...buttonProps}
-        onClick={() => {
-          if (label === t('Reinstall')) {
-            trackAnalytics('integrations.integration_reinstall_clicked', {
-              organization,
-              provider: provider.metadata.noun,
-            });
-          }
-          startFlow({
-            provider,
+    // aria-disabled rather than disabled so the button stays focusable and the
+    // tooltip that says why it cannot be added opens on keyboard focus.
+    <Button
+      aria-disabled={!provider.canAdd}
+      tooltipProps={
+        provider.canAdd
+          ? undefined
+          : {
+              title: t(
+                'Integration cannot be added on Sentry. Enable this integration via the %s instance.',
+                provider.name
+              ),
+            }
+      }
+      aria-label={t('Add integration')}
+      {...buttonProps}
+      onClick={() => {
+        if (!provider.canAdd) {
+          return;
+        }
+        if (label === t('Reinstall')) {
+          trackAnalytics('integrations.integration_reinstall_clicked', {
             organization,
-            onInstall: onAddIntegration,
-            analyticsParams,
-            suppressSuccessMessage,
-            onCancel,
-            onError,
+            provider: provider.metadata.noun,
           });
-        }}
-      >
-        {label}
-      </Button>
-    </Tooltip>
+        }
+        startFlow({
+          provider,
+          organization,
+          onInstall: onAddIntegration,
+          analyticsParams,
+          suppressSuccessMessage,
+          onCancel,
+          onError,
+        });
+      }}
+    >
+      {label}
+    </Button>
   );
 }

static/app/views/settings/organizationIntegrations/directEnableButton.spec.tsx

@@ -1,6 +1,6 @@
 import {OrganizationFixture} from 'sentry-fixture/organization';
 
-import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
+import {act, render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import {DirectEnableButton} from 'sentry/views/settings/organizationIntegrations/directEnableButton';
 
@@ -42,8 +42,8 @@ describe('DirectEnableButton', () => {
     await waitFor(() => expect(mockPost).toHaveBeenCalledTimes(1));
   });
 
-  it('disables button when user does not have access', () => {
-    MockApiClient.addMockResponse({
+  it('keeps the button focusable with a tooltip when user does not have access', async () => {
+    const mockPost = MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/integrations/direct-enable/github_copilot/`,
       method: 'POST',
       body: {},
@@ -53,6 +53,15 @@ describe('DirectEnableButton', () => {
       organization,
     });
 
-    expect(screen.getByRole('button', {name: 'Enable Integration'})).toBeDisabled();
+    const button = screen.getByRole('button', {name: 'Enable Integration'});
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+
+    act(() => button.focus());
+    expect(
+      await screen.findByText('You do not have permission to enable this integration.')
+    ).toBeInTheDocument();
+
+    await userEvent.click(button);
+    expect(mockPost).not.toHaveBeenCalled();
   });
 });

static/app/views/settings/organizationIntegrations/directEnableButton.tsx

@@ -1,7 +1,6 @@
 import {useMutation, useQueryClient} from '@tanstack/react-query';
 
 import {Button} from '@sentry/scraps/button';
-import {Tooltip} from '@sentry/scraps/tooltip';
 
 import {addErrorMessage} from 'sentry/actionCreators/indicator';
 import {t} from 'sentry/locale';
@@ -58,18 +57,26 @@ export function DirectEnableButton({
   });
 
   return (
-    <Tooltip
-      title={t('You do not have permission to enable this integration.')}
-      disabled={userHasAccess}
+    // aria-disabled rather than disabled when the user lacks access, so the
+    // button stays focusable and the permission tooltip opens on keyboard focus.
+    <Button
+      {...buttonProps}
+      disabled={buttonProps.disabled || isPending}
+      aria-disabled={buttonProps.disabled || !userHasAccess || isPending}
+      tooltipProps={
+        userHasAccess
+          ? undefined
+          : {title: t('You do not have permission to enable this integration.')}
+      }
+      busy={isPending}
+      onClick={() => {
+        if (!userHasAccess) {
+          return;
+        }
+        enable();
+      }}
     >
-      <Button
-        {...buttonProps}
-        disabled={buttonProps.disabled || !userHasAccess || isPending}
-        busy={isPending}
-        onClick={() => enable()}
-      >
-        {t('Enable Integration')}
-      </Button>
-    </Tooltip>
+      {t('Enable Integration')}
+    </Button>
   );
 }