From 6541677cba2d5ed51e29fe124c7416d4bb9fd75e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C4=ABlav=C4=81pi=20Cheesley?= <silavapi@silavapi.co.uk>
Date: Wed, 23 Sep 2026 20:03:38 +0100
Subject: [PATCH] Make the page usable: board beside the text, and Return takes
 the offer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three things found by using the hosted app rather than by testing it.

Pressing Return on a finished drill threw away whatever the result card was
offering. The keyboard path went straight to "start this drill again" instead
of through the same handler the button uses, so a card reading "Repair drill ·
T" restarted the lesson when you pressed a key. That is the same failure as a
button that lies, reached by a different route, and it silently discarded the
repair every time.

The board sat 770 pixels above the text being typed, so a learner could see
where the next key was or what they were meant to type, but never both. The
readout naming the key and the diagram showing it are meant to reinforce each
other and could not. They now sit side by side above 62rem and stack below it,
in the order they appear in the markup, so what the eye follows and what Tab
follows still agree.

The sprint, the ladder, the statistics and the saving controls were somewhere
down a five-thousand-pixel page with nothing to say they existed. There is a
section navigation now, revealed once a layout is loaded and skippable by the
link that already existed; the ladder is a grid of cards instead of thirteen
full-width rows; choosing a layout and reading what was found in it share one
band instead of two; and the instructions stand down once they have been
followed. The page is 3786 pixels where it was 5366, and the content uses the
window instead of 42 per cent of it.

New tests guard all of it, including at 380 pixels where the columns stack.
The keyboard-only journey is updated for the navigation: it now takes the skip
link, which is what the skip link is for.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 index.html                | 176 ++++++++++++++++++++------------------
 src/ui/drill-view.ts      |   6 +-
 src/ui/load-form.ts       |   7 ++
 src/ui/theme.css          | 144 ++++++++++++++++++++++++++++++-
 tests/e2e/drill.spec.ts   |  25 ++++++
 tests/e2e/layout.spec.ts  | 110 ++++++++++++++++++++++++
 tests/e2e/pending.spec.ts |  11 ++-
 7 files changed, 389 insertions(+), 90 deletions(-)
 create mode 100644 tests/e2e/layout.spec.ts

diff --git a/index.html b/index.html
index f25cf3e..514013e 100644
--- a/index.html
+++ b/index.html
@@ -19,49 +19,56 @@ <h1>Touchwright</h1>
       </p>
     </header>
 
-    <main id="main">
-      <section aria-labelledby="load-heading">
-        <h2 id="load-heading">Load your layout</h2>
-        <p>
-          Export your layout from the MoErgo Layout Editor and choose the file here. Nothing is
-          uploaded anywhere; the file is read in your browser.
-        </p>
-        <p>
-          <label class="field">
-            <span>Layout export (JSON)</span>
-            <input id="layout-file" type="file" accept="application/json,.json" />
-          </label>
-        </p>
-        <p id="layout-status" role="status" aria-live="polite"></p>
-        <div id="layout-error" role="alert" hidden></div>
-      </section>
+    <nav id="section-nav" class="section-nav" aria-label="Sections" hidden>
+      <ul>
+        <li><a href="#drill-section">Practise</a></li>
+        <li><a href="#sprint-section">Sprint</a></li>
+        <li><a href="#ladder-section">Ladder</a></li>
+        <li><a href="#stats-section">Statistics</a></li>
+        <li><a href="#progress-section">Saving</a></li>
+      </ul>
+    </nav>
 
