rbrooks/Quest-Board

Watch

Fork 0

Links in running text are underlined, and map markers are pressable and open by keyboard (#367) #1071

Merged

claude-bot merged 5 commits from fix/367-links-and-targets into main

2026-10-04 04:40:59 +00:00

claude-bot commented

2026-10-04 04:12:09 +00:00

Collaborator

Part of #367. Carries out D277 (in-text links are underlined) and D278 (target sizes).

Summary

Links in running text. One rule in src/ui/base.css underlines a link inside a paragraph, hint, banner or rendered markdown, in the ink variant of the accent. Menus, lists, navigation, cards, the app bar, the footer and buttons are left alone. .wtx-link (wiki text) is always underlined.
Stand-alone text buttons. .linkish--block gives a text button that stands alone ("Show more", "Mark all read") a 24 px target (44 px on touch). One inside a sentence stays on its line.
Map markers, pointer. A marker keeps its drawn size; its pressable area is 24×24 px (44×44 on touch) around the same point. Where two markers are closer than that, a press goes to the nearer point (mapHit.js), not to whichever is drawn on top.
Map markers, keyboard. A focused marker did nothing on Enter, although the code's comment said it did: Leaflet only maps Enter to a bound popup. Enter and Space now select it as a click does, and focus returns to it after the redraw that selecting causes.
The accessibility statement.
- "Map markers" now says what is left: two drawn very close together overlap where they can be pressed, and how each is still reached.
- "The map" said panning and zooming need a pointer. They do not. It now says the arrow keys and + and − work only while the map itself has focus, not one of its markers.

Changelog

changelog.d/367-links-and-targets.fixed.md

Test plan

Keyboard, measured in an e2e stack built from the branch (1280×800, maps made through the real upload):
- Tab to a marker, Enter: it opens, aria-pressed="true", focus stays on it.
- Tab to the next, Space: it opens, and the page does not scroll.
- A close pair: each opens by Tab then Enter or Space.
- With the map itself focused: Enter and Space select nothing; ArrowRight pans; + zooms.
"On this map" list: one row per marker, each row opens its marker.
New MapCanvas.test.jsx (6 tests, real Leaflet in jsdom); mapHit.test.js covers the nearer-point rule and the press keys.
Accessibility.test.jsx: 5 passed at the head commit.
Targeted vitest over src/pages/wiki, src/ui and the statement: 617 of 619 on the first run. The two failures were timeouts in files this branch does not touch, on a loaded host; they passed when rerun alone.
eslint: 0 errors.
axe scan of a three-marker map: no violations, plain and with a marker opened by keyboard.
Full frontend suite and journeys: CI.

Known gap, stated and not fixed

Two markers drawn closer together than 24 px still fail axe's target-size rule, because their pressable areas overlap. The nearer-point rule makes the press go to the right one, and the statement names the gap. The trail stops and the "party is here" marker are on the canvas but not in the "On this map" list.

🤖 Generated with Claude Code

Part of #367. Carries out D277 (in-text links are underlined) and D278 (target sizes). ## Summary - **Links in running text.** One rule in `src/ui/base.css` underlines a link inside a paragraph, hint, banner or rendered markdown, in the ink variant of the accent. Menus, lists, navigation, cards, the app bar, the footer and buttons are left alone. `.wtx-link` (wiki text) is always underlined. - **Stand-alone text buttons.** `.linkish--block` gives a text button that stands alone ("Show more", "Mark all read") a 24 px target (44 px on touch). One inside a sentence stays on its line. - **Map markers, pointer.** A marker keeps its drawn size; its pressable area is 24×24 px (44×44 on touch) around the same point. Where two markers are closer than that, a press goes to the nearer point (`mapHit.js`), not to whichever is drawn on top. - **Map markers, keyboard.** A focused marker did nothing on Enter, although the code's comment said it did: Leaflet only maps Enter to a bound popup. Enter and Space now select it as a click does, and focus returns to it after the redraw that selecting causes. - **The accessibility statement.** - "Map markers" now says what is left: two drawn very close together overlap where they can be pressed, and how each is still reached. - "The map" said panning and zooming need a pointer. They do not. It now says the arrow keys and + and − work only while the map itself has focus, not one of its markers. ## Changelog - [x] `changelog.d/367-links-and-targets.fixed.md` ## Test plan - [x] **Keyboard, measured in an e2e stack built from the branch** (1280×800, maps made through the real upload): - Tab to a marker, Enter: it opens, `aria-pressed="true"`, focus stays on it. - Tab to the next, Space: it opens, and the page does not scroll. - A close pair: each opens by Tab then Enter or Space. - With the map itself focused: Enter and Space select nothing; ArrowRight pans; `+` zooms. - [x] **"On this map" list:** one row per marker, each row opens its marker. - [x] New `MapCanvas.test.jsx` (6 tests, real Leaflet in jsdom); `mapHit.test.js` covers the nearer-point rule and the press keys. - [x] `Accessibility.test.jsx`: 5 passed at the head commit. - [x] Targeted vitest over `src/pages/wiki`, `src/ui` and the statement: 617 of 619 on the first run. The two failures were timeouts in files this branch does not touch, on a loaded host; they passed when rerun alone. - [x] eslint: 0 errors. - [x] axe scan of a three-marker map: no violations, plain and with a marker opened by keyboard. - [ ] Full frontend suite and journeys: CI. ## Known gap, stated and not fixed Two markers drawn closer together than 24 px still fail axe's `target-size` rule, because their pressable areas overlap. The nearer-point rule makes the press go to the right one, and the statement names the gap. The trail stops and the "party is here" marker are on the canvas but not in the "On this map" list. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

claude-bot added 5 commits

2026-10-04 04:12:10 +00:00

Links in running text are underlined by one rule; marker and stand-alone button targets enlarged (#367 ) 4c977a3845

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

A press where two map markers overlap goes to the nearer one (#367 ) 69196bc75a

The enlarged pressable area (24px, 44px on touch) made two markers closer than
that overlap, and the browser gave every press in the overlap to the one drawn
on top: with a pair 12px apart, a click on the very centre of the left dot
opened the right marker. MapCanvas now resolves a marker click to the marker
whose point is nearest the press; a tie stays with the one on top, so the
party's marker still wins over the place it stands on.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Merge remote-tracking branch 'origin/main' into fix/367-links-and-targets c1e2ffc76f

Enter and Space open a focused map marker; the statement says what is left of the marker gap (#367 ) a75ce3fac0

Leaflet only maps Enter to a bound popup, so a marker took focus by Tab and
then did nothing: the header comment said otherwise. A keydown of Enter or
Space on a marker now selects it as a click does, and focus is put back on it
after the redraw selecting causes. The arrows and + and - are left to Leaflet.

The accessibility statement lists map markers again, accurately: two drawn
very close together overlap where they can be pressed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

The statement's map line says what is true of panning and zooming by keyboard (#367 )

CI / Does this change touch the recording path? (pull_request) Successful in 35s

Details

CI / Synthetic session harness (no GPU, no LLM) (pull_request) Has been skipped

Details

CI / Backend lint (ruff) (pull_request) Successful in 42s

Details

CI / Feedback site tests (pull_request) Successful in 49s

Details

CI / Bot/backend version sync (pull_request) Successful in 59s

Details

CI / Docker image build (pull_request) Successful in 1m5s

Details

CI / Summarisation accuracy eval harness (stub provider) (pull_request) Successful in 1m9s

Details

CI / Bot tests and audit (pull_request) Successful in 2m13s

Details

CI / Frontend (shard 2/2) (pull_request) Successful in 9m34s

Details

CI / Frontend (shard 1/2) (pull_request) Successful in 11m52s

Details

CI / End-to-end journeys (phone) (pull_request) Successful in 14m1s

Details

CI / End-to-end journeys (keyboard) (pull_request) Successful in 15m13s

Details

CI / End-to-end journeys (desktop) (pull_request) Successful in 15m17s

Details

CI / Backend migration, tests, and audit (pull_request) Successful in 28m29s

Details

634453abb0

It said panning and zooming need a pointer. They do not: with the map
focused the arrow keys pan and + and - zoom. What is left is that those
keys do nothing while a marker has focus.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

claude-bot merged commit 4a9fa883db into main

2026-10-04 04:40:59 +00:00

claude-bot referenced this pull request from a commit

2026-10-04 04:41:00 +00:00

Merge PR #1071: links in running text are underlined, and map markers are pressable and open by keyboard (#367)

claude-bot deleted branch fix/367-links-and-targets

2026-10-04 04:41:00 +00:00

claude-bot referenced this pull request

2026-10-04 04:41:00 +00:00

[UX] Accessibility pass #367

rbrooks referenced this pull request from a commit

2026-10-04 06:57:14 +00:00