00 / Source of truth

Responsive, accessibility and Lighthouse QA

The repeatable QA contract for every Mufflermen primitive: required viewports, light/dark checks, accessibility expectations, Lighthouse targets and file-structure rules.

Production answer

Responsive, accessibility and Lighthouse QA is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Responsive, accessibility and Lighthouse QA states
Generative search brief

Responsive, accessibility and Lighthouse QA: The repeatable QA contract for every Mufflermen primitive: required viewports, light/dark checks, accessibility expectations, Lighthouse targets and file-structure rules.

All Primitives Overview

Check all system groupings, source routes, theme control, catalog cards, and top-level navigation density.

Open QA target

Mobile Viewport QA

Verify 320, 375, 390 and 430 widths in light and dark mode. No clipped headings, horizontal overflow, or small tap targets.

Open QA target

Tablet Viewport QA

Verify 768 and 1024 widths. Sidebar and card grids must reflow without layout shift or mixed theme styling.

Open QA target

Desktop Viewport QA

Verify 1280, 1440 and 1920 widths. Cards should remain readable, not overstretched or visually sparse.

Open QA target

Light Mode QA

Check pearl enamel/frosted glass surfaces, contrast, shadows, icons, focus states and disabled/loading states.

Open QA target

Dark Mode QA

Check obsidian/chrome/red paint surfaces, contrast, gradients, glow restraint, keyboard focus and reduced motion.

Open QA target

Accessibility QA

Check semantics, labels, ARIA only where needed, keyboard flow, no duplicate IDs, no inaccessible custom controls.

Open QA target

Lighthouse QA

Target 100 performance, accessibility, best practices and SEO. Document blockers when 100 is not possible.

Open QA target

Marketing Asset QA

Verify canonical logos, approved marketing images, presentation banners, alt text and image sizing.

Open QA target

App-Specific Primitive QA

Verify every app section explains shared primitives, product-context variants, code/setup and required tokens.

Open QA target
Viewport matrix

Required preview sizes

Each primitive detail page must document behaviour at all nine widths in light and dark mode. This route is the checklist and browser-test target.

Mobile 320

320px wide viewport. Verify no horizontal overflow, clipped copy, broken density or tap-target failures.

mobilelight + dark

Mobile 375

375px wide viewport. Verify no horizontal overflow, clipped copy, broken density or tap-target failures.

mobilelight + dark

Mobile 390

390px wide viewport. Verify no horizontal overflow, clipped copy, broken density or tap-target failures.

mobilelight + dark

Mobile 430

430px wide viewport. Verify no horizontal overflow, clipped copy, broken density or tap-target failures.

mobilelight + dark

Tablet 768

768px wide viewport. Verify no horizontal overflow, clipped copy, broken density or tap-target failures.

tabletlight + dark

Tablet 1024

1024px wide viewport. Verify no horizontal overflow, clipped copy, broken density or tap-target failures.

tabletlight + dark

Desktop 1280

1280px wide viewport. Verify no horizontal overflow, clipped copy, broken density or tap-target failures.

desktoplight + dark

Desktop 1440

1440px wide viewport. Verify no horizontal overflow, clipped copy, broken density or tap-target failures.

desktoplight + dark

Desktop 1920

1920px wide viewport. Verify no horizontal overflow, clipped copy, broken density or tap-target failures.

desktoplight + dark

Light profile

Pearl enamel canvas, frosted workshop glass, clean steel shadows and calibrated red/amber/teal/green signals. It must not be a simple inversion of dark mode.

Dark profile

Obsidian canvas, chrome panels, red paint, amber workshop light and instrument-glass telemetry. It must stay legible without excessive glow.

Accessibility gate

  1. 1Semantic HTML and heading order are valid.
  2. 2ARIA is present only when native semantics are insufficient.
  3. 3Keyboard navigation reaches every interactive primitive.
  4. 4Focus-visible states are stronger than hover states.
  5. 5Screen-reader labels exist for icon-only controls and media controls.
  6. 6Light and dark colour contrast remains readable.
  7. 7Reduced-motion users do not receive non-essential animation.
  8. 8Hover, active, disabled, loading and error states are accessible.
  9. 9Mobile tap targets are at least 44px where practical.
  10. 10No duplicate IDs or inaccessible custom controls are introduced.

Performance

Target Lighthouse score: 100. If blocked by an unavoidable dependency, document the blocker on the primitive page.

10077 menu routes

Accessibility

Target Lighthouse score: 100. If blocked by an unavoidable dependency, document the blocker on the primitive page.

10077 menu routes

Best Practices

Target Lighthouse score: 100. If blocked by an unavoidable dependency, document the blocker on the primitive page.

10077 menu routes

SEO

Target Lighthouse score: 100. If blocked by an unavoidable dependency, document the blocker on the primitive page.

10077 menu routes

Required primitive file structure

/src/primitives/
  /buttons/
    Button.tsx
    Button.variants.ts
    Button.demo.tsx
    Button.docs.mdx
    Button.test.tsx
    Button.a11y.test.tsx
    index.ts
  /cards/
  /forms/
  /navigation/
  /modals/
  /tables/
  /dashboards/
  /marketing/
  /shared/