Commit Graph

21 Commits

Author SHA1 Message Date
88e409b019 Quality pass 2: sticky header breathing room, a11y labels, semantic tokens
Visual fixes:
- Sticky headers: add pt: 2 so scrolling content doesn't bleed
  flush against the heading (ProvidersStep, VenueStep)

Accessibility:
- ProvidersStep: add role="list" to provider list container
  (aria-label needs a semantic role to be announced)
- VenueStep: add aria-label to search TextField (placeholder
  alone is not a reliable label for screen readers)

Token consistency:
- Map placeholders: var(--fa-color-sage-50) → var(--fa-color-surface-cool)
  (use semantic token, not primitive) in ProvidersStep, VenueStep
- ArrangementDialog: var(--fa-color-brand-50) → var(--fa-color-surface-warm)
  for package summary background
- ArrangementDialog: replace Box component="a" with Link atom
  for terms and conditions (consistent focus/hover styling)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 08:24:31 +11:00
ae4bcef4c9 Quality pass: fix P0 audit findings across FilterPanel, ArrangementDialog, steps
FilterPanel (4 P0 + 2 P1 fixes):
- Add forwardRef (project convention)
- Use React.useId() for unique popover/heading IDs (was static)
- Change aria-describedby to aria-controls (correct ARIA pattern)
- Add role="dialog" + aria-labelledby on Popover paper
- Popover header now uses label prop (was hardcoded "Filters")
- Clear all font size uses theme.typography.caption (was hardcoded)
- Badge uses aria-hidden + visually-hidden text (cleaner SR output)
- Add maxHeight + overflow scroll to body, aria-label on Done button

ArrangementDialog (3 P0 + 1 P1 fixes):
- Add forwardRef
- Focus management: titleRef focused on step change via useEffect
- Add aria-live region announcing step transitions to screen readers
- Fix borderRadius from 3 to 2 (theme convention)

Sticky header padding (visual fix):
- ProvidersStep + VenueStep: mx/px now responsive { xs: -2/2, md: -3/3 }
  matching the panel's px: { xs: 2, md: 3 } — fixes mobile misalignment

CoffinDetailsStep:
- Wrap CTA area in form element with onSubmit + aria-busy

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 08:22:06 +11:00
be99acd51e Batch 4: Click-to-navigate providers (D-D), simplify coffin details (D-G)
ProvidersStep (D-D):
- Remove selection state (selectedProviderId) and Continue button
- Clicking a provider card triggers navigation directly
- Remove radiogroup pattern, error, loading props
- Cards are now simple interactive links, not radio buttons
- Stories updated: removed WithSelection, WithError, Loading

CoffinDetailsStep (D-G):
- Remove all customisation (handles, lining, nameplate)
- Remove OptionSection helper, ProductOption/CoffinDetailsStepValues types
- Simplified to coffin profile (image, specs, price) + Continue CTA
- Changed from detail-toggles split to centered-form layout
- Customisation noted as future enhancement
- Updated index.ts re-exports to match simplified API
- Stories simplified: Default, PrePlanning, MinimalInfo, Loading

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 22:29:24 +11:00
c5581c6e9f Batch 3: FilterPanel molecule + integration across 3 steps (D-C, D-F)
New molecule:
- FilterPanel: Popover-based reusable filter trigger with active
  count badge, Clear all, Done actions. D-C: Popover for MVP.

Step integrations:
- ProvidersStep: inline Chip filter bar → FilterPanel Popover,
  search bar + filter button side-by-side in sticky header
- VenueStep: same pattern, filter chips moved into Popover
- CoffinsStep (D-F): grid-sidebar layout → wide-form (full-width
  4-col grid), category + price selects moved into FilterPanel

WizardLayout:
- Added wide-form variant (maxWidth lg, single column) for
  card grids that benefit from full width
- wide-form included in STEPPER_VARIANTS for progress bar

Storybook:
- FilterPanel stories: Default, WithActiveFilters, SelectFilters,
  CustomLabel

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 22:24:54 +11:00
1c3cdbc101 Batch 2: List-map layout rework — 420px fixed column, sticky headers
- WizardLayout ListMapLayout: 420px fixed left column (D-B), flex:1
  right panel, back link rendered inside left panel instead of above
  the split (eliminates gap above map)
- LAYOUT_MAP type updated to accept backLink prop for list-map variant
- ProvidersStep: heading + search + filters wrapped in sticky Box
  that pins at top of scrollable left panel while card list scrolls
- VenueStep: same sticky header treatment, heading moved inside form
  for consistent wrapper structure

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 22:18:52 +11:00
6ebd52f36f Batch 1: ToggleButtonGroup fixes, heading standardisation, spacing normalisation
- ToggleButtonGroup: increase label-to-options spacing (mb 1→2),
  top-align button content (flex-start), fix selected border
  CSS specificity by adding .Mui-selected in grouped selector
