From db3c9d660e19d016b599742ecdee14aa93f7bfbc Mon Sep 17 00:00:00 2001
From: EvKoh <1309463+EvKoh@users.noreply.github.com>
Date: Sat, 3 Oct 2026 15:51:34 +0200
Subject: [PATCH] fix(mobile): announce which Show and rating chip is chosen

MChip only showed its state through colour. A pressable option renders
aria-pressed from active; the places filter's Show and rating floor chips use
it, and the tests now check the chosen chip by its pressed state.
---
 client/src/mobile/components/MChip.tsx               |  9 ++++++++-
 .../screens/trip/places/MPlacesFilterControls.tsx    |  2 +-
 .../screens/trip/places/MPlacesFilterSheet.tsx       |  2 +-
 .../tests/unit/mobile/trip/MPlacesBrowser.test.tsx   |  1 +
 .../unit/mobile/trip/MPlacesFilterSheet.test.tsx     | 12 ++++++++++--
 5 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/client/src/mobile/components/MChip.tsx b/client/src/mobile/components/MChip.tsx
index 414a61e91..5669ad7cd 100644
--- a/client/src/mobile/components/MChip.tsx
+++ b/client/src/mobile/components/MChip.tsx
@@ -10,16 +10,23 @@ interface MChipProps {
    * back what it can: the chips that start a search are the ones worth the height.
    */
   size?: 'sm' | 'tap'
+  /**
+   * The chip is one choice of a picker: announce `active` as `aria-pressed`, so a
+   * screen reader hears which one is on, not just its colour. Off by default, for
+   * chips that only run an action.
+   */
+  pressable?: boolean
   className?: string
   children: ReactNode
 }
 
 /** Small pill chip: --m-act when active, neutral --m-ic surface otherwise. */
