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:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user