feat: Add BackLink component and integrate it into Sighting and Submit pages

frontend/src/components/BackLink.css

@@ -0,0 +1,33 @@
+/* A link styled like the other secondary buttons (Load more, Clear
+   filters). Inline-block so the padding keeps its space outside a grid
+   too, as on the submit page. */
+.back-link {
+  display: inline-block;
+  justify-self: start;
+  padding: 7px 14px;
+  border-radius: 12px;
+  color: var(--accent-strong);
+  background: var(--accent-bg);
+  font-size: 15px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: background-color 0.15s;
+
+  &:hover {
+    background: var(--accent-bg-strong);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+
+  /* High-contrast modes drop the tint, so a border keeps the shape. */
+  @media (forced-colors: active) {
+    border: 1px solid LinkText;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}

frontend/src/components/BackLink.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react'
+import { Link, type To } from 'react-router'
+import './BackLink.css'
+
+interface BackLinkProps {
+  to: To
+  children: ReactNode
+}
+
+/**
+ * The link back to the list at the top of the detail and submit pages, so
+ * it has the same shape, spacing and arrow on both. The arrow is hidden from
+ * screen readers, which read just the link text.
+ */
+function BackLink({ to, children }: BackLinkProps) {
+  return (
+    <Link className="back-link" to={to}>
+      <span aria-hidden="true">← </span>
+      {children}
+    </Link>
+  )
+}
+
+export default BackLink

frontend/src/pages/SightingDetailPage.css

@@ -15,38 +15,6 @@
   border: 0;
 }
 
-/* A link styled like the other secondary buttons (Load more, Clear
-   filters). */
-.sighting-detail__back {
-  justify-self: start;
-  padding: 7px 14px;
-  border-radius: 12px;
-  color: var(--accent-strong);
-  background: var(--accent-bg);
-  font-size: 15px;
-  font-weight: 600;
-  text-decoration: none;
-  transition: background-color 0.15s;
-
-  &:hover {
-    background: var(--accent-bg-strong);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-
-  /* High-contrast modes drop the tint, so a border keeps the shape. */
-  @media (forced-colors: active) {
-    border: 1px solid LinkText;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-
 .sighting-detail h1 {
   font-size: 40px;
   margin: 0 0 4px;

frontend/src/pages/SightingDetailPage.tsx

@@ -1,6 +1,7 @@
 import { CombinedGraphQLErrors } from '@apollo/client'
 import { useEffect } from 'react'
-import { Link, useLocation, useParams } from 'react-router'
+import { useLocation, useParams } from 'react-router'
+import BackLink from '../components/BackLink'
 import SightingMap from '../components/SightingMap'
 import UserSubmittedBadge from '../components/UserSubmittedBadge'
 import { useDocumentTitle } from '../hooks/use-document-title'
@@ -51,11 +52,7 @@ function SightingDetailPage() {
 
   useDocumentTitle(title)
 
-  const backLink = (
-    <Link className="sighting-detail__back" to={backTo}>
-      <span aria-hidden="true">← </span>Back to results
-    </Link>
-  )
+  const backLink = <BackLink to={backTo}>Back to results</BackLink>
 
   return (
     <>

frontend/src/pages/SubmitSightingPage.css

@@ -3,13 +3,9 @@
   margin: 0 auto;
 }
 
-.submit-sighting__back {
-  color: var(--accent);
-  text-underline-offset: 4px;
-}
-
+/* The same 24px below the back link as on the detail page. */
 .submit-sighting h1 {
-  margin-bottom: 16px;
+  margin: 24px 0 16px;
 }
 
 .submit-sighting__intro {
@@ -86,8 +82,7 @@
 .submit-sighting__field select:focus-visible,
 .submit-sighting__field textarea:focus-visible,
 .submit-sighting button:focus-visible,
-.submit-sighting__button:focus-visible,
-.submit-sighting__back:focus-visible {
+.submit-sighting__button:focus-visible {
   outline: 3px solid var(--accent);
   outline-offset: 2px;
 }

frontend/src/pages/SubmitSightingPage.tsx

@@ -6,6 +6,7 @@ import {
   CREATE_SIGHTING_MUTATION,
   type SightingFieldError,
 } from '../graphql/mutations'
+import BackLink from '../components/BackLink'
 import LocationPicker from '../components/LocationPicker'
 import { SHAPES_QUERY } from '../graphql/queries'
 
@@ -254,9 +255,7 @@ function SubmitSightingPage() {
   if (submittedId) {
     return (
       <section className="submit-sighting">
-        <Link className="submit-sighting__back" to="/">
-          Back to sightings
-        </Link>
+        <BackLink to="/">Back to sightings</BackLink>
         <h1 ref={headingRef} tabIndex={-1}>
           Sighting submitted
         </h1>
@@ -286,9 +285,7 @@ function SubmitSightingPage() {
 
   return (
     <section className="submit-sighting">
-      <Link className="submit-sighting__back" to="/">
-        Back to sightings
-      </Link>
+      <BackLink to="/">Back to sightings</BackLink>
       <h1 ref={headingRef} tabIndex={-1}>
         Report a sighting
       </h1>

frontend/src/tests/BackLink.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter } from 'react-router'
+import { describe, expect, it } from 'vitest'
+import BackLink from '../components/BackLink'
+
+describe('BackLink', () => {
+  it('links to its target and is named by its text, not the arrow', () => {
+    render(
+      <MemoryRouter>
+        <BackLink to={{ pathname: '/', search: '?q=disk' }}>
+          Back to results
+        </BackLink>
+      </MemoryRouter>,
+    )
+
+    const link = screen.getByRole('link', { name: 'Back to results' })
+    expect(link).toHaveAttribute('href', '/?q=disk')
+    expect(link).toHaveTextContent('← Back to results')
+  })
+})