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') })