fix(a11y): <main> landmark + admin muted-text contrast (item 6)#216
Conversation
- ErrorBoundary now wraps its rendered page in <main id="main-content"> (both the normal and error-fallback paths). It is the single component every routed page passes through (19 usages, exactly one per page, never nested), so this yields one <main> landmark per page from a single edit instead of touching 19 branches. - Admin pages (AdStudio/DocumentCenter/PhotoManager): text-gray-400 -> text-gray-500 on light backgrounds for WCAG AA small-text contrast (same fix already applied to the customer-facing pages in P3b). Verified: frontend build OK, vitest 50/50, main-content present in bundle. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: eebcf6cd1a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| } | ||
|
|
||
| return this.props.children; | ||
| return <main id="main-content">{this.props.children}</main>; |
There was a problem hiding this comment.
Because ErrorBoundary is the root wrapper in frontend/src/main.jsx and is also used around routed pages, this unconditional <main id="main-content"> adds a second main-content id before the chat page's existing skip-link target (frontend/src/App.jsx already has href="#main-content" and a focusable chat <main id="main-content">). In that context the browser resolves the skip link to this outer wrapper, which still contains the nav and is not the intended focus target, and it also creates duplicate IDs/nested main landmarks across normal renders.
Useful? React with 👍 / 👎.
1 participant
Adds a single
<main id=main-content>landmark per page via the one ErrorBoundary every routed page passes through (19 usages, 1/page, never nested — no per-branch edits). Bumps admin-pagetext-gray-400→text-gray-500on light bg for WCAG AA (matches the customer-page P3b fix). Build OK, vitest 50/50.