-      <section id="summary" aria-labelledby="summary-heading" hidden>
-        <h2 id="summary-heading">What that layout looks like</h2>
-        <dl id="summary-list"></dl>
-      </section>
-
-      <!--
-        The diagram is decorative reinforcement and is marked aria-hidden, so
-        everything it shows is stated here in text as well: the highlighted key in
-        #board-next, the finger colours in #board-legend, and every cap's hand,
-        finger and row in #board-key-list.
-      -->
-      <section id="board-section" aria-labelledby="board-heading" hidden>
-        <h2 id="board-heading">Where those keys are</h2>
-        <p id="board-next"></p>
-        <div id="board-figure"></div>
-        <p id="board-legend-intro">
-          Each cap is outlined in the colour of the finger that owns it.
-        </p>
-        <ul id="board-legend" class="board-legend"></ul>
-        <details id="board-key-detail" class="board-key-detail">
-          <summary>Every key on the board, in words</summary>
-          <ul id="board-key-list" class="board-key-list"></ul>
-        </details>
-      </section>
+    <main id="main">
+      <div class="setup">
+        <section aria-labelledby="load-heading" class="setup-load">
+          <h2 id="load-heading">Load your layout</h2>
+          <p id="load-intro">
+            Export your layout from the MoErgo Layout Editor and choose the file here. Nothing is
+            uploaded anywhere; the file is read in your browser.
+          </p>
+          <p>
+            <label class="field">
+              <span>Layout export (JSON)</span>
+              <input id="layout-file" type="file" accept="application/json,.json" />
+            </label>
+          </p>
+          <p id="layout-status" role="status" aria-live="polite"></p>
+          <div id="layout-error" role="alert" hidden></div>
+        </section>
+
+        <section id="summary" aria-labelledby="summary-heading" hidden>
+          <h2 id="summary-heading">What that layout looks like</h2>
+          <dl id="summary-list"></dl>
+        </section>
+      </div>
+
+      <div class="workspace">
+        <section id="board-section" aria-labelledby="board-heading" hidden>
+          <h2 id="board-heading">Where those keys are</h2>
+          <p id="board-next"></p>
+          <div id="board-figure"></div>
+          <p id="board-legend-intro">
+            Each cap is outlined in the colour of the finger that owns it.
+          </p>
+          <ul id="board-legend" class="board-legend"></ul>
+          <details id="board-key-detail" class="board-key-detail">
+            <summary>Every key on the board, in words</summary>
+            <ul id="board-key-list" class="board-key-list"></ul>
+          </details>
+        </section>
 
-      <!--
+        <!--
         The drill surface.
 
         How to escape the keyboard capture is stated here in visible text, not in
@@ -70,20 +77,20 @@ <h2 id="board-heading">Where those keys are</h2>
         row in words and is the primary channel; the board highlight above only
         reinforces it.
       -->
-      <section id="drill-section" aria-labelledby="drill-heading" hidden>
-        <h2 id="drill-heading">Practise</h2>
-        <p id="drill-how">
-          Choose <em>Start drill</em> and type what you see.
-          <strong>Press Escape at any time to give the keyboard back.</strong> The page then works
-          as usual, and <em>Resume drill</em> picks up exactly where you left off. Tab always moves
-          focus, even while the drill has the keyboard.
-        </p>
-        <p class="drill-controls">
-          <button id="drill-start" type="button" class="button button-solid">Start drill</button>
-          <button id="drill-reset" type="button" class="button button-outline">Start over</button>
-        </p>
-        <p id="drill-next" class="drill-next"></p>
-        <!--
+        <section id="drill-section" aria-labelledby="drill-heading" hidden>
+          <h2 id="drill-heading">Practise</h2>
+          <p id="drill-how">
+            Choose <em>Start drill</em> and type what you see.
+            <strong>Press Escape at any time to give the keyboard back.</strong> The page then works
+            as usual, and <em>Resume drill</em> picks up exactly where you left off. Tab always
+            moves focus, even while the drill has the keyboard.
+          </p>
+          <p class="drill-controls">
+            <button id="drill-start" type="button" class="button button-solid">Start drill</button>
+            <button id="drill-reset" type="button" class="button button-outline">Start over</button>
+          </p>
+          <p id="drill-next" class="drill-next"></p>
+          <!--
           The sprint countdown.
 
           It sits here, directly above the text, because that is where the eyes
@@ -94,36 +101,37 @@ <h2 id="drill-heading">Practise</h2>
           would be unusable. The other channel is #sprint-warning below, a polite
           region written only at a handful of milestones.
         -->
