` **Fixes:** F1 (WCAG 2.4.1 Bypass Blocks) **Files:** - Modify: `user/themes/intotheeast/templates/partials/base.html.twig` - Modify: `user/themes/intotheeast/css/style.css` - Create: `tests/ui/accessibility.spec.js` **Interfaces:** - Produces: `.skip-link` element, `#main-content` id on `

` — both consumed by A1 test - [ ] **Step 1: Create the failing test** Create `tests/ui/accessibility.spec.js`: ```js // @ts-check // Tests: A1–A5 (feature checks) and AX1–AX5 (axe scans) const { test, expect } = require('@playwright/test'); // ── A1: Skip link ────────────────────────────────────────────────────────────── test('A1: skip link targets #main-content and is first focusable element', async ({ page }) => { await page.goto('/'); const skipLink = page.locator('.skip-link'); await expect(skipLink).toBeAttached(); await expect(skipLink).toHaveAttribute('href', '#main-content'); await expect(page.locator('#main-content')).toBeAttached(); }); ``` - [ ] **Step 2: Run A1 to verify it fails** ```bash cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast npx playwright test --project=chromium tests/ui/accessibility.spec.js ``` Expected: FAIL — `.skip-link` not found. - [ ] **Step 3: Add skip link to `base.html.twig`** In `user/themes/intotheeast/templates/partials/base.html.twig`: Change line 15–16 (the opening `` and `

`): ```html

``` Replace with: ```html

``` Then change line 25: ```html

``` Replace with: ```html

