fix(issues): Add tooltips to icon-only feed actions

priscilawebdev · codex · priscilawebdev · commit 20bf77ef3cfd · 2026-04-16T10:48:07.000+02:00
Restore tooltip affordances for the issue feed auto-refresh control and align the adjacent issue view icon actions with the same interaction pattern.

Also teach icon-only feedback buttons to expose the same hover affordance without changing them into text buttons, so page-frame issue surfaces stay discoverable while remaining compact.

Fixes DE-1104
Co-Authored-By: OpenAI Codex &lt;noreply@openai.com&gt;
diff --git a/static/app/components/feedbackButton/feedbackButton.spec.tsx b/static/app/components/feedbackButton/feedbackButton.spec.tsx
@@ -0,0 +1,39 @@
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import {FeedbackButton} from 'sentry/components/feedbackButton/feedbackButton';
+
+jest.mock('sentry/utils/useFeedbackForm', () => ({
+  useFeedbackForm: () => jest.fn(),
+}));
+
+describe('FeedbackButton', () => {
+  it('adds a tooltip for icon-only feedback buttons', async () => {
+    render(<FeedbackButton>{null}</FeedbackButton>);
+
+    const button = screen.getByRole('button', {name: 'Give Feedback'});
+
+    await userEvent.hover(button);
+
+    expect(screen.getByText('Give Feedback')).toBeInTheDocument();
+  });
+
+  it('does not add a tooltip for text feedback buttons', async () => {
+    render(<FeedbackButton />);
+
+    const button = screen.getByRole('button', {name: 'Give Feedback'});
+
+    await userEvent.hover(button);
+
+    expect(button).not.toHaveAttribute('aria-describedby');
+  });
+
+  it('uses the custom aria-label for icon-only tooltip text', async () => {
+    render(<FeedbackButton aria-label="Give feedback on issues">{null}</FeedbackButton>);
+
+    const button = screen.getByRole('button', {name: 'Give feedback on issues'});
+
+    await userEvent.hover(button);
+
+    expect(screen.getByText('Give feedback on issues')).toBeInTheDocument();
+  });
+});
diff --git a/static/app/components/feedbackButton/feedbackButton.tsx b/static/app/components/feedbackButton/feedbackButton.tsx
@@ -60,14 +60,23 @@ export function FeedbackButton({feedbackOptions, ...buttonProps}: Props) {
     return null;
   }
 