-        <p id="sprint-countdown" class="sprint-countdown" role="timer" hidden></p>
-        <div
-          id="drill-surface"
-          class="drill-surface"
-          tabindex="0"
-          role="group"
-          aria-label="Drill text"
-          aria-describedby="drill-next drill-escape"
-        >
-          <p id="drill-text" class="drill-text"></p>
-        </div>
-        <p id="drill-escape" class="drill-hint">
-          Escape releases the keyboard from anywhere in the drill.
-        </p>
-        <p id="drill-capture" class="drill-hint" role="status" aria-live="polite"></p>
-        <p id="sprint-warning" class="drill-hint" role="status" aria-live="polite"></p>
-        <p id="drill-progress" class="drill-progress" role="status" aria-live="polite"></p>
-        <p id="drill-error" class="drill-error" role="alert" hidden></p>
-
-        <div id="drill-result" class="drill-result" hidden>
-          <h3>How that went</h3>
-          <p id="drill-result-summary" class="drill-result-summary" role="alert"></p>
-          <dl id="drill-result-detail"></dl>
-          <p id="drill-result-why"></p>
-          <p class="drill-controls">
-            <button id="drill-continue" type="button" class="button button-solid"></button>
-            <span class="drill-hint">Or press any key to start the next drill.</span>
+          <p id="sprint-countdown" class="sprint-countdown" role="timer" hidden></p>
+          <div
+            id="drill-surface"
+            class="drill-surface"
+            tabindex="0"
+            role="group"
+            aria-label="Drill text"
+            aria-describedby="drill-next drill-escape"
+          >
+            <p id="drill-text" class="drill-text"></p>
+          </div>
+          <p id="drill-escape" class="drill-hint">
+            Escape releases the keyboard from anywhere in the drill.
           </p>
-        </div>
-      </section>
+          <p id="drill-capture" class="drill-hint" role="status" aria-live="polite"></p>
+          <p id="sprint-warning" class="drill-hint" role="status" aria-live="polite"></p>
+          <p id="drill-progress" class="drill-progress" role="status" aria-live="polite"></p>
+          <p id="drill-error" class="drill-error" role="alert" hidden></p>
+
+          <div id="drill-result" class="drill-result" hidden>
+            <h3>How that went</h3>
+            <p id="drill-result-summary" class="drill-result-summary" role="alert"></p>
+            <dl id="drill-result-detail"></dl>
+            <p id="drill-result-why"></p>
+            <p class="drill-controls">
+              <button id="drill-continue" type="button" class="button button-solid"></button>
+              <span class="drill-hint">Or press any key to start the next drill.</span>
+            </p>
+          </div>
+        </section>
+      </div>
 
       <!--
         Sprint mode.
