[LiamSarsfield]

Part of BOOST-746

Proposed changes

Add the shared info icon immediately after the Critical CSS title on modern Settings. Its single translated tooltip reads: “Critical CSS is the small set of styles needed to show the top of each page. Boost loads it first so pages appear faster while the rest of the CSS loads.”

Related product discussion/links

No separate ticket.

Does this pull request change what data or activity we track or use?

No.

Testing instructions

Enable rsm_jetpack_ui_modernization_boost, open Boost Settings, enable manual Critical CSS, and open the info icon.

Chrome captures cover 1280/782 pixels, LTR/RTL. The 1280 LTR capture matches the September Critical CSS state sheet’s icon-after-title placement. Intentional differences: existing shared icon size/color/spacing instead of custom frame styling; tooltip shown open; local manual/generated state with an existing partial-failure notice, whereas the full paid frame shows automatic generation without this title/icon. Other well differences are unchanged.

With modernization disabled, legacy dashboard HTML is byte-identical and screenshots have zero differing pixels; CSS adds only the modern icon rule.

Jest: 512 tests pass. TypeScript, ESLint and Prettier pass. PHP: 209 tests pass; the WordPress suite lacks local WorDBless. Phan reports two pre-existing findings outside this change. Boost e2e specs cannot run here; Docker browser checks supply visual evidence.

Shared trigger naming and mouse-only behavior stay unchanged: keyboard activation is covered by #52538; accessible naming is a separate shared-component follow-up.

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

---

Boost plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

[jp-launch-control]

Code Coverage Summary

Coverage changed in 1 file.

File	Coverage	Δ%	Δ Uncovered
projects/plugins/boost/app/assets/src/js/features/critical-css/critical-css-meta/modern-critical-css-status.tsx	13/13 (100.00%)	0.00%	0 💚

Full summary · PHP report · JS report