libra/docs/tasks/manual-tests/24-10.md

Manual tests — 24-10 Redesign Integration Verification

QA 2026-10-31: every acceptance criterion for this task was verified by command or in-browser measurement and the task is Done. The items below are visual-impression checks for Naser, not outstanding criteria.

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").

Full QA pass — defects found and fixed (2026-10-31)

1. Sticky navigation did not stick (24-2): app.css sets overflow-x:hidden on body, making it a scroll container. Fixed with body.site{overflow-x:clip}; nav also now exactly 72px (was 73).
2. Hover lifts never showed (24-4): the reveal rule's transform:none overrode the hover transform. Reveal now uses the translate property.
3. Body font was Cairo/Montserrat, not IBM Plex Sans Arabic: app.css sets html[lang] body font at higher specificity. Fixed with html[lang] body.site / body.site-auth (checked in Arabic and English).
4. Auth inputs had a red border at rest and on focus (24-9): Flux always renders a hidden error element, so the existing global rule painted every field red. Overridden inside the auth pages, so only a visible error is red (checked: wrong password still shows the red state and the message).

Each has a regression test. Browser checks: nav 72px, sticky after 1,500px scroll, aria-current, 1000px menu sheet open and Escape closes it, language pill (EN ↔ ع), footer four columns, hover (row forest + cream + gold arrow, card lift −6px, row lift −2px, medallion rotates, static goal rows inert), booking calendar (66×48 cells, gold dot, selected forest/cream, dimmed unavailable), login styles (48px inputs, 12px radius, gold pill button, serif heading), live search and clear, English and Arabic width sweeps at 390/768/1440 on all ten pages (no horizontal scroll). Full suite after the fixes: 1767 passed, 35 failed (34 in untouched areas, 1 flaky under full-suite ordering: ConsultationManagementTest passes alone).