From 72d7803be5f1da297bee264083c81544ea546964 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 21 May 2026 18:40:34 +0200
Subject: [PATCH] feat(uat-batch-19): a11y th scopes + legend styling + i18n
 locale fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Raw `<th>` cells gain `scope="col"` so SR users get proper column
  association: berth-interests-tab, bulk-add-berths-wizard,
  clients/bulk-hard-delete-dialog. shadcn `<TableHead>` migration
  would be cleaner but the scope attribute is the minimum-effort fix
  the queue's a11y entry asks for.
- supplemental-info form `<legend>` elements styled with
  `mb-2 px-1 font-semibold` so they read as section headings rather
  than blending into the surrounding fieldset border (default browser
  legend rendering is barely visible).
- payments-section: invalid `'en-EU'` BCP-47 locale → `undefined` to
  honour browser locale.
- ui/calendar: literal `'default'` → `undefined` on the month
  dropdown formatter, same reason.

tsc clean. 1419/1419 vitest pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../public/supplemental-info/[token]/page.tsx |  6 ++--
 .../admin/bulk-add-berths-wizard.tsx          | 30 ++++++++++++++-----
 src/components/berths/berth-interests-tab.tsx | 22 ++++++++++----
 .../clients/bulk-hard-delete-dialog.tsx       |  8 +++--
 src/components/interests/payments-section.tsx |  5 +++-
 src/components/ui/calendar.tsx                |  5 +++-
 6 files changed, 56 insertions(+), 20 deletions(-)