- Standardise all split-layout step headings from h4 to display3
  (ProvidersStep, PackagesStep, PreviewStep, VenueStep, CoffinsStep,
  CoffinDetailsStep) — matches D-A decision for brand warmth
- DateTimeStep: normalise section gaps (scheduling fieldset mb 3→4)
- CrematoriumStep: add subheading for consistency, normalise
  witness section spacing (mb 3→4)
- Fix input label clipping in PackagesStep and DateTimeStep
  (add pt: 0.5 to TextField containers for float-label clearance)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 22:13:03 +11:00
87249b6d9b Groom wizard steps 1-15: critique/harden/polish pass
- [P0] CrematoriumStep: Fix <option> → <MenuItem> in priority select
- [P1] All form steps: Add aria-busy={loading} + loading guard on submit
- [P1] Error messages: Replace color="error" (red) with copper
  (var(--fa-color-text-brand)) across ProvidersStep, PackagesStep,
  VenueStep, CrematoriumStep, CemeteryStep, CoffinsStep, PaymentStep
- [P2] IntroStep: "Has the person died?" → "Has this person passed away?"
- [P2] DateTimeStep: "About the person who died" → "who has passed"
- [P2] ProvidersStep: "Showing results from X" → "X providers found"
- [P2] Empty states: Add guidance text for ProvidersStep, PackagesStep,
  VenueStep, CoffinsStep empty results

Steps 4, 13, 15 passed with no issues.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 15:33:01 +11:00
1e91929411 Fix layout variants for VenueStep, CoffinsStep, CoffinDetailsStep
- VenueStep: centered-form → list-map (venue cards left, map slot right)
  Matches ProvidersStep pattern with vertical card stack + map placeholder
- CoffinsStep: centered-form → grid-sidebar (filter sidebar left, card grid right)
  Filters now in dedicated sidebar, cards fill the wider main area
- CoffinDetailsStep: centered-form → detail-toggles (profile left, options right)
  Coffin image + specs on left, option RadioGroups on right

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 15:16:01 +11:00
36757bcdb0 Add SummaryStep, PaymentStep, ConfirmationStep (wizard steps 13-15)
SummaryStep (step 13):
- Accordion sections with edit IconButtons linking back to each step
- dl/dt/dd definition list for label-value pairs
- Total bar with prominent price display (aria-live)
- Share plan icon button, deposit display
- Pre-planning: "Save your plan" CTA; at-need: "Confirm" CTA

PaymentStep (step 14):
- Payment plan (full/deposit) shown before method (amount before how)
- ToggleButtonGroup for plan + method selection
- Card: PayWay iframe slot with placeholder; Bank: account details display
- Terms checkbox with service agreement + privacy links
- Security reassurance (lock icon, no-surprise copy)

