From 952bdaea72917934fe4b600993c3c995e160f73b Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Wed, 22 Apr 2026 10:12:28 +1000
Subject: [PATCH] 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>
---
 .../pages/ProvidersStep/ProvidersStep.tsx         | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

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<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>