feat(magazine): Contents button in the sticky review bar

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

CHANGELOG.md

@@ -44,6 +44,7 @@ Follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) · versioned wi
 - **Unboxed ink in or beside a picture, chart or advert is no longer reported as missed text** (labels of a chart, text set into a photo, an advert's own wording).
 
 ### Changed
+- **The Contents button is the first item of the sticky review bar**, so it stays in reach while scrolling a long page.
 - **The page thumbnail is the Review button.** In the thumbnail grid, clicking the (big) page image opens the page in review; the separate *Review* / *Review this page* buttons are gone. A page shared by two or more articles keeps one labelled *Review* button per article, so it stays clear which is meant.
 
 ### Fixed

static/js/magazine.js

@@ -1611,6 +1611,9 @@ function renderReview() {
 
   let html = '';
   html += '<div class="mag-review-pagenav">' +
+      // Back to the contents lives in the sticky bar, so it stays in reach while scrolling a long page.
+      '<button type="button" class="btn-sm" id="mag-review-contents-btn" onclick="magBackToContents()" title="Back to the contents">' +
+      '<span class="mdi mdi-arrow-left" aria-hidden="true"></span> Contents</button>' +
       // One page stepper for the whole magazine, not a separate one bounded
       // to just this article's own pages — the two almost always agreed and
       // having both doubled the toolbar's width for no real benefit.

static/sections/s-magazine.html

@@ -185,9 +185,6 @@
       <!-- ── Review (Stage D) ─────────────────────────────────────────────── -->
       <div id="mag-view-review" hidden>
         <div class="mag-bar">
-          <button type="button" class="btn-sm" onclick="magBackToContents()">
-            <span class="mdi mdi-arrow-left"></span> Contents
-          </button>
           <h3>Review article boundaries</h3>
         </div>
         <div id="mag-review"></div>

tests/magazine.spec.js

@@ -464,6 +464,21 @@ test.describe('Magazine pronunciation and spelling checks', () => {
   });
 });
 
+test('the Contents button is the first item of the sticky review bar and goes back', async ({ page }) => {
+  await mockBackend(page);
+  await page.goto('/', { waitUntil: 'domcontentloaded' });
+  await page.waitForSelector('#app-skeleton', { state: 'detached', timeout: 15_000 });
+  await navTo(page, 's-magazine');
+  await page.locator('#mag-library-list .mag-card').first().click();
+  await page.locator('#mag-contents-view-toggle').click();
+  await page.locator('.mag-card-wrap').filter({ hasText: 'Page 3' }).getByRole('button', { name: /^Review/ }).click();
+  const bar = page.locator('#mag-review .mag-review-pagenav');
+  await expect(bar.locator('> :first-child')).toHaveId('mag-review-contents-btn');
+  await expect(page.locator('#mag-view-review > .mag-bar').getByRole('button', { name: 'Contents' })).toHaveCount(0);
+  await bar.getByRole('button', { name: 'Contents' }).click();
+  await expect(page.locator('#mag-view-contents')).toBeVisible();
+});
+
 test.describe('Magazine: thumbnail as the Review target', () => {
   async function openGrid(page) {
     await page.goto('/', { waitUntil: 'domcontentloaded' });