diff --git a/src/app/public/supplemental-info/[token]/page.tsx b/src/app/public/supplemental-info/[token]/page.tsx
index 238e008b..dc946428 100644
--- a/src/app/public/supplemental-info/[token]/page.tsx
+++ b/src/app/public/supplemental-info/[token]/page.tsx
@@ -195,7 +195,7 @@ export default function SupplementalInfoPage({ params }: PageProps) {
         </div>
 
         <fieldset className="space-y-4">
-          <legend className="text-sm font-semibold">Your details</legend>
+          <legend className="mb-2 px-1 text-sm font-semibold text-foreground">Your details</legend>
           <div className="space-y-1.5">
             <Label htmlFor="fullName">Full name</Label>
             <Input
@@ -244,7 +244,9 @@ export default function SupplementalInfoPage({ params }: PageProps) {
         </fieldset>
 
         <fieldset className="space-y-4">
-          <legend className="text-sm font-semibold">Your yacht (optional)</legend>
+          <legend className="mb-2 px-1 text-sm font-semibold text-foreground">
+            Your yacht (optional)
+          </legend>
           <div className="space-y-1.5">
             <Label htmlFor="yachtName">Yacht name</Label>
             <Input
diff --git a/src/components/admin/bulk-add-berths-wizard.tsx b/src/components/admin/bulk-add-berths-wizard.tsx
index a785006e..df6d3f3a 100644
--- a/src/components/admin/bulk-add-berths-wizard.tsx
+++ b/src/components/admin/bulk-add-berths-wizard.tsx
@@ -227,14 +227,28 @@ export function BulkAddBerthsWizard() {
           <table className="w-full text-xs">
             <thead>
               <tr className="border-b text-left text-muted-foreground">
-                <th className="py-2 pr-2">Mooring</th>
-                <th className="py-2 pr-2">Length (ft)</th>
-                <th className="py-2 pr-2">Width (ft)</th>
-                <th className="py-2 pr-2">Draft (ft)</th>
-                <th className="py-2 pr-2">Side pontoon</th>
-                <th className="py-2 pr-2">Price</th>
-                <th className="py-2 pr-2">Currency</th>
-                <th className="py-2 pr-2" />
+                <th scope="col" className="py-2 pr-2">
+                  Mooring
+                </th>
+                <th scope="col" className="py-2 pr-2">
+                  Length (ft)
+                </th>
+                <th scope="col" className="py-2 pr-2">
+                  Width (ft)
+                </th>
+                <th scope="col" className="py-2 pr-2">
+                  Draft (ft)
+                </th>
+                <th scope="col" className="py-2 pr-2">
+                  Side pontoon
+                </th>
+                <th scope="col" className="py-2 pr-2">
+                  Price
+                </th>
+                <th scope="col" className="py-2 pr-2">
+                  Currency
+                </th>
+                <th scope="col" className="py-2 pr-2" />
               </tr>
               <tr className="border-b bg-muted/30">
                 <td className="py-1 pr-2 text-[10px] text-muted-foreground">apply to all →</td>
diff --git a/src/components/berths/berth-interests-tab.tsx b/src/components/berths/berth-interests-tab.tsx
index cf90ff53..0a41f8be 100644
--- a/src/components/berths/berth-interests-tab.tsx
+++ b/src/components/berths/berth-interests-tab.tsx
@@ -146,12 +146,22 @@ export function BerthInterestsTab({ berthId }: BerthInterestsTabProps) {
         <table className="w-full text-sm" data-testid="berth-interests-table">
           <thead className="bg-muted/40 text-left text-xs font-medium text-muted-foreground">
             <tr>
-              <th className="px-3 py-2">Client</th>
-              <th className="px-3 py-2">Stage</th>
-              <th className="px-3 py-2">Category</th>
-              <th className="px-3 py-2">Source</th>
-              <th className="px-3 py-2">Last activity</th>
-              <th className="px-3 py-2 text-right" />
+              <th scope="col" className="px-3 py-2">
+                Client
+              </th>
+              <th scope="col" className="px-3 py-2">
+                Stage
+              </th>
+              <th scope="col" className="px-3 py-2">
+                Category
+              </th>
+              <th scope="col" className="px-3 py-2">
+                Source
+              </th>
+              <th scope="col" className="px-3 py-2">
+                Last activity
+              </th>
+              <th scope="col" className="px-3 py-2 text-right" />
             </tr>
           </thead>
           <tbody>
diff --git a/src/components/clients/bulk-hard-delete-dialog.tsx b/src/components/clients/bulk-hard-delete-dialog.tsx
index d650b056..79751dfb 100644
--- a/src/components/clients/bulk-hard-delete-dialog.tsx
+++ b/src/components/clients/bulk-hard-delete-dialog.tsx
@@ -182,8 +182,12 @@ function BulkHardDeleteDialogBody({ onOpenChange, clientIds, onDeleted }: Props)
             <table className="w-full text-xs">
               <thead className="bg-muted/50 sticky top-0">
                 <tr>
-                  <th className="text-left px-2 py-1.5 font-medium">Client ID</th>
-                  <th className="text-left px-2 py-1.5 font-medium">Reason</th>
+                  <th scope="col" className="text-left px-2 py-1.5 font-medium">
+                    Client ID
+                  </th>
+                  <th scope="col" className="text-left px-2 py-1.5 font-medium">
+                    Reason
+                  </th>
                 </tr>
               </thead>
               <tbody>
diff --git a/src/components/interests/payments-section.tsx b/src/components/interests/payments-section.tsx
index e98ed027..522e06c4 100644
--- a/src/components/interests/payments-section.tsx
+++ b/src/components/interests/payments-section.tsx
@@ -64,7 +64,10 @@ function formatMoney(amount: string, currency: string): string {
   const n = Number(amount);
   if (!Number.isFinite(n)) return `${amount} ${currency}`;
   try {
-    return new Intl.NumberFormat('en-EU', { style: 'currency', currency }).format(n);
+    // `undefined` locale honours the user's browser locale. The
+    // previous `'en-EU'` literal is not a valid BCP-47 tag — every
+    // implementation falls back to the default anyway.
+    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(n);
   } catch {
     return `${n.toFixed(2)} ${currency}`;
   }
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
index 5bbaedbb..9d975534 100644
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -32,7 +32,10 @@ function Calendar({
       )}
       captionLayout={captionLayout}
       formatters={{
-        formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
+        // `undefined` honours the browser locale. The previous
+        // `'default'` literal is treated as undefined by every modern
+        // engine but reads as if a specific locale were intended.
+        formatMonthDropdown: (date) => date.toLocaleString(undefined, { month: 'short' }),
         ...formatters,
       }}
       classNames={{