fix(tradein/v2): keep top nav active over overlays, stronger «К оценке» button, backdrop-close #2193

Merged

lekss361 merged 1 commit from fix/tradein-v2-overlay-nav-backdrop into main

2026-07-02 18:39:28 +00:00

bot-frontend commented

2026-07-02 18:29:55 +00:00

Collaborator

Summary

Three UX fixes on the /trade-in/v2 section overlays (История / Продажи в доме / Аналогичные объявления / Аналитика / Предыдущие оценки), per user feedback. Frontend only.

Top nav stays interactive while an overlay is open. The a11y audit (#2081) applied inert to the whole content wrap — which contains TopNav — so opening an overlay disabled/blocked the top tabs. Moved inert off the wrap onto <main>/<footer> only; the nav is inerted only for the full-screen LocationDrawer. Users can now switch sections directly from an open overlay. role=dialog / aria-modal / Esc / focus-trap / focus-restore all preserved.
«← К ОЦЕНКЕ» is now a clear filled primary button (solid accentDeep bg, white text ≥4.9:1 AA, subtle shadow, hover lift) instead of the weak ghost pill. Uses existing accent tokens only.
Click on the backdrop closes the overlay (in addition to Esc). A transparent sibling layer sits one z-index below the panel and starts below the nav (so tabs stay clickable); clicking the margin area around the panel closes it. Clicks inside the panel / on its buttons never reach the handler (sibling, not ancestor) so they never close it.

Files: tradein-mvp/frontend/src/app/v2/page.tsx, tradein-mvp/frontend/src/components/trade-in/v2/SectionOverlay.tsx.

Test plan

next build green (13 routes, /v2 compiled)
tsc --noEmit clean
Visual on /trade-in/v2: open an overlay, click a different top tab → switches directly; «К оценке» reads clearly as a button; click outside the panel closes it; click inside does not; Esc still closes; focus returns to the trigger.

## Summary Three UX fixes on the `/trade-in/v2` section overlays (История / Продажи в доме / Аналогичные объявления / Аналитика / Предыдущие оценки), per user feedback. Frontend only. 1. **Top nav stays interactive while an overlay is open.** The a11y audit (#2081) applied `inert` to the whole content wrap — which contains `TopNav` — so opening an overlay disabled/blocked the top tabs. Moved `inert` off the wrap onto `<main>`/`<footer>` only; the nav is inerted only for the full-screen `LocationDrawer`. Users can now switch sections directly from an open overlay. `role=dialog` / `aria-modal` / Esc / focus-trap / focus-restore all preserved. 2. **«← К ОЦЕНКЕ» is now a clear filled primary button** (solid `accentDeep` bg, white text ≥4.9:1 AA, subtle shadow, hover lift) instead of the weak ghost pill. Uses existing accent tokens only. 3. **Click on the backdrop closes the overlay** (in addition to Esc). A transparent sibling layer sits one z-index below the panel and starts below the nav (so tabs stay clickable); clicking the margin area around the panel closes it. Clicks inside the panel / on its buttons never reach the handler (sibling, not ancestor) so they never close it. Files: `tradein-mvp/frontend/src/app/v2/page.tsx`, `tradein-mvp/frontend/src/components/trade-in/v2/SectionOverlay.tsx`. ## Test plan - [x] `next build` green (13 routes, `/v2` compiled) - [x] `tsc --noEmit` clean - [ ] Visual on `/trade-in/v2`: open an overlay, click a different top tab → switches directly; «К оценке» reads clearly as a button; click outside the panel closes it; click inside does not; Esc still closes; focus returns to the trigger.

Rows
Columns