[Content Resizing]: Fix focus loss when regenerating content resizing suggestions

[yogeshbhutkar]

What?

See #589

Fixes a focus-loss issue in the Content Resizing modal where clicking Regenerate after a successful generation could move focus behind the modal.

Why?

The previous loading state replaced the modal content while regeneration was running. Since the focused Regenerate button disappeared from the DOM, keyboard focus could escape to the background page, leaving keyboard and screen reader users unable to tab back into the modal.

How?

• Keeps the modal structure and action buttons mounted during regeneration.
• Renders an inline loading state inside the suggested-content panel instead of replacing the whole modal body.
• Disables the modal actions while loading, with accessibleWhenDisabled on Regenerate so focus remains stable.
• Adds a skeleton loading treatment with reduced-motion support.

Use of AI Tools

AI assistance: Yes
Tool(s): Codex
Model(s): GPT-5.5
Used for: Initial code skeleton; final implementation and tests were reviewed and edited by me.

Testing Instructions

1. Create a new post.
2. Add a Paragraph block with enough text to resize.
3. Select the Paragraph block and open the Resize Content toolbar menu.
4. Choose Shorten, Expand, or Rephrase.
5. Wait for the suggested replacement modal to finish generating.
6. Click Regenerate.
7. While regeneration is in progress and after it completes, press Tab several times.

Screencast

screencast.mov

Changelog Entry

Fixed - Focus lost in generating state.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 74.68%. Comparing base (4f27b52) to head (78de6fb).

Additional details and impacted files

@@            Coverage Diff             @@
##             develop     #663   +/-   ##
==========================================
  Coverage      74.68%   74.68%           
  Complexity      1754     1754           
==========================================
  Files             85       85           
  Lines           7549     7549           
==========================================
  Hits            5638     5638           
  Misses          1911     1911           

Flag	Coverage Δ
unit	74.68% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[dkotter]

Overall this looks good to me but it is a slight change from our current UI and there is one potential problem I see.

Right now when a suggestion is being generated, we open the modal and show just a loading state. In this PR, we open the modal, we show the original content and then show a loading state beneath that. On smaller screens or when the original content is long, the loading state isn't in the viewport so it's not clear anything is happening. Ideally we auto scroll to the bottom of the modal so the loading state is always immediately visible.

[yogeshbhutkar]

Thanks for the review. This should be fixed with bbf4d10.

after.mov