Frontend component testing: keyboard, responsive, and export checks

List the semantics, input methods, states, responsive changes, public tokens, and files the component promises. A modal contract includes labelling, initial focus, Escape, focus containment, restoration, and mobile fit; a button contract is smaller but still includes label, focus, activation, pressed feedback, and disabled behavior.

Tests become more useful when each assertion protects a promised outcome instead of mirroring internal class names. Implementation can change while the user contract remains stable.

Start from the browser chrome or a known preceding control and navigate using Tab, Shift+Tab, Enter, Space, arrows, Home, End, and Escape where the pattern expects them. Verify both the visible focus indicator and resulting state after each action.

For temporary UI, test focus when opening, interacting, cancelling, confirming, and closing after an error. A single successful click does not cover the recovery paths where accessibility defects usually appear.

• Focus order matches visual order.
• Every state is reachable without a pointer.
• Focus is restored after temporary UI closes.

Use narrow phone, tablet, small desktop, and wide desktop viewports, then add long labels and zoom. Check for horizontal overflow, clipped focus rings, hidden actions, unreadable previews, and components that become absurdly large because their layout assumes a full page.

Repeat in light and dark themes, reduced motion, and forced colors where relevant. Visual regression screenshots are useful for stable states, but interaction and accessibility assertions still need semantic checks.

The library wrapper may provide fonts, resets, variables, or scripts that are absent from the download. Build the ZIP, inspect its manifest, open index.html directly, disconnect the network, and exercise the same keyboard and responsive contract.

Capture console errors and verify customized token values appear in the exported CSS. A component library has two products—the browsing tool and the files users take away—and both must pass independently.

                      await page.goto(`file://${exportPath}/index.html`);
await page.keyboard.press('Tab');
await expect(page.getByRole('button')).toBeFocused();