fix(advertising): stabilize placement button width, add a11y labels

[thomasguillot]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Two small UX/accessibility refinements to the Ads placement cards (Advertising › Display Ads › Placements):

• No more width jump on the Edit/Cancel toggle. Previously the button visibly resized when its label switched from "Edit" to "Cancel", causing a layout shift in the card header. The button now reserves the width of the longer label via a CSS grid stack — both labels live in the DOM, and only the inactive one is visibility: hidden. Width is derived from the actual rendered text (no magic pixel value), so the fix holds across translations.
• Screen reader context for placement actions. "Edit", "Cancel", and "Enable" buttons repeat once per placement card, with no audible difference between them. Each button now gets an aria-label that includes the placement name — e.g. "Edit Sticky Footer", "Cancel editing Sticky Footer", "Enable Sticky Footer". The visible compact text is unchanged.

How to test the changes in this Pull Request:

1. Go to Advertising › Display Ads › Placements (/wp-admin/admin.php?page=newspack-ads-display-ads#/placements).
2. On any enabled placement (e.g. Global Above Header), click Edit. Verify the button text swaps to Cancel without the button width changing or surrounding header elements shifting.
3. Click Cancel. Same check in reverse — no width jump.
4. Open the same page with a screen reader (VoiceOver, NVDA, etc.) and tab through the action buttons. Confirm each button is announced with its placement name appended, e.g. "Edit Global Above Header, button" and "Enable Sticky Footer, button".
5. For an enabled placement, expand it and confirm the announced label switches to "Cancel editing <placement name>".
6. Confirm no regression on the disabled placement state — Enable button still toggles the placement on as before.

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[Copilot]

Pull request overview

This PR refines the Advertising → Display Ads → Placements UI by (1) preventing layout shift when toggling the Edit/Cancel action and (2) improving screen reader clarity for repeated placement action buttons.

Changes:

• Adds placement-specific aria-labels to Edit/Cancel and Enable buttons to provide unique, descriptive accessible names.
• Stabilizes the Edit/Cancel button width by rendering both labels in an overlapping inline grid and toggling visibility to reserve space for the longer label.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.