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:
@@ -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')) {
|
||||
|
||||
Reference in New Issue
Block a user