fix(ui-ux): expose bare loading text as live regions

[seonghobae]

Gap

Async loading/status text was rendered as plain <p> text with no role/aria-live, in ~20 places across frontend/src/App.tsx and frontend/src/components/FiveW1H.tsx (this worktree's snapshot has a different line count than the original gap report, but the same underlying pattern). Assistive-tech users are never told when a Loading… placeholder is replaced by real content.

Highest-traffic instances:

• App.tsx — the app-root auth gate (if (auth.isLoading) return <p>{t("Loading authentication state...")}</p>) — every session passes through this before anything else renders.
• App.tsx — the post-detail popup's {!post && !error && <p>{t("Loading...")}</p>} — focus lands in the popup, but the loading→title transition is silent to AT.
• App.tsx — EventLineageSection's two Loading lineage... returns, plus 15 more bare loading paragraphs across related panels (evidence, related nodes, evaluation, tickets, activity, affiliate tree, analysis runs, rankings, calendar, reports, customer master, related posts).
• FiveW1H.tsx — Loading 5W1H....

This contrasts with the existing correct pattern already used a few components over, e.g. App.tsx's <p role="status">{t("Loading posts...")}</p> for the board list.

Fix

Added role="status" to every bare loading <p> identified (19 in App.tsx, 1 in FiveW1H.tsx), matching the existing role="status" convention used elsewhere in the same files. These are plain transient text nodes with no retry action or extra description, so a raw role="status" attribute is the smallest correct fix — no need to wrap them in a richer status component. No behavior change beyond the attribute; no new user-facing strings, so no new i18n keys needed.

Tests

• Added it("announces the app-root auth loading gate as a live region", ...) — sets mockAuth.isLoading = true and asserts screen.getByRole("status") carries the Loading authentication state... text (previously only reachable via getByText).
• Added it("announces the post-detail popup loading state as a live region before the post resolves", ...) — extends the existing stubBackend helper with a deferPostOne option (mirroring the existing deferMe pattern) to deterministically observe the popup's pre-resolution state, then asserts within(popup).getByRole("status") before asserting the loaded content appears and the loading text is gone.

Checks run (from frontend/)

• corepack pnpm exec tsc -b — same 2 pre-existing errors as on the unmodified base commit (App.tsx:104 unused import, App.tsx:4623 AdminPanel prop type), confirmed unrelated by diffing against HEAD before these edits. No new errors.
• corepack pnpm exec oxlint src/App.tsx src/App.test.tsx src/components/FiveW1H.tsx — same 2 pre-existing warnings (same unused import), no new warnings/errors.
• corepack pnpm exec vitest run src/App.test.tsx — 80 passed (80), including the 2 new tests.

🤖 Generated with Claude Code

https://claude.ai/code/session_011jWJzKUd82yy97esEBfJbt

---

[coderabbitai]

Warning

Review limit reached

Next included review available in 53 minutes.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: f66b793a-c87a-4ae9-a19b-4e7cc4c1be73

📥 Commits

Reviewing files that changed from the base of the PR and between b4911f8 and bf79ec4.

📒 Files selected for processing (3)

• frontend/src/App.test.tsx
• frontend/src/App.tsx
• frontend/src/components/FiveW1H.tsx

---

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.}

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no bugs or issues to report.