A11y + light AA + wydajność + rebrand-guard + assety ownera + Lighthouse

[MrCrystal2]

Parent PRD

#53

Type

HITL — dwa checkpointy: (1) owner (@MrCrystal2) dostarcza assety (screenshoty gier i produktów, opinie z autorami, OG-image 1200×630), (2) finalny odbiór jakości (design + Lighthouse) przed merge.

What to build

Domknięcie jakości całej przebudowy:

1. Dostępność: skip link do treści, widoczne focusy, semantyczne nagłówki/landmarki, targety dotykowe ≥48px, globalna obsługa prefers-reduced-motion (cross-fade zamiast sprężyn/parallax).
2. Light theme do AA: strojenie kontrastów jasnego motywu na kluczowych sekcjach (dark już ma AA z Design tokens + layout shell (dark default, glass header, footer, bez StickyBar) #56).
3. Wydajność: lazy loading obrazów, code splitting, odchudzenie bundla (audyt zależności).
4. Rebrand-guard rozszerzony: „umux" małą literą w treści UI, link https://umux.pages.dev, kluczowe linki produktów — testy pilnują marki.
5. Assety ownera wmontowane: prawdziwe screenshoty (gry + produkty — miejsce placeholderów), opinie z autorami/źródłami, OG-image 1200×630 (podpięcie do meta z SEO kit + AI-search (meta per trasa, JSON-LD, robots.txt, llms.txt, sitemap) #61).
6. Weryfikacja progów: Lighthouse mobile — Performance ≥ 90, Accessibility ≥ 95, SEO ≥ 95 (home + przykładowa strona produktu).

Kontekst: PRD #53 → Validation Strategy; plan plans/landing-upgrade.md Faza 10.

Assumptions

• Wszystkie poprzednie issues ukończone (Home: hero + sygnaturowe momenty (kryształ, kaskada, 2 CTA) #57–Contact + podstrony reskin (formularz inline validation, About, Privacy, Terms, Game Guide) #62): strona w całości w nowym designie, SEO kit działa.
• Owner dostarcza assety przed implementacją punktów 4–5 (screenshoty, opinie, OG).

Out of scope for this issue

• Do NOT dodawaj analytics (decyzja: brak).
• Do NOT dodawaj i18n.
• Do NOT zmieniaj treści merytorycznych poza wmontowaniem dostarczonych assetów.

Acceptance criteria

• Rozszerzony rebrand-guard przechodzi (umux lowercase, umux.pages.dev, kluczowe linki) — [command: yarn test]
• Nawigacja klawiaturą przez home + formularz; skip link działa; focusy widoczne — [observable: test ręczny]
• prefers-reduced-motion → brak sprężyn/parallax na całej stronie — [observable: emulacja DevTools]
• Targety dotykowe ≥48px na mobile — [observable: inspekcja]
• Light theme: kontrasty AA na kluczowych sekcjach — [observable: kontrolka kontrastem]
• Prawdziwe opinie z autorami; screenshoty w miejscach placeholderów; OG-image 1200×630 podpięty w meta — [observable: DOM + meta]
• Lighthouse mobile: Performance ≥ 90, Accessibility ≥ 95, SEO ≥ 95 (home + strona produktu) — [command: Lighthouse]
• Finalne build/test/lint zielone — [command: yarn build && yarn test && yarn lint]
• [HITL: finalny odbiór przez @MrCrystal2 przed merge]

How to verify

1. Uzupełnij public/images/ o dostarczone screenshoty i OG-image; wstaw opinie do content.json (autor + źródło)
2. yarn build && yarn preview — sprawdź placeholdery zastąpione assetami; view-source: og:image wskazuje OG-image
3. DevTools: emuluj reduced-motion — brak sprężyn/parallax; przełącz light — kontrasty ≥ AA
4. Przejdź stronę wyłącznie klawiaturą (Tab/Enter) — skip link, focusy, działające CTA
5. Uruchom Lighthouse (mobile) dla / i /products/umux — progi zgodne z AC
6. yarn test — rebrand-guard rozszerzony zielony
7. Odbiór ownera (checkpoint HITL)

Blocked by

• Home: hero + sygnaturowe momenty (kryształ, kaskada, 2 CTA) #57 (hero), Home: sekcje treści (lineup umux → ExSize → ADM-CLI, features, social proof, FAQ, CTA) #58 (sekcje home), Szablon strony gry ×2 (School's Out!, Coin Collector) — gra nad foldem + sekcje #59 (szablon gry), Szablon strony produktu ×4 (umux, ExSize, ADM-CLI, Wspolniak) #60 (szablon produktu), SEO kit + AI-search (meta per trasa, JSON-LD, robots.txt, llms.txt, sitemap) #61 (SEO kit), Contact + podstrony reskin (formularz inline validation, About, Privacy, Terms, Game Guide) #62 (contact + podstrony)

User stories addressed

• User story 4 (responsywność, targety 48px)
• User story 10 (final: prawdziwe opinie z autorami)
• User story 14 (wydajność: lazy, code splitting, lekki bundle)
• User story 15 (reduced motion)
• User story 16 (a11y: semantyka, focusy, skip link)
• User story 20 (rebrand-guard rozszerzony)
• User story 24 (light theme z kontrastami AA)