diff --git a/client/src/components/Map/MapTogglePill.tsx b/client/src/components/Map/MapTogglePill.tsx
index f78c125b2..4a05b653e 100644
--- a/client/src/components/Map/MapTogglePill.tsx
+++ b/client/src/components/Map/MapTogglePill.tsx
@@ -6,7 +6,7 @@ import { MAP_CONTROL_SHADOW } from './mapControlShadow'
* One round on/off control in the frosted shell every map control wears, so a new
* one lines up with the compass, the layer switcher and the overview toggle.
*/
-export function MapTogglePill({ active, onToggle, label, icon, testId, tooltipPlacement = 'left', badge = 0 }: {
+export function MapTogglePill({ active, onToggle, label, icon, testId, tooltipPlacement = 'left', badge = 0, opensDialog = false }: {
active: boolean
onToggle: () => void
label: string
@@ -16,6 +16,12 @@ export function MapTogglePill({ active, onToggle, label, icon, testId, tooltipPl
tooltipPlacement?: 'left' | 'right'
/** A count pinned to the top right corner while above zero (how many filters are on, say). */
badge?: number
+ /**
+ * The control opens a dialog instead of switching something on and off (the phone
+ * map's places filter): it then announces the dialog, not a pressed state it
+ * does not have. `active` still lights it.
+ */
+ opensDialog?: boolean
}) {
return (
void }) {
const { t } = useTranslation()
@@ -23,6 +24,7 @@ export function MPlacesFilterPill({ onOpen }: { onOpen: () => void }) {
label={label}
badge={count}
testId="places-filter-pill"
+ opensDialog
icon={}
/>
)
diff --git a/client/tests/unit/mobile/trip/MMapArea.test.tsx b/client/tests/unit/mobile/trip/MMapArea.test.tsx
index ef683de0a..c2afec565 100644
--- a/client/tests/unit/mobile/trip/MMapArea.test.tsx
+++ b/client/tests/unit/mobile/trip/MMapArea.test.tsx
@@ -958,7 +958,9 @@ describe('MMapArea — places filter', () => {
const { shell } = renderArea({ trTab: 'plan' })
const pill = screen.getByTestId('places-filter-pill')
expect(pill).toHaveAccessibleName('Filters')
- expect(pill).toHaveAttribute('aria-pressed', 'false')
+ // It opens a sheet: a dialog to announce, not an on/off state.
+ expect(pill).toHaveAttribute('aria-haspopup', 'dialog')
+ expect(pill).not.toHaveAttribute('aria-pressed')
act(() => { pill.click() })
expect(shell.openSheet).toHaveBeenCalledWith('placesFilter')
})
@@ -967,7 +969,9 @@ describe('MMapArea — places filter', () => {
seedStore(useTripStore, { placesFilter: 'unplanned', placesRatingFilter: 4 })
renderArea({ trTab: 'plan' })
const pill = screen.getByTestId('places-filter-pill')
- expect(pill).toHaveAttribute('aria-pressed', 'true')
+ expect(pill).toHaveClass('text-accent')
+ expect(pill).not.toHaveAttribute('aria-pressed')
+ expect(pill).toHaveAttribute('aria-haspopup', 'dialog')
expect(pill).toHaveAccessibleName('Filters (2)')
expect(screen.getByText('2')).toHaveAttribute('aria-hidden', 'true')
})