feat(a11y,mobile): implement mobile nav drawer and a11y improvements

[privexlabs]

Summary

• Implements mobile slide-over navigation drawer for merchant layout (Implement mobile sidebar navigation drawer for merchants #18)
• Ensures color is not the only means of conveying information (Ensure color is not the only means of conveying information #17)
• Adds aria-live region for dynamic content announcements (Add aria-live region for dynamic content updates #16)
• Verifies and completes focus management in payment link dialog (Add focus trap to modals and dialogs #15)
• Fixes two pre-existing bugs: useNotify called inside parameter list in TransactionDetail.tsx, and
  missing notify initialization in PaymentsPage

Changes

#18 — Mobile navigation drawer

• New components/layout/MobileNavDrawer.tsx: framer-motion slide-in from left, semi-transparent
  backdrop, visible close (X) button, Escape key, body scroll lock, role="dialog", aria-modal="true",
  aria-label="Navigation", aria-current="page" on active link
• app/(merchant)/layout.tsx: wired drawer to existing mobileMenuOpen state with useCallback to prevent
  stale closure in Escape handler
• components/layout/MerchantSidebar.tsx: exported navItems so the drawer reuses the same nav structure
• components/layout/Topbar.tsx: added aria-controls="mobile-nav" to hamburger button

#17 — Color not sole means of conveying information

• components/layout/MerchantSidebar.tsx: added aria-current="page" on the active nav link (screen readers
  announce this natively)
• components/layout/Topbar.tsx: fixed unreadNotificationCount prop not being destructured; notification
  button aria-label now uses the computed notificationLabel (e.g. "Notifications (3 unread)"); visual red
  dot marked aria-hidden="true"
• components/shared/StatusBadge.tsx: already compliant — icon + text label for all states, no change needed

#16 — aria-live region for dynamic content

• New lib/utils/announce.ts: minimal DOM-write utility (clears then sets with 100ms delay so AT can
  re-announce)
• app/layout.tsx: added <div id="announcer" aria-live="polite" aria-atomic="true" className="sr-only" /> —
  always in DOM, never conditionally mounted
• lib/hooks/useNotify.ts: calls announce(message) alongside each toast.* call
• app/(merchant)/transactions/page.tsx: added <p role="status" className="sr-only"> with live result count
  that updates as the search term changes

#15 — Focus trap in payment link dialog

• app/(merchant)/payments/page.tsx: added autoFocus to the label input so initial focus is explicit when
  the dialog opens
• @base-ui/react Dialog v1.5 handles focus trapping, Tab cycling, Escape to close, and focus-return to
  trigger natively — verified <Dialog.Close> is already rendered inside DialogContent

Test Plan

• Mobile (<768px): tap hamburger → drawer slides in from left; tap backdrop → closes; tap X → closes;
  press Escape → closes; tap any nav link → navigates and drawer closes; page does not scroll behind drawer
• Desktop (≥768px): drawer and backdrop are not visible; sidebar behaves as before
• Screen reader (VoiceOver): trigger a toast → announcement heard via live region; type in Transactions
  search → result count announced; active sidebar link reads "current page"
• Keyboard: open payment link dialog → focus lands on Label input; Tab cycles only within dialog; Escape
  closes and returns focus to "New Payment Link" button
• DOM inspection: active sidebar link has aria-current="page"; notification button aria-label reflects
  unread count; red dot has aria-hidden="true"

Resolves #15
Resolves #16
Resolves #17
Resolves #18

[vercel]

@privexlabs is attempting to deploy a commit to the therealjhay's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

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