Clarify ProvidersStep sort button + bold results count

- Sort button now reads "Sort: <value>" so it's distinguishable from
  a filter; aria-label spells out the current sort. Price sort labels
  dropped their internal colons (avoids double-colon rendering).
- Results count bolds the number in primary text so it registers as
  the subject rather than incidental metadata.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-22 10:12:28 +10:00
parent e78d88b2f3
commit 952bdaea72

View File

@@ -167,8 +167,8 @@ const DEFAULT_FUNERAL_TYPES: FuneralTypeOption[] = [
const SORT_OPTIONS: { value: ProviderSortBy; label: string }[] = [
{ value: 'recommended', label: 'Recommended' },
{ value: 'nearest', label: 'Nearest' },
{ value: 'price_low', label: 'Price: Low to High' },
{ value: 'price_high', label: 'Price: High to Low' },
{ value: 'price_low', label: 'Price low to high' },
{ value: 'price_high', label: 'Price high to low' },
];
export const EMPTY_FILTER_VALUES: ProviderFilterValues = {
@@ -611,9 +611,13 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
startIcon={<SwapVertIcon sx={{ fontSize: 16 }} />}
onClick={(e) => setSortAnchor(e.currentTarget)}
aria-haspopup="listbox"
aria-label={`Sort by ${SORT_OPTIONS.find((o) => o.value === sortBy)?.label ?? 'Recommended'}`}
sx={{ textTransform: 'none' }}
>
{SORT_OPTIONS.find((o) => o.value === sortBy)?.label ?? 'Sort'}
<Box component="span" sx={{ color: 'text.secondary', fontWeight: 400, mr: 0.5 }}>
Sort:
</Box>
{SORT_OPTIONS.find((o) => o.value === sortBy)?.label ?? 'Recommended'}
</Button>
<Menu
anchorEl={sortAnchor}
@@ -646,7 +650,10 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
sx={{ mt: 3, display: 'block' }}
aria-live="polite"
>
{providers.length} provider{providers.length !== 1 ? 's' : ''} found
<Box component="span" sx={{ fontWeight: 600, color: 'text.primary' }}>
{providers.length}
</Box>{' '}
provider{providers.length !== 1 ? 's' : ''} found
</Typography>
</Box>