From 88e409b019c568f0e7c89d0891f9de1d6ec92e4e Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Mon, 30 Mar 2026 08:24:31 +1100
Subject: [PATCH] Quality pass 2: sticky header breathing room, a11y labels,
 semantic tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../ArrangementDialog/ArrangementDialog.tsx       | 15 ++++-----------
 .../pages/ProvidersStep/ProvidersStep.tsx         |  4 +++-
 src/components/pages/VenueStep/VenueStep.tsx      |  4 +++-
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/organisms/ArrangementDialog/ArrangementDialog.tsx b/src/components/organisms/ArrangementDialog/ArrangementDialog.tsx
index de1eb42..f031c16 100644
--- a/src/components/organisms/ArrangementDialog/ArrangementDialog.tsx
+++ b/src/components/organisms/ArrangementDialog/ArrangementDialog.tsx
@@ -19,6 +19,7 @@ import { ProviderCardCompact } from '../../molecules/ProviderCardCompact';
 import { Collapse } from '../../atoms/Collapse';
 import { Typography } from '../../atoms/Typography';
 import { Button } from '../../atoms/Button';
+import { Link } from '../../atoms/Link';
 import { Divider } from '../../atoms/Divider';
 
 // ─── Types ───────────────────────────────────────────────────────────────────
@@ -265,7 +266,7 @@ export const ArrangementDialog = React.forwardRef<HTMLDivElement, ArrangementDia
               {/* Package summary */}
               <Box
                 sx={{
-                  bgcolor: 'var(--fa-color-brand-50)',
+                  bgcolor: 'var(--fa-color-surface-warm)',
                   borderRadius: 2,
                   p: 2.5,
                   mb: 3,
@@ -534,17 +535,9 @@ export const ArrangementDialog = React.forwardRef<HTMLDivElement, ArrangementDia
               {/* Terms */}
               <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 3 }}>
                 By continuing, you agree to the{' '}
-                <Box
-                  component="a"
-                  href="#"
-                  sx={{
-                    color: 'var(--fa-color-text-brand)',
-                    textDecoration: 'underline',
-                    fontSize: 'inherit',
-                  }}
-                >
+                <Link href="#" sx={{ fontSize: 'inherit' }}>
                   terms and conditions
-                </Box>
+                </Link>
                 .
               </Typography>
 
diff --git a/src/components/pages/ProvidersStep/ProvidersStep.tsx b/src/components/pages/ProvidersStep/ProvidersStep.tsx
index 860b6d6..93c91aa 100644
--- a/src/components/pages/ProvidersStep/ProvidersStep.tsx
+++ b/src/components/pages/ProvidersStep/ProvidersStep.tsx
@@ -121,7 +121,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
         mapPanel || (
           <Box
             sx={{
-              bgcolor: 'var(--fa-color-sage-50)',
+              bgcolor: 'var(--fa-color-surface-cool)',
               height: '100%',
               display: 'flex',
               alignItems: 'center',
@@ -144,6 +144,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
           top: 0,
           zIndex: 1,
           bgcolor: 'background.default',
+          pt: 2,
           pb: 1,
           mx: { xs: -2, md: -3 },
           px: { xs: 2, md: 3 },
@@ -201,6 +202,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
 
       {/* Provider list — click-to-navigate (D-D) */}
       <Box
+        role="list"
         aria-label="Funeral providers"
         sx={{ display: 'flex', flexDirection: 'column', gap: 2, pb: 3 }}
       >
diff --git a/src/components/pages/VenueStep/VenueStep.tsx b/src/components/pages/VenueStep/VenueStep.tsx
index 83dc703..751c816 100644
--- a/src/components/pages/VenueStep/VenueStep.tsx
+++ b/src/components/pages/VenueStep/VenueStep.tsx
@@ -181,7 +181,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
         mapPanel || (
           <Box
             sx={{
-              bgcolor: 'var(--fa-color-sage-50)',
+              bgcolor: 'var(--fa-color-surface-cool)',
               height: '100%',
               display: 'flex',
               alignItems: 'center',
@@ -213,6 +213,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
             top: 0,
             zIndex: 1,
             bgcolor: 'background.default',
+            pt: 2,
             pb: 1,
             mx: { xs: -2, md: -3 },
             px: { xs: 2, md: 3 },
@@ -232,6 +233,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
           <Box sx={{ display: 'flex', gap: 1, mb: 2, alignItems: 'flex-start' }}>
             <TextField
               placeholder="Search a town or suburb..."
+              aria-label="Search venues by town or suburb"
               value={values.search}
               onChange={(e) => onChange({ ...values, search: e.target.value })}
               fullWidth