Skip to content

Conversation

thortve
Copy link
Member

@thortve thortve commented Nov 5, 2026

Align back links across pages

Closes #160

What changed

The back link on the detail page was a tinted pill with an arrow, but on the submit page it was a plain underlined link. Both pages now use one shared component:

  • New BackLink component (frontend/src/components/BackLink.tsx and BackLink.css). It uses the detail page's pill style, which matches the other secondary buttons (Load more, Clear filters) and the existing colour tokens (--accent-strong, --accent-bg, --accent-bg-strong).
  • The arrow is hidden from screen readers, so the link reads as "Back to results" or "Back to sightings".
  • Detail page: uses BackLink, and the old .sighting-detail__back style is removed. It still goes back to the search you came from.
  • Submit page: the form and the success view use BackLink, and the old .submit-sighting__back style is removed. The heading now sits 24px below the link, the same as on the detail page.
  • The link keeps its border in high-contrast mode and turns off its hover transition when reduced motion is on, as before.

Light and dark themes

  • The axe checks in e2e/accessibility.spec.ts pass for the detail and submit pages in both themes, on desktop and mobile.
  • I also looked at both pages in both themes by eye.

Not included

The issue also asks to "reuse shared visual styles or design tokens for form controls". That isn't about back links, so it's left for a separate issue. The submit form's inputs still look different from the search bar.

Tests

  • New BackLink.test.tsx checks the link target and that its name leaves out the arrow.
  • npm run lint, npm run format:check, npm run build, npm run test and npm run test:e2e all pass.

How to check

  1. npm run dev
  2. Open a sighting, then go to "Report a sighting". The back links should look the same and sit the same distance above the heading.
  3. Switch between light and dark mode and check both pages again.
  4. Press Tab to reach the link and check that the focus outline shows.

@thortve thortve added enhancement New feature or request feat New feature labels Nov 5, 2026
@thortve thortve added this to the Partial submission 4 milestone Nov 5, 2026
@thortve thortve self-assigned this Nov 5, 2026
@thortve thortve marked this pull request as ready for review November 5, 2026 09:48
@thortve thortve requested a review from a team as a code owner November 5, 2026 09:48
@thortve thortve linked an issue Nov 5, 2026 that may be closed by this pull request
@thortve thortve merged commit cf0c962 into 158-polish-visual-consistency-and-mobile-browsing Nov 5, 2026
@thortve thortve deleted the 160-align-back-links-across-pages branch November 5, 2026 10:22
Sign in to join this conversation on GitHub.
Labels
enhancement New feature or request feat New feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Align back links across pages
1 participant