24-10: redesign integration verification — contrast fix, booking component root fix, tests; QA Review

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-31 19:03:57 +02:00
parent 01ff077a5c
commit 9263966266
6 changed files with 168 additions and 4 deletions
@@ -1,7 +1,7 @@
 ---
 id: 24-10
 title: 24-10 Redesign Integration Verification
-status: Ready for Dev
+status: QA Review
 date: 2026-10-31
 parent: 24
 ---
@@ -0,0 +1,41 @@
+# Manual tests — 24-10 Redesign Integration Verification
+
+## Done by the QA pass (2026-10-31)
+
+Automated (`tests/Feature/Design/RedesignIntegrationTest.php`, 6 tests, plus the whole Design directory): for all eight public pages in Arabic
+and English — exactly one h1, alt text on every image, no raw translation key text, no "Unsplash" or "mockup"; login and forgot-password carry the
+auth layer; admin pages (dashboard, pending bookings, posts), client pages (dashboard, booking) and the Nablus form load none of the public assets;
+the booking form on `/` and `/booking` sits inside its own Livewire component; WCAG contrast measured.
+
+In a real browser (Chrome via Playwright, libra.test):
+- Home hero balance level after load; with a real mouse over the frame it tips to about +8.4° and returns to level after leaving.
+- Finale balance −12° at the top, level (≈0°) at the bottom; progress bar scaleX(1) at the bottom; nav gets `scrolled`; no duplicate ids; 44/44 reveals.
+- Five `wire:navigate` hops (About, Articles, Booking, Terms, Home): hero balance still level, reveals work, finale still levels.
+- Reduced motion emulated: 44/44 reveals visible immediately, all three balances `rotate(0 200 110)`.
+- Focus ring on the first nav link: solid 2px gold.
+- Booking from the home card: day strip loads days and slots, selecting a day/slot works, confirm step, Confirm lands on `/booking/success`; one pending guest consultation created.
+- Booking from `/booking`: month calendar, slot, form, confirm, success page; one pending guest consultation created.
+- Both test consultations (`qa-24-10-*@example.invalid`) and the 4 queue jobs they created were deleted; local DB back to 12 consultations / 12 jobs.
+- Metrics sweep at 390/768/1440 in Arabic: no horizontal scroll on the pages listed in the ledger entry; h1 count 1 on public pages.
+
+Contrast (measured): body ink on cream 14.3:1; muted on cream 5.7:1; gold-light on forest 5.6:1; on footer 6.5:1; ink on gold button 4.9:1; olive links 6.5:1;
+gold-ink eyebrow/meta text **3.9:1 / 4.4:1 with the original `#8A7555` — below AA — darkened to `#7A6648`: 4.9:1 on cream, 5.5:1 on white**; footer legal line
+raised from 75% to 90% opacity (4.3 → 5.6:1). Ruling logged.
+
+## Defect found and fixed in this pass
+
+The booking component's template began with a Blade `@if`, so Livewire did not attach its root: on `/` and `/booking` the form fields were not bound to the
+component (console warnings "property does not exist on component pages.home"). The server-side tests passed anyway because they mount the component alone.
+Fixed by giving the template a single root `<div>`; a test now checks the nearest Livewire root of the form.
+
+## Still for you
+
+- [ ] Look at each page once in Arabic and English at a phone width (both languages were checked by tests, but only Arabic by the width sweep).
+- [ ] Tab through navigation, footer and the booking card with the keyboard: gold ring visible everywhere.
+- [ ] In the admin (`/admin/bookings/pending`) confirm you can see a real test booking if you make one (the two I made are deleted).
+- [ ] Open the admin and client dashboards and the Nablus workshop form: look unchanged.
+
+## Open items for your decision (not fixed — outside the files this task may edit)
+
+- `/login` and `/forgot-password` have no `<h1>` (Flux heading renders a div) and three inputs without a programmatic label: those come from `resources/views/livewire/auth/*`, which tasks 24-9/24-10 forbid editing.
+- Old tests now stale against the redesign (they assert the previous markup/copy): in `HomePageTest`, `AboutPageTest`, `NavigationTest` (language toggle), `ResponsiveDesignTest` (public layout padding), plus failures that were already there before the redesign (footer copyright wording, `AuthBackgroundPatternTest`, focus-visible in `app.css`, admin `role="main"`).
@@ -146,4 +146,4 @@
 | 24-7 | 24-7 About Page | QA Review |
 | 24-8 | 24-8 Articles and Legal Pages | QA Review |
 | 24-9 | 24-9 Auth Pages Type and Controls | QA Review |
-| 24-10 | 24-10 Redesign Integration Verification | Ready for Dev |
+| 24-10 | 24-10 Redesign Integration Verification | QA Review |