fix: render success message via React state instead of DOM mutation (#1161)

[wendyamoni-creator]

Summary

Fixes #1161 — the newsletter signup success message was announced to screen readers via a direct DOM mutation (formStatusRef.current.textContent = ...) rather than through React state, making it a fragile unmanaged side-channel.

Root Cause

After a successful subscription, the code did:

if (formStatusRef.current) {
  formStatusRef.current.textContent = t('hero.successMessage');
}

This bypassed React's render cycle. Any future re-render that gives the role=status div real JSX children, or a state change that re-renders the form, could silently clobber or fail to update the announcement.

Fix

frontend/src/components/LandingPage.tsx

• Removed formStatusRef (the ref is no longer needed)
• Removed the textContent mutation
• The live-region div now renders the message as a JSX child:

<div
  id="form-status"
  role="status"
  aria-live="polite"
  aria-atomic="true"
  className="visually-hidden"
>
  {isSubmitted && t('hero.successMessage')}
</div>

Screen readers continue to receive the announcement because the aria-live="polite" region gets a text child injected by React on the same render that sets isSubmitted = true.

Tests

Added frontend/src/components/__tests__/LandingPage.live-region.test.tsx (5 tests):

1. Success message appears in #form-status after successful submission
2. The text is present as a real child node (rendered by React, not imperatively injected)
3. Live-region is empty before the form is submitted
4. ARIA attributes (role=status, aria-live=polite, aria-atomic=true) are present
5. The ref prop is absent from the div (no imperative mutation possible)

Checklist

• Branch named fix/success-message-live-region-announcement-is-set
• cd frontend && npm test -- LandingPage — 50 tests, 4 suites, all passed
• cd frontend && npm run build — compiled successfully, 0 warnings closes [Bug] Success-message live-region announcement is set via direct DOM mutation instead of React state #1161

[drips-wave]

@wendyamoni-creator Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits