events

commit defdeea6f6d566f66bed04b67c16ff86a41740ef
parent 37401a247f47ce6d82c19c12d17a6ac12dde135c
Author: Hunter
Date:   Mon,  6 Jul 2026 13:14:33 -0400

improve keyboard navigation

Diffstat:
M
resources/map.js
 | 
9
++++++++-
M
resources/panel.js
 | 
14
++++++++++----
M
resources/styles.css
 | 
2
++

3 files changed, 20 insertions(+), 5 deletions(-)
diff --git a/resources/map.js b/resources/map.js
@@ -27,7 +27,9 @@
 		return true;
 	}
 
-	// Rewrite the address bar to the event's deep link (no reload / history entry).
+	// Rewrite the address bar to the event's deep link (no reload / history entry), so the
+	// app keeps its single-page feel: Back leaves the app rather than showing the last
+	// event you viewed.
 	function syncUrl(m) {
 		if (window.history && history.replaceState) {
 			history.replaceState(null, "", fmt.eventUrl(m));
@@ -118,6 +120,11 @@
 			marker.setZIndexOffset((events.length - i) * Z_STEP);
 			m._marker = marker; // so selectEvent can reach this pin's DOM
 			marker.on("click", function () { selectMarker(m, true); });
+			// Leaflet gives focused markers tabIndex + role=button but only wires Enter for
+			// popups, so activate the pin ourselves (13 = Enter, matching Leaflet's own idiom)
+			marker.on("keypress", function (e) {
+				if (e.originalEvent.keyCode === 13) { selectMarker(m, true); }
+			});
 		});
 
 		window.panel.setIntroData(events, selectMarker, pastMode);
diff --git a/resources/panel.js b/resources/panel.js
@@ -181,8 +181,8 @@
 	}
 
 	// Build the intro's upcoming-events table and return the segments to type (one per
-	// cell). Rows are clickable. No events -> a single "No upcoming events." line. A flex
-	// list of <div>s (not a <table>) so columns collapse cleanly.
+	// cell). Rows are <a> deep links (clickable + keyboard/new-tab). No events -> a single
+	// "No upcoming events." line.
 	function buildIntroList() {
 		introListEl = null;
 		if (!introEvents.length) {
@@ -198,9 +198,15 @@
 
 		var segments = [];
 		introEvents.forEach(function (m) {
-			var row = document.createElement("div");
+			// a real link: shareable, focusable, works with keyboard / new-tab / middle-click
+			var row = document.createElement("a");
 			row.className = "intro-row";
-			row.addEventListener("click", function () {
+			row.href = fmt.eventUrl(m);
+			// native anchor activation: mouse click and keyboard Enter both fire click here.
+			// modified clicks (new tab/window, middle button) fall through to the browser.
+			row.addEventListener("click", function (e) {
+				if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) { return; }
+				e.preventDefault();
 				if (selectFromIntro) { selectFromIntro(m, true); }
 			});
 
diff --git a/resources/styles.css b/resources/styles.css
@@ -102,6 +102,8 @@ html, body {
 	margin: 0 calc(-1 * var(--link-pad));
 	cursor: pointer;
 	-webkit-tap-highlight-color: transparent;
+	color: inherit;
+	text-decoration: none;
 }
 .intro-name {
 	grid-column: 1;