diff --git a/src/ui/drill-view.ts b/src/ui/drill-view.ts
index bcc83bb..40ab5a2 100644
--- a/src/ui/drill-view.ts
+++ b/src/ui/drill-view.ts
@@ -831,7 +831,11 @@ export function createDrillView(options: DrillViewOptions): DrillView {
     if (current.isFinished) {
       if (!current.requestContinue(event.key).accepted) return;
       event.preventDefault();
-      startDrill();
+      // Through onContinue, not straight to startDrill: the result card may be
+      // offering the next lesson or a repair drill, and a keyboard learner must
+      // get the same thing the button offers. Going direct silently threw the
+      // offer away and started this drill again.
+      onContinue();
       return;
     }
 
diff --git a/src/ui/load-form.ts b/src/ui/load-form.ts
index 52829a5..f391694 100644
--- a/src/ui/load-form.ts
+++ b/src/ui/load-form.ts
@@ -109,6 +109,8 @@ export function wireUp(root: ParentNode = document, options: WireUpOptions = {})
   const legend = required('#board-legend', HTMLElement, root);
   const keyList = required('#board-key-list', HTMLElement, root);
   const drillSection = required('#drill-section', HTMLElement, root);
+  const sectionNav = required('#section-nav', HTMLElement, root);
+  const loadIntro = required('#load-intro', HTMLElement, root);
   const sprintSection = required('#sprint-section', HTMLElement, root);
   const ladderSection = required('#ladder-section', HTMLElement, root);
   const statsSection = required('#stats-section', HTMLElement, root);
@@ -458,6 +460,11 @@ export function wireUp(root: ParentNode = document, options: WireUpOptions = {})
         // The ladder comes before the drill: it decides which lesson the drill is
         // for, and a drill with no lesson could not write its stars anywhere.
         showProgress(keymap);
+        // There is somewhere to go now, and the instructions have been followed,
+        // so one appears and the other stands down. The file input stays: a
+        // learner may want to load a different layout.
+        sectionNav.hidden = false;
+        loadIntro.hidden = true;
         status.textContent = `Loaded ${keymap.title}.`;
       } catch (cause) {
         // Surfaced, never swallowed: a parse failure is the user's problem to
diff --git a/src/ui/theme.css b/src/ui/theme.css
index b1c0c89..6546eb7 100644
--- a/src/ui/theme.css
+++ b/src/ui/theme.css
@@ -21,8 +21,13 @@
   --danger: #a4262c;
   --space: 1rem;
   --radius: 0.375rem;
+
+  /* Comfortable for prose. */
   --measure: 38rem;
 
+  /* The app itself: wide enough to put the board beside the text being typed. */
+  --measure-app: 78rem;
+
   /*
    * The board diagram. Finger colours clear the non-text threshold of 3:1
    * against --board-plate, and cap labels clear AA against --board-cap, in both
@@ -88,7 +93,7 @@ body {
 main,
 .masthead,
 .colophon {
-  max-width: var(--measure);
+  max-width: var(--measure-app);
   padding-inline: var(--space);
   padding-block: var(--space);
   margin-inline: auto;
@@ -514,22 +519,42 @@ dd {
   background: var(--surface-sunken);
 }
 
+/*
+ * A grid rather than one long column. Thirteen rungs stacked full width came to
+ * two and a half thousand pixels, which put the statistics and the saving
+ * controls somewhere nobody would find them. The grid flows in rows, so reading
+ * order and Tab order are unchanged: along, then down.
+ */
 .ladder {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
   gap: 0.5rem;
+  align-content: start;
   padding: 0;
   margin-block: 0.75rem;
   list-style: none;
 }
 
 .ladder-rung {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
   padding: 0.75rem;
   border: 1px solid var(--border);
   border-inline-start: 0.25rem solid var(--border);
   border-radius: var(--radius);
 }
 
+/* A rung is already a narrow column; the page-wide prose floor would widen it. */
+.ladder-rung :where(p) {
+  max-width: none;
+}
+
+/* Buttons line up along the bottom of a row whatever the blurb above them. */
+.ladder-rung > :last-child {
+  margin-block-start: auto;
+}
+
 .ladder-rung[data-state='current'] {
   border-color: var(--accent);
   background: var(--surface-sunken);
@@ -799,3 +824,116 @@ dd {
     transition: none;
   }
 }
+
+/* ---- Page layout ----------------------------------------------------------
+ *
+ * Last in the file on purpose: these rules place the sections the rest of the
+ * sheet has already styled, and placing them here keeps every override after
+ * the thing it overrides.
+ */
+
+/*
+ * The board and the drill text, side by side once there is room.
+ *
+ * They have to be visible at the same time: the readout names the next key in
+ * words and the diagram shows where it is, and a learner reading one while the
+ * other is off screen gets neither. Stacked below the breakpoint, board first,
+ * which is also the order they appear in the markup -- so what the eye follows
+ * and what the Tab key follows never disagree.
+ */
+.workspace {
+  display: grid;
+  gap: calc(var(--space) * 1.5);
+  align-items: start;
+}
+
+@media (width >= 62rem) {
+  .workspace {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
+  }
+
+  /* Both columns stay put while the page scrolls past them. */
+  .workspace > section {
+    position: sticky;
+    top: var(--space);
+  }
+}
+
+/* Grid children default to min-content width; without this the board overflows. */
+.workspace > section {
+  min-width: 0;
+}
+
+/* Anchored sections must not hide under the sticky bar. */
+:where(main section) {
+  scroll-margin-top: 3.5rem;
+}
+
+/*
+ * Choosing a layout and seeing what was found in it: one band of the page, not
+ * two, so the board and the drill start nearer the top.
+ */
+.setup {
+  display: grid;
+  gap: calc(var(--space) * 1.5);
+  align-items: start;
+  margin-block-end: calc(var(--space) * 1.5);
+}
+
+@media (width >= 62rem) {
+  .setup {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
+  }
+}
+
+.setup > section {
+  min-width: 0;
+}
+
+.setup h2 {
+  margin-block-start: 0;
+}
+
+/* The summary is reference, not reading: denser than body text. */
+#summary-list {
+  gap: 0.25rem 1rem;
+  font-size: 0.9375rem;
+}
+
+/*
+ * Somewhere to go. Everything below the drill was unreachable without a long
+ * scroll and no sign there was anything there.
+ */
+.section-nav {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--surface);
+  border-block-end: 1px solid var(--border);
+}
+
+.section-nav ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1rem;
+  max-width: var(--measure-app);
+  margin-inline: auto;
+  padding: 0.5rem var(--space);
+  list-style: none;
+}
+
+.section-nav a {
+  display: inline-block;
+  padding: 0.25rem 0;
+  color: var(--ink);
+  font-size: 0.9375rem;
+}
+
+/*
+ * Long explanatory text stays readable even in a wide column. Written with
+ * :where() so it is a floor rather than a ceiling: any component that needs a
+ * wider paragraph simply says so and wins.
+ */
+:where(main p, main li, main dd) {
+  max-width: var(--measure);
+}
diff --git a/tests/e2e/drill.spec.ts b/tests/e2e/drill.spec.ts
index 47b968c..bdcca93 100644
--- a/tests/e2e/drill.spec.ts
+++ b/tests/e2e/drill.spec.ts
@@ -314,3 +314,28 @@ test('animates nothing on the drill surface when reduced motion is asked for', a
     0.05,
   );
 });
