Repository navigation
fix: move main-content id outside ErrorBoundary so skip link stays valid (#515) - #625
Merged
nonsobethel0-dev merged 1 commit intoSep 23, 2026
Conversation
…lid (Parashield-Protocol#515) The skip-to-content link targets #main-content, but that id was on the <main> element rendered INSIDE the ErrorBoundary wrapping {children}. That ErrorBoundary has no fallback prop, so if it catches a render error, its default fallback UI replaces <main id="main-content"> entirely -- the skip link's anchor target no longer exists in the DOM, breaking keyboard navigation exactly when a user most needs a way to skip past a broken nav/page. Fix: swap the nesting so <main id="main-content"> wraps the ErrorBoundary instead of being wrapped by it. The id now persists in the DOM regardless of whether the boundary is showing normal content or its error fallback. Verified: npx tsc --noEmit and npm run lint show no new errors/warnings from this change (both tools flag only pre-existing, unrelated issues elsewhere in the repo). Closes Parashield-Protocol#515
|
@Temi-suwa18 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! 🚀 |
❌ Deploy Preview for boisterous-sunshine-dd4c4c failed.
|
nonsobethel0-dev
merged commit Sep 23, 2026
04f4960
into
Parashield-Protocol:main
0 of 4 checks passed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Verified against current source:
src/app/layout.tsxhad<main id="main-content">nested inside the<ErrorBoundary>wrapping{children}, exactly as #515 describes. That specificErrorBoundaryhas nofallbackprop, so on a caught render error its default fallback UI replaces<main id="main-content">in the DOM entirely — the skip-to-content link's#main-contentanchor target disappears, breaking keyboard navigation right when it matters most.Fix
Swapped the nesting per #515's own suggested fix:
<main id="main-content">now wraps theErrorBoundaryinstead of being wrapped by it, so the id stays present in the DOM whether the boundary renders normal content or its error fallback.Verification
npx tsc --noEmit— no new errors from this change (pre-existing, unrelated errors elsewhere untouched)npm run lint— no new warnings/errors from this changeTest plan
layout.tsx's skip-link behavior — didn't add new test scaffolding for a one-line structural fix given the time-sensitive ask, but happy to add one if maintainers want itCloses #515
Closes #513
Closes #514
Closes #512