diff --git a/src/components/pages/ProvidersStep/ProvidersStep.tsx b/src/components/pages/ProvidersStep/ProvidersStep.tsx index 527bfdb..7c15d1f 100644 --- a/src/components/pages/ProvidersStep/ProvidersStep.tsx +++ b/src/components/pages/ProvidersStep/ProvidersStep.tsx @@ -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 = ({ startIcon={} 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'} + + Sort: + + {SORT_OPTIONS.find((o) => o.value === sortBy)?.label ?? 'Recommended'} = ({ sx={{ mt: 3, display: 'block' }} aria-live="polite" > - {providers.length} provider{providers.length !== 1 ? 's' : ''} found + + {providers.length} + {' '} + provider{providers.length !== 1 ? 's' : ''} found