WS-2836: Integrate ToolTip component for save for later

[elvinasv]

Resolves JIRA: https://bbc.atlassian.net/browse/WS-2836

Summary

This pull request introduces a new ActionTooltip component for providing contextual feedback when users save or remove articles, and refactors related UI and accessibility logic.

New ActionTooltip component and integration:

• Implemented the ActionTooltip component, which displays contextual feedback (success, error, or removed messages) after article save/remove actions. The tooltip is accessible, traps focus, and restores focus to the previous element when closed. It also tracks user interactions and supports dismissing via Escape key or outside click. (src/app/components/ActionTooltip/index.tsx, src/app/components/ActionTooltip/ArticleTooltipContent.tsx, src/app/components/SaveArticleButton/SaveArticleButtonAuthenticated/index.tsx)

Accessibility and interaction improvements:

• Refactored the tooltip to use role="group" with aria-labelledby for improved accessibility, and ensured the close button receives focus when the tooltip appears, restoring focus on close.
• Introduced the useDismissOnOutsideInteraction hook to handle dismissing modals/tooltips on Escape key or outside click, with tests for all interaction scenarios. (src/app/hooks/useDismissOnOutsideInteraction/index.test.tsx, src/app/hooks/useDismissOnOutsideInteraction)

Styling and layout updates:

• Updated ActionTooltip styles for improved positioning, pointer-events handling, and responsive layout. Adjusted the close button and header layout for better usability and visual consistency. (src/app/components/ActionTooltip/index.module.scss)

Testing

1. http://localhost.bbc.com:7081/hindi/articles/cj94erzl8e8o?renderer_env=live (Use Charles to test signed-in state locally - Rewrite Header (append) x-id-oidc-signedin: on)

Useful Links

• Figma design

[Copilot]

Pull request overview

Integrates the ActionTooltip UI into the authenticated “Save for later” flow, adds dismissal behaviour (Escape/outside click), and updates Hindi tooltip translations to match the new content model.

Changes:

• Extends useUASButton to expose a user-action-specific actionResult plus a reset helper.
• Renders ActionTooltip after save/remove actions (with view/click tracking and My News link tracking).
• Adds a reusable useDismissOnOutsideInteraction hook and updates ActionTooltip focus/dismiss behaviour and styling.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/app/lib/config/services/hindi.ts	Updates Hindi tooltip translations used by the new tooltip content.
src/app/hooks/useUASButton/index.ts	Adds actionResult/reset API for distinguishing user actions vs background sync.
src/app/hooks/useUASButton/index.test.tsx	Adds tests for actionResult behaviour and reset.
src/app/hooks/useDismissOnOutsideInteraction/index.ts	New hook to dismiss UI on Escape and outside click.
src/app/hooks/useDismissOnOutsideInteraction/index.test.tsx	Unit tests covering Escape/outside click behaviour.
src/app/components/SaveArticleButton/SaveArticleButtonAuthenticated/index.tsx	Shows ActionTooltip after save/remove with tracking and reset on close.
src/app/components/SaveArticleButton/index.test.tsx	Adds tooltip-related tests for authenticated save/remove flows.
src/app/components/SaveArticleButton/index.styles.ts	Adds positioning context for absolutely-positioned tooltip.
src/app/components/ActionTooltip/index.tsx	Adds focus management + outside/Escape dismissal integration; updates ARIA labelling.
src/app/components/ActionTooltip/index.test.tsx	Updates accessibility tests and adds focus restoration tests.
src/app/components/ActionTooltip/index.stories.tsx	Updates story to mount/unmount tooltip via a trigger.
src/app/components/ActionTooltip/index.module.scss	Updates tooltip positioning/layout styles and close button focus styling.
src/app/components/ActionTooltip/ArticleTooltipContent.tsx	Adds optional My News link click tracking handler.
src/app/components/Account/AccountSignInModal/index.tsx	Refactors Escape-to-close behaviour to use the new dismiss hook.

Suppressed comments (4)

src/app/components/ActionTooltip/index.tsx:70

• aria-labelledby should reference the generated per-instance title id (otherwise it will point at a duplicate/non-unique id).

        role="group"
        aria-labelledby="action-tooltip-title"
        className={styles.container}

src/app/components/ActionTooltip/index.tsx:93

• The title Text element should use the same per-instance id used by aria-labelledby.

            <Text
              id="action-tooltip-title"
              size="pica"
              fontVariant="sansBold"
              className={styles.title}
            >

src/app/components/ActionTooltip/index.module.scss:17

• With .wrapper covering the parent, .container should be positioned below the trigger using a single offset (including the spacing token) rather than top: 100%.

.container {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  width: max-content;
  max-width: min(95vw, 21rem);

src/app/components/SaveArticleButton/index.test.tsx:292

• This removed-tooltip assertion is still matching the old English copy. Update it to match the Hindi translation (including the My News link text).

      await act(async () =>
        render(<SaveArticleButton {...defaultProps} />, signedInRenderOptions),
      );

      expect(
        screen.getByText(/This article has now been removed from/i),
      ).toBeInTheDocument();
    });

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.