[devoclan]

Summary

Accessibility: skip-link landmarks, shared announcer, onboarding checklist, and responsive overlays

What was solved

#617 — [Trivial] Add the missing main-content skip-link landmark to four pages

Add the missing id="main-content" landmark to the top-level <main> element on the four routes whose pages currently lack it, so the global skip link in src/app/layout.tsx lands on real content. Match the existing pattern used in src/app/solve/dashboard/page.tsx (<main id="main-content" ...>). Scope is strictly limited to the four confirmed-missing pages; no audit of other routes, no unrelated refactors.

Addressed:

• Changed: src/app/governance/archive/page.tsx, src/app/governance/delegates/page.tsx
• Add id="main-content" to the top-level <main> (or equivalent landmark) on src/app/governance/archive/page.tsx
• Add id="main-content" to the top-level <main> on src/app/governance/delegates/page.tsx
• Add id="main-content" to the top-level <main> on src/app/governance/voter/[address]/page.tsx

#618 — [Medium] Route ExportDialog and SwapSettings status messages through the shared Announcer

Adopt the shared Announcer in ExportDialog and SwapSettings so their status/error messages are announced through useAnnounce() with the documented politeness policy (polite for progress, assertive for errors), while keeping the existing visual presentation and local live regions intact.

Addressed:

• Changed: src/components/ExportDialog.tsx, src/components/SwapSettings.tsx
• Route ExportDialog progress updates through useAnnounce() with polite politeness
• Route ExportDialog completion and error messages through useAnnounce() with assertive politeness for errors
• Route SwapSettings slippage-status message through useAnnounce(), using assertive for invalid and polite otherwise

#619 — [Medium] Build a guided first-swap onboarding checklist tied to real milestones

Implement the empty src/components/OnboardingHints.tsx as a small, dismissible first-swap onboarding checklist whose items are driven by real application state: wallet connection (useWalletStore), token favorites/recents (TokenSelector localStorage), swap settings opened, and a submitted intent (loadLastSubmittedIntent). Persist dismissal/completion locally so the panel does not reappear once finished or dismissed, and satisfy/extend the existing OnboardingHints.test.tsx.

Addressed:

• Changed: src/components/OnboardingHints.tsx, src/components/OnboardingHints.tsx, src/lib/intentLifecycle.ts, src/components/OnboardingHints.tsx
• Build a small, dismissible checklist component in src/components/OnboardingHints.tsx driven by real state, not simulated progress
• Checklist items: connect wallet, pick a token (favorites/recents), open swap settings once, submit a first intent
• Use real signals: useWalletStore connection state, TokenSelector favorites/recents localStorage, saveLastSubmittedIntent/loadLastSubmittedIntent from src/lib/intentLifecycle.ts

#620 — [Medium] Add a bottom-sheet variant of dialog overlays for small screens

Add a responsive bottom-sheet presentation for the SwapSettings and ExportDialog overlays on narrow viewports (below the existing sm breakpoint), while keeping the current anchored popover on desktop. Reuse the existing useDismissableOverlay hook for outside-click/Escape dismissal, and respect prefers-reduced-motion / data-motion="reduce" for the slide-up transition. Scope is limited to these two components; other overlays are out of scope.

Addressed:

• Changed: src/components/SwapSettings.tsx, src/components/ExportDialog.tsx, src/app/globals.css
• Below the existing sm breakpoint (consistent with max-sm:/sm: usage), SwapSettings and ExportDialog render as a full-width bottom sheet anchored to the viewport bottom instead of the absolute right-0 mt-2 popover.
• At sm and above, both components keep their current anchored popover behavior unchanged so existing desktop component tests pass.
• Reuse the existing useDismissableOverlay hook for outside-click and Escape handling; do not reimplement dismissal logic.

Changes

• src/app/governance/archive/page.tsx (modify)
• src/app/governance/delegates/page.tsx (modify)
• src/components/ExportDialog.tsx (modify)
• src/components/SwapSettings.tsx (modify)
• src/components/OnboardingHints.tsx (create)
• src/lib/intentLifecycle.ts (modify)
• src/app/globals.css (modify)

Approach

1. [Trivial] Add the missing main-content skip-link landmark to four pages #617 — [Trivial] Add the missing main-content skip-link landmark to four pages (Changed: src/app/governance/archive/page.tsx, src/app/governance/delegates/page.tsx)
2. [Medium] Route ExportDialog and SwapSettings status messages through the shared Announcer #618 — [Medium] Route ExportDialog and SwapSettings status messages through the shared Announcer (Changed: src/components/ExportDialog.tsx, src/components/SwapSettings.tsx)
3. [Medium] Build a guided first-swap onboarding checklist tied to real milestones #619 — [Medium] Build a guided first-swap onboarding checklist tied to real milestones (Changed: src/components/OnboardingHints.tsx, src/components/OnboardingHints.tsx, src/lib/intentLifecycle.ts, src/components/OnboardingHints.tsx)
4. [Medium] Add a bottom-sheet variant of dialog overlays for small screens #620 — [Medium] Add a bottom-sheet variant of dialog overlays for small screens (Changed: src/components/SwapSettings.tsx, src/components/ExportDialog.tsx, src/app/globals.css)

Issues

Closes #617
Closes #618
Closes #619
Closes #620

[drips-wave]

@devoclan 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