Merge pull request 'fix(home): stop implying we are official, and fix the mobile hero and search' (#96) from fix/hero-mobile-and-wording into main

Reviewed-on: #96

e2e/tests/journeys.spec.ts

@@ -121,6 +121,33 @@ test('the home page has a real title', async ({ page }) => {
   expect(await page.title()).toMatch(/schoolcompare/i);
 });
 
+test('the site states its independence and never claims to be official', async ({ page }) => {
+  await page.goto('/');
+
+  // Carried in the footer, so it appears on every page rather than only here.
+  await expect(
+    page.getByText(/an independent site\.\s*not affiliated with the department for education/i)
+  ).toBeVisible();
+
+  /*
+   * Describing the DATA as official is accurate and appears throughout
+   * ("official DfE figures", "the official figure isn't in"). Describing the
+   * SITE as official is not: schoolcompare republishes government data, it is
+   * not a government service. The difference is the grammatical subject, so
+   * this looks for text that opens with "Official" as a standalone label —
+   * the shape a value-prop title or heading takes, and the shape the old
+   * "Official & trusted" took.
+   */
+  const claims = await page.evaluate(() =>
+    [...document.querySelectorAll('body *')]
+      .flatMap(el => [...el.childNodes]
+        .filter(n => n.nodeType === 3)
+        .map(n => (n.textContent ?? '').trim()))
+      .filter(t => /^Official\b/i.test(t) && !/^Official\s+(DfE|data|figures)/i.test(t))
+  );
+  expect(claims, `text presenting the site itself as official: ${claims.join(' | ')}`).toEqual([]);
+});
+
 test('the landing bands share one vertical rhythm', async ({ page }) => {
   await page.goto('/');
   const gaps = await page.evaluate(() => {
@@ -789,9 +816,21 @@ test('the brand asset set is complete and served', async ({ page }) => {
   expect(og.ok()).toBe(true);
   expect(og.headers()['content-type']).toContain('image/png');
 
-  // iOS ignores SVG touch icons, so this must be a real raster.
+  /*
-  const apple = await page.request.get('/apple-icon');
+   * iOS ignores SVG touch icons, so this must be a real raster.
-  expect(apple.ok()).toBe(true);
+   *
+   * Read the href off the page rather than hardcoding a path. The route moved
+   * when the generated app/apple-icon.tsx became a static app/apple-icon.png:
+   * a generated icon is served at /apple-icon, a static one at /apple-icon.png
+   * with a content hash. This test kept asking for /apple-icon and got a 404 —
+   * reporting a missing icon while the icon was present and correctly linked.
+   */
+  const appleLink = page.locator('link[rel="apple-touch-icon"]');
+  await expect(appleLink).toHaveCount(1);
+  const appleHref = await appleLink.getAttribute('href');
+  expect(appleHref).toBeTruthy();
+  const apple = await page.request.get(appleHref!);
+  expect(apple.ok(), `apple touch icon at ${appleHref} should be served`).toBe(true);
   expect(apple.headers()['content-type']).toContain('image/png');
 
   // Android needs a maskable PNG or the install prompt has no icon.
@@ -912,8 +951,22 @@ test('the header carries the schoolcompare lockup', async ({ page }) => {
   // hashed at build time and change on any unrelated edit.
   await expect(home).toHaveText(/^\s*schoolcompare\s*$/);
 
-  const mark = home.locator('svg').first();
+  /*
+   * The mark is raster artwork, not an inline SVG — it has been since the
+   * supplied logo replaced the reconstruction, and this locator went on
+   * looking for an <svg> that no longer exists.
+   *
+   * Assert on naturalWidth rather than visibility: a <picture> whose sources
+   * all 404 still lays out and still passes toBeVisible(), so the weaker
+   * assertion would go green on a broken lockup.
+   */
+  const mark = home.locator('img').first();
   await expect(mark).toBeVisible();
+  const markState = await mark.evaluate((el: HTMLImageElement) => ({
+    loaded: el.complete && el.naturalWidth > 0,
+    src: el.currentSrc,
+  }));
+  expect(markState.loaded, `header mark failed to load: ${markState.src}`).toBe(true);
 });
 
 test('no visible text falls back to the browser default black', async ({ page }) => {

nextjs-app/components/FilterBar.module.css

@@ -460,6 +460,30 @@
   }
 }
 
+/*
+ * Narrow phones: the button drops below the input instead of sharing the row.
+ *
+ * "Search schools" is a fixed 134px with `white-space: nowrap`, so on a 390px
+ * screen it took 48% of the row and left the input 102px of text space for a
+ * 194px placeholder — the field showed "School name or" and stopped. At 320px
+ * the input was down to 32px, which is too narrow to read what you are typing.
+ *
+ * Wrapping rather than restructuring: the pill stays one element, so it keeps
+ * its border, shadow and :focus-within ring, and the button gets a full-width
+ * tap target on the way. Giving the button a 100% flex-basis is what forces
+ * the wrap; the input keeps `flex: 1` and so takes the whole first row.
+ */
+@media (max-width: 480px) {
+  .heroMode .omniBoxContainer {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  .heroMode .searchButton {
+    flex: 1 1 100%;
+    width: 100%;
+  }
+}
+
 @media (max-width: 420px) {
   /* Below this the pin costs more room than it earns. */
   .heroMode .omniIcon {

nextjs-app/components/Footer.module.css

@@ -92,6 +92,22 @@
   max-width: 34ch;
 }
 
+/*
+ * Quieter than .description, but by size only — not by contrast.
+ *
+ * --on-sunken-faint measured 4.71:1 here, which clears AA by 0.21. That is a
+ * fine margin for decorative text and the wrong one for a disclaimer, whose
+ * whole job is to be legible to someone checking whether this is a government
+ * site. --on-sunken-muted is 5.66:1 on the same band.
+ */
+.independence {
+  margin: 0;
+  font-size: var(--step--2);
+  line-height: 1.6;
+  color: var(--on-sunken-muted);
+  max-width: 38ch;
+}
+
 .sectionTitle {
   margin: 0;
   font-family: var(--font-display);

nextjs-app/components/Footer.tsx

@@ -35,6 +35,14 @@ export function Footer() {
             <p className={styles.description}>
               Compare primary and secondary schools across England.
             </p>
+            {/*
+              Says once, plainly, what the landing page's value props only
+              imply: we publish official data, we are not an official body.
+              Cheap to state and expensive to be wrong about.
+            */}
+            <p className={styles.independence}>
+              An independent site. Not affiliated with the Department for Education or Ofsted.
+            </p>
             <a
               href="mailto:contact@schoolcompare.co.uk"
               className={styles.link}

nextjs-app/components/HomeView.module.css

@@ -161,10 +161,22 @@
  * page and out-shouts the H1 and the search box. Dimming it in CSS is the
  * whole treatment, and the scrim then fades it into the dark panel instead of
  * into cream.
+ *
+ * Raising the brightness raises the background under light dark-theme text, so
+ * this value has a contrast floor, not just a taste range. Measured off
+ * rendered pixels, sampling background up to 120px past each line:
+ *
+ *   brightness   title      body
+ *   0.52         11.01:1    6.44:1
+ *   0.75          9.48:1    5.21:1   ← current
+ *
+ * Body text is the binding one. Going much above 0.75 walks it toward the
+ * 4.5:1 floor, and at that point the scrim needs to carry further right rather
+ * than the artwork being dimmed less.
  */
 @media (prefers-color-scheme: dark) {
   .heroArt img {
-    filter: brightness(0.52) saturate(0.72) contrast(1.02);
+    filter: brightness(0.75) saturate(0.72) contrast(1.02);
   }
   .heroPanel::before {
     background: linear-gradient(
@@ -253,12 +265,30 @@
  * the same decision.
  */
 @media (max-width: 860px) {
+  /*
+   * Artwork above the copy, not below it.
+   *
+   * The DOM keeps .heroContent first so the desktop overlay does not depend on
+   * source order, which left the band stranded under the search on phones —
+   * reading as a strip stuck on the end rather than as a hero image. `order`
+   * moves it visually only; it is decorative and aria-hidden, so there is no
+   * reading order to disturb.
+   *
+   * It costs about 136px above the search. Measured on a 667px viewport (the
+   * shortest phone still in use) the search still lands near 400px, well
+   * inside the fold.
+   */
+  .heroPanel {
+    display: flex;
+    flex-direction: column;
+  }
   .heroContent {
-    padding: 2rem 1.5rem 1.75rem;
+    padding: 1.75rem 1.5rem 1.75rem;
     max-width: none;
   }
   .heroArt {
     position: static;
+    order: -1;
     height: 11rem;
   }
   /* The band crop centres the schoolhouse at about 65% across, so squeezing

nextjs-app/components/HomeView.tsx

@@ -157,7 +157,20 @@ const VALUE_PROPS: ValueProp[] = [
   {
     icon: <ShieldCheckIcon />,
     tintClass: styles.propIconTrust,
-    title: 'Official & trusted',
+    /*
+     * "Built on official data", never "Official".
+     *
+     * The previous title was "Official & trusted", whose grammatical subject
+     * is this site — it reads as a claim that schoolcompare is itself an
+     * official service. It is not: it is an independent site that republishes
+     * official figures. The distinction is the difference between describing
+     * the data and describing ourselves, and only the first is true.
+     *
+     * Everywhere else the word appears ("official DfE figures", "the official
+     * figure isn't in") it already qualifies the data, which is correct and
+     * should stay.
+     */
+    title: 'Built on official data',
     body: 'Every figure comes from DfE performance tables and Ofsted.',
   },
   {

nextjs-app/components/Illustration.tsx

@@ -60,6 +60,18 @@ export function HeroIllustration() {
         srcSet="/brand/hero-band-500.webp 500w, /brand/hero-band-700.webp 700w, /brand/hero-band-972.webp 972w"
         sizes={SIZES}
       />
+      {/*
+        The band's JPEG, and the reason it exists.
+
+        <img src> cannot vary by viewport, so it is always the wide crop. A
+        browser that takes neither AVIF nor WebP would therefore fall through
+        to the desktop frame on a phone and lose the schoolhouse — the exact
+        failure this whole component is arranged to prevent, surviving in the
+        one path nobody looks at. No `type` here, so it matches anywhere the
+        media query does, and it sits after the modern formats so they still
+        win where supported.
+      */}
+      <source media="(max-width: 860px)" srcSet="/brand/hero-band-700.jpg" />
       <source
         type="image/avif"
         srcSet="/brand/hero-wide-900.avif 900w, /brand/hero-wide-1200.avif 1200w, /brand/hero-wide-1672.avif 1672w"

nextjs-app/package-lock.json

@@ -31,7 +31,8 @@
         "@types/jest": "^30.0.0",
         "@types/leaflet": "^1.9.21",
         "jest": "^30.2.0",
-        "jest-environment-jsdom": "^30.2.0"
+        "jest-environment-jsdom": "^30.2.0",
+        "sharp": "^0.34.5"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -937,8 +938,8 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
       "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=18"
       }
@@ -4160,8 +4161,8 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
       "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "devOptional": true,
       "license": "Apache-2.0",
-      "optional": true,
       "engines": {
         "node": ">=8"
       }
@@ -8584,9 +8585,9 @@
       "version": "0.34.5",
       "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
       "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "devOptional": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
-      "optional": true,
       "dependencies": {
         "@img/colour": "^1.0.0",
         "detect-libc": "^2.1.2",
@@ -8629,8 +8630,8 @@
       "version": "7.7.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
       "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "devOptional": true,
       "license": "ISC",
-      "optional": true,
       "bin": {
         "semver": "bin/semver.js"
       },

nextjs-app/package.json

@@ -36,6 +36,7 @@
     "@types/jest": "^30.0.0",
     "@types/leaflet": "^1.9.21",
     "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0"
+    "jest-environment-jsdom": "^30.2.0",
+    "sharp": "^0.34.5"
   }
 }

nextjs-app/scripts/build-hero-images.js

@@ -25,8 +25,16 @@
  *         squeezing further toward 4.9:1 crops the empty sides, not the subject.
  *
  * AVIF and WebP are both emitted. This is flat-shaded vector-style artwork, so
- * AVIF lands roughly an order of magnitude under the source PNG; the JPEG is
+ * AVIF lands roughly an order of magnitude under the source PNG. Both crops
- * only the <img> fallback and is never served to a current browser.
+ * also get a JPEG: the wide one backs the <img src>, and the band one backs a
+ * <source media> — without it a browser taking neither modern format would
+ * fall through to the desktop frame on a phone, since <img src> cannot vary by
+ * viewport.
+ *
+ * sharp is declared in devDependencies rather than leaned on as a transitive
+ * dependency of next. It does currently arrive that way, but relying on that
+ * means a Next upgrade can silently break this script — the same reasoning as
+ * the outputFileTracingIncludes note in next.config.js.
  */
 
 const path = require('path');