From 2a40b884a1432e72d96ad021da002bb619e3a4cb Mon Sep 17 00:00:00 2001 From: Maurice Date: Tue, 20 Oct 2026 16:48:09 +0200 Subject: [PATCH] fix(tours): keep a kept tour's remove button in sight, dimmed It was invisible until hover or focus, so a phone or tablet had no way to find it. It now shows dimmed and comes up fully on hover or focus. --- .../components/Tours/collection/CollectionToursSection.tsx | 5 +++-- .../src/components/Tours/collection/collectionTours.test.tsx | 3 +++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/client/src/components/Tours/collection/CollectionToursSection.tsx b/client/src/components/Tours/collection/CollectionToursSection.tsx index a2843f564..1231c0a15 100644 --- a/client/src/components/Tours/collection/CollectionToursSection.tsx +++ b/client/src/components/Tours/collection/CollectionToursSection.tsx @@ -48,7 +48,8 @@ function KeptTourTypeBadges({ tour }: { tour: CollectionTourItem }) { /** * One kept tour as a card: its grade tile with where it came from, its name * and type, its measures and waypoints as badges, the trip it was saved from, - * and the way into a trip. Removing it sits quietly in its corner. + * and the way into a trip. Removing it sits quietly in its corner, dimmed + * but always there (a phone has no hover), raised on hover or focus. */ function KeptTourCard({ tour, @@ -85,7 +86,7 @@ function KeptTourCard({ onClick={onRemove} aria-label={t('tours.collection.remove')} data-testid={`kept-tour-remove-${tour.id}`} - className="grid h-7 w-7 flex-none place-items-center rounded-full text-content-faint opacity-0 transition-opacity hover:bg-danger-soft hover:text-danger focus-visible:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent group-hover:opacity-100" + className="grid h-7 w-7 flex-none place-items-center rounded-full text-content-faint opacity-50 transition-opacity hover:bg-danger-soft hover:text-danger focus-visible:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent group-hover:opacity-100" > diff --git a/client/src/components/Tours/collection/collectionTours.test.tsx b/client/src/components/Tours/collection/collectionTours.test.tsx index 2cb9e2159..53ca103c0 100644 --- a/client/src/components/Tours/collection/collectionTours.test.tsx +++ b/client/src/components/Tours/collection/collectionTours.test.tsx @@ -357,6 +357,9 @@ describe('CollectionToursSection', () => { expect(card).toHaveTextContent('Alps'); expect(within(card).getByTestId('kept-tour-distance')).toHaveTextContent('8.2 km'); expect(within(card).getByLabelText('4 waypoints')).toBeInTheDocument(); + // Dimmed, never hidden: a touch screen has no hover to bring it out. + expect(within(card).getByTestId('kept-tour-remove-4')).toHaveClass('opacity-50'); + expect(within(card).getByTestId('kept-tour-remove-4')).not.toHaveClass('opacity-0'); fireEvent.click(within(card).getByTestId('kept-tour-remove-4')); // The card's own button and the question's confirm share the name; the question's comes last. const removeButtons = await screen.findAllByRole('button', { name: 'Remove from the collection' });