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>
This commit is contained in:
2026-03-29 15:33:01 +11:00
parent 826496e645
commit 87249b6d9b
12 changed files with 112 additions and 29 deletions

View File

@@ -1,6 +1,7 @@
import React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import FormControlLabel from '@mui/material/FormControlLabel';
@@ -151,9 +152,10 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
<Box
component="form"
noValidate
aria-busy={loading}
onSubmit={(e: React.FormEvent) => {
e.preventDefault();
onContinue();
if (!loading) onContinue();
}}
>
{/* ─── Crematorium selection ─── */}
@@ -226,7 +228,11 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
)}
{errors?.selectedCrematoriumId && (
<Typography variant="body2" color="error" sx={{ mt: 1 }} role="alert">
<Typography
variant="body2"
sx={{ mt: 1, color: 'var(--fa-color-text-brand)' }}
role="alert"
>
{errors.selectedCrematoriumId}
</Typography>
)}
@@ -250,7 +256,11 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
<FormControlLabel value="no" control={<Radio />} label="No" />
</RadioGroup>
{errors?.attend && (
<Typography variant="body2" color="error" sx={{ mt: 0.5 }} role="alert">
<Typography
variant="body2"
sx={{ mt: 0.5, color: 'var(--fa-color-text-brand)' }}
role="alert"
>
{errors.attend}
</Typography>
)}
@@ -268,9 +278,9 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
sx={{ mb: 3 }}
>
{priorityOptions.map((opt) => (
<option key={opt.value} value={opt.value}>
<MenuItem key={opt.value} value={opt.value}>
{opt.label}
</option>
</MenuItem>
))}
</TextField>
)}