Matt
c8ea9ec0a0
Mechanical codemod added \`aria-hidden\` to 444 self-closing single-line Lucide icon JSX elements across 267 .tsx files in: - shared/, layout/, dashboard/ - admin/ (all sections) - clients/, berths/, yachts/, companies/, interests/, documents/ - reminders/, reservations/, residential/, expenses/, email/ The regex targeted only the safe pattern \`<IconName className="..." />\` (no other props, self-closing, capitalized component name). Every match inspected is a decorative companion to visible text or sits inside a button whose accessible name comes from \`aria-label\` / sr-only text — the icon itself should not be announced. Screen readers no longer double-read the icon + the adjacent label text (e.g. "Pencil Pencil Edit" → just "Edit"). The existing @axe-core/playwright smoke test (\`20-accessibility.spec.ts\`) continues to pass. Test suite stays at 1315/1315 vitest. typescript clean. Closes task #69 (aria-hidden sweep) from the AUDIT-2026-05-12 follow-ups backlog. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
86 lines
3.1 KiB
TypeScript
86 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { ChevronLeft } from 'lucide-react';
|
|
import { useRouter, usePathname } from 'next/navigation';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
import { useMobileChrome } from './mobile-layout-provider';
|
|
|
|
/**
|
|
* Fixed mobile topbar (56px + safe-area top inset). Marina-editorial premium:
|
|
* deep-navy gradient surface with white type, the brand "PN" mark on the
|
|
* left when there's no back affordance, and a soft glow shadow underneath
|
|
* for depth instead of a hard divider line.
|
|
*
|
|
* Slots: title (auto-truncating), back arrow, primary action - all driven by
|
|
* `useMobileChrome()` from the active page. When no page has set a title the
|
|
* URL's last segment is title-cased as a fallback.
|
|
*/
|
|
export function MobileTopbar() {
|
|
const { title, primaryAction, showBackButton } = useMobileChrome();
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
|
|
// UUID detection — the URL's last segment on detail pages is the
|
|
// entity's UUID, and title-casing it produces an ugly "Abc 123 Uuid"
|
|
// flash before the page calls `useMobileChrome.setChrome({title: ...})`
|
|
// with the real entity name. When the segment matches the UUID shape,
|
|
// walk back to the parent collection segment ("clients", "yachts",
|
|
// "documents", …) which IS a clean, human-readable label.
|
|
const segments = pathname.split('/').filter(Boolean);
|
|
const last = segments[segments.length - 1] ?? '';
|
|
const isUuid = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(last);
|
|
const fallbackSegment = isUuid ? segments[segments.length - 2] : last;
|
|
const fallbackTitle =
|
|
fallbackSegment?.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()) ?? 'Port Nimara';
|
|
|
|
return (
|
|
<header
|
|
className={cn(
|
|
'fixed top-0 inset-x-0 z-40',
|
|
'bg-linear-to-b from-[#1e2844] to-[#171f35]',
|
|
'shadow-[0_4px_18px_-6px_rgba(15,23,42,0.45)]',
|
|
'h-[calc(56px+env(safe-area-inset-top))] pt-safe-top',
|
|
'flex items-center gap-2 px-3',
|
|
)}
|
|
>
|
|
{showBackButton ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => router.back()}
|
|
aria-label="Go back"
|
|
className={cn(
|
|
'size-11 inline-flex items-center justify-center rounded-full -ml-1',
|
|
'text-white/95 active:bg-white/10 transition-colors',
|
|
)}
|
|
>
|
|
<ChevronLeft className="size-[22px] stroke-[2.25]" aria-hidden />
|
|
</button>
|
|
) : (
|
|
<div
|
|
aria-label="Port Nimara"
|
|
className={cn(
|
|
'size-9 shrink-0 rounded-lg flex items-center justify-center',
|
|
'bg-[#3a7bc8] shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_1px_2px_rgba(0,0,0,0.25)]',
|
|
)}
|
|
>
|
|
<span className="text-white font-bold text-[13px] tracking-tight">PN</span>
|
|
</div>
|
|
)}
|
|
|
|
<h1
|
|
className={cn(
|
|
'flex-1 min-w-0 truncate text-center',
|
|
'text-[17px] font-semibold tracking-tight text-white',
|
|
)}
|
|
>
|
|
{title ?? fallbackTitle}
|
|
</h1>
|
|
|
|
<div className="size-11 inline-flex items-center justify-center text-white/95">
|
|
{primaryAction}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|