-  const children = 'children' in buttonProps ? buttonProps.children : t('Give Feedback');
+  const defaultLabel = t('Give Feedback');
+  const children = 'children' in buttonProps ? buttonProps.children : defaultLabel;
+  const isIconOnly = children === null || children === undefined || children === false;
+  const ariaLabel = buttonProps['aria-label'] ?? (isIconOnly ? defaultLabel : undefined);
+  const tooltipProps =
+    isIconOnly && !buttonProps.tooltipProps?.title
+      ? {...buttonProps.tooltipProps, title: ariaLabel}
+      : buttonProps.tooltipProps;
 
   return (
     <Button
       ref={buttonRef}
       size="sm"
       icon={<IconMegaphone />}
       {...buttonProps}
+      tooltipProps={tooltipProps}
+      aria-label={ariaLabel}
       onClick={e => {
         openForm?.(feedbackOptions);
         buttonProps.onClick?.(e);
diff --git a/static/app/views/issueList/issueViews/issueViewSaveButton.spec.tsx b/static/app/views/issueList/issueViews/issueViewSaveButton.spec.tsx
@@ -325,6 +325,21 @@ describe('IssueViewSaveButton', () => {
     expect(screen.getByTestId('save-button')).toBeInTheDocument();
   });
 
+  it('renders a tooltip for the save options trigger', async () => {
+    render(<IssueViewSaveButton {...defaultProps} />, {
+      initialRouterConfig: initialRouterConfigView,
+      organization,
+    });
+
+    const moreSaveOptionsButton = await screen.findByRole('button', {
+      name: 'More save options',
+    });
+
+    await userEvent.hover(moreSaveOptionsButton);
+
+    expect(screen.getByText('More save options')).toBeInTheDocument();
+  });
+
   it('shows a feature disabled hovercard when the feature is disabled', async () => {
     render(<IssueViewSaveButton {...defaultProps} />, {
       organization: OrganizationFixture({
diff --git a/static/app/views/issueList/issueViews/issueViewSaveButton.tsx b/static/app/views/issueList/issueViews/issueViewSaveButton.tsx
@@ -132,6 +132,7 @@ function SegmentedIssueViewSaveButton({
               <DropdownTrigger
                 {...props}
                 disabled={!hasFeature || isSaving}
+                tooltipProps={{title: t('More save options')}}
                 icon={
                   <IconChevron
                     direction="down"
diff --git a/static/app/views/issueList/issueViewsHeader.spec.tsx b/static/app/views/issueList/issueViewsHeader.spec.tsx
@@ -51,6 +51,47 @@ describe('IssueViewsHeader', () => {
     route: '/organizations/:orgId/issues/',
   };
 
+  describe('realtime button', () => {
+    it('renders a tooltip on the issue feed', async () => {
+      render(<IssueViewsHeader {...defaultProps} />, {
+        organization,
+
+        initialRouterConfig: onIssueFeedRouterConfig,
+      });
+
+      const realtimeButton = await screen.findByRole('button', {
+        name: 'Enable real-time updates',
+      });
+
+      await userEvent.hover(realtimeButton);
+
+      expect(screen.getByText('Enable real-time updates')).toBeInTheDocument();
+    });
+
+    it('renders tooltips for the issue view icon buttons', async () => {
+      render(<IssueViewsHeader {...defaultProps} />, {
+        organization,
+
+        initialRouterConfig: onIssueViewRouterConfig,
+      });
+
+      const starButton = await screen.findByRole('button', {name: 'Star view'});
+      await userEvent.hover(starButton);
+      expect(screen.getByText('Star view')).toBeInTheDocument();
+
+      await userEvent.unhover(starButton);
+      await waitFor(() => {
+        expect(screen.queryByText('Star view')).not.toBeInTheDocument();
+      });
+
+      const moreOptionsButton = await screen.findByRole('button', {
+        name: 'More issue view options',
+      });
+      await userEvent.hover(moreOptionsButton);
+      expect(screen.getByText('More issue view options')).toBeInTheDocument();
+    });
+  });
+
   describe('edit menu', () => {
     it('does not render if not on a view', async () => {
       render(<IssueViewsHeader {...defaultProps} />, {
diff --git a/static/app/views/issueList/issueViewsHeader.tsx b/static/app/views/issueList/issueViewsHeader.tsx
@@ -71,6 +71,7 @@ function IssueViewStarButton() {
   const queryClient = useQueryClient();
 
   const {data: groupSearchView} = useSelectedGroupSearchView();
+  const starViewLabel = groupSearchView?.starred ? t('Unstar view') : t('Star view');
   const {mutate: mutateViewStarred} = useUpdateGroupSearchViewStarred({
     onMutate: variables => {
       setApiQueryData<GroupSearchView>(
@@ -128,7 +129,8 @@ function IssueViewStarButton() {
           }
         );
       }}
-      aria-label={groupSearchView?.starred ? t('Unstar view') : t('Star view')}
+      tooltipProps={{title: starViewLabel}}
+      aria-label={starViewLabel}
       icon={
         <IconStar
           isSolid={groupSearchView?.starred}
@@ -146,6 +148,7 @@ function IssueViewEditMenu() {
   const user = useUser();
   const {mutateAsync: deleteIssueView} = useDeleteGroupSearchView();
   const navigate = useNavigate();
+  const moreOptionsLabel = t('More issue view options');
 
   if (!groupSearchView) {
     return null;
@@ -194,8 +197,9 @@ function IssueViewEditMenu() {
         <Button
           size="sm"
           {...props}
+          tooltipProps={{title: moreOptionsLabel}}
           icon={<IconEllipsis />}
-          aria-label={t('More issue view options')}
+          aria-label={moreOptionsLabel}
         />
       )}
       position="bottom-end"
@@ -217,6 +221,17 @@ export function IssueViewsHeader({
   const realtimeLabel = realtimeActive
     ? t('Pause real-time updates')
     : t('Enable real-time updates');
+  const realtimeButton = viewId ? null : (
+    <DisableInDemoMode>
+      <Button
+        size="sm"
+        tooltipProps={{title: realtimeLabel}}
+        aria-label={realtimeLabel}
+        icon={realtimeActive ? <IconPause /> : <IconPlay />}
+        onClick={() => onRealtimeChange(!realtimeActive)}
+      />
+    </DisableInDemoMode>
+  );
 
   if (hasPageFrameFeature) {
     return (
@@ -226,17 +241,7 @@ export function IssueViewsHeader({
         </Layout.HeaderContent>
         <TopBar.Slot name="actions">
           {headerActions}
-          {!viewId && (
-            <DisableInDemoMode>
-              <Button
-                size="sm"
-                tooltipProps={{title: realtimeLabel}}
-                aria-label={realtimeLabel}
-                icon={realtimeActive ? <IconPause /> : <IconPlay />}
-                onClick={() => onRealtimeChange(!realtimeActive)}
-              />
-            </DisableInDemoMode>
-          )}
+          {realtimeButton}
           <IssueViewStarButton />
           <IssueViewEditMenu />
         </TopBar.Slot>
@@ -251,17 +256,7 @@ export function IssueViewsHeader({
           <PageTitle title={title} description={description} />
           <Flex align="center" gap="md">
             {headerActions}
-            {!viewId && (
-              <DisableInDemoMode>
-                <Button
-                  size="sm"
-                  tooltipProps={{title: realtimeLabel}}
-                  aria-label={realtimeLabel}
-                  icon={realtimeActive ? <IconPause /> : <IconPlay />}
-                  onClick={() => onRealtimeChange(!realtimeActive)}
-                />
-              </DisableInDemoMode>
-            )}
+            {realtimeButton}
             <IssueViewStarButton />
             <IssueViewEditMenu />
           </Flex>
