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 }[] = [ const SORT_OPTIONS: { value: ProviderSortBy; label: string }[] = [
{ value: 'recommended', label: 'Recommended' }, { value: 'recommended', label: 'Recommended' },
{ value: 'nearest', label: 'Nearest' }, { value: 'nearest', label: 'Nearest' },
{ value: 'price_low', label: 'Price: Low to High' }, { value: 'price_low', label: 'Price low to high' },
{ value: 'price_high', label: 'Price: High to Low' }, { value: 'price_high', label: 'Price high to low' },
]; ];
export const EMPTY_FILTER_VALUES: ProviderFilterValues = { export const EMPTY_FILTER_VALUES: ProviderFilterValues = {
@@ -611,9 +611,13 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
startIcon={<SwapVertIcon sx={{ fontSize: 16 }} />} startIcon={<SwapVertIcon sx={{ fontSize: 16 }} />}
onClick={(e) => setSortAnchor(e.currentTarget)} onClick={(e) => setSortAnchor(e.currentTarget)}
aria-haspopup="listbox" aria-haspopup="listbox"
aria-label={`Sort by ${SORT_OPTIONS.find((o) => o.value === sortBy)?.label ?? 'Recommended'}`}
sx={{ textTransform: 'none' }} 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> </Button>
<Menu <Menu
anchorEl={sortAnchor} anchorEl={sortAnchor}
@@ -646,7 +650,10 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
sx={{ mt: 3, display: 'block' }} sx={{ mt: 3, display: 'block' }}
aria-live="polite" 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> </Typography>
</Box> </Box>