``` - [ ] **Step 4: Add skip-link CSS to `style.css`** In `user/themes/intotheeast/css/style.css`, find the `:focus-visible` rule (around line 782): ```css :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ``` Add this block directly before it: ```css .skip-link { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus-visible { left: 0; top: 0; width: auto; height: auto; overflow: visible; padding: var(--space-2) var(--space-4); background: var(--color-accent); color: var(--color-accent-on); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; text-decoration: none; z-index: 9999; } ``` - [ ] **Step 5: Run A1 to verify it passes** ```bash cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast npx playwright test --project=chromium tests/ui/accessibility.spec.js ``` Expected: PASS. - [ ] **Step 6: Run existing tests to check for regressions** ```bash npx playwright test --project=chromium tests/ui/nav.spec.js tests/ui/home.spec.js tests/ui/dailies.spec.js ``` Expected: all pass. - [ ] **Step 7: Commit** ```bash cd /home/mischa/Projects/travel-blog-intotheeast/user git add themes/intotheeast/templates/partials/base.html.twig themes/intotheeast/css/style.css git commit -m "feat(a11y): add skip-to-main link and main landmark id" cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast git add tests/ui/accessibility.spec.js user git commit -m "test(a11y): add A1 skip link test" ``` --- ### Task 2: Color token contrast fixes **Fixes:** F2 (`--color-ink-muted` fails 4.5:1), F3 (`--color-accent` fails 4.5:1) **Files:** - Modify: `user/themes/intotheeast/css/tokens.css` - Modify: `tests/ui/accessibility.spec.js` **Interfaces:** - Consumes: `tests/ui/accessibility.spec.js` from Task 1 - Produces: updated token values verified by A2 test - [ ] **Step 1: Add the failing test** Append to `tests/ui/accessibility.spec.js`: ```js // ── A2: Color token contrast ─────────────────────────────────────────────────── test('A2: contrast tokens meet WCAG AA 4.5:1 floor', async ({ page }) => { await page.goto('/'); const [muted, accent] = await page.evaluate(() => [ getComputedStyle(document.documentElement).getPropertyValue('--color-ink-muted').trim(), getComputedStyle(document.documentElement).getPropertyValue('--color-accent').trim(), ]); expect(muted.toLowerCase()).toBe('#90887e'); expect(accent.toLowerCase()).toBe('#2e9880'); }); ``` - [ ] **Step 2: Run A2 to verify it fails** ```bash cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast npx playwright test --project=chromium tests/ui/accessibility.spec.js --grep "A2" ``` Expected: FAIL — values are `#7a7268` and `#2a8c73`. - [ ] **Step 3: Update `tokens.css`** In `user/themes/intotheeast/css/tokens.css`, make three changes: Change `--color-ink-muted`: ```css --color-ink-muted: #7A7268; /* labels, timestamps, captions */ ``` → ```css --color-ink-muted: #90887E; /* labels, timestamps, captions */ ``` Change `--color-accent`: ```css --color-accent: #2A8C73; /* teal — lightened for dark contrast */ ``` → ```css --color-accent: #2E9880; /* teal — lightened for dark contrast */ ``` Change `--color-accent-hover`: ```css --color-accent-hover: #236655; /* hover/pressed teal */ ``` → ```css --color-accent-hover: #287A68; /* hover/pressed teal */ ``` Contrast verification (for reference only — these numbers are correct): - `#90887E` on `#1A1814` = 5.07:1 ✓, on `#22201B` = 4.66:1 ✓ - `#2E9880` on `#1A1814` = 5.00:1 ✓, on `#22201B` = 4.59:1 ✓ - `#287A68` on `#1A1814` = 3.58:1 ✓ (non-text, needs 3:1) - [ ] **Step 4: Run A2 to verify it passes** ```bash npx playwright test --project=chromium tests/ui/accessibility.spec.js --grep "A2" ``` Expected: PASS. - [ ] **Step 5: Run all accessibility tests** ```bash npx playwright test --project=chromium tests/ui/accessibility.spec.js ``` Expected: A1 and A2 pass. - [ ] **Step 6: Commit** ```bash cd /home/mischa/Projects/travel-blog-intotheeast/user git add themes/intotheeast/css/tokens.css git commit -m "feat(a11y): fix --color-ink-muted and --color-accent contrast ratios" cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast git add tests/ui/accessibility.spec.js user git commit -m "test(a11y): add A2 color contrast token test" ``` --- ### Task 3: ARIA states for filter buttons and toggle panels **Fixes:** F4 (filter buttons lack `aria-pressed`), F5 (toggle buttons lack `aria-expanded`) **Files:** - Modify: `user/themes/intotheeast/templates/trip.html.twig` - Modify: `tests/ui/accessibility.spec.js` **Interfaces:** - Consumes: `tests/ui/accessibility.spec.js` from Task 2 - Produces: `aria-pressed` on `.trip-filter-btn`, `aria-expanded` + `aria-controls` on `#trip-stats-toggle` and `#trip-cycling-toggle` - [ ] **Step 1: Add the failing tests** Append to `tests/ui/accessibility.spec.js`: ```js // ── A3: Filter button aria-pressed + toggle aria-expanded ────────────────────── const TRIP_URL = '/trips/japan-korea-2026'; test('A3a: All-content filter has aria-pressed="true" on load', async ({ page }) => { await page.goto(TRIP_URL); await expect(page.locator('.trip-filter-btn[data-filter="all"]')).toHaveAttribute('aria-pressed', 'true'); await expect(page.locator('.trip-filter-btn[data-filter="journal"]')).toHaveAttribute('aria-pressed', 'false'); await expect(page.locator('.trip-filter-btn[data-filter="story"]')).toHaveAttribute('aria-pressed', 'false'); }); test('A3b: clicking Journal filter toggles aria-pressed', async ({ page }) => { await page.goto(TRIP_URL); await page.click('.trip-filter-btn[data-filter="journal"]'); await expect(page.locator('.trip-filter-btn[data-filter="journal"]')).toHaveAttribute('aria-pressed', 'true'); await expect(page.locator('.trip-filter-btn[data-filter="all"]')).toHaveAttribute('aria-pressed', 'false'); }); test('A3c: Stats toggle has aria-expanded="false" and aria-controls on load', async ({ page }) => { await page.goto(TRIP_URL); await expect(page.locator('#trip-stats-toggle')).toHaveAttribute('aria-expanded', 'false'); await expect(page.locator('#trip-stats-toggle')).toHaveAttribute('aria-controls', 'trip-stats-block'); }); test('A3d: clicking Stats toggle sets aria-expanded="true" then back to false', async ({ page }) => { await page.goto(TRIP_URL); await page.click('#trip-stats-toggle'); await expect(page.locator('#trip-stats-toggle')).toHaveAttribute('aria-expanded', 'true'); await page.click('#trip-stats-toggle'); await expect(page.locator('#trip-stats-toggle')).toHaveAttribute('aria-expanded', 'false'); }); ``` - [ ] **Step 2: Run A3a–A3d to verify they fail** ```bash cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast npx playwright test --project=chromium tests/ui/accessibility.spec.js --grep "A3" ``` Expected: all four FAIL — attributes not present. - [ ] **Step 3: Add `aria-pressed` to filter buttons in template** In `user/themes/intotheeast/templates/trip.html.twig`, find lines 124–128: ```html ``` Replace with: ```html ``` - [ ] **Step 4: Add `aria-expanded` + `aria-controls` to toggle buttons in template** Find lines 129–134: ```html ``` Replace with: ```html ``` - [ ] **Step 5: Update the filter JS to toggle `aria-pressed`** In the same file, find the filter click handler inside the ` ``` Replace with: ```js ``` - [ ] **Step 4: Add strip-controls CSS to `style.css`** In `user/themes/intotheeast/css/style.css`, find the `.journal-photo-dot.is-active` rule (around line 245): ```css .journal-photo-dot.is-active { background: var(--color-ink-muted); } ``` Add this block directly after it: ```css .strip-controls { display: flex; justify-content: center; gap: var(--space-3); margin-top: calc(-1 * var(--space-2)); margin-bottom: var(--space-4); } .strip-prev, .strip-next { background: transparent; border: 1px solid var(--color-border); color: var(--color-ink-2); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); font-size: var(--text-md); line-height: 1; cursor: pointer; } .strip-prev:hover, .strip-next:hover { border-color: var(--color-accent); color: var(--color-accent); } ``` - [ ] **Step 5: Run A4a–A4b to verify they pass** ```bash npx playwright test --project=chromium tests/ui/accessibility.spec.js --grep "A4" ``` Expected: both PASS. - [ ] **Step 6: Run the full accessibility suite** ```bash npx playwright test --project=chromium tests/ui/accessibility.spec.js ``` Expected: A1–A4 all pass. - [ ] **Step 7: Commit** ```bash cd /home/mischa/Projects/travel-blog-intotheeast/user git add themes/intotheeast/templates/partials/base.html.twig themes/intotheeast/css/style.css git commit -m "feat(a11y): add keyboard prev/next to photo strip and region landmark" cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast git add tests/ui/accessibility.spec.js user git commit -m "test(a11y): add A4a-A4b photo strip keyboard tests" ``` --- ### Task 5: GPX delete button unique accessible names **Fixes:** F7 (delete buttons have no unique name) **Files:** - Modify: `user/themes/intotheeast/templates/gpx-manager.html.twig` - Modify: `tests/ui/accessibility.spec.js` **Interfaces:** - Consumes: `tests/ui/accessibility.spec.js` from Task 4 - Produces: delete buttons with `aria-label="Delete "` - [ ] **Step 1: Add the failing test** Append to `tests/ui/accessibility.spec.js`: ```js // ── A5: GPX delete button unique accessible names ────────────────────────────── test('A5: GPX delete buttons have unique aria-labels per filename', async ({ page }) => { await page.route('**/api/v1/pages**/media', async route => { await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ data: [ { filename: 'tokyo-day1.gpx', size: 102400, modified: '2026-03-25T10:00:00Z' } ] }) }); }); await page.goto('/gpx-manager'); const deleteBtn = page.locator('.gpx-delete[data-filename="tokyo-day1.gpx"]'); await expect(deleteBtn).toBeVisible(); await expect(deleteBtn).toHaveAttribute('aria-label', 'Delete tokyo-day1.gpx'); }); ``` - [ ] **Step 2: Run A5 to verify it fails** ```bash cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast npx playwright test --project=chromium tests/ui/accessibility.spec.js --grep "A5" ``` Expected: FAIL — `aria-label` attribute not present on the delete button. - [ ] **Step 3: Add `aria-label` to the delete button in `gpx-manager.html.twig`** In `user/themes/intotheeast/templates/gpx-manager.html.twig`, find line 99 inside the `rows` template string: ```js ``` Replace with: ```js ``` - [ ] **Step 4: Run A5 to verify it passes** ```bash npx playwright test --project=chromium tests/ui/accessibility.spec.js --grep "A5" ``` Expected: PASS. - [ ] **Step 5: Run full accessibility suite** ```bash npx playwright test --project=chromium tests/ui/accessibility.spec.js ``` Expected: A1–A5 all pass. - [ ] **Step 6: Commit** ```bash cd /home/mischa/Projects/travel-blog-intotheeast/user git add themes/intotheeast/templates/gpx-manager.html.twig git commit -m "feat(a11y): add unique aria-label to GPX delete buttons" cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast git add tests/ui/accessibility.spec.js user git commit -m "test(a11y): add A5 GPX delete button accessible name test" ``` --- ### Task 6: axe-core WCAG 2.1 AA regression scans **Adds:** AX1–AX5 automated axe scans across all main page types **Files:** - Modify: `package.json` - Modify: `tests/ui/accessibility.spec.js` **Interfaces:** - Consumes: `tests/ui/accessibility.spec.js` from Task 5 - Produces: five axe scans that fail on any `critical` or `serious` WCAG violation - [ ] **Step 1: Install `@axe-core/playwright`** ```bash cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast npm install --save-dev @axe-core/playwright ``` After install, `package.json` devDependencies should include `"@axe-core/playwright": "^4.x.x"` (exact semver will vary). - [ ] **Step 2: Add the axe scans to `accessibility.spec.js`** Append to `tests/ui/accessibility.spec.js`: ```js // ── AX1–AX5: axe-core WCAG 2.1 AA regression scans ─────────────────────────── const { AxeBuilder } = require('@axe-core/playwright'); const WCAG_TAGS = ['wcag2a', 'wcag2aa']; const BLOCKING = ['critical', 'serious']; function axeScan(id, url) { test(`${id}: ${url} passes axe WCAG 2.1 AA (critical/serious)`, async ({ page }) => { await page.goto(url); const results = await new AxeBuilder({ page }).withTags(WCAG_TAGS).analyze(); const violations = results.violations.filter(v => BLOCKING.includes(v.impact)); expect( violations, violations.map(v => `[${v.impact}] ${v.id}: ${v.description}\n ` + v.nodes.map(n => n.html).join('\n ') ).join('\n\n') ).toHaveLength(0); }); } axeScan('AX1', '/'); axeScan('AX2', '/trips/japan-korea-2026'); axeScan('AX3', '/trips/japan-korea-2026/dailies'); axeScan('AX4', '/trips/japan-korea-2026/dailies/2026-03-25-1540-wheels-down-narita'); axeScan('AX5', '/trips'); ``` - [ ] **Step 3: Run the axe scans** ```bash cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast npx playwright test --project=chromium tests/ui/accessibility.spec.js --grep "AX" ``` Expected: all five PASS (after Tasks 1–5 fixed the known violations). If any fail, read the violation output — it will name the rule ID, description, and offending HTML. Fix the violation if it represents a real issue, or note it in the ledger if it is a known limitation outside scope (e.g. map canvas element). - [ ] **Step 4: Run the full accessibility test suite** ```bash npx playwright test --project=chromium tests/ui/accessibility.spec.js ``` Expected: A1–A5 and AX1–AX5 all pass (10 tests total). - [ ] **Step 5: Run the full Playwright suite to check for regressions** ```bash npx playwright test --project=chromium ``` Expected: all tests pass (or pre-existing failures only — check the progress ledger for known pre-existing failures before marking as blocker). - [ ] **Step 6: Commit** ```bash cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast git add package.json package-lock.json tests/ui/accessibility.spec.js git commit -m "test(a11y): add axe-core WCAG 2.1 AA regression scans AX1-AX5" ```