-export default function MChip({ active = false, onClick, size = 'sm', className = '', children }: MChipProps) {
+export default function MChip({ active = false, onClick, size = 'sm', pressable = false, className = '', children }: MChipProps) {
   return (
     <button
       type="button"
       onClick={onClick}
+      aria-pressed={pressable ? active : undefined}
       className={`inline-flex flex-none items-center gap-[6px] rounded-full font-semibold ${
         size === 'tap' ? 'px-[13px] py-[10px] text-[0.8125rem]' : 'px-3 py-[7px] text-[0.75rem]'
       } ${
diff --git a/client/src/mobile/screens/trip/places/MPlacesFilterControls.tsx b/client/src/mobile/screens/trip/places/MPlacesFilterControls.tsx
index bb5317d03..e9835b2f4 100644
--- a/client/src/mobile/screens/trip/places/MPlacesFilterControls.tsx
+++ b/client/src/mobile/screens/trip/places/MPlacesFilterControls.tsx
@@ -94,7 +94,7 @@ export function MRatingFloorChips() {
   return (
     <div role="group" aria-label={t('places.filterByRating')} className="flex flex-wrap gap-[6px]">
       {RATING_FLOORS.map(floor => (
-        <MChip key={String(floor)} size="tap" active={ratingFilter === floor} onClick={() => setRatingFilter(floor)}>
+        <MChip key={String(floor)} size="tap" pressable active={ratingFilter === floor} onClick={() => setRatingFilter(floor)}>
           {floor === 'all' ? t('common.all') : (
             <>
               <Star size={12} strokeWidth={2.2} fill="currentColor" className="flex-none" />
diff --git a/client/src/mobile/screens/trip/places/MPlacesFilterSheet.tsx b/client/src/mobile/screens/trip/places/MPlacesFilterSheet.tsx
index 7f9af9adb..cea5633fd 100644
--- a/client/src/mobile/screens/trip/places/MPlacesFilterSheet.tsx
+++ b/client/src/mobile/screens/trip/places/MPlacesFilterSheet.tsx
@@ -61,7 +61,7 @@ export default function MPlacesFilterSheet({ open, onClose, places, categories }
           <SectionTitle>{t('places.filterShow')}</SectionTitle>
           <div role="group" aria-label={t('places.filterShow')} className="flex flex-wrap gap-[6px]">
             {pools.map(pool => (
-              <MChip key={pool.id} size="tap" active={filter === pool.id} onClick={() => setFilter(pool.id)}>
+              <MChip key={pool.id} size="tap" pressable active={filter === pool.id} onClick={() => setFilter(pool.id)}>
                 {pool.label}
               </MChip>
             ))}
diff --git a/client/tests/unit/mobile/trip/MPlacesBrowser.test.tsx b/client/tests/unit/mobile/trip/MPlacesBrowser.test.tsx
index a2eebd252..55ff3ec67 100644
--- a/client/tests/unit/mobile/trip/MPlacesBrowser.test.tsx
+++ b/client/tests/unit/mobile/trip/MPlacesBrowser.test.tsx
@@ -178,6 +178,7 @@ describe('MPlacesBrowser', () => {
     const floors = screen.getByRole('group', { name: 'Filter by rating' })
     fireEvent.click(within(floors).getByRole('button', { name: '4+' }))
     expect(useTripStore.getState().placesRatingFilter).toBe(4)
+    expect(within(floors).getByRole('button', { name: '4+' })).toHaveAttribute('aria-pressed', 'true')
     expect(screen.getByText('Louvre')).toBeInTheDocument()
     expect(screen.queryByText('Eiffel Tower')).not.toBeInTheDocument()
     expect(screen.queryByText('Seine Track')).not.toBeInTheDocument()
diff --git a/client/tests/unit/mobile/trip/MPlacesFilterSheet.test.tsx b/client/tests/unit/mobile/trip/MPlacesFilterSheet.test.tsx
index 4e878684b..e6c71fdd7 100644
--- a/client/tests/unit/mobile/trip/MPlacesFilterSheet.test.tsx
+++ b/client/tests/unit/mobile/trip/MPlacesFilterSheet.test.tsx
@@ -56,15 +56,23 @@ describe('MPlacesFilterSheet', () => {
   it('FE-MOB-PFSHEET-003: picking a pool writes it to the trip store', async () => {
     renderSheet()
     await screen.findByRole('dialog', { name: 'Filters' })
-    fireEvent.click(within(group('Show')).getByRole('button', { name: 'Unplanned' }))
+    const show = group('Show')
+    expect(within(show).getByRole('button', { name: 'All' })).toHaveAttribute('aria-pressed', 'true')
+    fireEvent.click(within(show).getByRole('button', { name: 'Unplanned' }))
     expect(useTripStore.getState().placesFilter).toBe('unplanned')
+    // The chosen chip says so to a screen reader, and only that one.
+    expect(within(show).getByRole('button', { name: 'Unplanned' })).toHaveAttribute('aria-pressed', 'true')
+    expect(within(show).getByRole('button', { name: 'All' })).toHaveAttribute('aria-pressed', 'false')
   })
 
   it('FE-MOB-PFSHEET-004: picking a floor writes the rating filter to the trip store', async () => {
     renderSheet()
     await screen.findByRole('dialog', { name: 'Filters' })
-    fireEvent.click(within(group('Filter by rating')).getByRole('button', { name: '3+' }))
+    const floors = group('Filter by rating')
+    fireEvent.click(within(floors).getByRole('button', { name: '3+' }))
     expect(useTripStore.getState().placesRatingFilter).toBe(3)
+    expect(within(floors).getByRole('button', { name: '3+' })).toHaveAttribute('aria-pressed', 'true')
+    expect(within(floors).getByRole('button', { name: 'All' })).toHaveAttribute('aria-pressed', 'false')
   })
 
   it('FE-MOB-PFSHEET-005: categories toggle in and out of the shared set, "no category" included', async () => {