Skip to main content
  • Scope: All surfaces using BackNav, DetailPageLayout (via backHref/onBack), and MobileHeader.
  • Owner: PF mobile UX
  • Related: PF-37 (mobile navigation), BackNav.tsx, DetailPageLayout.tsx, MobileHeader.tsx
  • Last updated: 2026-06-02
  • Automated coverage: tests/e2e/platform/prominent-back-button.spec.ts

​
Visual + behavior standard (enforced)

Every back control must:
  1. ✅ Render as an outline button (visible border, not ghost/transparent).
  2. ✅ Show a visible “Back” label beside the icon (or context-specific, e.g. “Back to Reports”).
  3. ✅ Desktop: always visible on sub-pages. Mobile: the global MobileHeader back button is the sole back affordance — in-page BackNav is suppressed automatically by PageHeader and DetailPageLayout.
  4. ✅ Meet a minimum 44 × 44 px touch target (touch-target-h class applied).
  5. ✅ Provide aria-label for screen readers; icon is aria-hidden.
  6. ✅ No double-back on mobile (two back controls with possibly different destinations).
Icon: ArrowLeft only — ChevronLeft is reserved for non-back controls (e.g. collapse, breadcrumbs).

​
Mobile back architecture (decision)

One global back button lives in MobileHeader (via useMobileBack). All page-level back primitives (PageHeader.backNav, DetailPageLayout) suppress on mobile. Pages with a materially different back destination may opt in via forceBackNavOnMobile={true} on PageHeader.

​
Pre-flight

  1. Sign in to the NorthSight Recovery test org using the credentials in docs/testing/TESTING_SETUP_AND_RUN.md (§9 AI / interactive browser testing).
  2. Open browser devtools and set the viewport to 390 × 844 (iPhone 12/13/14 baseline).
  3. Have a second viewport ready at 1280 × 720 (desktop baseline).
  4. Use a recent Chromium build (Chrome/Edge ≥ 122) for the primary pass.

​
Pass / fail rule

For every route below, confirm all assertions at both viewport sizes where applicable:
  1. ✅ Desktop: outline button with visible label renders above the page title.
  2. ✅ Desktop: clicking navigates to the correct parent.
  3. ✅ Desktop touch target ≥ 44 × 44 px.
  4. ✅ Mobile: only MobileHeader back button is visible (no in-body duplicate).
  5. ✅ Mobile: MobileHeader back button is hidden on root dashboards (no back from home).
Mark ❌, capture screenshot, and file a bug referencing this checklist on any failure.

​
Shared primitives

​
Migrated inline back buttons (representative sample)

​
Intentional skips (inline back not migrated — documented)

These files have inline back controls that cannot be cleanly migrated yet (complex action clusters, wizard-step dual-use, ListPageLayout.actions). Tracked in INTENTIONAL_SKIP_ALLOWLIST in scripts/audit/audit-back-navigation.ts.

​
Icon-only opt-outs

These surfaces pass showLabel={false} explicitly. Confirm the decision is still intentional and the touch target remains ≥ 44 × 44 px.

​
Automated coverage

tests/e2e/platform/prominent-back-button.spec.ts covers:
  • ✅ Desktop: outline button visible + border class present
  • ✅ Desktop: touch target ≥ 36 px height (outline sm button)
  • ✅ Mobile: at most one back button visible (no double-back)
  • ✅ Mobile: header back visible on non-root routes
  • ✅ Mobile: header back hidden on root dashboards
Run with: npm run test:e2e -- tests/e2e/platform/prominent-back-button.spec.ts

​
Sign-off

​
Out of scope

  • Wizard-shell step-back buttons — inside PF-41 wizard shells with their own navigation semantics.
  • Pagination chevrons, carousel arrows, collapsible chevrons — excluded by design.
  • Intentional skip files (documented in the table above).