AccountShell

Usage

Keep one shell per account route family and drive section switching through the controlled tabs trio — tabs, activeTab, onTabChange. Brand the top nav through its slots (user, logo, navLinks, onSearchOpen, cartCount) and the footer through its data props; omitted props fall back to the ePassLive defaults (or empty rows).

import { AccountShell } from '@epasslive/design-system'

<AccountShell
  tabs={tabs}
  activeTab="orders"
  onTabChange={(id) => router.push(`/account/${id}`)}
  user={user}
  onSearchOpen={() => setSearchOpen(true)}
  cartCount={2}
  footerColumns={footerColumns}
>
  <h1>{t('ordersTitle')}</h1>
  {/* order list */}
</AccountShell>

Composition notes

The tabs bar is the account nav: a nav[aria-label="Account sections"] wrapping the Tabs molecule in variant="href" — one controlled state per page, no duplicated markup per route. Children land in <main role="main"> ( max-w-4xl); className appends to that main region only. Don't hand-roll a second top nav or footer inside children — the shell renders both.

Accessibility

A skip link is the first focusable element, targeting #main-content (WCAG 2.4.1 bypass blocks). The account sections bar is a labelled nav landmark whose tabs are real anchors when they carry an href and real buttons otherwise (keyboard reachable either way, WCAG 2.1.1). Main content is a <main role="main" tabIndex={-1}> landmark — a programmatic focus target with the stable id main-content (WCAG 1.3.1 / 2.4.1). Social icons are named through their ariaLabel (WCAG 4.1.2). Colors come from tokens, which meet AA contrast in both themes.

Props

AccountTab

Each entry of the tabs array is an AccountTab. Mind the href trap: entries with an href render as anchors — clicking them navigates natively and onTabChange is not called, so route changes must drive activeTab. Entries without href render as buttons that fire onTabChange (the controlled flow the demo above uses).