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 }[] = [
|
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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user