[MT-23018] Add accessible Tech Info tooltips

[kyrylo-yevdokymov]

What & why

Implements MT-23018, a sub-task of MT-22849.

Adds explanatory SMTP Transaction Info and Email Headers tooltips. The component keeps tooltip controls outside semantic headings, exposes descriptions through aria-describedby, remains open while hovered, and consumes Escape without triggering message-level navigation.

Impact

Technical email metadata is easier to understand and the help content is usable by pointer and keyboard users.

Screenshots

Before	After

Verification

• npm test — 62 tests passed
• npm run lint — 0 errors; 4 existing warnings
• npm run build — passed
• git diff --check main...fix/mt-23018-tech-info-tooltips — passed

Summary by CodeRabbit

• New Features

  • Added informative tooltips for SMTP transaction details and email headers.
  • Tooltips provide contextual explanations, including MAIL and RCPT information.
  • Improved accessibility with descriptive labels and keyboard-friendly interactions.

• Bug Fixes

  • Tooltips now remain open when moving the pointer between the trigger and tooltip content.
  • Pressing Escape closes the tooltip without disrupting focus or other page interactions.

[coderabbitai]

Warning

Review limit reached

@kyrylo-yevdokymov, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 13 seconds

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0e003af9-3449-4d32-b073-423f0d00e230

📥 Commits

Reviewing files that changed from the base of the PR and between 92f379d and d71d5d3.

📒 Files selected for processing (2)

• frontend/src/components/message/InfoTooltip.test.tsx
• frontend/src/components/message/InfoTooltip.tsx

📝 Walkthrough

Walkthrough

Adds an accessible, portal-rendered InfoTooltip component backed by Radix UI, integrates it into SMTP and Email Headers headings, and adds tests for accessibility, focus, keyboard, pointer, portal, and heading semantics.

Changes

Technical information tooltips

Layer / File(s)	Summary
Reusable InfoTooltip component frontend/package.json, frontend/src/components/message/InfoTooltip.tsx, frontend/src/components/message/InfoTooltip.test.tsx	Adds the Radix tooltip dependency and a reusable tooltip with accessible labels and descriptions, portal content, Escape handling, pointer interaction behavior, styling, and tests.
TechInfo tooltip integration frontend/src/components/message/TechInfo.tsx, frontend/src/components/message/TechInfo.test.tsx	Replaces heading help icons with InfoTooltip instances for SMTP and Email Headers, adds tooltip text constants and heading layout styles, and tests heading containment and accessible descriptions.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant TechInfo
  participant InfoTooltip
  participant RadixPortal
  User->>TechInfo: Focus or hover SMTP or Email Headers help icon
  TechInfo->>InfoTooltip: Render configured label and content
  InfoTooltip->>RadixPortal: Render tooltip content
  RadixPortal-->>User: Display technical information
  User->>InfoTooltip: Press Escape or move pointer outside
  InfoTooltip->>RadixPortal: Close tooltip

Loading

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: adding accessible Tech Info tooltips.
Description check	✅ Passed	The description covers the change, impact, screenshots, and verification, with only minor template heading differences.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[kyrylo-yevdokymov]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[roman-adamchik]

lgtm, but also better to use radix-ui or base-ui for headless tooltip component

[kyrylo-yevdokymov]

@roman-adamchik Addressed in 92f379d: switched InfoTooltip to @radix-ui/react-tooltip while preserving the existing accessibility and interaction guarantees—stable accessible descriptions, hoverable content, and Escape isolation. The full frontend test suite, lint, and production build pass.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/components/message/InfoTooltip.tsx`:
- Around line 4-7: Update the triggerCss focus styles so keyboard focus has a
clearly visible indicator, such as a focus-visible ring or outline, instead of
relying only on the text-color change. Preserve the existing hover styling and
remove or retain focus:outline-none only as appropriate for the new
focus-visible indicator.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a9bb4964-58cb-4698-b9f2-9792b9d97743

📥 Commits

Reviewing files that changed from the base of the PR and between 9ce8945 and 92f379d.

⛔ Files ignored due to path filters (1)

• frontend/package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (5)

• frontend/package.json
• frontend/src/components/message/InfoTooltip.test.tsx
• frontend/src/components/message/InfoTooltip.tsx
• frontend/src/components/message/TechInfo.test.tsx
• frontend/src/components/message/TechInfo.tsx