Skip to content

nm/scraps/button disable migrate #125138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
natemoo-re wants to merge 5 commits into from
Draft

nm/scraps/button disable migrate #125138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6839b0e
ref(a11y): Migrate disabled Button tooltips to tooltipProps
natemoo-re Sep 21, 2026
515ae6b
ref(a11y): Remove tooltip wrapper spans on disabled buttons
natemoo-re Sep 21, 2026
5a6dead
ref(a11y): Migrate Tooltip+Confirm+disabled Button to tooltipProps
natemoo-re Sep 21, 2026
e4cf806
ref(a11y): Clean up remaining disabled button tooltip workarounds
natemoo-re Sep 21, 2026
57944ba
test: Update disabled assertions for tooltipProps migration
natemoo-re Sep 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion static/app/components/events/autofix/v3/prIterationFeedbackForm.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,10 @@ describe('PrIterationFeedbackForm', () => {

// The ticket asks for the form to stay visible, just greyed out.
expect(screen.getByRole('textbox')).toBeDisabled();
expect(screen.getByRole('button', {name: 'Submit'})).toBeDisabled();
expect(screen.getByRole('button', {name: 'Submit'})).toHaveAttribute(
'aria-disabled',
'true'
);

await userEvent.hover(screen.getByRole('button', {name: 'Submit'}));
expect(
Expand Down
19 changes: 9 additions & 10 deletions static/app/components/events/autofix/v3/prIterationFeedbackForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,16 +120,15 @@ export function PrIterationFeedbackForm({
{onClose && (
<Button aria-label={t('Close')} icon={<IconClose />} onClick={onClose} />
)}
<Tooltip title={pausedTooltip} disabled={!isPaused}>
<Button
ref={submitButtonRef}
icon={isSubmitting ? undefined : <IconArrow size="md" direction="right" />}
disabled={isSubmitting || isPaused || !feedback.trim()}
onClick={handleSubmit}
>
{isSubmitting ? t('Submitting feedback') : t('Submit')}
</Button>
</Tooltip>
<Button
ref={submitButtonRef}
icon={isSubmitting ? undefined : <IconArrow size="md" direction="right" />}
disabled={isSubmitting || isPaused || !feedback.trim()}
tooltipProps={{title: isPaused ? pausedTooltip : undefined}}
onClick={handleSubmit}
>
{isSubmitting ? t('Submitting feedback') : t('Submit')}
</Button>
</Flex>
</Stack>
);
Expand Down
46 changes: 22 additions & 24 deletions static/app/components/events/interfaces/debugMeta/debugImageDetails/candidate/actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,32 +54,30 @@ export function Actions({
<Access access={['project:write']}>
{({hasAccess}) => (
<Grid flow="column" align="center" gap="md">
<Tooltip disabled={hasRole} title={noPermissionToDownloadDebugFilesInfo}>
<LinkButton
<LinkButton
size="xs"
icon={<IconDownload />}
href={downloadUrl}
disabled={!hasRole}
tooltipProps={{title: noPermissionToDownloadDebugFilesInfo}}
>
{t('Download')}
</LinkButton>
<Confirm
confirmText={t('Delete')}
message={debugFileDeleteConfirmationInfo}
onConfirm={() => onDelete(debugFileId)}
disabled={!hasAccess}
>
<Button
variant="danger"
icon={<IconDelete />}
size="xs"
icon={<IconDownload />}
href={downloadUrl}
disabled={!hasRole}
>
{t('Download')}
</LinkButton>
</Tooltip>
<Tooltip disabled={hasAccess} title={noPermissionToDeleteDebugFilesInfo}>
<Confirm
confirmText={t('Delete')}
message={debugFileDeleteConfirmationInfo}
onConfirm={() => onDelete(debugFileId)}
disabled={!hasAccess}
>
<Button
variant="danger"
icon={<IconDelete />}
size="xs"
disabled={!hasAccess}
aria-label={t('Delete')}
/>
</Confirm>
</Tooltip>
aria-label={t('Delete')}
tooltipProps={{title: noPermissionToDeleteDebugFilesInfo}}
/>
</Confirm>
</Grid>
)}
</Access>
Expand Down
28 changes: 14 additions & 14 deletions static/app/components/feedback/feedbackItem/feedbackActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,14 +140,14 @@ function LargeWidth({
<Button size="xs" variant="secondary" onClick={onSpamClick}>
{isSpam ? t('Move to Inbox') : t('Mark as Spam')}
</Button>
<Tooltip
disabled={enableMarkAsRead}
title={t('You must be a member of the project')}
<Button
size="xs"
onClick={onMarkAsReadClick}
disabled={!enableMarkAsRead}
tooltipProps={{title: t('You must be a member of the project')}}
>
<Button size="xs" onClick={onMarkAsReadClick} disabled={!enableMarkAsRead}>
{hasSeen ? t('Mark Unread') : t('Mark Read')}
</Button>
</Tooltip>
{hasSeen ? t('Mark Unread') : t('Mark Read')}
</Button>
<Tooltip title={t('Copy feedback as markdown')}>
<Button
size="xs"
Expand All @@ -157,14 +157,14 @@ function LargeWidth({
aria-label={t('Copy feedback as markdown')}
/>
</Tooltip>
<Tooltip
disabled={enableDelete}
title={t('You must be an admin to delete feedback')}
<Button
size="xs"
onClick={onDelete}
disabled={!enableDelete}
tooltipProps={{title: t('You must be an admin to delete feedback')}}
>
<Button size="xs" onClick={onDelete} disabled={!enableDelete}>
{t('Delete')}
</Button>
</Tooltip>
{t('Delete')}
</Button>
</Fragment>
);
}
Expand Down
45 changes: 23 additions & 22 deletions static/app/components/modals/dataWidgetViewerModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -828,13 +828,15 @@ function OpenButton({
!widgetTypeSupportsExploreMultiQuery(widget.widgetType);
if (multiQueryUnsupported) {
return (
<Tooltip
title={t('Explore does not support multiple queries for this dataset')}
<Button
variant="primary"
disabled
tooltipProps={{
title: t('Explore does not support multiple queries for this dataset'),
}}
>
<Button variant="primary" disabled>
{openLabel}
</Button>
</Tooltip>
{openLabel}
</Button>
);
}
path = getWidgetExploreUrl(widget, dashboardFilters, selection, organization)!;
Expand All @@ -861,22 +863,21 @@ function OpenButton({
}

return (
<Tooltip title={disabledTooltip} disabled={!disabled}>
<LinkButton
to={path}
variant="primary"
disabled={disabled}
onClick={() => {
trackAnalytics('dashboards_views.widget_viewer.open_source', {
organization,
widget_type: widget.widgetType ?? WidgetType.ERRORS,
display_type: widget.displayType,
});
}}
>
{openLabel}
</LinkButton>
</Tooltip>
<LinkButton
to={path}
variant="primary"
disabled={disabled}
tooltipProps={{title: disabledTooltip}}
onClick={() => {
trackAnalytics('dashboards_views.widget_viewer.open_source', {
organization,
widget_type: widget.widgetType ?? WidgetType.ERRORS,
display_type: widget.displayType,
});
}}
>
{openLabel}
</LinkButton>
);
}

Expand Down
30 changes: 13 additions & 17 deletions static/app/components/preprod/preprodBuildsTableCommon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,23 +100,19 @@ export function PreprodBuildsRowCells({
variant="icon"
/>
) : (
<Tooltip
title={getDistributionErrorTooltip(
build.distribution_info?.error_code,
build.distribution_info?.error_message
)}
skipWrapper
>
<span>
<Button
aria-label={t('Not installable')}
icon={<IconNot variant="danger" size="xs" />}
variant="transparent"
size="zero"
disabled
/>
</span>
</Tooltip>
<Button
aria-label={t('Not installable')}
icon={<IconNot variant="danger" size="xs" />}
variant="transparent"
size="zero"
disabled
tooltipProps={{
title: getDistributionErrorTooltip(
build.distribution_info?.error_code,
build.distribution_info?.error_message
),
}}
/>
)}
</Flex>
)}
Expand Down
144 changes: 69 additions & 75 deletions static/app/components/replays/table/deleteReplays.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {Flex} from '@sentry/scraps/layout';
import {Link} from '@sentry/scraps/link';
import type {TableColumnConfig} from '@sentry/scraps/table';
import {Text} from '@sentry/scraps/text';
import {Tooltip} from '@sentry/scraps/tooltip';

import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
import {useAnalyticsArea} from 'sentry/components/analyticsArea';
Expand Down Expand Up @@ -87,81 +86,76 @@ export function DeleteReplays({selectedIds, replays, queryOptions}: Props) {
};

return (
<Tooltip
disabled={oneProjectEligible}
title={t('Select a single project from the dropdown to delete replays')}
>
<Tooltip
disabled={!oneProjectEligible || hasAccess}
title={t(
'You must have project:write, project:admin, or org:admin access to delete replays'
)}
>
<Button
disabled={!oneProjectEligible || !hasAccess}
icon={<IconDelete />}
onClick={() =>
openConfirmModal({
bypass: selectedIds !== 'all' && selectedIds.length === 1,
renderMessage: _props =>
selectedIds === 'all' ? (
<ReplayQueryPreview deletePayload={deletePayload} project={project!} />
) : (
<ErrorBoundary mini>
<Title project={project!}>
{tn(
'The following %s replay will be deleted',
'The following %s replays will be deleted',
selectedIds.length
)}
</Title>
<ReplayPreviewTable replays={replays} selectedIds={selectedIds} />
</ErrorBoundary>
),
renderConfirmButton: ({defaultOnClick}) => (
<Button onClick={defaultOnClick} variant="danger">
{t('Delete')}
</Button>
),
onConfirm: () => {
bulkDelete([deletePayload], {
onSuccess: () => {
addSuccessMessage(
tct('Replays are being deleted. [settings:View progress]', {
settings: <LinkWithUnderline to={settingsPath} />,
})
);
// TODO: get the list to refetch
refetchAuditLog();
},
onError: error => {
const count =
selectedIds === 'all'
? Number.MAX_SAFE_INTEGER
: selectedIds.length;
const reason = getBulkDeleteErrorReason(error);
addErrorMessage(
reason
? tn(
'Failed to delete replay: %2$s',
'Failed to delete replays: %2$s',
count,
reason
)
: tn('Failed to delete replay', 'Failed to delete replays', count)
);
},
onSettled: () => {},
});
<Button
disabled={!oneProjectEligible || !hasAccess}
icon={<IconDelete />}
tooltipProps={{
title: oneProjectEligible
? hasAccess
? undefined
: t(
'You must have project:write, project:admin, or org:admin access to delete replays'
)
: t('Select a single project from the dropdown to delete replays'),
}}
onClick={() =>
openConfirmModal({
bypass: selectedIds !== 'all' && selectedIds.length === 1,
renderMessage: _props =>
selectedIds === 'all' ? (
<ReplayQueryPreview deletePayload={deletePayload} project={project!} />
) : (
<ErrorBoundary mini>
<Title project={project!}>
{tn(
'The following %s replay will be deleted',
'The following %s replays will be deleted',
selectedIds.length
)}
</Title>
<ReplayPreviewTable replays={replays} selectedIds={selectedIds} />
</ErrorBoundary>
),
renderConfirmButton: ({defaultOnClick}) => (
<Button onClick={defaultOnClick} variant="danger">
{t('Delete')}
</Button>
),
onConfirm: () => {
bulkDelete([deletePayload], {
onSuccess: () => {
addSuccessMessage(
tct('Replays are being deleted. [settings:View progress]', {
settings: <LinkWithUnderline to={settingsPath} />,
})
);
// TODO: get the list to refetch
refetchAuditLog();
},
onError: error => {
const count =
selectedIds === 'all' ? Number.MAX_SAFE_INTEGER : selectedIds.length;
const reason = getBulkDeleteErrorReason(error);
addErrorMessage(
reason
? tn(
'Failed to delete replay: %2$s',
'Failed to delete replays: %2$s',
count,
reason
)
: tn('Failed to delete replay', 'Failed to delete replays', count)
);
},
})
}
size="xs"
>
{t('Delete')}
</Button>
</Tooltip>
</Tooltip>
onSettled: () => {},
});
},
})
}
size="xs"
>
{t('Delete')}
</Button>
);
}

Expand Down
Loading
Loading