+
+test('the keyboard takes the same offer the button shows, not a fresh drill', async ({ page }) => {
+  // The result card can offer the next lesson or a repair drill. Pressing a key
+  // to continue used to go straight to "start this drill again", which silently
+  // threw that offer away -- a button saying one thing and the keyboard doing
+  // another is the same failure as a button that lies.
+  await startDrill(page);
+  await page.keyboard.type(expectedDrillText(), { delay: 15 });
+  await expect(page.locator('#drill-result')).toBeVisible();
+
+  // Typed cleanly and briskly, so this earns the advance rather than a repair.
+  await expect(page.locator('#drill-continue')).toContainText('Start');
+  const firstDrill = await page.locator('#drill-text').innerText();
+
+  // Past the grace period that stops an overrun keystroke skipping the result
+  // before it has been read -- regression 4, which refuses the key until then.
+  await page.waitForTimeout(600);
+
+  // Any key continues. It must do what the button says.
+  await page.keyboard.press('Enter');
+  await expect(page.locator('#drill-result')).toBeHidden();
+
+  // The next lesson was offered, so the text must be the next lesson's.
+  await expect(page.locator('#drill-text')).not.toHaveText(firstDrill);
+});
diff --git a/tests/e2e/layout.spec.ts b/tests/e2e/layout.spec.ts
new file mode 100644
index 0000000..113d66e
--- /dev/null
+++ b/tests/e2e/layout.spec.ts
@@ -0,0 +1,110 @@
+/**
+ * The page has to be usable, not merely correct.
+ *
+ * These exist because it was neither: the board sat 770 pixels above the text
+ * being typed, so a learner could see where the next key was or what they were
+ * meant to type, but never both; and the sprint, the ladder and the statistics
+ * were far enough down a five-thousand-pixel page that nobody found them.
+ */
+
+import { expect, test, type Page } from '@playwright/test';
+import { gotoApp, loadReferenceLayout } from './helpers.js';
+
+async function box(page: Page, selector: string): Promise<{ top: number; bottom: number }> {
+  const found = await page.locator(selector).boundingBox();
+  expect(found, `${selector} should be on the page`).not.toBeNull();
+  return { top: found!.y, bottom: found!.y + found!.height };
+}
+
+test.describe('on a desktop-sized window', () => {
+  test.use({ viewport: { width: 1440, height: 900 } });
+
+  test('shows the board and the text being typed at the same time', async ({ page }) => {
+    await gotoApp(page);
+    await loadReferenceLayout(page);
+
+    const board = await box(page, '#board-figure');
+    const text = await box(page, '#drill-text');
+
+    // Both inside one viewport height of each other, measured from whichever
+    // starts first to whichever ends last.
+    const spread = Math.max(board.bottom, text.bottom) - Math.min(board.top, text.top);
+    expect(spread, 'the board and the drill text must fit on screen together').toBeLessThanOrEqual(
+      900,
+    );
+  });
+
+  test('puts the board beside the drill rather than above it', async ({ page }) => {
+    await gotoApp(page);
+    await loadReferenceLayout(page);
+
+    const board = await page.locator('#board-figure').boundingBox();
+    const text = await page.locator('#drill-text').boundingBox();
+    expect(board).not.toBeNull();
+    expect(text).not.toBeNull();
+    expect(text!.x, 'the drill should sit to the side of the board').toBeGreaterThan(board!.x);
+  });
+
+  test('offers a way to every section once a layout is loaded', async ({ page }) => {
+    await gotoApp(page);
+    await expect(page.locator('#section-nav')).toBeHidden();
+
+    await loadReferenceLayout(page);
+    const nav = page.locator('#section-nav');
+    await expect(nav).toBeVisible();
+
+    for (const target of [
+      '#drill-section',
+      '#sprint-section',
+      '#ladder-section',
+      '#stats-section',
+    ]) {
+      const link = nav.locator(`a[href="${target}"]`);
+      await expect(link).toBeVisible();
+      await link.click();
+      await expect(page.locator(target)).toBeInViewport();
+    }
+  });
+
+  test('keeps the whole page within a few screens', async ({ page }) => {
+    await gotoApp(page);
+    await loadReferenceLayout(page);
+
+    const height = await page.evaluate(() => document.documentElement.scrollHeight);
+    // It was over five thousand. This is a ceiling, not a target.
+    expect(height, 'the page should not be an endless scroll').toBeLessThan(4200);
+  });
+});
+
+test.describe('on a narrow window', () => {
+  test.use({ viewport: { width: 380, height: 800 } });
+
+  test('stacks rather than squeezing, and never scrolls sideways', async ({ page }) => {
+    await gotoApp(page);
+    await loadReferenceLayout(page);
+
+    const board = await page.locator('#board-figure').boundingBox();
+    const text = await page.locator('#drill-text').boundingBox();
+    expect(board).not.toBeNull();
+    expect(text).not.toBeNull();
+    // Stacked, which is one below the other rather than side by side. Measured
+    // vertically, not by left edges: the drill text sits inside a padded surface
+    // so its box starts a little in from the board's.
+    expect(text!.y, 'the drill should be below the board, not beside it').toBeGreaterThan(
+      board!.y + board!.height,
+    );
+
+    const overflow = await page.evaluate(
+      () => document.documentElement.scrollWidth - document.documentElement.clientWidth,
+    );
+    expect(overflow).toBeLessThanOrEqual(1);
+  });
+
+  test('the section navigation wraps instead of overflowing', async ({ page }) => {
+    await gotoApp(page);
+    await loadReferenceLayout(page);
+    const nav = await page.locator('#section-nav').boundingBox();
+    expect(nav).not.toBeNull();
+    expect(nav!.width).toBeLessThanOrEqual(380);
+  });
+});
diff --git a/tests/e2e/pending.spec.ts b/tests/e2e/pending.spec.ts
index 5213e5f..bed5ffd 100644
--- a/tests/e2e/pending.spec.ts
+++ b/tests/e2e/pending.spec.ts
@@ -277,8 +277,15 @@ test.describe('the trainer journeys', () => {
     // must, and the drill is reachable from there without a single click.
     await page.keyboard.press('Tab');
     await expect(page.getByRole('link', { name: 'Skip to main content' })).toBeFocused();
-    await page.keyboard.press('Tab');
-    await expect(page.locator('#layout-file')).toBeFocused();
+
+    // The section navigation sits between the skip link and the content, which is
+    // why the skip link exists: taking it lands on the content directly, so the
+    // nav is never something a keyboard learner has to wade through.
+    await page.keyboard.press('Enter');
+    const stopsToFile = await tabUntil(page, 'layout-file');
+    expect(stopsToFile.at(-1), `tab stops after the skip link were ${stopsToFile.join(', ')}`).toBe(
+      'layout-file',
+    );
 
     const stops = await tabUntil(page, 'drill-start');
     expect(stops.at(-1), `tab stops after the file input were ${stops.join(', ')}`).toBe(