From 790ced42048391418233b61600c2dc63fb35c73c Mon Sep 17 00:00:00 2001
From: Knacky <knckydev@gmail.com>
Date: Sun, 21 Jun 2026 22:18:09 +0200
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20design-review=20polish=20?=
 =?UTF-8?q?=E2=80=94=20table-compact=20height,=20header=20type-scale,=20ta?=
 =?UTF-8?q?bs=20a11y?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix 1 (A): move row height constraint from min-height on tbody tr
(CSS no-op on table-row) to height: 32px on td (works on table-cell).
Fix 2 (A): table header text-[11px] -> text-[12px] to align with
documented caption scale.
Fix 3: add aria-controls + id to Tabs buttons; wrap active tab content
in role="tabpanel" + aria-labelledby in EngagementDetailPage.
Test: add aria-controls/id assertion to Tabs.test.tsx (234 total).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/Tabs.tsx            |  2 +
 frontend/src/pages/EngagementDetailPage.tsx | 58 ++++++++++++---------
 frontend/src/styles/index.css               |  4 +-
 frontend/tests/components/Tabs.test.tsx     | 10 ++++
 4 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/Tabs.tsx b/frontend/src/components/Tabs.tsx
index 5f7a8be..3bf5831 100644
--- a/frontend/src/components/Tabs.tsx
+++ b/frontend/src/components/Tabs.tsx
@@ -21,8 +21,10 @@ export function Tabs({ items, activeId, onChange }: TabsProps): JSX.Element {
         return (
           <button
             key={item.id}
+            id={`tab-${item.id}`}
             role="tab"
             aria-selected={isActive}
+            aria-controls={`tabpanel-${item.id}`}
             type="button"
             onClick={() => onChange(item.id)}
             className={`tab-underline${isActive ? ' tab-underline-active' : ''} pb-xs`}
diff --git a/frontend/src/pages/EngagementDetailPage.tsx b/frontend/src/pages/EngagementDetailPage.tsx
index 589c6f3..ad9ce65 100644
--- a/frontend/src/pages/EngagementDetailPage.tsx
+++ b/frontend/src/pages/EngagementDetailPage.tsx
@@ -68,34 +68,40 @@ export function EngagementDetailPage(): JSX.Element {
 
       <Tabs items={tabs} activeId={activeTab} onChange={setActiveTab} />
 
-      {activeTab === 'schedule' && (
-        <div className="card-product">
-          <h2 className="text-[20px] font-medium mb-md">Schedule</h2>
-          <dl className="grid grid-cols-2 gap-md text-[14px]">
-            <dt className="text-graphite">Start date</dt>
-            <dd className="text-ink font-mono">{eng.start_date}</dd>
-            <dt className="text-graphite">End date</dt>
-            <dd className="text-ink font-mono">{eng.end_date ?? '—'}</dd>
-            <dt className="text-graphite">Status</dt>
-            <dd className="text-ink capitalize">{eng.status}</dd>
-            <dt className="text-graphite">Created at</dt>
-            <dd className="text-ink font-mono">{eng.created_at}</dd>
-          </dl>
-        </div>
-      )}
+      <div
+        role="tabpanel"
+        id={`tabpanel-${activeTab}`}
+        aria-labelledby={`tab-${activeTab}`}
+      >
+        {activeTab === 'schedule' && (
+          <div className="card-product">
+            <h2 className="text-[20px] font-medium mb-md">Schedule</h2>
+            <dl className="grid grid-cols-2 gap-md text-[14px]">
+              <dt className="text-graphite">Start date</dt>
+              <dd className="text-ink font-mono">{eng.start_date}</dd>
+              <dt className="text-graphite">End date</dt>
+              <dd className="text-ink font-mono">{eng.end_date ?? '—'}</dd>
+              <dt className="text-graphite">Status</dt>
+              <dd className="text-ink capitalize">{eng.status}</dd>
+              <dt className="text-graphite">Created at</dt>
+              <dd className="text-ink font-mono">{eng.created_at}</dd>
+            </dl>
+          </div>
+        )}
 
-      {activeTab === 'description' && (
-        <div className="card-product">
-          <h2 className="text-[20px] font-medium mb-md">Description</h2>
-          <p className="text-[16px] text-charcoal whitespace-pre-line">
-            {eng.description?.trim() ? eng.description : 'No description provided.'}
-          </p>
-        </div>
-      )}
+        {activeTab === 'description' && (
+          <div className="card-product">
+            <h2 className="text-[20px] font-medium mb-md">Description</h2>
+            <p className="text-[16px] text-charcoal whitespace-pre-line">
+              {eng.description?.trim() ? eng.description : 'No description provided.'}
+            </p>
+          </div>
+        )}
 
-      {activeTab === 'simulations' && (
-        <SimulationList engagementId={eng.id} />
-      )}
+        {activeTab === 'simulations' && (
+          <SimulationList engagementId={eng.id} />
+        )}
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index 31d34d3..b9c49f5 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -179,16 +179,16 @@
 
   /* ─── Compact table density (L4) — 32px row height, global ──────────── */
   .table-compact thead tr {
-    @apply text-[11px] uppercase tracking-[0.5px] text-graphite;
+    @apply text-[12px] uppercase tracking-[0.5px] text-graphite;
   }
   .table-compact th {
     @apply px-md py-xxs;
   }
   .table-compact td {
     @apply px-md py-xxs caption-md;
+    height: 32px;
   }
   .table-compact tbody tr {
     @apply border-b border-hairline last:border-0;
-    min-height: 32px;
   }
 }
diff --git a/frontend/tests/components/Tabs.test.tsx b/frontend/tests/components/Tabs.test.tsx
index 6fffbe1..d0c660b 100644
--- a/frontend/tests/components/Tabs.test.tsx
+++ b/frontend/tests/components/Tabs.test.tsx
@@ -49,6 +49,16 @@ describe('Tabs', () => {
     expect(onChange).toHaveBeenCalledWith('description');
   });
 
+  it('sets aria-controls and id on each tab button', () => {
+    render(<Tabs items={ITEMS} activeId="schedule" onChange={vi.fn()} />);
+    const schedBtn = screen.getByRole('tab', { name: /Schedule/i });
+    expect(schedBtn).toHaveAttribute('id', 'tab-schedule');
+    expect(schedBtn).toHaveAttribute('aria-controls', 'tabpanel-schedule');
+    const simsBtn = screen.getByRole('tab', { name: /Simulations/i });
+    expect(simsBtn).toHaveAttribute('id', 'tab-simulations');
+    expect(simsBtn).toHaveAttribute('aria-controls', 'tabpanel-simulations');
+  });
+
   it('has no rounded-md, transition-*, or shadow-* on tab buttons (brutalism)', () => {
     render(<Tabs items={ITEMS} activeId="schedule" onChange={vi.fn()} />);
     for (const btn of screen.getAllByRole('tab')) {