fix(a11y): silence Radix Dialog warnings + add missing index.code key (#7835)

[JohnMcLear]

Summary

Closes #7835.

Three console warnings reported on Etherpad 3.2.0:

1. Couldn't find translation key index.code — src/templates/index.html:200 referenced data-l10n-id="index.code" (the label for the session-receive code input) but src/locales/en.json never defined the key. Added it.

2. DialogContent requires a DialogTitle — every @radix-ui/react-dialog Dialog.Content in the admin SPA now has a Dialog.Title. Where there is no visible heading, the title is wrapped in @radix-ui/react-visually-hidden so screen readers still get a label without changing the UI.

3. Missing Description or aria-describedby for DialogContent — same treatment for Dialog.Description.

Sites fixed (all in the admin app, which is what fires these warnings — the public landing page itself uses native <dialog>):

• admin/src/utils/LoadingScreen.tsx (renders on every admin route)
• admin/src/pages/PadPage.tsx — delete confirmation, error dialog, create-pad dialog
• admin/src/pages/AuthorPage.tsx — erasure confirmation dialog (also restructured so a Title exists in the loading-preview phase)

New translation keys land in src/locales/en.json (translation namespace, Crowdin-managed) and admin/public/ep_admin_authors/en.json (ep_admin_authors namespace).

Regression coverage

Added src/tests/backend-new/specs/template-l10n-keys.test.ts. It scans every src/templates/*.html for data-l10n-id="..." attributes and asserts each one resolves in src/locales/en.json. Verified locally that removing index.code from en.json makes the test fail; restoring it passes.

Test plan

• pnpm test:vitest run tests/backend-new/specs/template-l10n-keys.test.ts (5/5 pass; 1/5 fails on purpose when key removed)
• pnpm test:vitest run — 716/717 pass; one pre-existing failure in `backend-tests-glob.test.ts` due to no plugins in this fresh clone (unrelated)
• `tsc --noEmit` clean in `admin/`
• `pnpm exec vite build` clean in `admin/`
• `pnpm test` in `admin/` — 21/21 unit tests pass
• Manual: open `/admin` in browser, check the DevTools console — no Radix DialogTitle/Description warnings
• Manual: open landing page in browser, check the DevTools console — no `index.code` warning

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[qodo-free-for-open-source-projects]

Review Summary by Qodo

Fix Radix Dialog a11y warnings and missing translation key

🐞 Bug fix 🧪 Tests

Walkthroughs

Description

• Add missing index.code translation key to fix landing page console error
• Add Dialog.Title and Dialog.Description to all Radix dialogs in admin app
  - Wrap titles/descriptions in VisuallyHidden where no visible heading exists
  - Silences Radix a11y warnings on every admin page load
• Add regression test scanning templates for missing translation keys
• Add new translation keys for dialog accessibility in admin app

Diagram

flowchart LR
  A["Missing translation keys<br/>and Dialog a11y warnings"] -->|Add Dialog.Title<br/>Dialog.Description| B["Admin dialogs<br/>fully accessible"]
  A -->|Add index.code key| C["Landing page<br/>no console errors"]
  A -->|Add regression test| D["CI prevents<br/>future regressions"]

Loading

File Changes

1. src/tests/backend-new/specs/template-l10n-keys.test.ts 🧪 Tests +40/-0

Add regression test for template translation keys

• New regression test file that scans all HTML templates for data-l10n-id attributes
• Verifies each referenced translation key exists in src/locales/en.json
• Fails CI if any template references an undefined translation key
• Prevents recurrence of the index.code missing key bug

src/tests/backend-new/specs/template-l10n-keys.test.ts

---

2. src/locales/en.json ✨ Enhancement +6/-0

Add missing translation keys for accessibility

• Add index.code key for session-receive code input label on landing page
• Add admin.loading_description for loading dialog accessibility
• Add four new admin pads dialog keys: create_pad_dialog_description, delete_pad_dialog_title,
 delete_pad_dialog_description, error_dialog_description

src/locales/en.json

---

3. admin/public/ep_admin_authors/en.json ✨ Enhancement +2/-0

Add author erasure dialog translation keys

• Add confirm-dialog-title for author erasure confirmation dialog
• Add confirm-dialog-description for author erasure confirmation dialog

admin/public/ep_admin_authors/en.json

---

View more (5)

4. admin/src/utils/LoadingScreen.tsx 🐞 Bug fix +5/-0

Add Dialog title and description to loading screen

• Import VisuallyHidden from Radix and useTranslation hook
• Add visually hidden Dialog.Title with admin.loading translation
• Add visually hidden Dialog.Description with admin.loading_description translation
• Ensures loading screen dialog meets Radix a11y requirements

admin/src/utils/LoadingScreen.tsx

---

5. admin/src/pages/PadPage.tsx 🐞 Bug fix +10/-2

Add Dialog titles and descriptions to pad dialogs

• Import VisuallyHidden from Radix
• Add visually hidden Dialog.Title to delete confirmation dialog
• Add Dialog.Description (not visually hidden) to delete confirmation dialog
• Add visually hidden Dialog.Title to error dialog
• Add Dialog.Description (not visually hidden) to error dialog
• Add visually hidden Dialog.Description to create pad dialog

admin/src/pages/PadPage.tsx

---

6. admin/src/pages/AuthorPage.tsx 🐞 Bug fix +9/-4

Add Dialog title and description to author erasure dialog

• Import VisuallyHidden from Radix
• Add visually hidden Dialog.Title and Dialog.Description at dialog root level
• Remove Dialog.Title wrapper from preview heading (now plain h3)
• Ensures dialog has accessible title/description during all phases including loading

admin/src/pages/AuthorPage.tsx

---

7. admin/package.json Dependencies +1/-0

Add Radix visually-hidden dependency

• Add @radix-ui/react-visually-hidden v1.2.3 to devDependencies
• Required for hiding dialog titles/descriptions visually while keeping them accessible to screen
 readers

admin/package.json

---

8. pnpm-lock.yaml Dependencies +11/-8

Update lock file with new dependency

• Update lock file with @radix-ui/react-visually-hidden v1.2.3 and its dependencies
• Update ESLint resolver dependency specifications for consistency

pnpm-lock.yaml

---

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (1) 📎 Requirement gaps (0)

Context used

✅ Tickets: 🎫 console errors/warnings

1. 4-space indent in test 📘 Rule violation ⚙ Maintainability

Description

The new test file uses 4-space indentation on the chained .filter()/.map() lines, which deviates
from the required 2-space indentation style. This can cause formatting inconsistency and potential
lint/style check failures.

Code

src/tests/backend-new/specs/template-l10n-keys.test.ts[R27-29]

Evidence

PR Compliance ID 9 requires 2-space indentation for all new/modified code. The added method-chaining
lines in the new test file are indented with 4 spaces (    .filter,     .map).

src/tests/backend-new/specs/template-l10n-keys.test.ts[27-29]
Best Practice: Repository guidelines

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
New code in `template-l10n-keys.test.ts` uses 4-space indentation for method-chaining continuation lines, which conflicts with the repo rule requiring 2-space indentation.

## Issue Context
This file was added as part of this PR, so formatting should match the project’s 2-space indentation convention.

## Fix Focus Areas
- src/tests/backend-new/specs/template-l10n-keys.test.ts[27-29]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Generic dialog title used 🐞 Bug ≡ Correctness

Description

In AuthorPage’s author-erasure confirmation dialog, the only Radix Dialog.Title is now a
visually-hidden generic string, while the visible heading that includes the author name is no longer
the dialog title. This makes the dialog’s accessible title lose the per-author context in the
preview/committing phases.

Code

admin/src/pages/AuthorPage.tsx[R157-170]

Evidence

The dialog always renders a visually-hidden Dialog.Title/Dialog.Description with generic
strings, but the preview/committing phase renders a separate <h3> (with the author name) that is
no longer inside Dialog.Title (the previous Dialog.Title asChild wrapper was removed).

admin/src/pages/AuthorPage.tsx[153-171]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`AuthorPage` renders a visually-hidden, generic `Dialog.Title` (`confirm-dialog-title`) for all phases, but the preview/committing UI shows a more specific visible `<h3>` that includes the author name. Because the visible heading is no longer wrapped by `Dialog.Title`, screen readers will get the generic title instead of the per-author title.

### Issue Context
This change removed the previous `Dialog.Title asChild` wrapper around the dynamic `<h3>`.

### Fix Focus Areas
- admin/src/pages/AuthorPage.tsx[153-200]

### Suggested fix
- Keep a hidden `Dialog.Title` only for the `loading-preview` phase (when there is no visible heading), OR
- Wrap the existing `<h3>` with `Dialog.Title asChild` during `preview`/`committing` (restoring the prior behavior), so the dialog title includes `{name: p.name || p.authorID}`.
- Similarly consider whether the generic hidden `Dialog.Description` should be phase-specific or replaced with a description that matches the preview content.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---