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>
This commit is contained in:
2026-03-29 14:36:27 +11:00
parent 9e10a5e0f1
commit fa20599b67
4 changed files with 569 additions and 2 deletions

View File

@@ -13,8 +13,8 @@ import { Typography } from '../../atoms/Typography';
// ─── Types ───────────────────────────────────────────────────────────────────
/** Props for the FA ProviderCard molecule */
export interface ProviderCardProps {
/** Own props for the FA ProviderCard molecule (excludes HTML/Card passthrough) */
export interface ProviderCardOwnProps {
/** Provider display name */
name: string;
/** Location text (suburb, city) */
@@ -45,6 +45,10 @@ export interface ProviderCardProps {
sx?: SxProps<Theme>;
}
/** Props for the FA ProviderCard molecule — includes HTML/ARIA passthrough to Card */
export type ProviderCardProps = ProviderCardOwnProps &
Omit<React.HTMLAttributes<HTMLDivElement>, keyof ProviderCardOwnProps>;
// ─── Constants ───────────────────────────────────────────────────────────────
const LOGO_SIZE = 'var(--fa-provider-card-logo-size)';
@@ -102,6 +106,7 @@ export const ProviderCard = React.forwardRef<HTMLDivElement, ProviderCardProps>(
startingPrice,
onClick,
sx,
...rest
},
ref,
) => {
@@ -115,6 +120,7 @@ export const ProviderCard = React.forwardRef<HTMLDivElement, ProviderCardProps>(
selected={selected}
padding="none"
onClick={onClick}
{...rest}
sx={[
{
overflow: 'hidden',