Aufforderung zum Senior QA Visual- und Interaktions-Audit

# QA Audit Report: [Project Name] ## Audit Scope - **Date:** [Date] - **Build/URL:** [URL] - **Design Reference:** [Figma link] - **Browsers Tested:** Chrome 120, Safari 17, Firefox 121, Safari iOS 17, Chrome Android 120 - **Breakpoints Tested:** 375px, 768px, 1024px, 1280px, 1440px, 1920px --- ## Issue Report | # | Page | Issue | Category | Severity | Browser/Device | Screenshot Description | Fix Suggestion | |---|------|-------|----------|----------|----------------|------------------------|----------------| | 1 | Home | Hero headline wraps to 3 lines at 375px, overlapping CTA button | Responsive | Critical | iPhone SE (375px) | Text overlaps button, CTA partially hidden | Reduce font-size from 48px to 36px at ≤400px breakpoint | | 2 | Checkout | Payment form submit button lacks loading state; double-click causes duplicate orders | Interaction | Critical | All | Button shows no spinner, form submits twice | Add `isSubmitting` state with disabled button + spinner | | 3 | Global | Focus outline removed via `outline: none` without replacement | A11y | High | All browsers (keyboard nav) | No visible focus indicator on links/buttons | Add `:focus-visible` styles with 2px offset ring | | 4 | Product Grid | Card images stretch on 1920px (aspect ratio not maintained) | Visual | High | Desktop 1920px | Images appear vertically elongated | Use `aspect-ratio: 4/5` with `object-fit: cover` | | 5 | Nav | Mobile hamburger menu doesn't trap focus; Tab escapes to background | A11y | High | Mobile all | Focus moves behind open drawer | Implement focus trap in drawer component | | 6 | Cart | Empty state shows broken image icon (missing fallback) | Visual | Medium | All | Grey broken-image placeholder visible | Add `onError` handler with SVG fallback | | 7 | Product Detail | Long product name (e.g., "Premium Wireless Noise-Cancelling Headphones with 40-Hour Battery Life") truncates without ellipsis | Content | Medium | All | Text cuts off mid-word | Add `text-overflow: ellipsis` or allow 2-line clamp | | 8 | Footer | Newsletter input lacks visible label (placeholder only) | A11y | Medium | All | No label associated with input | Add visually-hidden `<label>` with `htmlFor` | | 9 | Checkout | Shipping address form: error messages not announced to screen readers | A11y | Medium | All | Errors appear but no `aria-live` region | Wrap errors in `role="alert"` or `aria-live="polite"` | | 10 | Home | Hero image loads with layout shift (CLS ~0.35) | Performance | Medium | All | Content jumps down after image loads | Set explicit `width`/`height` or `aspect-ratio` | | 11 | Product Grid | Hover state on cards has no transition (instant color change) | Interaction | Low | Desktop | Background flashes on hover | Add `transition: box-shadow 0.2s ease` | | 12 | Global | Buttons at 375px are 40px tall (below 44px touch target) | Responsive | Medium | Mobile | Buttons feel cramped | Increase min-height to 44px on mobile | | 13 | Search | No empty state when no results found | Content | Medium | All | Blank white area below search bar | Add "No results for '[query]'" message with icon | | 14 | Product Detail | Color swatches have no selected state (no ring/border) | Interaction | Low | All | Cannot tell which color is selected | Add 2px border + checkmark on active swatch | | 15 | Global | Custom font loads with FOUT (flash of unstyled text) | Performance | Low | All | Text flashes from fallback to custom font | Add `font-display: swap` or preload font files | --- ## Summary Statistics - **Total issues:** 15 - **Critical:** 2 | **High:** 3 | **Medium:** 7 | **Low:** 3 - **By category:** Visual: 3 | Responsive: 3 | Interaction: 3 | A11y: 4 | Performance: 2 | Content: 2 ### Top 5 Issues to Fix First 1. **#1 - Hero overlap at 375px (Critical)** - Blocks primary CTA on smallest viewport; affects ~15% of mobile users 2. **#2 - Double-submit on checkout (Critical)** - Causes duplicate orders and payment issues; direct revenue impact 3. **#3 - Missing focus states (High)** - Keyboard users cannot navigate; WCAG 2.4.7 failure 4. **#4 - Image stretching at 1920px (High)** - Visually unprofessional on large monitors; easy fix 5. **#5 - Focus trap in mobile nav (High)** - Keyboard users get trapped or lost; accessibility blocker --- ## Severity Definitions - **Critical:** Broken functionality or layout that prevents use - **High:** Clearly visible issue that affects user experience - **Medium:** Noticeable on close inspection, doesn't block usage - **Low:** Minor polish issue, nice-to-have fix