ConfirmationStep (step 15):
- Terminal page — no back button, no progress indicator
- At-need: "submitted" + callback timeframe + arranger contact
- Pre-planning: "saved" + return-anytime + family-ready copy
- Muted success icon (not celebratory), next-steps link buttons
- VenueCard selected prop also staged (from step 7 work)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 15:08:41 +11:00
77bac1478f Add AdditionalServicesStep page (wizard step 12)
- Merged from baseline steps 14 (optionals) + 15 (extras) per Rec #2
- Section 1: Complimentary inclusions (dressing, viewing, prayers, announcement)
- Section 2: Paid extras (catering, music, bearing, newspaper notice)
- Progressive disclosure: viewing → same venue radio, music → live musician → type
- Dependent field resets when parent toggled off
- AddOnOption reuse for all toggle rows
- Bearing as RadioGroup (family/professional/both)
- No upsell language — toggle design is inherently low-pressure

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 15:02:18 +11:00
f8db8c19b2 Add CoffinDetailsStep page (wizard step 11)
- Coffin profile: image + specs grid + description + price note
- Three product option sections: handles, lining, name plate
- RadioGroup per section with branded selected state (brand border + warm bg)
- Price impact inline: "Included" for allowance items, "+$X" for upgrades
- Options hidden when not offered by provider (graceful empty state)
- Responsive: image stacks above details on mobile

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 15:00:41 +11:00
26a6d615da Add CoffinsStep page (wizard step 10)
- Coffin card grid (1/2/3 col responsive) with radiogroup pattern
- Category + price range filter dropdowns (reset page on filter change)
- "Most Popular" badge on popular coffins (Rec #10)
- Card shows image, name, category, price
- Pagination for large catalogues
- Australian terminology: "coffin" not "casket"
- Results count with aria-live, validation error with role="alert"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 14:59:09 +11:00
41901ed81d Add CemeteryStep page (wizard step 9)
- Progressive disclosure: "Have a plot?" → "Choose cemetery?" → card grid
- Dependent field resets (changing parent answer clears child selections)
- Cemetery card grid with radiogroup pattern + roving tabindex
- Pre-planning variant: softer subheading about provider arranging later
- "Provider can arrange this" shortcut skips grid entirely
- Grief-sensitive copy: "we need to find one" not "I don't have a plot"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 14:57:19 +11:00
1f9f7e2611 Add CrematoriumStep page (wizard step 8)
- Single crematorium: confirmation card (pre-selected), most common case
- Multiple crematoriums: card grid with radiogroup pattern + roving tabindex
- Witness question: "Will anyone follow the hearse?" with personalised helper text
- Special instructions: radio + progressive disclosure textarea via Collapse
- Personalised copy with deceased name ("escort [Name] to the crematorium")
- Pre-planning variant with softer helper text
- Australian terminology: "crematorium" not "crematory"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 14:55:34 +11:00
c28f8a2f29 Add VenueStep page (wizard step 7) + VenueCard selected prop
- Consolidated 3 baseline steps (venue select + venue detail + venue services) into 1
- CSS Grid venue card layout (1 col mobile, 2 col desktop) with radiogroup ARIA
- VenueCard extended with selected, role, aria-checked, tabIndex props
- Progressive disclosure: venue detail panel + service toggles after selection
- Service toggles via AddOnOption: photo presentation, livestream, recording
- Recording depends on streaming (auto-disabled when streaming off)
- Search input + filter chips for venue filtering
- Results count with aria-live, validation error with role="alert"
- Pre-planning variant with softer copy

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 14:53:36 +11:00
2004fe10c0 Add DateTimeStep page (wizard step 6)
- Centered-form layout with two fieldset sections: name + scheduling
- Grief-sensitive labels: "Their first name", "About the person who died"
- Pre-planning variant: softer copy, "About the person" (no "who died")
- Date preference: ASAP / specific with progressive disclosure date picker
- Time preference: 5-option radio (no preference, morning, midday, afternoon, evening)
- Religion/service style: Autocomplete with 22 options
- Save-and-exit tertiary CTA
- showNameFields + showScheduling props for conditional visibility per funeral type

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 14:51:09 +11:00
9738e6e893 Add AuthGateStep page (wizard step 5)
- Centered-form layout with 3 progressive sub-steps: SSO/email → details → verify
- Google/Microsoft SSO buttons + email entry (sub-step 1)
- Name, phone, contact preference fields (sub-step 2) — phone optional when email-only
- 6-digit verification code entry (sub-step 3)
- Benefit framing ("Save your plan") not gate framing
- Responsive name fields (stacked on mobile, side-by-side on desktop)
- autoComplete + inputMode on all fields per WCAG 3.3.8
- Audit: 18/20 (Excellent), P1 fixed (responsive name fields)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 14:49:32 +11:00
42d87293fd Add PreviewStep page (wizard step 4)
Informational review step — no form fields. List-detail split:
ProviderCardCompact + "What happens next" numbered checklist + CTAs
(left), PackageDetail breakdown (right). Pre-planning variant shows
"Explore other options" tertiary CTA. Checklist reduces anxiety about
remaining steps. Pure presentation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 14:41:16 +11:00
a721f9cb1b Add PackagesStep page (wizard step 3)
List-detail split: ProviderCardCompact + selectable ServiceOption cards
(left), PackageDetail breakdown (right). Budget range filter (4 options),
"Most Popular" badge on qualifying packages. Radiogroup selection pattern
(ServiceOption has built-in role="radio"). Mobile Continue button visible
when detail panel stacks below. Grief-sensitive copy, pre-planning
variant. Pure presentation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 14:39:28 +11:00
fa20599b67 Add ProvidersStep page (wizard step 2) + audit fixes
ProvidersStep: list-map split layout with provider card list (left)
and map slot (right). SearchBar + filter chips + radiogroup card
selection pattern. Back link, results count with aria-live,
grief-sensitive copy with pre-planning variant. Pure presentation.

Audit fixes (18/20):
- P1: Move role="radio" + aria-checked onto ProviderCard (focusable)
- P3: Add aria-live="polite" on results count
- ProviderCard: extend props to accept HTML/ARIA passthrough, add
  rest spread to Card for role/aria-checked/aria-label support

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 14:36:27 +11:00
2631a2e4bb Add IntroStep page (wizard step 1) + audit fixes
IntroStep: urgency-sensitive segmentation entry point. ToggleButtonGroup
for forWhom (Myself/Someone else) with progressive disclosure revealing
hasPassedAway (Yes/No) via Collapse. Auto-sets hasPassedAway="no" when
forWhom="myself". Grief-sensitive copy adapts subheading per selection.
Pure presentation — props in, callbacks out.

Audit fixes (18/20 → 20/20):
- P1: Add <main> landmark wrapper in WizardLayout (all variants)
- P2: Wrap IntroStep fields in <form> for landmark + Enter-to-submit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 14:26:53 +11:00