fix(frontend): design-review polish — table-compact height, header type-scale, tabs a11y
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>
This commit is contained in:
@@ -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`}
|
||||
|
||||
Reference in New Issue
Block a user