Merge f5cbe228467121e74ebd07e3ef6b53f3fa387721 into cf2636510abd18ed4875895a18b54026dbca22e1

commit: b32c168178ca845ff25dd635dd6ad7765ea021b5
author: ermite · 4h ago · 2026-10-22 08:23 UTC
merge of: cf26365 + f5cbe22 · diff against the first parent
signature: unsigned

55 files · +1051 -671

A internal/adapters/web/accessibility_test.go +53 -0

@@ -0,0 +1,53 @@
	1	+	// SPDX-License-Identifier: AGPL-3.0-or-later
	2	+
	3	+	package web
	4	+
	5	+	import (
	6	+	"testing"
	7	+
	8	+	"github.com/stretchr/testify/assert"
	9	+	)
	10	+
	11	+	func TestIssueFieldAccessibility(t *testing.T) {
	12	+	for _, field := range []string{"title", "body", "author"} {
	13	+	t.Run(field, func(t *testing.T) {
	14	+	html := renderToString(t, IssueForm(Layout{}, IssueFormPage{ErrorField: field, Error: "Too long"}))
	15	+	assert.Contains(t, html, `id="issue-`+field+`" aria-describedby="issue-`+field+`-count issue-`+field+`-error" aria-invalid="true"`)
	16	+	assert.Contains(t, html, `<p id="issue-`+field+`-error" class="f-error" role="alert">Too long</p>`)
	17	+	for _, f := range []string{"title", "body", "author"} {
	18	+	assert.Contains(t, html, `<output id="issue-`+f+`-count" aria-live="off"`)
	19	+	}
	20	+	})
	21	+	}
	22	+	}
	23	+
	24	+	func TestHintAccessibility(t *testing.T) {
	25	+	html := renderToString(t, Hint(Layout{Live: true, LiveURL: "/events"}))
	26	+	assert.Contains(t, html, `<div class="hint"><span aria-hidden="true" class="hint-nav"`)
	27	+	assert.Contains(t, html, `<span role="status" aria-live="polite"><span class="hint-sel"`)
	28	+	assert.Contains(t, html, `</span></span><span class="hint-live" role="status"`)
	29	+	}
	30	+
	31	+	func TestPaletteAccessibilityWithoutNavigationItems(t *testing.T) {
	32	+	html := renderToString(t, OverlayCmd(nil))
	33	+	// The shortcut preference action is always present, even with no targets.
	34	+	assert.Contains(t, html, `aria-expanded="true"`)
	35	+	assert.Contains(t, html, `aria-activedescendant="cmd-o0"`)
	36	+	assert.Contains(t, html, `id="cmd-o0" role="option" aria-selected="true" data-cursor`)
	37	+	assert.Contains(t, html, `<a role="presentation" data-fire="keys">`)
	38	+	assert.Contains(t, html, `aria-label="Close (esc)"`)
	39	+	assert.NotContains(t, html, ` href=`)
	40	+	assert.NotContains(t, html, `tabindex="-1"`)
	41	+	}
	42	+
	43	+	func TestFinderStatusOutsideHiddenResults(t *testing.T) {
	44	+	html := renderToString(t, Tree(Layout{}, TreePage{}))
	45	+	assert.Contains(t, html, `<p id="finder-status" class="dim" role="status"></p><div id="finder" class="tree-card" hidden>`)
	46	+	}
	47	+
	48	+	func TestPaletteNavigationOptionsAccessibility(t *testing.T) {
	49	+	html := renderToString(t, OverlayCmd([]CmdItem{{Kind: "section", Label: "Files", Href: "/files"}}))
	50	+	assert.Contains(t, html, `<a role="presentation" data-href="/files">`)
	51	+	assert.NotContains(t, html, ` href=`)
	52	+	assert.NotContains(t, html, `tabindex="-1"`)
	53	+	}

M internal/adapters/web/fragments.templ +1 -0


@@ -94,6 +94,7 @@ templ Live(l Layout) {
94	94		if l.Live && l.LiveURL != "" {
95	95		<span
96	96		class="hint-live"
	97	+	role="status"
97	98		data-state="connecting"
98	99		hx-sse:connect={ l.LiveURL }
99	100		hx-swap="none"

M internal/adapters/web/fragments_templ.go +2 -2 generated file: collapsed

load diff

M internal/adapters/web/issues_form.templ +47 -9


@@ -29,22 +29,52 @@ templ IssueForm(l Layout, p IssueFormPage) {
29	29		<input type="hidden" name="form_token" value={ p.FormToken }/>
30	30		<input type="hidden" name="solution" value=""/>
31	31		<label for="issue-title">title</label>
32		-	<input id="issue-title" name="title" type="text" required autocomplete="off" value={ p.Title }/>
33		-	<output data-for="issue-title" data-max={ itoa(p.MaxTitle) } for="issue-title">{ itoa(runeCount(p.Title)) } / { itoa(p.MaxTitle) }</output>
	32	+	<input
	33	+	id="issue-title"
	34	+	aria-describedby={ issueFieldDescription("title", p.ErrorField) }
	35	+	if p.ErrorField == "title" {
	36	+	aria-invalid="true"
	37	+	}
	38	+	name="title"
	39	+	type="text"
	40	+	required
	41	+	autocomplete="off"
	42	+	value={ p.Title }
	43	+	/>
	44	+	<output id="issue-title-count" aria-live="off" data-for="issue-title" data-max={ itoa(p.MaxTitle) } for="issue-title">{ itoa(runeCount(p.Title)) } / { itoa(p.MaxTitle) }</output>
34	45		if p.ErrorField == "title" {
35		-	<p class="f-error" role="alert">{ p.Error }</p>
	46	+	<p id="issue-title-error" class="f-error" role="alert">{ p.Error }</p>
36	47		}
37	48		<label for="issue-body">description</label>
38		-	<textarea id="issue-body" name="body" rows="8" placeholder="Markdown, optional">{ p.Body }</textarea>
39		-	<output data-for="issue-body" data-max={ itoa(p.MaxBody) } for="issue-body">{ itoa(runeCount(p.Body)) } / { itoa(p.MaxBody) }</output>
	49	+	<textarea
	50	+	id="issue-body"
	51	+	aria-describedby={ issueFieldDescription("body", p.ErrorField) }
	52	+	if p.ErrorField == "body" {
	53	+	aria-invalid="true"
	54	+	}
	55	+	name="body"
	56	+	rows="8"
	57	+	placeholder="Markdown, optional"
	58	+	>{ p.Body }</textarea>
	59	+	<output id="issue-body-count" aria-live="off" data-for="issue-body" data-max={ itoa(p.MaxBody) } for="issue-body">{ itoa(runeCount(p.Body)) } / { itoa(p.MaxBody) }</output>
40	60		if p.ErrorField == "body" {
41		-	<p class="f-error" role="alert">{ p.Error }</p>
	61	+	<p id="issue-body-error" class="f-error" role="alert">{ p.Error }</p>
42	62		}
43	63		<label for="issue-author">name (optional, not verified)</label>
44		-	<input id="issue-author" name="author" type="text" autocomplete="off" value={ p.Author }/>
45		-	<output data-for="issue-author" data-max={ itoa(p.MaxAuthor) } for="issue-author">{ itoa(runeCount(p.Author)) } / { itoa(p.MaxAuthor) }</output>
	64	+	<input
	65	+	id="issue-author"
	66	+	aria-describedby={ issueFieldDescription("author", p.ErrorField) }
	67	+	if p.ErrorField == "author" {
	68	+	aria-invalid="true"
	69	+	}
	70	+	name="author"
	71	+	type="text"
	72	+	autocomplete="off"
	73	+	value={ p.Author }
	74	+	/>
	75	+	<output id="issue-author-count" aria-live="off" data-for="issue-author" data-max={ itoa(p.MaxAuthor) } for="issue-author">{ itoa(runeCount(p.Author)) } / { itoa(p.MaxAuthor) }</output>
46	76		if p.ErrorField == "author" {
47		-	<p class="f-error" role="alert">{ p.Error }</p>
	77	+	<p id="issue-author-error" class="f-error" role="alert">{ p.Error }</p>
48	78		}
49	79		<div class="hp" aria-hidden="true">
50	80		<label for="issue-website">Leave this field empty</label>

@@ -65,3 +95,11 @@ templ issueFormRail() {
65	95		<p class="dim">The owner reads every issue before it appears. Plain text and Markdown only; no address of yours is kept.</p>
66	96		</section>
67	97		}
	98	+
	99	+	func issueFieldDescription(field, invalid string) string {
	100	+	ids := "issue-" + field + "-count"
	101	+	if field == invalid {
	102	+	ids += " issue-" + field + "-error"
	103	+	}
	104	+	return ids
	105	+	}

M internal/adapters/web/issues_form_templ.go +161 -84 generated file: collapsed

load diff

M internal/adapters/web/issues_form_test.go +2 -2


@@ -79,9 +79,9 @@ func TestIssueFormGet(t *testing.T) {
79	79		`action="/proj/issues/new"`, ` hidden`, `data-issue-form`, `data-nonce="AAECAwQFBgcICQoLDA0ODw"`,
80	80		`data-difficulty="18"`, `data-min-submit-at="1700000003000"`, `data-worker="/-/static/js/pow-worker.`,
81	81		`name="token" value="tok-1.sig"`, `name="form_token" value="form-1"`, `name="solution" value=""`,
82		-	`name="title" type="text" required`, `<output data-for="issue-body" data-max="10000"`, `<output data-for="issue-author" data-max="40"`,
	82	+	`name="title" type="text" required`, `<output id="issue-body-count" aria-live="off" data-for="issue-body" data-max="10000"`, `<output id="issue-author-count" aria-live="off" data-for="issue-author" data-max="40"`,
83	83		`<div class="hp" aria-hidden="true">`, `name="website" type="text" tabindex="-1" autocomplete="off"`,
84		-	`<output data-for="issue-title" data-max="120"`, `0 / 10000`, `Checking your browser… (this takes a few seconds)`,
	84	+	`<output id="issue-title-count" aria-live="off" data-for="issue-title" data-max="120"`, `0 / 10000`, `Checking your browser… (this takes a few seconds)`,
85	85		`/-/static/js/issue-form.`,
86	86		} {
87	87		assert.Contains(t, body, want)

M internal/adapters/web/jstest/a11y.test.mjs +79 -1


@@ -83,7 +83,7 @@ function keydown(target, key, elementHandler, extra = {}) {
83	83		// ---- the palette --------------------------------------------------------
84	84
85	85		function palette() {
86		-	const li = (k, label) => el('li', { attrs: { 'data-k': k } }, el('a', { attrs: { href: '/' + label } }));
	86	+	const li = (k, label) => el('li', { attrs: { 'data-k': k } }, el('a', { attrs: { 'data-href': '/' + label, role: 'presentation' } }));
87	87		const items = [li('go home', 'home'), li('section files', 'files'), li('branch main', 'main')];
88	88		items[0].setAttribute('data-cursor', '');
89	89		const input = el('input', { id: 'cmd-q', attrs: { role: 'combobox', 'aria-controls': 'cmd-list' } });

@@ -137,6 +137,8 @@ test('the palette: the file hits that arrive later get ids, roles and the active
137	137		assert.ok(hits.length > 0, 'a file hit came');
138	138		for (const h of hits) {
139	139		assert.equal(h.getAttribute('role'), 'option');
	140	+	assert.equal(h.querySelector('a[href]'), null);
	141	+	assert.equal(h.querySelector('a').hasAttribute('tabindex'), false);
140	142		assert.ok(h.id);
141	143		}
142	144		assert.equal(p.list.children.length, new Set(p.list.children.map((i) => i.id)).size, 'ids stay unique');

@@ -173,6 +175,7 @@ test('Escape in the finder clears the query, keeps the focus in the field and do
173	175		f.q.closest = () => f.q; // the global handler sees a field being typed in
174	176		const e = keydown(f.q, 'Escape', (ev) => F.key(f.q, ev));
175	177		assert.equal(f.q.value, '');
	178	+	assert.equal(doc.getElementById('finder-status').textContent, '');
176	179		assert.equal(e.stopped, true);
177	180		assert.equal(e.prevented, true);
178	181		assert.equal(blurred, false, 'the field keeps the focus');

@@ -381,3 +384,78 @@ test('mobile MR layout shortcuts preserve the saved preference until back on des
381	384		doc.querySelector = oldQuery;
382	385		}
383	386		});
	387	+
	388	+	test('dialog restores its row opener on close, but not over a replacement dialog', () => {
	389	+	const row = el('li', { tabindex: '0' });
	390	+	const first = el('dialog', { id: 'focus-first' });
	391	+	const second = el('dialog', { id: 'focus-second' });
	392	+	dom.body.append(row, first, second);
	393	+	const queued = [];
	394	+	const all = doc.querySelectorAll;
	395	+	const one = doc.querySelector;
	396	+	const open = () => [first, second].filter((d) => d.hasAttribute('open'));
	397	+	doc.querySelectorAll = (sel) => sel === 'dialog[open]' ? open() : all.call(doc, sel);
	398	+	doc.querySelector = (sel) => sel === 'dialog[open]' ? open()[0] ?? null : one.call(doc, sel);
	399	+	for (const d of [first, second]) {
	400	+	let onClose;
	401	+	d.addEventListener = (type, fn) => { if (type === 'close') onClose = fn; };
	402	+	d.showModal = () => { d.setAttribute('open', ''); d.focus(); };
	403	+	d.close = () => { d.removeAttribute('open'); queued.push(onClose); };
	404	+	}
	405	+	row.focus();
	406	+	window.ermite.dialog('focus-first');
	407	+	first.close();
	408	+	queued.shift()();
	409	+	assert.equal(doc.activeElement, row);
	410	+
	411	+	row.focus();
	412	+	window.ermite.dialog('focus-first');
	413	+	window.ermite.dialog('focus-second');
	414	+	queued.shift()();
	415	+	assert.equal(doc.activeElement, second);
	416	+	second.close();
	417	+	queued.shift()();
	418	+	doc.querySelectorAll = all;
	419	+	doc.querySelector = one;
	420	+	});
	421	+
	422	+
	423	+	test('listbox result wrappers have no links; Enter and delegated clicks navigate', async () => {
	424	+	doc.querySelector = query.one;
	425	+	doc.querySelectorAll = query.all;
	426	+	const assigned = [];
	427	+	location.assign = (href) => assigned.push(href);
	428	+	const activate = (anchor) => {
	429	+	const e = { target: anchor, button: 0, preventDefault() {} };
	430	+	listeners.click.find((fn) => fn.toString().includes('location.assign'))(e);
	431	+	};
	432	+	const p = palette();
	433	+	p.list.setAttribute('role', 'listbox');
	434	+	window.ermiteCmd.sync();
	435	+	for (const item of p.items) assert.equal(item.querySelector('a[href]'), null);
	436	+	const a = p.items[0].querySelector('a');
	437	+	a.click = () => activate(a);
	438	+	window.ermite.cmdKey({ key: 'Enter', preventDefault() {} });
	439	+	assert.deepEqual(assigned, ['/home']);
	440	+	activate(p.items[1].querySelector('a'));
	441	+	assert.deepEqual(assigned, ['/home', '/files']);
	442	+
	443	+	const f = finder();
	444	+	f.list.setAttribute('role', 'listbox');
	445	+	f.q.value = 'main';
	446	+	F.input(f.q);
	447	+	flushFrames();
	448	+	await settle();
	449	+	assert.equal(f.list.querySelector('a[href]'), null);
	450	+	const hit = f.list.children[0].querySelector('a');
	451	+	assert.equal(hit.hasAttribute('tabindex'), false);
	452	+	hit.click = () => activate(hit);
	453	+	F.key(f.q, { key: 'Enter', preventDefault() {} });
	454	+	assert.equal(assigned.at(-1), hit.dataset.href);
	455	+	activate(hit);
	456	+	assert.equal(assigned.at(-1), hit.dataset.href);
	457	+	assert.notEqual(doc.getElementById('finder-status').textContent, '');
	458	+	f.q.value = '';
	459	+	F.input(f.q);
	460	+	assert.equal(doc.getElementById('finder-status').textContent, '');
	461	+	});

M internal/adapters/web/jstest/finder.test.mjs +9 -8


@@ -53,7 +53,7 @@ const key = (k, extra = {}) => {
53	53		return e;
54	54		};
55	55		const status = () => document.getElementById('finder-status').textContent;
56		-	const hrefs = (list) => list.children.map((li) => li.querySelector('a').href);
	56	+	const hrefs = (list) => list.children.map((li) => li.querySelector('a').dataset.href);
57	57
58	58		test('Enter before the results opens the top hit once they come', async () => {
59	59		const p = page();

@@ -66,8 +66,8 @@ test('Enter before the results opens the top hit once they come', async () => {
66	66		await settle();
67	67		assert.equal(p.finderList.children.length > 0, true);
68	68		assert.equal(dom.clicked.length, 1);
69		-	assert.equal(dom.clicked[0].href, hrefs(p.finderList)[0]);
70		-	assert.match(dom.clicked[0].href, /^\/blob\/main\/.*tree/);
	69	+	assert.equal(dom.clicked[0].dataset.href, hrefs(p.finderList)[0]);
	70	+	assert.match(dom.clicked[0].dataset.href, /^\/blob\/main\/.*tree/);
71	71		assert.equal(fetches, 1);
72	72		});
73	73

@@ -112,7 +112,7 @@ test('Enter on current results opens the cursor row, whichever way the cursor mo
112	112		assert.equal(items[2].getAttribute('aria-selected'), 'true');
113	113		assert.equal(items[0].getAttribute('aria-selected'), 'false');
114	114		assert.equal(p.q.getAttribute('aria-activedescendant'), items[2].id);
115		-	assert.equal(dom.clicked[0].href, items[2].querySelector('a').href);
	115	+	assert.equal(dom.clicked[0].dataset.href, items[2].querySelector('a').dataset.href);
116	116		// The arrows move from there.
117	117		F.key(p.q, key('ArrowUp'));
118	118		assert.equal(p.q.getAttribute('aria-activedescendant'), items[1].id);

@@ -179,13 +179,14 @@ test('the palette lists the file hits under its entries', async () => {
179	179		const hits = p.cmdList.children.filter((li) => li.className === 'finder-hit');
180	180		assert.equal(hits.length, 4);
181	181		assert.equal(p.cmdList.children[0].className, 'entry', 'the entries stay first');
182		-	assert.deepEqual(hits.map((li) => li.querySelector('a').href).sort(), [
	182	+	assert.deepEqual(hits.map((li) => li.querySelector('a').dataset.href).sort(), [
183	183		'/blob/main/docs/web/tree-view.md',
184	184		'/blob/main/internal/adapters/web/tree.go',
185	185		'/blob/main/internal/adapters/web/tree.templ',
186	186		'/blob/main/src/treehouse.txt',
187	187		]);
188		-	assert.equal(hits[0].querySelector('a').tabIndex, -1);
	188	+	assert.equal(hits[0].querySelector('a').hasAttribute('href'), false);
	189	+	assert.equal(hits[0].querySelector('a').hasAttribute('tabindex'), false);
189	190		assert.equal(hits[0].querySelector('.k').textContent, 'file');
190	191		assert.equal(p.cmdList.children.filter((li) => li.hasAttribute('data-cursor')).length, 1, 'one cursor');
191	192

@@ -213,7 +214,7 @@ test('Enter typed before the frame of the query runs opens the top hit', async (
213	214		assert.equal(dom.clicked.length, 0, 'nothing to open before the frame');
214	215		flushFrames();
215	216		await settle();
216		-	assert.deepEqual(dom.clicked.map((a) => a.href), ['/blob/main/cmd/ermite/main.go']);
	217	+	assert.deepEqual(dom.clicked.map((a) => a.dataset.href), ['/blob/main/cmd/ermite/main.go']);
217	218		} finally {
218	219		dom.holdFrames = false;
219	220		}

@@ -257,7 +258,7 @@ test('the palette drops the results of a query that is stale', async () => {
257	258		p.cmdQ.value = 'readme'; // typed before the search of "tree" finished
258	259		F.palette(p.cmdQ);
259	260		await settle();
260		-	const got = p.cmdList.children.filter((li) => li.className === 'finder-hit').map((li) => li.querySelector('a').href);
	261	+	const got = p.cmdList.children.filter((li) => li.className === 'finder-hit').map((li) => li.querySelector('a').dataset.href);
261	262		assert.deepEqual(got, ['/blob/main/README.md']);
262	263
263	264		// A field changed without a new call: the pending search is dropped.

M internal/adapters/web/jstest/mr.test.mjs +33 -1


@@ -106,7 +106,7 @@ function footerHarness(extra = {}) {
106	106		const nav = node('tabs'); nav.querySelectorAll = () => tabs;
107	107		const listeners = {}, replaced = [];
108	108		globalThis.document = { querySelector: (s) => s === '.mr-footer' ? footer : s === '[data-mr-tabs]' ? nav : s === '#mr-ck' ? extra.summary ?? null : null,
109		-	querySelectorAll: (s) => s === '[data-mr-tabs] a' ? tabs : [], addEventListener(k, v) { listeners[k] = v; } };
	109	+	querySelectorAll: (s) => s === '[data-mr-tabs] button' ? tabs : [], addEventListener(k, v) { listeners[k] = v; } };
110	110		globalThis.location = { hash: '', pathname: '/demo/merge-requests/1', search: '?x=1' };
111	111		globalThis.addEventListener = (k, v) => { listeners[k] = v; };
112	112		globalThis.history = { replaceState: (...args) => replaced.push(args) };

@@ -531,3 +531,35 @@ test('intercepted Cancel resets the entire comment form', () => {
531	531		assert.equal(window.ermiteMR.hasDraft(), false);
532	532		} finally { Object.assign(globalThis, saved); c.restore(); }
533	533		});
	534	+
	535	+
	536	+	test('live refresh preserves the open button panel even when the hash points elsewhere', async () => {
	537	+	const { readFileSync } = await import('node:fs');
	538	+	const src = readFileSync(new URL('../static/js/mr.js', import.meta.url), 'utf8');
	539	+	const start = src.indexOf(' async function refreshPage(page)');
	540	+	const end = src.indexOf(' function refreshNotice', start);
	541	+	const { el, installDom } = await import('./dom.mjs');
	542	+	const saved = globalThis.document;
	543	+	const h = footerHarness();
	544	+	try {
	545	+	window.ermiteMR.panels();
	546	+	h.tabs[1].events.click({ preventDefault() {} });
	547	+	location.hash = '#f99';
	548	+	const doc = installDom();
	549	+	Object.defineProperty(doc, 'activeElement', { get: () => null });
	550	+	const diffs = el('div');
	551	+	diffs.dataset.diff = 'unified';
	552	+	const fresh = el('footer', {}, el('section', { attrs: { 'data-mr-panel': '' } }), el('section', { attrs: { 'data-mr-panel': '' } }));
	553	+	const page = { body: { dataset: {} } };
	554	+	const $ = (s, root) => s === '#diffs' ? diffs : s === '.mr-footer' ? (root === page ? fresh : h.footer) : el('div');
	555	+	const $$ = (s, root) => s === '[data-mr-tabs] button' ? h.tabs : s === '[data-mr-panel]' ? fresh.children : [];
	556	+	let selected;
	557	+	const lazy = { reset() {}, watch() {} };
	558	+	const refresh = new Function('$', '$$', 'scrollAnchor', 'hasDraft', 'replaceRegion', 'panels', 'watchBar', 'foldFiles', 'touchComments', 'restoreAnchor', 'window', 'document',
	559	+	'let revealGen = 0; ' + src.slice(start, end) + '; return refreshPage;')(
	560	+	$, $$, () => ({}), () => false, async () => {}, (i) => { selected = i; }, () => {}, () => {}, () => {}, () => {}, { ermiteLazy: lazy }, doc);
	561	+	await refresh(page);
	562	+	assert.equal(selected, 1);
	563	+	assert.deepEqual(fresh.children.map((p) => p.hidden), [true, false]);
	564	+	} finally { h.restore(); globalThis.document = saved; }
	565	+	});

M internal/adapters/web/mr.templ +9 -9


@@ -296,7 +296,7 @@ templ commentView(c CommentView, suffix string) {
296	296		<button type="button" class="btn" data-js data-quote={ c.Quote }>Quote</button>
297	297		}
298	298		if c.Edit != nil {
299		-	<details><summary>Edit</summary><form method="post" action={ templ.SafeURL(c.Edit.Action) }><input type="hidden" name="from" value={ itoa(c.Edit.From) }/><textarea name="text" maxlength="8000">{ c.Edit.Text }</textarea><button class="btn" type="submit">Save</button></form></details>
	299	+	<details><summary>Edit</summary><form method="post" action={ templ.SafeURL(c.Edit.Action) }><input type="hidden" name="from" value={ itoa(c.Edit.From) }/><textarea name="text" maxlength="8000" aria-label="Edit note">{ c.Edit.Text }</textarea><button class="btn" type="submit">Save</button></form></details>
300	300		}
301	301		if c.Delete != nil {
302	302		<details><summary>Delete</summary><form method="post" action={ templ.SafeURL(c.Delete.Action) }><input type="hidden" name="from" value={ itoa(c.Delete.From) }/><p>Delete this note?</p><button class="btn" type="submit">Confirm delete</button></form></details>

@@ -373,9 +373,9 @@ templ commentForm(f CommentForm, suffix string) {
373	373
374	374		templ mrFooter(p MRPage) {
375	375		<footer class="mr-footer">
376		-	<nav data-mr-tabs aria-label="Branch details">
377		-	<a id="mr-tab-commits" href="#mr-commits">Commits <span class="count">{ p.CommitCount }</span></a>
378		-	<a id="mr-tab-checks" href="#mr-checks">
	376	+	<div data-mr-tabs data-js role="group" aria-label="Branch details">
	377	+	<button type="button" id="mr-tab-commits" aria-expanded="true" aria-controls="mr-commits">Commits <span class="count">{ p.CommitCount }</span></button>
	378	+	<button type="button" id="mr-tab-checks" aria-expanded="true" aria-controls="mr-checks-panel">
379	379		{ "Checks " }
380	380		<span data-checks-label>
381	381		if p.ChecksSum.Total > 0 {

@@ -384,10 +384,10 @@ templ mrFooter(p MRPage) {
384	384		no checks
385	385		}
386	386		</span>
387		-	</a>
388		-	</nav>
389		-	<div id="mr-commits" data-mr-panel role="region" aria-labelledby="mr-tab-commits">
390		-	<table class="mr-commits">
	387	+	</button>
	388	+	</div>
	389	+	<div id="mr-commits" data-mr-panel role="group" aria-labelledby="mr-tab-commits">
	390	+	<table class="mr-commits" aria-label="Commits">
391	391		<thead><tr><th>Commit</th><th>Subject</th><th>Author</th><th>Date</th><th>Signature</th><th>Status</th></tr></thead>
392	392		<tbody>
393	393		for _, c := range p.Commits {

@@ -421,7 +421,7 @@ templ mrFooter(p MRPage) {
421	421		<p class="note">{ p.CommitsNote }</p>
422	422		}
423	423		</div>
424		-	<div id="mr-checks-panel" data-mr-panel role="region" aria-labelledby="mr-tab-checks">
	424	+	<div id="mr-checks-panel" data-mr-panel role="group" aria-labelledby="mr-tab-checks">
425	425		@MRChecks(p.Checks)
426	426		</div>
427	427		</footer>

M internal/adapters/web/mr_templ.go +7 -7 generated file: collapsed

load diff

M internal/adapters/web/mr_test.go +8 -7


@@ -137,21 +137,22 @@ func TestMRPanelsAndMenus(t *testing.T) {
137	137		p := MRPage{CommitCount: "500+", CommitsNote: "more commits", Modes: []string{"squash", "merge"}, ChecksBlock: true,
138	138		ChecksSum: ChecksSummary{Total: 2, Label: "1/2", Title: "1/2 failed"}, Box: &MergeBox{Signed: true, Fingerprint: "fingerprint", HeadGone: true}}
139	139		footer := renderToString(t, mrFooter(p))
140		-	assert.Contains(t, footer, `<footer class="mr-footer"><nav data-mr-tabs`)
	140	+	assert.Contains(t, footer, `<footer class="mr-footer"><div data-mr-tabs data-js role="group"`)
141	141		assert.NotContains(t, footer, `<details`)
142	142		assert.NotContains(t, footer, `<summary`)
143		-	// No hidden attribute: the CSS shows the panel of the URL fragment until
144		-	// mr.js takes over, so the tabs work as anchors without scripts.
145		-	assert.Contains(t, footer, `id="mr-commits" data-mr-panel role="region"`)
146		-	assert.Contains(t, footer, `id="mr-checks-panel" data-mr-panel role="region"`)
	143	+	// Both panels are readable without scripts; JS enhances native buttons.
	144	+	assert.Contains(t, footer, `id="mr-commits" data-mr-panel role="group"`)
	145	+	assert.Contains(t, footer, `id="mr-checks-panel" data-mr-panel role="group"`)
147	146		assert.NotContains(t, footer, `data-mr-panel hidden`)
148	147		css, err := staticFS.ReadFile("static/css/60-mr.css")
149	148		require.NoError(t, err)
150		-	assert.Contains(t, string(css), `&:not([data-panels]) [data-mr-panel]:not(:target, :has(:target)) { display: none; }`)
	149	+	assert.NotContains(t, string(css), `:not([data-panels])`)
	150	+	assert.Contains(t, footer, `<button type="button" id="mr-tab-commits" aria-expanded="true" aria-controls="mr-commits">`)
	151	+	assert.Contains(t, footer, `<button type="button" id="mr-tab-checks" aria-expanded="true" aria-controls="mr-checks-panel">`)
151	152		assert.Contains(t, footer, `data-mr-tabs`)
152	153		assert.Contains(t, footer, `id="mr-commits"`)
153	154		assert.Contains(t, footer, `id="mr-checks"`)
154		-	assert.Contains(t, footer, `<table class="mr-commits">`)
	155	+	assert.Contains(t, footer, `<table class="mr-commits" aria-label="Commits">`)
155	156		assert.Contains(t, footer, "500+")
156	157		assert.Contains(t, footer, "more commits")
157	158		assert.Contains(t, footer, "1/2 failed")

M internal/adapters/web/overlays.templ +5 -5


@@ -11,7 +11,7 @@ import (
11	11		// show on that page only.
12	12		templ OverlayHelp(mr bool) {
13	13		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
14		-	<div class="panel-head"><h2>Keyboard shortcuts</h2><button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()"><kbd>esc</kbd> close</button></div>
	14	+	<div class="panel-head"><h2>Keyboard shortcuts</h2><button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()"><kbd>esc</kbd> close</button></div>
15	15		<div class="keys-pref">
16	16		<label><input type="checkbox" id="keys-off" aria-describedby="keys-note" hx-on:change="ermite.setKeysOff(this.checked)"/> Turn off single-key shortcuts</label>
17	17		<p id="keys-note" class="dim">Single-key shortcuts are on. ctrl k and esc work whatever this says.</p>

@@ -60,7 +60,7 @@ templ OverlayRefs(l Layout) {
60	60		data-pick="#panel-refs li"
61	61		hx-on:input="ermite.filter(this)"
62	62		/>
63		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()"><kbd>esc</kbd></button>
	63	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()"><kbd>esc</kbd></button>
64	64		</div>
65	65		<div class="panel-cols" data-picklist>
66	66		<section aria-label="Branches">

@@ -123,13 +123,13 @@ templ OverlayCmd(items []CmdItem) {
123	123		hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)"
124	124		hx-on:keydown="ermite.cmdKey(event)"
125	125		/>
126		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()"><kbd>esc</kbd></button>
	126	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()"><kbd>esc</kbd></button>
127	127		</div>
128	128		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
129	129		for i, c := range items {
130		-	<li id={ "cmd-o" + itoa(i) } role="option" aria-selected={ strconv.FormatBool(i == 0) } data-k={ strings.ToLower(c.Kind + " " + c.Label) } data-cursor?={ i == 0 }><a href={ templ.SafeURL(c.Href) } tabindex="-1"><span class="lbl">{ c.Label }</span><span class="k">{ c.Kind }</span></a></li>
	130	+	<li id={ "cmd-o" + itoa(i) } role="option" aria-selected={ strconv.FormatBool(i == 0) } data-k={ strings.ToLower(c.Kind + " " + c.Label) } data-cursor?={ i == 0 }><a role="presentation" data-href={ c.Href }><span class="lbl">{ c.Label }</span><span class="k">{ c.Kind }</span></a></li>
131	131		}
132		-	<li id={ "cmd-o" + itoa(len(items)) } role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard"><a href="#" data-fire="keys" tabindex="-1"><span class="lbl">turn single-key shortcuts off</span><span class="k">action</span></a></li>
	132	+	<li id={ "cmd-o" + itoa(len(items)) } role="option" aria-selected={ strconv.FormatBool(len(items) == 0) } data-cursor?={ len(items) == 0 } data-k="action turn single-key shortcuts on off keyboard"><a role="presentation" data-fire="keys"><span class="lbl">turn single-key shortcuts off</span><span class="k">action</span></a></li>
133	133		</ul>
134	134		<p class="panel-foot"><span><kbd>↑</kbd><kbd>↓</kbd> move</span><span><kbd>enter</kbd> open</span><span><kbd>esc</kbd> close</span></p>
135	135		</dialog>

M internal/adapters/web/overlays_templ.go +35 -12


@@ -38,7 +38,7 @@ func OverlayHelp(mr bool) templ.Component {
38	38		templ_7745c5c3_Var1 = templ.NopComponent
39	39		}
40	40		ctx = templ.ClearChildren(ctx)
41		-	templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<dialog id=\"panel-help\" class=\"panel modal\" aria-label=\"Keyboard shortcuts\" hx-on:keydown=\"event.key === 'Escape' && (event.preventDefault(), this.close())\" hx-on:click=\"event.target === this && this.close()\"><div class=\"panel-head\"><h2>Keyboard shortcuts</h2><button type=\"button\" class=\"panel-x\" aria-label=\"Close\" hx-on:click=\"closest('dialog').close()\"><kbd>esc</kbd> close</button></div><div class=\"keys-pref\"><label><input type=\"checkbox\" id=\"keys-off\" aria-describedby=\"keys-note\" hx-on:change=\"ermite.setKeysOff(this.checked)\"> Turn off single-key shortcuts</label><p id=\"keys-note\" class=\"dim\">Single-key shortcuts are on. ctrl k and esc work whatever this says.</p></div><dl class=\"keys\"><div><dt><kbd>ctrl k</kbd> <kbd>:</kbd></dt><dd>go to a section, branch, tag, file or repository</dd></div><div><dt><kbd>?</kbd></dt><dd>this list</dd></div><div><dt><kbd>j</kbd> <kbd>k</kbd></dt><dd>move the row cursor down / up</dd></div><div><dt><kbd>enter</kbd></dt><dd>open the row under the cursor; on Files, a directory opens or closes in place</dd></div><div><dt><kbd>↑</kbd> <kbd>↓</kbd> <kbd>←</kbd> <kbd>→</kbd> <kbd>home</kbd> <kbd>end</kbd></dt><dd>in the file tree (focus on a row): previous / next row, close / open a directory or go to its parent / first entry, first / last row. They never open a file</dd></div><div><dt><kbd>l</kbd> <kbd>h</kbd></dt><dd>on Files: open a directory or a file / close a directory or go up to its parent, then to the parent page. Elsewhere: into the side panel (on a merge request, its files) / back to the content; there j k move between its controls</dd></div><div><dt><kbd>g g</kbd> <kbd>G</kbd></dt><dd>first / last row</dd></div><div><dt><kbd>/</kbd></dt><dd>filter the list; on Files, find a file anywhere in the repository (esc clears, enter opens the best match)</dd></div><div><dt><kbd>b</kbd></dt><dd>")
	41	+	templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<dialog id=\"panel-help\" class=\"panel modal\" aria-label=\"Keyboard shortcuts\" hx-on:keydown=\"event.key === 'Escape' && (event.preventDefault(), this.close())\" hx-on:click=\"event.target === this && this.close()\"><div class=\"panel-head\"><h2>Keyboard shortcuts</h2><button type=\"button\" class=\"panel-x\" aria-label=\"Close (esc)\" hx-on:click=\"closest('dialog').close()\"><kbd>esc</kbd> close</button></div><div class=\"keys-pref\"><label><input type=\"checkbox\" id=\"keys-off\" aria-describedby=\"keys-note\" hx-on:change=\"ermite.setKeysOff(this.checked)\"> Turn off single-key shortcuts</label><p id=\"keys-note\" class=\"dim\">Single-key shortcuts are on. ctrl k and esc work whatever this says.</p></div><dl class=\"keys\"><div><dt><kbd>ctrl k</kbd> <kbd>:</kbd></dt><dd>go to a section, branch, tag, file or repository</dd></div><div><dt><kbd>?</kbd></dt><dd>this list</dd></div><div><dt><kbd>j</kbd> <kbd>k</kbd></dt><dd>move the row cursor down / up</dd></div><div><dt><kbd>enter</kbd></dt><dd>open the row under the cursor; on Files, a directory opens or closes in place</dd></div><div><dt><kbd>↑</kbd> <kbd>↓</kbd> <kbd>←</kbd> <kbd>→</kbd> <kbd>home</kbd> <kbd>end</kbd></dt><dd>in the file tree (focus on a row): previous / next row, close / open a directory or go to its parent / first entry, first / last row. They never open a file</dd></div><div><dt><kbd>l</kbd> <kbd>h</kbd></dt><dd>on Files: open a directory or a file / close a directory or go up to its parent, then to the parent page. Elsewhere: into the side panel (on a merge request, its files) / back to the content; there j k move between its controls</dd></div><div><dt><kbd>g g</kbd> <kbd>G</kbd></dt><dd>first / last row</dd></div><div><dt><kbd>/</kbd></dt><dd>filter the list; on Files, find a file anywhere in the repository (esc clears, enter opens the best match)</dd></div><div><dt><kbd>b</kbd></dt><dd>")
42	42		if templ_7745c5c3_Err != nil {
43	43		return templ_7745c5c3_Err
44	44		}

@@ -102,7 +102,7 @@ func OverlayRefs(l Layout) templ.Component {
102	102		}
103	103		ctx = templ.ClearChildren(ctx)
104	104		if l.Ref != "" {
105		-	templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<dialog id=\"panel-refs\" class=\"panel modal\" aria-label=\"Switch ref\" hx-on:keydown=\"event.key === 'Escape' && (event.preventDefault(), this.close())\" hx-on:click=\"event.target === this && this.close()\"><div class=\"panel-head\"><label for=\"refs-filter\" class=\"sr\">filter branches and tags</label> <input id=\"refs-filter\" type=\"search\" placeholder=\"Switch branch or tag…\" autocomplete=\"off\" data-pick=\"#panel-refs li\" hx-on:input=\"ermite.filter(this)\"> <button type=\"button\" class=\"panel-x\" aria-label=\"Close\" hx-on:click=\"closest('dialog').close()\"><kbd>esc</kbd></button></div><div class=\"panel-cols\" data-picklist><section aria-label=\"Branches\"><h2>Branches <span class=\"count\">")
	105	+	templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<dialog id=\"panel-refs\" class=\"panel modal\" aria-label=\"Switch ref\" hx-on:keydown=\"event.key === 'Escape' && (event.preventDefault(), this.close())\" hx-on:click=\"event.target === this && this.close()\"><div class=\"panel-head\"><label for=\"refs-filter\" class=\"sr\">filter branches and tags</label> <input id=\"refs-filter\" type=\"search\" placeholder=\"Switch branch or tag…\" autocomplete=\"off\" data-pick=\"#panel-refs li\" hx-on:input=\"ermite.filter(this)\"> <button type=\"button\" class=\"panel-x\" aria-label=\"Close (esc)\" hx-on:click=\"closest('dialog').close()\"><kbd>esc</kbd></button></div><div class=\"panel-cols\" data-picklist><section aria-label=\"Branches\"><h2>Branches <span class=\"count\">")
106	106		if templ_7745c5c3_Err != nil {
107	107		return templ_7745c5c3_Err
108	108		}

@@ -260,7 +260,7 @@ func OverlayCmd(items []CmdItem) templ.Component {
260	260		templ_7745c5c3_Var9 = templ.NopComponent
261	261		}
262	262		ctx = templ.ClearChildren(ctx)
263		-	templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "<dialog id=\"panel-cmd\" class=\"panel modal\" aria-label=\"Go to\" hx-on:close=\"ermiteFinder.paletteClose()\" hx-on:keydown=\"event.key === 'Escape' && (event.preventDefault(), this.close())\" hx-on:click=\"event.target === this && this.close()\"><div class=\"panel-head\"><label for=\"cmd-q\" class=\"sr\">go to</label> <input id=\"cmd-q\" type=\"search\" placeholder=\"Go to a section, branch, tag, file or repository…\" autocomplete=\"off\" spellcheck=\"false\" role=\"combobox\" aria-autocomplete=\"list\" aria-expanded=\"true\" aria-controls=\"cmd-list\" aria-activedescendant=\"cmd-o0\" hx-on:input=\"ermite.cmdFilter(this); ermiteFinder.palette(this)\" hx-on:keydown=\"ermite.cmdKey(event)\"> <button type=\"button\" class=\"panel-x\" aria-label=\"Close\" hx-on:click=\"closest('dialog').close()\"><kbd>esc</kbd></button></div><ul id=\"cmd-list\" class=\"cmd-list\" role=\"listbox\" aria-label=\"Targets\">")
	263	+	templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "<dialog id=\"panel-cmd\" class=\"panel modal\" aria-label=\"Go to\" hx-on:close=\"ermiteFinder.paletteClose()\" hx-on:keydown=\"event.key === 'Escape' && (event.preventDefault(), this.close())\" hx-on:click=\"event.target === this && this.close()\"><div class=\"panel-head\"><label for=\"cmd-q\" class=\"sr\">go to</label> <input id=\"cmd-q\" type=\"search\" placeholder=\"Go to a section, branch, tag, file or repository…\" autocomplete=\"off\" spellcheck=\"false\" role=\"combobox\" aria-autocomplete=\"list\" aria-expanded=\"true\" aria-controls=\"cmd-list\" aria-activedescendant=\"cmd-o0\" hx-on:input=\"ermite.cmdFilter(this); ermiteFinder.palette(this)\" hx-on:keydown=\"ermite.cmdKey(event)\"> <button type=\"button\" class=\"panel-x\" aria-label=\"Close (esc)\" hx-on:click=\"closest('dialog').close()\"><kbd>esc</kbd></button></div><ul id=\"cmd-list\" class=\"cmd-list\" role=\"listbox\" aria-label=\"Targets\">")
264	264		if templ_7745c5c3_Err != nil {
265	265		return templ_7745c5c3_Err
266	266		}

@@ -314,27 +314,27 @@ func OverlayCmd(items []CmdItem) templ.Component {
314	314		return templ_7745c5c3_Err
315	315		}
316	316		}
317		-	templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "><a href=\"")
	317	+	templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "><a role=\"presentation\" data-href=\"")
318	318		if templ_7745c5c3_Err != nil {
319	319		return templ_7745c5c3_Err
320	320		}
321		-	var templ_7745c5c3_Var13 templ.SafeURL
322		-	templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(c.Href))
	321	+	var templ_7745c5c3_Var13 string
	322	+	templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.ResolveAttributeValue(c.Href)
323	323		if templ_7745c5c3_Err != nil {
324		-	return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/adapters/web/overlays.templ`, Line: 130, Col: 198}
	324	+	return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/adapters/web/overlays.templ`, Line: 130, Col: 208}
325	325		}
326		-	_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
	326	+	_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var13)
327	327		if templ_7745c5c3_Err != nil {
328	328		return templ_7745c5c3_Err
329	329		}
330		-	templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "\" tabindex=\"-1\"><span class=\"lbl\">")
	330	+	templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "\"><span class=\"lbl\">")
331	331		if templ_7745c5c3_Err != nil {
332	332		return templ_7745c5c3_Err
333	333		}
334	334		var templ_7745c5c3_Var14 string
335	335		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(c.Label)
336	336		if templ_7745c5c3_Err != nil {
337		-	return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/adapters/web/overlays.templ`, Line: 130, Col: 242}
	337	+	return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/adapters/web/overlays.templ`, Line: 130, Col: 238}
338	338		}
339	339		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
340	340		if templ_7745c5c3_Err != nil {

@@ -347,7 +347,7 @@ func OverlayCmd(items []CmdItem) templ.Component {
347	347		var templ_7745c5c3_Var15 string
348	348		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(c.Kind)
349	349		if templ_7745c5c3_Err != nil {
350		-	return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/adapters/web/overlays.templ`, Line: 130, Col: 275}
	350	+	return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/adapters/web/overlays.templ`, Line: 130, Col: 271}
351	351		}
352	352		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
353	353		if templ_7745c5c3_Err != nil {

@@ -371,7 +371,30 @@ func OverlayCmd(items []CmdItem) templ.Component {
371	371		if templ_7745c5c3_Err != nil {
372	372		return templ_7745c5c3_Err
373	373		}
374		-	templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "\" role=\"option\" aria-selected=\"false\" data-k=\"action turn single-key shortcuts on off keyboard\"><a href=\"#\" data-fire=\"keys\" tabindex=\"-1\"><span class=\"lbl\">turn single-key shortcuts off</span><span class=\"k\">action</span></a></li></ul><p class=\"panel-foot\"><span><kbd>↑</kbd><kbd>↓</kbd> move</span><span><kbd>enter</kbd> open</span><span><kbd>esc</kbd> close</span></p></dialog>")
	374	+	templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "\" role=\"option\" aria-selected=\"")
	375	+	if templ_7745c5c3_Err != nil {
	376	+	return templ_7745c5c3_Err
	377	+	}
	378	+	var templ_7745c5c3_Var17 string
	379	+	templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.ResolveAttributeValue(strconv.FormatBool(len(items) == 0))
	380	+	if templ_7745c5c3_Err != nil {
	381	+	return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/adapters/web/overlays.templ`, Line: 132, Col: 106}
	382	+	}
	383	+	_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var17)
	384	+	if templ_7745c5c3_Err != nil {
	385	+	return templ_7745c5c3_Err
	386	+	}
	387	+	templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "\"")
	388	+	if templ_7745c5c3_Err != nil {
	389	+	return templ_7745c5c3_Err
	390	+	}
	391	+	if len(items) == 0 {
	392	+	templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, " data-cursor")
	393	+	if templ_7745c5c3_Err != nil {
	394	+	return templ_7745c5c3_Err
	395	+	}
	396	+	}
	397	+	templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, " data-k=\"action turn single-key shortcuts on off keyboard\"><a role=\"presentation\" data-fire=\"keys\"><span class=\"lbl\">turn single-key shortcuts off</span><span class=\"k\">action</span></a></li></ul><p class=\"panel-foot\"><span><kbd>↑</kbd><kbd>↓</kbd> move</span><span><kbd>enter</kbd> open</span><span><kbd>esc</kbd> close</span></p></dialog>")
375	398		if templ_7745c5c3_Err != nil {
376	399		return templ_7745c5c3_Err
377	400		}

M internal/adapters/web/shell.templ +4 -4


@@ -207,10 +207,10 @@ templ Footer(l Layout) {
207	207		// move, the selected lines of a file, a flash message (permalink copied) and
208	208		// a lost event stream. Empty, it takes no room.
209	209		templ Hint(l Layout) {
210		-	<div class="hint" role="status" aria-live="polite">
211		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''"></span>
212		-	<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''"></span>
213		-	<span class="hint-flash" :text="document.body.dataset.flash \|\| ''"></span>
	210	+	<div class="hint">
	211	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''"></span>
	212	+	<span role="status" aria-live="polite"><span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''"></span>
	213	+	<span class="hint-flash" :text="document.body.dataset.flash \|\| ''"></span></span>
214	214		@Live(l)
215	215		</div>
216	216		}

M internal/adapters/web/shell_templ.go +1 -1 generated file: collapsed

load diff

M internal/adapters/web/static/css/20-shell.css +2 -1


@@ -204,12 +204,13 @@
204	204		background: var(--bg-overlay); border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: var(--shadow);
205	205		pointer-events: none;
206	206		& > :empty { display: none; }
	207	+	& > [role="status"] { display: contents; }
207	208		& .hint-live { color: var(--red); }
208	209		}
209	210		/* empty, the badge is out of sight but stays a status region (display: none
210	211		would drop it from the accessibility tree and its next message would not be
211	212		announced) */
212		-	.hint:not(:has(> :not(:empty))) {
	213	+	.hint:not(:has(.hint-nav:not(:empty), .hint-sel:not(:empty), .hint-flash:not(:empty), .hint-live:not(:empty))) {
213	214		width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); box-shadow: none;
214	215		}
215	216

M internal/adapters/web/static/css/60-mr.css +5 -8


@@ -17,22 +17,19 @@
17	17		font-size: var(--fs-s);
18	18		/* the tabs are buttons: a thin border, the count in a darker badge;
19	19		the open one in the teal accent */
20		-	& nav { display: flex; flex-wrap: wrap; gap: var(--s2); }
21		-	& [data-mr-tabs] a {
	20	+	& [data-mr-tabs] { display: flex; flex-wrap: wrap; gap: var(--s2); }
	21	+	& [data-mr-tabs] button {
22	22		display: inline-flex; align-items: center; gap: var(--s1);
23	23		padding: 2px var(--s2); border: 1px solid var(--border-strong); border-radius: var(--r-s);
24	24		color: var(--ink-dim); text-decoration: none; cursor: pointer;
25	25		}
26	26		& [data-checks-label] { color: var(--ink-dim); font-size: var(--fs-xs); }
27	27		& [data-mr-tabs] .count { margin-left: 0; color: var(--ink-hi); background: var(--bg-canvas); box-shadow: inset 0 0 0 1px var(--border); }
28		-	& [data-mr-tabs] a:hover { background: var(--bg-strong); color: var(--ink-hi); }
29		-	& [data-mr-tabs] a[aria-expanded="true"] { border-color: var(--teal); color: var(--teal); background: var(--bg-surface); }
	28	+	& [data-mr-tabs] button:hover { background: var(--bg-strong); color: var(--ink-hi); }
	29	+	& [data-mr-tabs] button[aria-expanded="true"] { border-color: var(--teal); color: var(--teal); background: var(--bg-surface); }
30	30		& [data-mr-panel] { padding-block-start: var(--s2); overflow-x: auto; }
31	31		& [hidden] { display: none; }
32		-	/* Until mr.js drives the panels (data-panels, then [hidden]), only the
33		-	panel of the URL fragment shows: the tabs work as anchors without
34		-	scripts, and no panel flashes open before the script runs. */
35		-	&:not([data-panels]) [data-mr-panel]:not(:target, :has(:target)) { display: none; }
	32	+	/* Without scripts both panels remain visible; disclosure controls use data-js. */
36	33		& section h2 { font-size: var(--fs-s); color: var(--ink-dim); }
37	34		& table { width: 100%; border-collapse: collapse; }
38	35		& th, & td { text-align: left; padding: var(--s2); border-bottom: 1px solid var(--border); }

M internal/adapters/web/static/css/85-mobile.css +1 -1


@@ -48,6 +48,6 @@
48	48		#diffs[data-mr] .ln a[data-range-start] { outline: 2px solid var(--focus); background: var(--sel); }
49	49		body:has(#diffs[data-mr]) :is(.cform .btn, .menu .btn, .mr-touch-range .btn, .c-act button) { min-height: 40px; height: auto; padding-block: var(--s2); }
50	50		#diffs[data-mr] .cform { scroll-margin-block: calc(var(--hdr-h) + 12px); }
51		-	.mr-footer [data-mr-tabs] a { display: inline-flex; align-items: center; min-height: 40px; }
	51	+	.mr-footer [data-mr-tabs] button { display: inline-flex; align-items: center; min-height: 40px; }
52	52		}
53	53		}

M internal/adapters/web/static/js/ermite.js +15 -0


@@ -134,7 +134,12 @@
134	134		dialog(id, focusId) {
135	135		const d = document.getElementById(id);
136	136		if (!d) return;
	137	+	const opener = document.activeElement;
137	138		ermite.closeDialogs();
	139	+	d.addEventListener('close', () => {
	140	+	// close events are queued: a replacement dialog may already be open.
	141	+	if (!document.querySelector('dialog[open]') && opener?.isConnected) opener.focus();
	142	+	}, { once: true });
138	143		d.showModal();
139	144		if (id === 'panel-cmd') window.ermiteCmd?.sync();
140	145		if (focusId) document.getElementById(focusId)?.focus();

@@ -672,6 +677,16 @@
672	677		const menu = el.closest('details.menu');
673	678		if (menu) closeMenu(menu);
674	679		});
	680	+	// Listbox options own the interaction; their anchors are presentation only.
	681	+	// Keyboard activation also clicks this wrapper (palette, finder and j/k).
	682	+	addEventListener('click', (e) => {
	683	+	const target = e.target.closest?.('a[data-href]');
	684	+	const list = target?.closest?.('[role="listbox"]');
	685	+	if (!list \|\| !['cmd-list', 'finder-list'].includes(list.id) \|\| e.button) return;
	686	+	e.preventDefault();
	687	+	location.assign(target.dataset.href);
	688	+	});
	689	+
675	690		// A click outside an open menu closes it.
676	691		addEventListener('click', (e) => {
677	692		for (const d of $$('details.menu[open]')) if (!d.contains(e.target)) d.open = false;

M internal/adapters/web/static/js/files.js +4 -3


@@ -635,12 +635,12 @@ window.ermiteFinder = (() => {
635	635		return lbl;
636	636		}
637	637
638		-	// hitLink is the link of path i of the result: its label, out of the tab order.
	638	+	// hitLink is the presentation wrapper of path i; the option owns activation.
639	639		function hitLink(res, i) {
640	640		const path = res.idx.paths[i];
641	641		const a = document.createElement('a');
642		-	a.href = blobHref(path);
643		-	a.tabIndex = -1;
	642	+	a.dataset.href = blobHref(path);
	643	+	a.setAttribute('role', 'presentation');
644	644		a.append(label(path, positions(res.idx, i, res.q)));
645	645		return a;
646	646		}

@@ -684,6 +684,7 @@ window.ermiteFinder = (() => {
684	684
685	685		// showTree: no query, the directory again, with j/k and Enter on its rows.
686	686		function showTree(el) {
	687	+	status('');
687	688		rendered = null;
688	689		pendingEnter = null;
689	690		$('finder').hidden = true;

M internal/adapters/web/static/js/mr.js +3 -3


@@ -241,7 +241,7 @@ window.ermiteMR = (() => {
241	241		reveal(id);
242	242		}
243	243
244		-	// Enhance the ordinary anchor navigation only when scripts are available.
	244	+	// Enhance the server-rendered disclosures when scripts are available.
245	245		let disposePanels = () => {};
246	246		// The tabs are disclosure buttons (aria-expanded + aria-controls), not a
247	247		// tablist: a tablist always has a selected tab, and here every panel can be

@@ -250,7 +250,7 @@ window.ermiteMR = (() => {
250	250		disposePanels();
251	251		const footer = $('.mr-footer'), nav = $('[data-mr-tabs]');
252	252		if (!footer \|\| !nav) return;
253		-	const tabs = $$('a', nav), panels = $$('[data-mr-panel]', footer);
	253	+	const tabs = $$('button', nav), panels = $$('[data-mr-panel]', footer);
254	254		const ids = new Set(['#mr-commits', '#mr-checks', '#mr-checks-panel']);
255	255		let current = -1;
256	256		// show applies the state; fromUser also keeps the URL fragment in step.

@@ -522,7 +522,7 @@ window.ermiteMR = (() => {
522	522		const files = new Map($$('#diffs details.dfile').map((f) => [f.dataset.file, f.open]));
523	523		const folded = $('.r-files')?.hasAttribute('data-folded');
524	524		const railY = $('.rail')?.scrollTop, filesY = $('.r-files .files')?.scrollTop;
525		-	const openPanel = $$('[data-mr-tabs] a').findIndex((t) => t.getAttribute('aria-expanded') === 'true');
	525	+	const openPanel = $$('[data-mr-tabs] button').findIndex((t) => t.getAttribute('aria-expanded') === 'true');
526	526		const active = document.activeElement;
527	527		const focus = active && { file: active.closest?.('.files a')?.getAttribute('title'), region: regions.find((sel) => $(sel)?.contains(active)), menu: active.closest?.('details.menu')?.id, id: active.id, tag: active.tagName, name: active.getAttribute('name'), href: active.getAttribute('href') };
528	528		for (const f of $$('#diffs details.dfile', page)) if (files.has(f.dataset.file)) f.open = files.get(f.dataset.file);

M internal/adapters/web/tree.templ +1 -1


@@ -28,8 +28,8 @@ templ Tree(l Layout, p TreePage) {
28	28		</div>
29	29		<p class="tree-keys" data-js aria-hidden="true"><kbd>j</kbd> <kbd>k</kbd> move · <kbd>l</kbd> open · <kbd>h</kbd> back</p>
30	30		</div>
	31	+	<p id="finder-status" class="dim" role="status"></p>
31	32		<div id="finder" class="tree-card" hidden>
32		-	<p id="finder-status" class="dim" aria-live="polite"></p>
33	33		<ul id="finder-list" class="cmd-list" role="listbox" aria-label="Files"></ul>
34	34		</div>
35	35		<div id="tree-view" class="tree-card">

M internal/adapters/web/tree_templ.go +1 -1 generated file: collapsed

load diff

M internal/app/testdata/web/blob-binary.html +19 -17


@@ -141,18 +141,20 @@
141	141		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
142	142		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
143	143		</footer>
144		-	<div class="hint" role="status" aria-live="polite">
145		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	144	+	<div class="hint">
	145	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
146	146		</span>
	147	+	<span role="status" aria-live="polite">
147	148		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
148	149		</span>
149	150		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
150	151		</span>
	152	+	</span>
151	153		</div>
152	154		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
153	155		<div class="panel-head">
154	156		<h2>Keyboard shortcuts</h2>
155		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	157	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
156	158		<kbd>esc</kbd> close</button>
157	159		</div>
158	160		<div class="keys-pref">

@@ -286,7 +288,7 @@
286	288		<div class="panel-head">
287	289		<label for="refs-filter" class="sr">filter branches and tags</label>
288	290		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
289		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	291	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
290	292		<kbd>esc</kbd>
291	293		</button>
292	294		</div>

@@ -321,79 +323,79 @@
321	323		<div class="panel-head">
322	324		<label for="cmd-q" class="sr">go to</label>
323	325		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
324		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	326	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
325	327		<kbd>esc</kbd>
326	328		</button>
327	329		</div>
328	330		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
329	331		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
330		-	<a href="/" tabindex="-1">
	332	+	<a role="presentation" data-href="/">
331	333		<span class="lbl">home</span>
332	334		<span class="k">go</span>
333	335		</a>
334	336		</li>
335	337		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
336		-	<a href="/files" tabindex="-1">
	338	+	<a role="presentation" data-href="/files">
337	339		<span class="lbl">summary</span>
338	340		<span class="k">section</span>
339	341		</a>
340	342		</li>
341	343		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
342		-	<a href="/files/tree/main" tabindex="-1">
	344	+	<a role="presentation" data-href="/files/tree/main">
343	345		<span class="lbl">files</span>
344	346		<span class="k">section</span>
345	347		</a>
346	348		</li>
347	349		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
348		-	<a href="/files/commits/main" tabindex="-1">
	350	+	<a role="presentation" data-href="/files/commits/main">
349	351		<span class="lbl">commits</span>
350	352		<span class="k">section</span>
351	353		</a>
352	354		</li>
353	355		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
354		-	<a href="/files/refs" tabindex="-1">
	356	+	<a role="presentation" data-href="/files/refs">
355	357		<span class="lbl">branches & tags</span>
356	358		<span class="k">section</span>
357	359		</a>
358	360		</li>
359	361		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
360		-	<a href="/files/merge-requests" tabindex="-1">
	362	+	<a role="presentation" data-href="/files/merge-requests">
361	363		<span class="lbl">merge requests</span>
362	364		<span class="k">section</span>
363	365		</a>
364	366		</li>
365	367		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
366		-	<a href="/files/releases" tabindex="-1">
	368	+	<a role="presentation" data-href="/files/releases">
367	369		<span class="lbl">releases</span>
368	370		<span class="k">section</span>
369	371		</a>
370	372		</li>
371	373		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
372		-	<a href="/files/actions" tabindex="-1">
	374	+	<a role="presentation" data-href="/files/actions">
373	375		<span class="lbl">actions</span>
374	376		<span class="k">section</span>
375	377		</a>
376	378		</li>
377	379		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch feature/x">
378		-	<a href="/files/tree/feature/x" tabindex="-1">
	380	+	<a role="presentation" data-href="/files/tree/feature/x">
379	381		<span class="lbl">feature/x</span>
380	382		<span class="k">branch</span>
381	383		</a>
382	384		</li>
383	385		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch main">
384		-	<a href="/files/tree/main" tabindex="-1">
	386	+	<a role="presentation" data-href="/files/tree/main">
385	387		<span class="lbl">main</span>
386	388		<span class="k">branch</span>
387	389		</a>
388	390		</li>
389	391		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0">
390		-	<a href="/files/tree/v1.0" tabindex="-1">
	392	+	<a role="presentation" data-href="/files/tree/v1.0">
391	393		<span class="lbl">v1.0</span>
392	394		<span class="k">tag</span>
393	395		</a>
394	396		</li>
395	397		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
396		-	<a href="#" data-fire="keys" tabindex="-1">
	398	+	<a role="presentation" data-fire="keys">
397	399		<span class="lbl">turn single-key shortcuts off</span>
398	400		<span class="k">action</span>
399	401		</a>

M internal/app/testdata/web/blob-code.html +19 -17


@@ -211,18 +211,20 @@
211	211		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
212	212		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
213	213		</footer>
214		-	<div class="hint" role="status" aria-live="polite">
215		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	214	+	<div class="hint">
	215	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
216	216		</span>
	217	+	<span role="status" aria-live="polite">
217	218		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
218	219		</span>
219	220		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
220	221		</span>
	222	+	</span>
221	223		</div>
222	224		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
223	225		<div class="panel-head">
224	226		<h2>Keyboard shortcuts</h2>
225		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	227	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
226	228		<kbd>esc</kbd> close</button>
227	229		</div>
228	230		<div class="keys-pref">

@@ -356,7 +358,7 @@
356	358		<div class="panel-head">
357	359		<label for="refs-filter" class="sr">filter branches and tags</label>
358	360		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
359		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	361	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
360	362		<kbd>esc</kbd>
361	363		</button>
362	364		</div>

@@ -391,79 +393,79 @@
391	393		<div class="panel-head">
392	394		<label for="cmd-q" class="sr">go to</label>
393	395		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
394		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	396	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
395	397		<kbd>esc</kbd>
396	398		</button>
397	399		</div>
398	400		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
399	401		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
400		-	<a href="/" tabindex="-1">
	402	+	<a role="presentation" data-href="/">
401	403		<span class="lbl">home</span>
402	404		<span class="k">go</span>
403	405		</a>
404	406		</li>
405	407		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
406		-	<a href="/files" tabindex="-1">
	408	+	<a role="presentation" data-href="/files">
407	409		<span class="lbl">summary</span>
408	410		<span class="k">section</span>
409	411		</a>
410	412		</li>
411	413		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
412		-	<a href="/files/tree/main" tabindex="-1">
	414	+	<a role="presentation" data-href="/files/tree/main">
413	415		<span class="lbl">files</span>
414	416		<span class="k">section</span>
415	417		</a>
416	418		</li>
417	419		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
418		-	<a href="/files/commits/main" tabindex="-1">
	420	+	<a role="presentation" data-href="/files/commits/main">
419	421		<span class="lbl">commits</span>
420	422		<span class="k">section</span>
421	423		</a>
422	424		</li>
423	425		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
424		-	<a href="/files/refs" tabindex="-1">
	426	+	<a role="presentation" data-href="/files/refs">
425	427		<span class="lbl">branches & tags</span>
426	428		<span class="k">section</span>
427	429		</a>
428	430		</li>
429	431		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
430		-	<a href="/files/merge-requests" tabindex="-1">
	432	+	<a role="presentation" data-href="/files/merge-requests">
431	433		<span class="lbl">merge requests</span>
432	434		<span class="k">section</span>
433	435		</a>
434	436		</li>
435	437		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
436		-	<a href="/files/releases" tabindex="-1">
	438	+	<a role="presentation" data-href="/files/releases">
437	439		<span class="lbl">releases</span>
438	440		<span class="k">section</span>
439	441		</a>
440	442		</li>
441	443		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
442		-	<a href="/files/actions" tabindex="-1">
	444	+	<a role="presentation" data-href="/files/actions">
443	445		<span class="lbl">actions</span>
444	446		<span class="k">section</span>
445	447		</a>
446	448		</li>
447	449		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch feature/x">
448		-	<a href="/files/tree/feature/x" tabindex="-1">
	450	+	<a role="presentation" data-href="/files/tree/feature/x">
449	451		<span class="lbl">feature/x</span>
450	452		<span class="k">branch</span>
451	453		</a>
452	454		</li>
453	455		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch main">
454		-	<a href="/files/tree/main" tabindex="-1">
	456	+	<a role="presentation" data-href="/files/tree/main">
455	457		<span class="lbl">main</span>
456	458		<span class="k">branch</span>
457	459		</a>
458	460		</li>
459	461		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0">
460		-	<a href="/files/tree/v1.0" tabindex="-1">
	462	+	<a role="presentation" data-href="/files/tree/v1.0">
461	463		<span class="lbl">v1.0</span>
462	464		<span class="k">tag</span>
463	465		</a>
464	466		</li>
465	467		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
466		-	<a href="#" data-fire="keys" tabindex="-1">
	468	+	<a role="presentation" data-fire="keys">
467	469		<span class="lbl">turn single-key shortcuts off</span>
468	470		<span class="k">action</span>
469	471		</a>

M internal/app/testdata/web/blob-empty.html +19 -17


@@ -141,18 +141,20 @@
141	141		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
142	142		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
143	143		</footer>
144		-	<div class="hint" role="status" aria-live="polite">
145		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	144	+	<div class="hint">
	145	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
146	146		</span>
	147	+	<span role="status" aria-live="polite">
147	148		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
148	149		</span>
149	150		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
150	151		</span>
	152	+	</span>
151	153		</div>
152	154		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
153	155		<div class="panel-head">
154	156		<h2>Keyboard shortcuts</h2>
155		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	157	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
156	158		<kbd>esc</kbd> close</button>
157	159		</div>
158	160		<div class="keys-pref">

@@ -286,7 +288,7 @@
286	288		<div class="panel-head">
287	289		<label for="refs-filter" class="sr">filter branches and tags</label>
288	290		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
289		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	291	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
290	292		<kbd>esc</kbd>
291	293		</button>
292	294		</div>

@@ -321,79 +323,79 @@
321	323		<div class="panel-head">
322	324		<label for="cmd-q" class="sr">go to</label>
323	325		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
324		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	326	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
325	327		<kbd>esc</kbd>
326	328		</button>
327	329		</div>
328	330		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
329	331		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
330		-	<a href="/" tabindex="-1">
	332	+	<a role="presentation" data-href="/">
331	333		<span class="lbl">home</span>
332	334		<span class="k">go</span>
333	335		</a>
334	336		</li>
335	337		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
336		-	<a href="/files" tabindex="-1">
	338	+	<a role="presentation" data-href="/files">
337	339		<span class="lbl">summary</span>
338	340		<span class="k">section</span>
339	341		</a>
340	342		</li>
341	343		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
342		-	<a href="/files/tree/main" tabindex="-1">
	344	+	<a role="presentation" data-href="/files/tree/main">
343	345		<span class="lbl">files</span>
344	346		<span class="k">section</span>
345	347		</a>
346	348		</li>
347	349		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
348		-	<a href="/files/commits/main" tabindex="-1">
	350	+	<a role="presentation" data-href="/files/commits/main">
349	351		<span class="lbl">commits</span>
350	352		<span class="k">section</span>
351	353		</a>
352	354		</li>
353	355		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
354		-	<a href="/files/refs" tabindex="-1">
	356	+	<a role="presentation" data-href="/files/refs">
355	357		<span class="lbl">branches & tags</span>
356	358		<span class="k">section</span>
357	359		</a>
358	360		</li>
359	361		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
360		-	<a href="/files/merge-requests" tabindex="-1">
	362	+	<a role="presentation" data-href="/files/merge-requests">
361	363		<span class="lbl">merge requests</span>
362	364		<span class="k">section</span>
363	365		</a>
364	366		</li>
365	367		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
366		-	<a href="/files/releases" tabindex="-1">
	368	+	<a role="presentation" data-href="/files/releases">
367	369		<span class="lbl">releases</span>
368	370		<span class="k">section</span>
369	371		</a>
370	372		</li>
371	373		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
372		-	<a href="/files/actions" tabindex="-1">
	374	+	<a role="presentation" data-href="/files/actions">
373	375		<span class="lbl">actions</span>
374	376		<span class="k">section</span>
375	377		</a>
376	378		</li>
377	379		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch feature/x">
378		-	<a href="/files/tree/feature/x" tabindex="-1">
	380	+	<a role="presentation" data-href="/files/tree/feature/x">
379	381		<span class="lbl">feature/x</span>
380	382		<span class="k">branch</span>
381	383		</a>
382	384		</li>
383	385		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch main">
384		-	<a href="/files/tree/main" tabindex="-1">
	386	+	<a role="presentation" data-href="/files/tree/main">
385	387		<span class="lbl">main</span>
386	388		<span class="k">branch</span>
387	389		</a>
388	390		</li>
389	391		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0">
390		-	<a href="/files/tree/v1.0" tabindex="-1">
	392	+	<a role="presentation" data-href="/files/tree/v1.0">
391	393		<span class="lbl">v1.0</span>
392	394		<span class="k">tag</span>
393	395		</a>
394	396		</li>
395	397		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
396		-	<a href="#" data-fire="keys" tabindex="-1">
	398	+	<a role="presentation" data-fire="keys">
397	399		<span class="lbl">turn single-key shortcuts off</span>
398	400		<span class="k">action</span>
399	401		</a>

M internal/app/testdata/web/blob-image.html +19 -17


@@ -143,18 +143,20 @@
143	143		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
144	144		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
145	145		</footer>
146		-	<div class="hint" role="status" aria-live="polite">
147		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	146	+	<div class="hint">
	147	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
148	148		</span>
	149	+	<span role="status" aria-live="polite">
149	150		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
150	151		</span>
151	152		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
152	153		</span>
	154	+	</span>
153	155		</div>
154	156		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
155	157		<div class="panel-head">
156	158		<h2>Keyboard shortcuts</h2>
157		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	159	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
158	160		<kbd>esc</kbd> close</button>
159	161		</div>
160	162		<div class="keys-pref">

@@ -288,7 +290,7 @@
288	290		<div class="panel-head">
289	291		<label for="refs-filter" class="sr">filter branches and tags</label>
290	292		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
291		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	293	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
292	294		<kbd>esc</kbd>
293	295		</button>
294	296		</div>

@@ -323,79 +325,79 @@
323	325		<div class="panel-head">
324	326		<label for="cmd-q" class="sr">go to</label>
325	327		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
326		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	328	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
327	329		<kbd>esc</kbd>
328	330		</button>
329	331		</div>
330	332		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
331	333		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
332		-	<a href="/" tabindex="-1">
	334	+	<a role="presentation" data-href="/">
333	335		<span class="lbl">home</span>
334	336		<span class="k">go</span>
335	337		</a>
336	338		</li>
337	339		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
338		-	<a href="/files" tabindex="-1">
	340	+	<a role="presentation" data-href="/files">
339	341		<span class="lbl">summary</span>
340	342		<span class="k">section</span>
341	343		</a>
342	344		</li>
343	345		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
344		-	<a href="/files/tree/main" tabindex="-1">
	346	+	<a role="presentation" data-href="/files/tree/main">
345	347		<span class="lbl">files</span>
346	348		<span class="k">section</span>
347	349		</a>
348	350		</li>
349	351		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
350		-	<a href="/files/commits/main" tabindex="-1">
	352	+	<a role="presentation" data-href="/files/commits/main">
351	353		<span class="lbl">commits</span>
352	354		<span class="k">section</span>
353	355		</a>
354	356		</li>
355	357		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
356		-	<a href="/files/refs" tabindex="-1">
	358	+	<a role="presentation" data-href="/files/refs">
357	359		<span class="lbl">branches & tags</span>
358	360		<span class="k">section</span>
359	361		</a>
360	362		</li>
361	363		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
362		-	<a href="/files/merge-requests" tabindex="-1">
	364	+	<a role="presentation" data-href="/files/merge-requests">
363	365		<span class="lbl">merge requests</span>
364	366		<span class="k">section</span>
365	367		</a>
366	368		</li>
367	369		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
368		-	<a href="/files/releases" tabindex="-1">
	370	+	<a role="presentation" data-href="/files/releases">
369	371		<span class="lbl">releases</span>
370	372		<span class="k">section</span>
371	373		</a>
372	374		</li>
373	375		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
374		-	<a href="/files/actions" tabindex="-1">
	376	+	<a role="presentation" data-href="/files/actions">
375	377		<span class="lbl">actions</span>
376	378		<span class="k">section</span>
377	379		</a>
378	380		</li>
379	381		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch feature/x">
380		-	<a href="/files/tree/feature/x" tabindex="-1">
	382	+	<a role="presentation" data-href="/files/tree/feature/x">
381	383		<span class="lbl">feature/x</span>
382	384		<span class="k">branch</span>
383	385		</a>
384	386		</li>
385	387		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch main">
386		-	<a href="/files/tree/main" tabindex="-1">
	388	+	<a role="presentation" data-href="/files/tree/main">
387	389		<span class="lbl">main</span>
388	390		<span class="k">branch</span>
389	391		</a>
390	392		</li>
391	393		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0">
392		-	<a href="/files/tree/v1.0" tabindex="-1">
	394	+	<a role="presentation" data-href="/files/tree/v1.0">
393	395		<span class="lbl">v1.0</span>
394	396		<span class="k">tag</span>
395	397		</a>
396	398		</li>
397	399		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
398		-	<a href="#" data-fire="keys" tabindex="-1">
	400	+	<a role="presentation" data-fire="keys">
399	401		<span class="lbl">turn single-key shortcuts off</span>
400	402		<span class="k">action</span>
401	403		</a>

M internal/app/testdata/web/blob-markdown.html +19 -17


@@ -208,18 +208,20 @@
208	208		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
209	209		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
210	210		</footer>
211		-	<div class="hint" role="status" aria-live="polite">
212		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	211	+	<div class="hint">
	212	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
213	213		</span>
	214	+	<span role="status" aria-live="polite">
214	215		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
215	216		</span>
216	217		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
217	218		</span>
	219	+	</span>
218	220		</div>
219	221		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
220	222		<div class="panel-head">
221	223		<h2>Keyboard shortcuts</h2>
222		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	224	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
223	225		<kbd>esc</kbd> close</button>
224	226		</div>
225	227		<div class="keys-pref">

@@ -353,7 +355,7 @@
353	355		<div class="panel-head">
354	356		<label for="refs-filter" class="sr">filter branches and tags</label>
355	357		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
356		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	358	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
357	359		<kbd>esc</kbd>
358	360		</button>
359	361		</div>

@@ -388,79 +390,79 @@
388	390		<div class="panel-head">
389	391		<label for="cmd-q" class="sr">go to</label>
390	392		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
391		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	393	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
392	394		<kbd>esc</kbd>
393	395		</button>
394	396		</div>
395	397		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
396	398		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
397		-	<a href="/" tabindex="-1">
	399	+	<a role="presentation" data-href="/">
398	400		<span class="lbl">home</span>
399	401		<span class="k">go</span>
400	402		</a>
401	403		</li>
402	404		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
403		-	<a href="/files" tabindex="-1">
	405	+	<a role="presentation" data-href="/files">
404	406		<span class="lbl">summary</span>
405	407		<span class="k">section</span>
406	408		</a>
407	409		</li>
408	410		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
409		-	<a href="/files/tree/main" tabindex="-1">
	411	+	<a role="presentation" data-href="/files/tree/main">
410	412		<span class="lbl">files</span>
411	413		<span class="k">section</span>
412	414		</a>
413	415		</li>
414	416		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
415		-	<a href="/files/commits/main" tabindex="-1">
	417	+	<a role="presentation" data-href="/files/commits/main">
416	418		<span class="lbl">commits</span>
417	419		<span class="k">section</span>
418	420		</a>
419	421		</li>
420	422		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
421		-	<a href="/files/refs" tabindex="-1">
	423	+	<a role="presentation" data-href="/files/refs">
422	424		<span class="lbl">branches & tags</span>
423	425		<span class="k">section</span>
424	426		</a>
425	427		</li>
426	428		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
427		-	<a href="/files/merge-requests" tabindex="-1">
	429	+	<a role="presentation" data-href="/files/merge-requests">
428	430		<span class="lbl">merge requests</span>
429	431		<span class="k">section</span>
430	432		</a>
431	433		</li>
432	434		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
433		-	<a href="/files/releases" tabindex="-1">
	435	+	<a role="presentation" data-href="/files/releases">
434	436		<span class="lbl">releases</span>
435	437		<span class="k">section</span>
436	438		</a>
437	439		</li>
438	440		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
439		-	<a href="/files/actions" tabindex="-1">
	441	+	<a role="presentation" data-href="/files/actions">
440	442		<span class="lbl">actions</span>
441	443		<span class="k">section</span>
442	444		</a>
443	445		</li>
444	446		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch feature/x">
445		-	<a href="/files/tree/feature/x" tabindex="-1">
	447	+	<a role="presentation" data-href="/files/tree/feature/x">
446	448		<span class="lbl">feature/x</span>
447	449		<span class="k">branch</span>
448	450		</a>
449	451		</li>
450	452		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch main">
451		-	<a href="/files/tree/main" tabindex="-1">
	453	+	<a role="presentation" data-href="/files/tree/main">
452	454		<span class="lbl">main</span>
453	455		<span class="k">branch</span>
454	456		</a>
455	457		</li>
456	458		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0">
457		-	<a href="/files/tree/v1.0" tabindex="-1">
	459	+	<a role="presentation" data-href="/files/tree/v1.0">
458	460		<span class="lbl">v1.0</span>
459	461		<span class="k">tag</span>
460	462		</a>
461	463		</li>
462	464		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
463		-	<a href="#" data-fire="keys" tabindex="-1">
	465	+	<a role="presentation" data-fire="keys">
464	466		<span class="lbl">turn single-key shortcuts off</span>
465	467		<span class="k">action</span>
466	468		</a>

M internal/app/testdata/web/blob-svg.html +19 -17


@@ -166,18 +166,20 @@
166	166		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
167	167		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
168	168		</footer>
169		-	<div class="hint" role="status" aria-live="polite">
170		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	169	+	<div class="hint">
	170	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
171	171		</span>
	172	+	<span role="status" aria-live="polite">
172	173		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
173	174		</span>
174	175		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
175	176		</span>
	177	+	</span>
176	178		</div>
177	179		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
178	180		<div class="panel-head">
179	181		<h2>Keyboard shortcuts</h2>
180		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	182	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
181	183		<kbd>esc</kbd> close</button>
182	184		</div>
183	185		<div class="keys-pref">

@@ -311,7 +313,7 @@
311	313		<div class="panel-head">
312	314		<label for="refs-filter" class="sr">filter branches and tags</label>
313	315		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
314		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	316	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
315	317		<kbd>esc</kbd>
316	318		</button>
317	319		</div>

@@ -346,79 +348,79 @@
346	348		<div class="panel-head">
347	349		<label for="cmd-q" class="sr">go to</label>
348	350		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
349		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	351	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
350	352		<kbd>esc</kbd>
351	353		</button>
352	354		</div>
353	355		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
354	356		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
355		-	<a href="/" tabindex="-1">
	357	+	<a role="presentation" data-href="/">
356	358		<span class="lbl">home</span>
357	359		<span class="k">go</span>
358	360		</a>
359	361		</li>
360	362		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
361		-	<a href="/files" tabindex="-1">
	363	+	<a role="presentation" data-href="/files">
362	364		<span class="lbl">summary</span>
363	365		<span class="k">section</span>
364	366		</a>
365	367		</li>
366	368		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
367		-	<a href="/files/tree/main" tabindex="-1">
	369	+	<a role="presentation" data-href="/files/tree/main">
368	370		<span class="lbl">files</span>
369	371		<span class="k">section</span>
370	372		</a>
371	373		</li>
372	374		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
373		-	<a href="/files/commits/main" tabindex="-1">
	375	+	<a role="presentation" data-href="/files/commits/main">
374	376		<span class="lbl">commits</span>
375	377		<span class="k">section</span>
376	378		</a>
377	379		</li>
378	380		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
379		-	<a href="/files/refs" tabindex="-1">
	381	+	<a role="presentation" data-href="/files/refs">
380	382		<span class="lbl">branches & tags</span>
381	383		<span class="k">section</span>
382	384		</a>
383	385		</li>
384	386		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
385		-	<a href="/files/merge-requests" tabindex="-1">
	387	+	<a role="presentation" data-href="/files/merge-requests">
386	388		<span class="lbl">merge requests</span>
387	389		<span class="k">section</span>
388	390		</a>
389	391		</li>
390	392		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
391		-	<a href="/files/releases" tabindex="-1">
	393	+	<a role="presentation" data-href="/files/releases">
392	394		<span class="lbl">releases</span>
393	395		<span class="k">section</span>
394	396		</a>
395	397		</li>
396	398		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
397		-	<a href="/files/actions" tabindex="-1">
	399	+	<a role="presentation" data-href="/files/actions">
398	400		<span class="lbl">actions</span>
399	401		<span class="k">section</span>
400	402		</a>
401	403		</li>
402	404		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch feature/x">
403		-	<a href="/files/tree/feature/x" tabindex="-1">
	405	+	<a role="presentation" data-href="/files/tree/feature/x">
404	406		<span class="lbl">feature/x</span>
405	407		<span class="k">branch</span>
406	408		</a>
407	409		</li>
408	410		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch main">
409		-	<a href="/files/tree/main" tabindex="-1">
	411	+	<a role="presentation" data-href="/files/tree/main">
410	412		<span class="lbl">main</span>
411	413		<span class="k">branch</span>
412	414		</a>
413	415		</li>
414	416		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0">
415		-	<a href="/files/tree/v1.0" tabindex="-1">
	417	+	<a role="presentation" data-href="/files/tree/v1.0">
416	418		<span class="lbl">v1.0</span>
417	419		<span class="k">tag</span>
418	420		</a>
419	421		</li>
420	422		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
421		-	<a href="#" data-fire="keys" tabindex="-1">
	423	+	<a role="presentation" data-fire="keys">
422	424		<span class="lbl">turn single-key shortcuts off</span>
423	425		<span class="k">action</span>
424	426		</a>

M internal/app/testdata/web/blob-text.html +19 -17


@@ -161,18 +161,20 @@
161	161		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
162	162		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
163	163		</footer>
164		-	<div class="hint" role="status" aria-live="polite">
165		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	164	+	<div class="hint">
	165	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
166	166		</span>
	167	+	<span role="status" aria-live="polite">
167	168		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
168	169		</span>
169	170		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
170	171		</span>
	172	+	</span>
171	173		</div>
172	174		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
173	175		<div class="panel-head">
174	176		<h2>Keyboard shortcuts</h2>
175		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	177	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
176	178		<kbd>esc</kbd> close</button>
177	179		</div>
178	180		<div class="keys-pref">

@@ -306,7 +308,7 @@
306	308		<div class="panel-head">
307	309		<label for="refs-filter" class="sr">filter branches and tags</label>
308	310		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
309		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	311	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
310	312		<kbd>esc</kbd>
311	313		</button>
312	314		</div>

@@ -341,79 +343,79 @@
341	343		<div class="panel-head">
342	344		<label for="cmd-q" class="sr">go to</label>
343	345		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
344		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	346	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
345	347		<kbd>esc</kbd>
346	348		</button>
347	349		</div>
348	350		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
349	351		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
350		-	<a href="/" tabindex="-1">
	352	+	<a role="presentation" data-href="/">
351	353		<span class="lbl">home</span>
352	354		<span class="k">go</span>
353	355		</a>
354	356		</li>
355	357		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
356		-	<a href="/files" tabindex="-1">
	358	+	<a role="presentation" data-href="/files">
357	359		<span class="lbl">summary</span>
358	360		<span class="k">section</span>
359	361		</a>
360	362		</li>
361	363		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
362		-	<a href="/files/tree/main" tabindex="-1">
	364	+	<a role="presentation" data-href="/files/tree/main">
363	365		<span class="lbl">files</span>
364	366		<span class="k">section</span>
365	367		</a>
366	368		</li>
367	369		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
368		-	<a href="/files/commits/main" tabindex="-1">
	370	+	<a role="presentation" data-href="/files/commits/main">
369	371		<span class="lbl">commits</span>
370	372		<span class="k">section</span>
371	373		</a>
372	374		</li>
373	375		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
374		-	<a href="/files/refs" tabindex="-1">
	376	+	<a role="presentation" data-href="/files/refs">
375	377		<span class="lbl">branches & tags</span>
376	378		<span class="k">section</span>
377	379		</a>
378	380		</li>
379	381		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
380		-	<a href="/files/merge-requests" tabindex="-1">
	382	+	<a role="presentation" data-href="/files/merge-requests">
381	383		<span class="lbl">merge requests</span>
382	384		<span class="k">section</span>
383	385		</a>
384	386		</li>
385	387		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
386		-	<a href="/files/releases" tabindex="-1">
	388	+	<a role="presentation" data-href="/files/releases">
387	389		<span class="lbl">releases</span>
388	390		<span class="k">section</span>
389	391		</a>
390	392		</li>
391	393		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
392		-	<a href="/files/actions" tabindex="-1">
	394	+	<a role="presentation" data-href="/files/actions">
393	395		<span class="lbl">actions</span>
394	396		<span class="k">section</span>
395	397		</a>
396	398		</li>
397	399		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch feature/x">
398		-	<a href="/files/tree/feature/x" tabindex="-1">
	400	+	<a role="presentation" data-href="/files/tree/feature/x">
399	401		<span class="lbl">feature/x</span>
400	402		<span class="k">branch</span>
401	403		</a>
402	404		</li>
403	405		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch main">
404		-	<a href="/files/tree/main" tabindex="-1">
	406	+	<a role="presentation" data-href="/files/tree/main">
405	407		<span class="lbl">main</span>
406	408		<span class="k">branch</span>
407	409		</a>
408	410		</li>
409	411		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0">
410		-	<a href="/files/tree/v1.0" tabindex="-1">
	412	+	<a role="presentation" data-href="/files/tree/v1.0">
411	413		<span class="lbl">v1.0</span>
412	414		<span class="k">tag</span>
413	415		</a>
414	416		</li>
415	417		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
416		-	<a href="#" data-fire="keys" tabindex="-1">
	418	+	<a role="presentation" data-fire="keys">
417	419		<span class="lbl">turn single-key shortcuts off</span>
418	420		<span class="k">action</span>
419	421		</a>

M internal/app/testdata/web/blob-too-large.html +19 -17


@@ -141,18 +141,20 @@
141	141		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
142	142		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
143	143		</footer>
144		-	<div class="hint" role="status" aria-live="polite">
145		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	144	+	<div class="hint">
	145	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
146	146		</span>
	147	+	<span role="status" aria-live="polite">
147	148		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
148	149		</span>
149	150		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
150	151		</span>
	152	+	</span>
151	153		</div>
152	154		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
153	155		<div class="panel-head">
154	156		<h2>Keyboard shortcuts</h2>
155		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	157	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
156	158		<kbd>esc</kbd> close</button>
157	159		</div>
158	160		<div class="keys-pref">

@@ -286,7 +288,7 @@
286	288		<div class="panel-head">
287	289		<label for="refs-filter" class="sr">filter branches and tags</label>
288	290		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
289		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	291	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
290	292		<kbd>esc</kbd>
291	293		</button>
292	294		</div>

@@ -321,79 +323,79 @@
321	323		<div class="panel-head">
322	324		<label for="cmd-q" class="sr">go to</label>
323	325		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
324		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	326	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
325	327		<kbd>esc</kbd>
326	328		</button>
327	329		</div>
328	330		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
329	331		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
330		-	<a href="/" tabindex="-1">
	332	+	<a role="presentation" data-href="/">
331	333		<span class="lbl">home</span>
332	334		<span class="k">go</span>
333	335		</a>
334	336		</li>
335	337		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
336		-	<a href="/files" tabindex="-1">
	338	+	<a role="presentation" data-href="/files">
337	339		<span class="lbl">summary</span>
338	340		<span class="k">section</span>
339	341		</a>
340	342		</li>
341	343		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
342		-	<a href="/files/tree/main" tabindex="-1">
	344	+	<a role="presentation" data-href="/files/tree/main">
343	345		<span class="lbl">files</span>
344	346		<span class="k">section</span>
345	347		</a>
346	348		</li>
347	349		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
348		-	<a href="/files/commits/main" tabindex="-1">
	350	+	<a role="presentation" data-href="/files/commits/main">
349	351		<span class="lbl">commits</span>
350	352		<span class="k">section</span>
351	353		</a>
352	354		</li>
353	355		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
354		-	<a href="/files/refs" tabindex="-1">
	356	+	<a role="presentation" data-href="/files/refs">
355	357		<span class="lbl">branches & tags</span>
356	358		<span class="k">section</span>
357	359		</a>
358	360		</li>
359	361		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
360		-	<a href="/files/merge-requests" tabindex="-1">
	362	+	<a role="presentation" data-href="/files/merge-requests">
361	363		<span class="lbl">merge requests</span>
362	364		<span class="k">section</span>
363	365		</a>
364	366		</li>
365	367		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
366		-	<a href="/files/releases" tabindex="-1">
	368	+	<a role="presentation" data-href="/files/releases">
367	369		<span class="lbl">releases</span>
368	370		<span class="k">section</span>
369	371		</a>
370	372		</li>
371	373		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
372		-	<a href="/files/actions" tabindex="-1">
	374	+	<a role="presentation" data-href="/files/actions">
373	375		<span class="lbl">actions</span>
374	376		<span class="k">section</span>
375	377		</a>
376	378		</li>
377	379		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch feature/x">
378		-	<a href="/files/tree/feature/x" tabindex="-1">
	380	+	<a role="presentation" data-href="/files/tree/feature/x">
379	381		<span class="lbl">feature/x</span>
380	382		<span class="k">branch</span>
381	383		</a>
382	384		</li>
383	385		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch main">
384		-	<a href="/files/tree/main" tabindex="-1">
	386	+	<a role="presentation" data-href="/files/tree/main">
385	387		<span class="lbl">main</span>
386	388		<span class="k">branch</span>
387	389		</a>
388	390		</li>
389	391		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0">
390		-	<a href="/files/tree/v1.0" tabindex="-1">
	392	+	<a role="presentation" data-href="/files/tree/v1.0">
391	393		<span class="lbl">v1.0</span>
392	394		<span class="k">tag</span>
393	395		</a>
394	396		</li>
395	397		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
396		-	<a href="#" data-fire="keys" tabindex="-1">
	398	+	<a role="presentation" data-fire="keys">
397	399		<span class="lbl">turn single-key shortcuts off</span>
398	400		<span class="k">action</span>
399	401		</a>

M internal/app/testdata/web/blob-trojan.html +19 -17


@@ -208,18 +208,20 @@
208	208		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
209	209		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
210	210		</footer>
211		-	<div class="hint" role="status" aria-live="polite">
212		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	211	+	<div class="hint">
	212	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
213	213		</span>
	214	+	<span role="status" aria-live="polite">
214	215		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
215	216		</span>
216	217		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
217	218		</span>
	219	+	</span>
218	220		</div>
219	221		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
220	222		<div class="panel-head">
221	223		<h2>Keyboard shortcuts</h2>
222		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	224	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
223	225		<kbd>esc</kbd> close</button>
224	226		</div>
225	227		<div class="keys-pref">

@@ -353,7 +355,7 @@
353	355		<div class="panel-head">
354	356		<label for="refs-filter" class="sr">filter branches and tags</label>
355	357		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
356		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	358	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
357	359		<kbd>esc</kbd>
358	360		</button>
359	361		</div>

@@ -388,79 +390,79 @@
388	390		<div class="panel-head">
389	391		<label for="cmd-q" class="sr">go to</label>
390	392		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
391		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	393	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
392	394		<kbd>esc</kbd>
393	395		</button>
394	396		</div>
395	397		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
396	398		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
397		-	<a href="/" tabindex="-1">
	399	+	<a role="presentation" data-href="/">
398	400		<span class="lbl">home</span>
399	401		<span class="k">go</span>
400	402		</a>
401	403		</li>
402	404		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
403		-	<a href="/files" tabindex="-1">
	405	+	<a role="presentation" data-href="/files">
404	406		<span class="lbl">summary</span>
405	407		<span class="k">section</span>
406	408		</a>
407	409		</li>
408	410		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
409		-	<a href="/files/tree/main" tabindex="-1">
	411	+	<a role="presentation" data-href="/files/tree/main">
410	412		<span class="lbl">files</span>
411	413		<span class="k">section</span>
412	414		</a>
413	415		</li>
414	416		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
415		-	<a href="/files/commits/main" tabindex="-1">
	417	+	<a role="presentation" data-href="/files/commits/main">
416	418		<span class="lbl">commits</span>
417	419		<span class="k">section</span>
418	420		</a>
419	421		</li>
420	422		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
421		-	<a href="/files/refs" tabindex="-1">
	423	+	<a role="presentation" data-href="/files/refs">
422	424		<span class="lbl">branches & tags</span>
423	425		<span class="k">section</span>
424	426		</a>
425	427		</li>
426	428		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
427		-	<a href="/files/merge-requests" tabindex="-1">
	429	+	<a role="presentation" data-href="/files/merge-requests">
428	430		<span class="lbl">merge requests</span>
429	431		<span class="k">section</span>
430	432		</a>
431	433		</li>
432	434		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
433		-	<a href="/files/releases" tabindex="-1">
	435	+	<a role="presentation" data-href="/files/releases">
434	436		<span class="lbl">releases</span>
435	437		<span class="k">section</span>
436	438		</a>
437	439		</li>
438	440		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
439		-	<a href="/files/actions" tabindex="-1">
	441	+	<a role="presentation" data-href="/files/actions">
440	442		<span class="lbl">actions</span>
441	443		<span class="k">section</span>
442	444		</a>
443	445		</li>
444	446		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch feature/x">
445		-	<a href="/files/tree/feature/x" tabindex="-1">
	447	+	<a role="presentation" data-href="/files/tree/feature/x">
446	448		<span class="lbl">feature/x</span>
447	449		<span class="k">branch</span>
448	450		</a>
449	451		</li>
450	452		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch main">
451		-	<a href="/files/tree/main" tabindex="-1">
	453	+	<a role="presentation" data-href="/files/tree/main">
452	454		<span class="lbl">main</span>
453	455		<span class="k">branch</span>
454	456		</a>
455	457		</li>
456	458		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0">
457		-	<a href="/files/tree/v1.0" tabindex="-1">
	459	+	<a role="presentation" data-href="/files/tree/v1.0">
458	460		<span class="lbl">v1.0</span>
459	461		<span class="k">tag</span>
460	462		</a>
461	463		</li>
462	464		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
463		-	<a href="#" data-fire="keys" tabindex="-1">
	465	+	<a role="presentation" data-fire="keys">
464	466		<span class="lbl">turn single-key shortcuts off</span>
465	467		<span class="k">action</span>
466	468		</a>

M internal/app/testdata/web/commit-big.html +19 -17


@@ -193,18 +193,20 @@
193	193		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
194	194		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
195	195		</footer>
196		-	<div class="hint" role="status" aria-live="polite">
197		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	196	+	<div class="hint">
	197	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
198	198		</span>
	199	+	<span role="status" aria-live="polite">
199	200		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
200	201		</span>
201	202		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
202	203		</span>
	204	+	</span>
203	205		</div>
204	206		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
205	207		<div class="panel-head">
206	208		<h2>Keyboard shortcuts</h2>
207		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	209	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
208	210		<kbd>esc</kbd> close</button>
209	211		</div>
210	212		<div class="keys-pref">

@@ -338,7 +340,7 @@
338	340		<div class="panel-head">
339	341		<label for="refs-filter" class="sr">filter branches and tags</label>
340	342		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
341		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	343	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
342	344		<kbd>esc</kbd>
343	345		</button>
344	346		</div>

@@ -373,79 +375,79 @@
373	375		<div class="panel-head">
374	376		<label for="cmd-q" class="sr">go to</label>
375	377		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
376		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	378	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
377	379		<kbd>esc</kbd>
378	380		</button>
379	381		</div>
380	382		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
381	383		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
382		-	<a href="/" tabindex="-1">
	384	+	<a role="presentation" data-href="/">
383	385		<span class="lbl">home</span>
384	386		<span class="k">go</span>
385	387		</a>
386	388		</li>
387	389		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
388		-	<a href="/diffs" tabindex="-1">
	390	+	<a role="presentation" data-href="/diffs">
389	391		<span class="lbl">summary</span>
390	392		<span class="k">section</span>
391	393		</a>
392	394		</li>
393	395		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
394		-	<a href="/diffs/tree/main" tabindex="-1">
	396	+	<a role="presentation" data-href="/diffs/tree/main">
395	397		<span class="lbl">files</span>
396	398		<span class="k">section</span>
397	399		</a>
398	400		</li>
399	401		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
400		-	<a href="/diffs/commits/main" tabindex="-1">
	402	+	<a role="presentation" data-href="/diffs/commits/main">
401	403		<span class="lbl">commits</span>
402	404		<span class="k">section</span>
403	405		</a>
404	406		</li>
405	407		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
406		-	<a href="/diffs/refs" tabindex="-1">
	408	+	<a role="presentation" data-href="/diffs/refs">
407	409		<span class="lbl">branches & tags</span>
408	410		<span class="k">section</span>
409	411		</a>
410	412		</li>
411	413		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
412		-	<a href="/diffs/merge-requests" tabindex="-1">
	414	+	<a role="presentation" data-href="/diffs/merge-requests">
413	415		<span class="lbl">merge requests</span>
414	416		<span class="k">section</span>
415	417		</a>
416	418		</li>
417	419		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
418		-	<a href="/diffs/releases" tabindex="-1">
	420	+	<a role="presentation" data-href="/diffs/releases">
419	421		<span class="lbl">releases</span>
420	422		<span class="k">section</span>
421	423		</a>
422	424		</li>
423	425		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
424		-	<a href="/diffs/actions" tabindex="-1">
	426	+	<a role="presentation" data-href="/diffs/actions">
425	427		<span class="lbl">actions</span>
426	428		<span class="k">section</span>
427	429		</a>
428	430		</li>
429	431		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch main">
430		-	<a href="/diffs/tree/main" tabindex="-1">
	432	+	<a role="presentation" data-href="/diffs/tree/main">
431	433		<span class="lbl">main</span>
432	434		<span class="k">branch</span>
433	435		</a>
434	436		</li>
435	437		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch side">
436		-	<a href="/diffs/tree/side" tabindex="-1">
	438	+	<a role="presentation" data-href="/diffs/tree/side">
437	439		<span class="lbl">side</span>
438	440		<span class="k">branch</span>
439	441		</a>
440	442		</li>
441	443		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0.0">
442		-	<a href="/diffs/tree/v1.0.0" tabindex="-1">
	444	+	<a role="presentation" data-href="/diffs/tree/v1.0.0">
443	445		<span class="lbl">v1.0.0</span>
444	446		<span class="k">tag</span>
445	447		</a>
446	448		</li>
447	449		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
448		-	<a href="#" data-fire="keys" tabindex="-1">
	450	+	<a role="presentation" data-fire="keys">
449	451		<span class="lbl">turn single-key shortcuts off</span>
450	452		<span class="k">action</span>
451	453		</a>

M internal/app/testdata/web/commit-binary.html +19 -17


@@ -184,18 +184,20 @@
184	184		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
185	185		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
186	186		</footer>
187		-	<div class="hint" role="status" aria-live="polite">
188		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	187	+	<div class="hint">
	188	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
189	189		</span>
	190	+	<span role="status" aria-live="polite">
190	191		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
191	192		</span>
192	193		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
193	194		</span>
	195	+	</span>
194	196		</div>
195	197		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
196	198		<div class="panel-head">
197	199		<h2>Keyboard shortcuts</h2>
198		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	200	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
199	201		<kbd>esc</kbd> close</button>
200	202		</div>
201	203		<div class="keys-pref">

@@ -329,7 +331,7 @@
329	331		<div class="panel-head">
330	332		<label for="refs-filter" class="sr">filter branches and tags</label>
331	333		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
332		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	334	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
333	335		<kbd>esc</kbd>
334	336		</button>
335	337		</div>

@@ -364,79 +366,79 @@
364	366		<div class="panel-head">
365	367		<label for="cmd-q" class="sr">go to</label>
366	368		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
367		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	369	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
368	370		<kbd>esc</kbd>
369	371		</button>
370	372		</div>
371	373		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
372	374		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
373		-	<a href="/" tabindex="-1">
	375	+	<a role="presentation" data-href="/">
374	376		<span class="lbl">home</span>
375	377		<span class="k">go</span>
376	378		</a>
377	379		</li>
378	380		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
379		-	<a href="/diffs" tabindex="-1">
	381	+	<a role="presentation" data-href="/diffs">
380	382		<span class="lbl">summary</span>
381	383		<span class="k">section</span>
382	384		</a>
383	385		</li>
384	386		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
385		-	<a href="/diffs/tree/main" tabindex="-1">
	387	+	<a role="presentation" data-href="/diffs/tree/main">
386	388		<span class="lbl">files</span>
387	389		<span class="k">section</span>
388	390		</a>
389	391		</li>
390	392		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
391		-	<a href="/diffs/commits/main" tabindex="-1">
	393	+	<a role="presentation" data-href="/diffs/commits/main">
392	394		<span class="lbl">commits</span>
393	395		<span class="k">section</span>
394	396		</a>
395	397		</li>
396	398		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
397		-	<a href="/diffs/refs" tabindex="-1">
	399	+	<a role="presentation" data-href="/diffs/refs">
398	400		<span class="lbl">branches & tags</span>
399	401		<span class="k">section</span>
400	402		</a>
401	403		</li>
402	404		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
403		-	<a href="/diffs/merge-requests" tabindex="-1">
	405	+	<a role="presentation" data-href="/diffs/merge-requests">
404	406		<span class="lbl">merge requests</span>
405	407		<span class="k">section</span>
406	408		</a>
407	409		</li>
408	410		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
409		-	<a href="/diffs/releases" tabindex="-1">
	411	+	<a role="presentation" data-href="/diffs/releases">
410	412		<span class="lbl">releases</span>
411	413		<span class="k">section</span>
412	414		</a>
413	415		</li>
414	416		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
415		-	<a href="/diffs/actions" tabindex="-1">
	417	+	<a role="presentation" data-href="/diffs/actions">
416	418		<span class="lbl">actions</span>
417	419		<span class="k">section</span>
418	420		</a>
419	421		</li>
420	422		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch main">
421		-	<a href="/diffs/tree/main" tabindex="-1">
	423	+	<a role="presentation" data-href="/diffs/tree/main">
422	424		<span class="lbl">main</span>
423	425		<span class="k">branch</span>
424	426		</a>
425	427		</li>
426	428		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch side">
427		-	<a href="/diffs/tree/side" tabindex="-1">
	429	+	<a role="presentation" data-href="/diffs/tree/side">
428	430		<span class="lbl">side</span>
429	431		<span class="k">branch</span>
430	432		</a>
431	433		</li>
432	434		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0.0">
433		-	<a href="/diffs/tree/v1.0.0" tabindex="-1">
	435	+	<a role="presentation" data-href="/diffs/tree/v1.0.0">
434	436		<span class="lbl">v1.0.0</span>
435	437		<span class="k">tag</span>
436	438		</a>
437	439		</li>
438	440		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
439		-	<a href="#" data-fire="keys" tabindex="-1">
	441	+	<a role="presentation" data-fire="keys">
440	442		<span class="lbl">turn single-key shortcuts off</span>
441	443		<span class="k">action</span>
442	444		</a>

M internal/app/testdata/web/commit-merge.html +19 -17


@@ -226,18 +226,20 @@
226	226		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
227	227		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
228	228		</footer>
229		-	<div class="hint" role="status" aria-live="polite">
230		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	229	+	<div class="hint">
	230	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
231	231		</span>
	232	+	<span role="status" aria-live="polite">
232	233		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
233	234		</span>
234	235		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
235	236		</span>
	237	+	</span>
236	238		</div>
237	239		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
238	240		<div class="panel-head">
239	241		<h2>Keyboard shortcuts</h2>
240		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	242	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
241	243		<kbd>esc</kbd> close</button>
242	244		</div>
243	245		<div class="keys-pref">

@@ -371,7 +373,7 @@
371	373		<div class="panel-head">
372	374		<label for="refs-filter" class="sr">filter branches and tags</label>
373	375		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
374		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	376	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
375	377		<kbd>esc</kbd>
376	378		</button>
377	379		</div>

@@ -406,79 +408,79 @@
406	408		<div class="panel-head">
407	409		<label for="cmd-q" class="sr">go to</label>
408	410		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
409		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	411	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
410	412		<kbd>esc</kbd>
411	413		</button>
412	414		</div>
413	415		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
414	416		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
415		-	<a href="/" tabindex="-1">
	417	+	<a role="presentation" data-href="/">
416	418		<span class="lbl">home</span>
417	419		<span class="k">go</span>
418	420		</a>
419	421		</li>
420	422		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
421		-	<a href="/diffs" tabindex="-1">
	423	+	<a role="presentation" data-href="/diffs">
422	424		<span class="lbl">summary</span>
423	425		<span class="k">section</span>
424	426		</a>
425	427		</li>
426	428		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
427		-	<a href="/diffs/tree/main" tabindex="-1">
	429	+	<a role="presentation" data-href="/diffs/tree/main">
428	430		<span class="lbl">files</span>
429	431		<span class="k">section</span>
430	432		</a>
431	433		</li>
432	434		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
433		-	<a href="/diffs/commits/main" tabindex="-1">
	435	+	<a role="presentation" data-href="/diffs/commits/main">
434	436		<span class="lbl">commits</span>
435	437		<span class="k">section</span>
436	438		</a>
437	439		</li>
438	440		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
439		-	<a href="/diffs/refs" tabindex="-1">
	441	+	<a role="presentation" data-href="/diffs/refs">
440	442		<span class="lbl">branches & tags</span>
441	443		<span class="k">section</span>
442	444		</a>
443	445		</li>
444	446		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
445		-	<a href="/diffs/merge-requests" tabindex="-1">
	447	+	<a role="presentation" data-href="/diffs/merge-requests">
446	448		<span class="lbl">merge requests</span>
447	449		<span class="k">section</span>
448	450		</a>
449	451		</li>
450	452		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
451		-	<a href="/diffs/releases" tabindex="-1">
	453	+	<a role="presentation" data-href="/diffs/releases">
452	454		<span class="lbl">releases</span>
453	455		<span class="k">section</span>
454	456		</a>
455	457		</li>
456	458		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
457		-	<a href="/diffs/actions" tabindex="-1">
	459	+	<a role="presentation" data-href="/diffs/actions">
458	460		<span class="lbl">actions</span>
459	461		<span class="k">section</span>
460	462		</a>
461	463		</li>
462	464		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch main">
463		-	<a href="/diffs/tree/main" tabindex="-1">
	465	+	<a role="presentation" data-href="/diffs/tree/main">
464	466		<span class="lbl">main</span>
465	467		<span class="k">branch</span>
466	468		</a>
467	469		</li>
468	470		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch side">
469		-	<a href="/diffs/tree/side" tabindex="-1">
	471	+	<a role="presentation" data-href="/diffs/tree/side">
470	472		<span class="lbl">side</span>
471	473		<span class="k">branch</span>
472	474		</a>
473	475		</li>
474	476		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0.0">
475		-	<a href="/diffs/tree/v1.0.0" tabindex="-1">
	477	+	<a role="presentation" data-href="/diffs/tree/v1.0.0">
476	478		<span class="lbl">v1.0.0</span>
477	479		<span class="k">tag</span>
478	480		</a>
479	481		</li>
480	482		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
481		-	<a href="#" data-fire="keys" tabindex="-1">
	483	+	<a role="presentation" data-fire="keys">
482	484		<span class="lbl">turn single-key shortcuts off</span>
483	485		<span class="k">action</span>
484	486		</a>

M internal/app/testdata/web/commit-modify-split.html +19 -17


@@ -349,18 +349,20 @@ And <b>html</b> & "quotes".</pre>
349	349		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
350	350		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
351	351		</footer>
352		-	<div class="hint" role="status" aria-live="polite">
353		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	352	+	<div class="hint">
	353	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
354	354		</span>
	355	+	<span role="status" aria-live="polite">
355	356		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
356	357		</span>
357	358		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
358	359		</span>
	360	+	</span>
359	361		</div>
360	362		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
361	363		<div class="panel-head">
362	364		<h2>Keyboard shortcuts</h2>
363		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	365	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
364	366		<kbd>esc</kbd> close</button>
365	367		</div>
366	368		<div class="keys-pref">

@@ -494,7 +496,7 @@ And <b>html</b> & "quotes".</pre>
494	496		<div class="panel-head">
495	497		<label for="refs-filter" class="sr">filter branches and tags</label>
496	498		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
497		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	499	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
498	500		<kbd>esc</kbd>
499	501		</button>
500	502		</div>

@@ -529,79 +531,79 @@ And <b>html</b> & "quotes".</pre>
529	531		<div class="panel-head">
530	532		<label for="cmd-q" class="sr">go to</label>
531	533		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
532		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	534	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
533	535		<kbd>esc</kbd>
534	536		</button>
535	537		</div>
536	538		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
537	539		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
538		-	<a href="/" tabindex="-1">
	540	+	<a role="presentation" data-href="/">
539	541		<span class="lbl">home</span>
540	542		<span class="k">go</span>
541	543		</a>
542	544		</li>
543	545		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
544		-	<a href="/diffs" tabindex="-1">
	546	+	<a role="presentation" data-href="/diffs">
545	547		<span class="lbl">summary</span>
546	548		<span class="k">section</span>
547	549		</a>
548	550		</li>
549	551		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
550		-	<a href="/diffs/tree/main" tabindex="-1">
	552	+	<a role="presentation" data-href="/diffs/tree/main">
551	553		<span class="lbl">files</span>
552	554		<span class="k">section</span>
553	555		</a>
554	556		</li>
555	557		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
556		-	<a href="/diffs/commits/main" tabindex="-1">
	558	+	<a role="presentation" data-href="/diffs/commits/main">
557	559		<span class="lbl">commits</span>
558	560		<span class="k">section</span>
559	561		</a>
560	562		</li>
561	563		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
562		-	<a href="/diffs/refs" tabindex="-1">
	564	+	<a role="presentation" data-href="/diffs/refs">
563	565		<span class="lbl">branches & tags</span>
564	566		<span class="k">section</span>
565	567		</a>
566	568		</li>
567	569		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
568		-	<a href="/diffs/merge-requests" tabindex="-1">
	570	+	<a role="presentation" data-href="/diffs/merge-requests">
569	571		<span class="lbl">merge requests</span>
570	572		<span class="k">section</span>
571	573		</a>
572	574		</li>
573	575		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
574		-	<a href="/diffs/releases" tabindex="-1">
	576	+	<a role="presentation" data-href="/diffs/releases">
575	577		<span class="lbl">releases</span>
576	578		<span class="k">section</span>
577	579		</a>
578	580		</li>
579	581		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
580		-	<a href="/diffs/actions" tabindex="-1">
	582	+	<a role="presentation" data-href="/diffs/actions">
581	583		<span class="lbl">actions</span>
582	584		<span class="k">section</span>
583	585		</a>
584	586		</li>
585	587		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch main">
586		-	<a href="/diffs/tree/main" tabindex="-1">
	588	+	<a role="presentation" data-href="/diffs/tree/main">
587	589		<span class="lbl">main</span>
588	590		<span class="k">branch</span>
589	591		</a>
590	592		</li>
591	593		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch side">
592		-	<a href="/diffs/tree/side" tabindex="-1">
	594	+	<a role="presentation" data-href="/diffs/tree/side">
593	595		<span class="lbl">side</span>
594	596		<span class="k">branch</span>
595	597		</a>
596	598		</li>
597	599		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0.0">
598		-	<a href="/diffs/tree/v1.0.0" tabindex="-1">
	600	+	<a role="presentation" data-href="/diffs/tree/v1.0.0">
599	601		<span class="lbl">v1.0.0</span>
600	602		<span class="k">tag</span>
601	603		</a>
602	604		</li>
603	605		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
604		-	<a href="#" data-fire="keys" tabindex="-1">
	606	+	<a role="presentation" data-fire="keys">
605	607		<span class="lbl">turn single-key shortcuts off</span>
606	608		<span class="k">action</span>
607	609		</a>

M internal/app/testdata/web/commit-modify.html +19 -17


@@ -349,18 +349,20 @@ And <b>html</b> & "quotes".</pre>
349	349		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
350	350		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
351	351		</footer>
352		-	<div class="hint" role="status" aria-live="polite">
353		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	352	+	<div class="hint">
	353	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
354	354		</span>
	355	+	<span role="status" aria-live="polite">
355	356		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
356	357		</span>
357	358		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
358	359		</span>
	360	+	</span>
359	361		</div>
360	362		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
361	363		<div class="panel-head">
362	364		<h2>Keyboard shortcuts</h2>
363		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	365	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
364	366		<kbd>esc</kbd> close</button>
365	367		</div>
366	368		<div class="keys-pref">

@@ -494,7 +496,7 @@ And <b>html</b> & "quotes".</pre>
494	496		<div class="panel-head">
495	497		<label for="refs-filter" class="sr">filter branches and tags</label>
496	498		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
497		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	499	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
498	500		<kbd>esc</kbd>
499	501		</button>
500	502		</div>

@@ -529,79 +531,79 @@ And <b>html</b> & "quotes".</pre>
529	531		<div class="panel-head">
530	532		<label for="cmd-q" class="sr">go to</label>
531	533		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
532		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	534	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
533	535		<kbd>esc</kbd>
534	536		</button>
535	537		</div>
536	538		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
537	539		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
538		-	<a href="/" tabindex="-1">
	540	+	<a role="presentation" data-href="/">
539	541		<span class="lbl">home</span>
540	542		<span class="k">go</span>
541	543		</a>
542	544		</li>
543	545		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
544		-	<a href="/diffs" tabindex="-1">
	546	+	<a role="presentation" data-href="/diffs">
545	547		<span class="lbl">summary</span>
546	548		<span class="k">section</span>
547	549		</a>
548	550		</li>
549	551		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
550		-	<a href="/diffs/tree/main" tabindex="-1">
	552	+	<a role="presentation" data-href="/diffs/tree/main">
551	553		<span class="lbl">files</span>
552	554		<span class="k">section</span>
553	555		</a>
554	556		</li>
555	557		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
556		-	<a href="/diffs/commits/main" tabindex="-1">
	558	+	<a role="presentation" data-href="/diffs/commits/main">
557	559		<span class="lbl">commits</span>
558	560		<span class="k">section</span>
559	561		</a>
560	562		</li>
561	563		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
562		-	<a href="/diffs/refs" tabindex="-1">
	564	+	<a role="presentation" data-href="/diffs/refs">
563	565		<span class="lbl">branches & tags</span>
564	566		<span class="k">section</span>
565	567		</a>
566	568		</li>
567	569		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
568		-	<a href="/diffs/merge-requests" tabindex="-1">
	570	+	<a role="presentation" data-href="/diffs/merge-requests">
569	571		<span class="lbl">merge requests</span>
570	572		<span class="k">section</span>
571	573		</a>
572	574		</li>
573	575		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
574		-	<a href="/diffs/releases" tabindex="-1">
	576	+	<a role="presentation" data-href="/diffs/releases">
575	577		<span class="lbl">releases</span>
576	578		<span class="k">section</span>
577	579		</a>
578	580		</li>
579	581		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
580		-	<a href="/diffs/actions" tabindex="-1">
	582	+	<a role="presentation" data-href="/diffs/actions">
581	583		<span class="lbl">actions</span>
582	584		<span class="k">section</span>
583	585		</a>
584	586		</li>
585	587		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch main">
586		-	<a href="/diffs/tree/main" tabindex="-1">
	588	+	<a role="presentation" data-href="/diffs/tree/main">
587	589		<span class="lbl">main</span>
588	590		<span class="k">branch</span>
589	591		</a>
590	592		</li>
591	593		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch side">
592		-	<a href="/diffs/tree/side" tabindex="-1">
	594	+	<a role="presentation" data-href="/diffs/tree/side">
593	595		<span class="lbl">side</span>
594	596		<span class="k">branch</span>
595	597		</a>
596	598		</li>
597	599		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0.0">
598		-	<a href="/diffs/tree/v1.0.0" tabindex="-1">
	600	+	<a role="presentation" data-href="/diffs/tree/v1.0.0">
599	601		<span class="lbl">v1.0.0</span>
600	602		<span class="k">tag</span>
601	603		</a>
602	604		</li>
603	605		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
604		-	<a href="#" data-fire="keys" tabindex="-1">
	606	+	<a role="presentation" data-fire="keys">
605	607		<span class="lbl">turn single-key shortcuts off</span>
606	608		<span class="k">action</span>
607	609		</a>

M internal/app/testdata/web/commit-rename.html +19 -17


@@ -253,18 +253,20 @@
253	253		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
254	254		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
255	255		</footer>
256		-	<div class="hint" role="status" aria-live="polite">
257		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	256	+	<div class="hint">
	257	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
258	258		</span>
	259	+	<span role="status" aria-live="polite">
259	260		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
260	261		</span>
261	262		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
262	263		</span>
	264	+	</span>
263	265		</div>
264	266		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
265	267		<div class="panel-head">
266	268		<h2>Keyboard shortcuts</h2>
267		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	269	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
268	270		<kbd>esc</kbd> close</button>
269	271		</div>
270	272		<div class="keys-pref">

@@ -398,7 +400,7 @@
398	400		<div class="panel-head">
399	401		<label for="refs-filter" class="sr">filter branches and tags</label>
400	402		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
401		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	403	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
402	404		<kbd>esc</kbd>
403	405		</button>
404	406		</div>

@@ -433,79 +435,79 @@
433	435		<div class="panel-head">
434	436		<label for="cmd-q" class="sr">go to</label>
435	437		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
436		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	438	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
437	439		<kbd>esc</kbd>
438	440		</button>
439	441		</div>
440	442		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
441	443		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
442		-	<a href="/" tabindex="-1">
	444	+	<a role="presentation" data-href="/">
443	445		<span class="lbl">home</span>
444	446		<span class="k">go</span>
445	447		</a>
446	448		</li>
447	449		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
448		-	<a href="/diffs" tabindex="-1">
	450	+	<a role="presentation" data-href="/diffs">
449	451		<span class="lbl">summary</span>
450	452		<span class="k">section</span>
451	453		</a>
452	454		</li>
453	455		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
454		-	<a href="/diffs/tree/main" tabindex="-1">
	456	+	<a role="presentation" data-href="/diffs/tree/main">
455	457		<span class="lbl">files</span>
456	458		<span class="k">section</span>
457	459		</a>
458	460		</li>
459	461		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
460		-	<a href="/diffs/commits/main" tabindex="-1">
	462	+	<a role="presentation" data-href="/diffs/commits/main">
461	463		<span class="lbl">commits</span>
462	464		<span class="k">section</span>
463	465		</a>
464	466		</li>
465	467		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
466		-	<a href="/diffs/refs" tabindex="-1">
	468	+	<a role="presentation" data-href="/diffs/refs">
467	469		<span class="lbl">branches & tags</span>
468	470		<span class="k">section</span>
469	471		</a>
470	472		</li>
471	473		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
472		-	<a href="/diffs/merge-requests" tabindex="-1">
	474	+	<a role="presentation" data-href="/diffs/merge-requests">
473	475		<span class="lbl">merge requests</span>
474	476		<span class="k">section</span>
475	477		</a>
476	478		</li>
477	479		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
478		-	<a href="/diffs/releases" tabindex="-1">
	480	+	<a role="presentation" data-href="/diffs/releases">
479	481		<span class="lbl">releases</span>
480	482		<span class="k">section</span>
481	483		</a>
482	484		</li>
483	485		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
484		-	<a href="/diffs/actions" tabindex="-1">
	486	+	<a role="presentation" data-href="/diffs/actions">
485	487		<span class="lbl">actions</span>
486	488		<span class="k">section</span>
487	489		</a>
488	490		</li>
489	491		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch main">
490		-	<a href="/diffs/tree/main" tabindex="-1">
	492	+	<a role="presentation" data-href="/diffs/tree/main">
491	493		<span class="lbl">main</span>
492	494		<span class="k">branch</span>
493	495		</a>
494	496		</li>
495	497		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch side">
496		-	<a href="/diffs/tree/side" tabindex="-1">
	498	+	<a role="presentation" data-href="/diffs/tree/side">
497	499		<span class="lbl">side</span>
498	500		<span class="k">branch</span>
499	501		</a>
500	502		</li>
501	503		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0.0">
502		-	<a href="/diffs/tree/v1.0.0" tabindex="-1">
	504	+	<a role="presentation" data-href="/diffs/tree/v1.0.0">
503	505		<span class="lbl">v1.0.0</span>
504	506		<span class="k">tag</span>
505	507		</a>
506	508		</li>
507	509		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
508		-	<a href="#" data-fire="keys" tabindex="-1">
	510	+	<a role="presentation" data-fire="keys">
509	511		<span class="lbl">turn single-key shortcuts off</span>
510	512		<span class="k">action</span>
511	513		</a>

M internal/app/testdata/web/commit-root.html +19 -17


@@ -572,18 +572,20 @@
572	572		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
573	573		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
574	574		</footer>
575		-	<div class="hint" role="status" aria-live="polite">
576		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	575	+	<div class="hint">
	576	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
577	577		</span>
	578	+	<span role="status" aria-live="polite">
578	579		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
579	580		</span>
580	581		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
581	582		</span>
	583	+	</span>
582	584		</div>
583	585		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
584	586		<div class="panel-head">
585	587		<h2>Keyboard shortcuts</h2>
586		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	588	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
587	589		<kbd>esc</kbd> close</button>
588	590		</div>
589	591		<div class="keys-pref">

@@ -717,7 +719,7 @@
717	719		<div class="panel-head">
718	720		<label for="refs-filter" class="sr">filter branches and tags</label>
719	721		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
720		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	722	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
721	723		<kbd>esc</kbd>
722	724		</button>
723	725		</div>

@@ -752,79 +754,79 @@
752	754		<div class="panel-head">
753	755		<label for="cmd-q" class="sr">go to</label>
754	756		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
755		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	757	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
756	758		<kbd>esc</kbd>
757	759		</button>
758	760		</div>
759	761		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
760	762		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
761		-	<a href="/" tabindex="-1">
	763	+	<a role="presentation" data-href="/">
762	764		<span class="lbl">home</span>
763	765		<span class="k">go</span>
764	766		</a>
765	767		</li>
766	768		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
767		-	<a href="/diffs" tabindex="-1">
	769	+	<a role="presentation" data-href="/diffs">
768	770		<span class="lbl">summary</span>
769	771		<span class="k">section</span>
770	772		</a>
771	773		</li>
772	774		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
773		-	<a href="/diffs/tree/main" tabindex="-1">
	775	+	<a role="presentation" data-href="/diffs/tree/main">
774	776		<span class="lbl">files</span>
775	777		<span class="k">section</span>
776	778		</a>
777	779		</li>
778	780		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
779		-	<a href="/diffs/commits/main" tabindex="-1">
	781	+	<a role="presentation" data-href="/diffs/commits/main">
780	782		<span class="lbl">commits</span>
781	783		<span class="k">section</span>
782	784		</a>
783	785		</li>
784	786		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
785		-	<a href="/diffs/refs" tabindex="-1">
	787	+	<a role="presentation" data-href="/diffs/refs">
786	788		<span class="lbl">branches & tags</span>
787	789		<span class="k">section</span>
788	790		</a>
789	791		</li>
790	792		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
791		-	<a href="/diffs/merge-requests" tabindex="-1">
	793	+	<a role="presentation" data-href="/diffs/merge-requests">
792	794		<span class="lbl">merge requests</span>
793	795		<span class="k">section</span>
794	796		</a>
795	797		</li>
796	798		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
797		-	<a href="/diffs/releases" tabindex="-1">
	799	+	<a role="presentation" data-href="/diffs/releases">
798	800		<span class="lbl">releases</span>
799	801		<span class="k">section</span>
800	802		</a>
801	803		</li>
802	804		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
803		-	<a href="/diffs/actions" tabindex="-1">
	805	+	<a role="presentation" data-href="/diffs/actions">
804	806		<span class="lbl">actions</span>
805	807		<span class="k">section</span>
806	808		</a>
807	809		</li>
808	810		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch main">
809		-	<a href="/diffs/tree/main" tabindex="-1">
	811	+	<a role="presentation" data-href="/diffs/tree/main">
810	812		<span class="lbl">main</span>
811	813		<span class="k">branch</span>
812	814		</a>
813	815		</li>
814	816		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch side">
815		-	<a href="/diffs/tree/side" tabindex="-1">
	817	+	<a role="presentation" data-href="/diffs/tree/side">
816	818		<span class="lbl">side</span>
817	819		<span class="k">branch</span>
818	820		</a>
819	821		</li>
820	822		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0.0">
821		-	<a href="/diffs/tree/v1.0.0" tabindex="-1">
	823	+	<a role="presentation" data-href="/diffs/tree/v1.0.0">
822	824		<span class="lbl">v1.0.0</span>
823	825		<span class="k">tag</span>
824	826		</a>
825	827		</li>
826	828		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
827		-	<a href="#" data-fire="keys" tabindex="-1">
	829	+	<a role="presentation" data-fire="keys">
828	830		<span class="lbl">turn single-key shortcuts off</span>
829	831		<span class="k">action</span>
830	832		</a>

M internal/app/testdata/web/commit-trojan.html +19 -17


@@ -401,18 +401,20 @@
401	401		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
402	402		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
403	403		</footer>
404		-	<div class="hint" role="status" aria-live="polite">
405		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	404	+	<div class="hint">
	405	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
406	406		</span>
	407	+	<span role="status" aria-live="polite">
407	408		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
408	409		</span>
409	410		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
410	411		</span>
	412	+	</span>
411	413		</div>
412	414		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
413	415		<div class="panel-head">
414	416		<h2>Keyboard shortcuts</h2>
415		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	417	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
416	418		<kbd>esc</kbd> close</button>
417	419		</div>
418	420		<div class="keys-pref">

@@ -546,7 +548,7 @@
546	548		<div class="panel-head">
547	549		<label for="refs-filter" class="sr">filter branches and tags</label>
548	550		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
549		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	551	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
550	552		<kbd>esc</kbd>
551	553		</button>
552	554		</div>

@@ -581,79 +583,79 @@
581	583		<div class="panel-head">
582	584		<label for="cmd-q" class="sr">go to</label>
583	585		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
584		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	586	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
585	587		<kbd>esc</kbd>
586	588		</button>
587	589		</div>
588	590		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
589	591		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
590		-	<a href="/" tabindex="-1">
	592	+	<a role="presentation" data-href="/">
591	593		<span class="lbl">home</span>
592	594		<span class="k">go</span>
593	595		</a>
594	596		</li>
595	597		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
596		-	<a href="/diffs" tabindex="-1">
	598	+	<a role="presentation" data-href="/diffs">
597	599		<span class="lbl">summary</span>
598	600		<span class="k">section</span>
599	601		</a>
600	602		</li>
601	603		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
602		-	<a href="/diffs/tree/main" tabindex="-1">
	604	+	<a role="presentation" data-href="/diffs/tree/main">
603	605		<span class="lbl">files</span>
604	606		<span class="k">section</span>
605	607		</a>
606	608		</li>
607	609		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
608		-	<a href="/diffs/commits/main" tabindex="-1">
	610	+	<a role="presentation" data-href="/diffs/commits/main">
609	611		<span class="lbl">commits</span>
610	612		<span class="k">section</span>
611	613		</a>
612	614		</li>
613	615		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
614		-	<a href="/diffs/refs" tabindex="-1">
	616	+	<a role="presentation" data-href="/diffs/refs">
615	617		<span class="lbl">branches & tags</span>
616	618		<span class="k">section</span>
617	619		</a>
618	620		</li>
619	621		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
620		-	<a href="/diffs/merge-requests" tabindex="-1">
	622	+	<a role="presentation" data-href="/diffs/merge-requests">
621	623		<span class="lbl">merge requests</span>
622	624		<span class="k">section</span>
623	625		</a>
624	626		</li>
625	627		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
626		-	<a href="/diffs/releases" tabindex="-1">
	628	+	<a role="presentation" data-href="/diffs/releases">
627	629		<span class="lbl">releases</span>
628	630		<span class="k">section</span>
629	631		</a>
630	632		</li>
631	633		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
632		-	<a href="/diffs/actions" tabindex="-1">
	634	+	<a role="presentation" data-href="/diffs/actions">
633	635		<span class="lbl">actions</span>
634	636		<span class="k">section</span>
635	637		</a>
636	638		</li>
637	639		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch main">
638		-	<a href="/diffs/tree/main" tabindex="-1">
	640	+	<a role="presentation" data-href="/diffs/tree/main">
639	641		<span class="lbl">main</span>
640	642		<span class="k">branch</span>
641	643		</a>
642	644		</li>
643	645		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch side">
644		-	<a href="/diffs/tree/side" tabindex="-1">
	646	+	<a role="presentation" data-href="/diffs/tree/side">
645	647		<span class="lbl">side</span>
646	648		<span class="k">branch</span>
647	649		</a>
648	650		</li>
649	651		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0.0">
650		-	<a href="/diffs/tree/v1.0.0" tabindex="-1">
	652	+	<a role="presentation" data-href="/diffs/tree/v1.0.0">
651	653		<span class="lbl">v1.0.0</span>
652	654		<span class="k">tag</span>
653	655		</a>
654	656		</li>
655	657		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
656		-	<a href="#" data-fire="keys" tabindex="-1">
	658	+	<a role="presentation" data-fire="keys">
657	659		<span class="lbl">turn single-key shortcuts off</span>
658	660		<span class="k">action</span>
659	661		</a>

M internal/app/testdata/web/commits-page2.html +18 -16


@@ -168,18 +168,20 @@
168	168		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
169	169		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
170	170		</footer>
171		-	<div class="hint" role="status" aria-live="polite">
172		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	171	+	<div class="hint">
	172	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
173	173		</span>
	174	+	<span role="status" aria-live="polite">
174	175		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
175	176		</span>
176	177		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
177	178		</span>
	179	+	</span>
178	180		</div>
179	181		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
180	182		<div class="panel-head">
181	183		<h2>Keyboard shortcuts</h2>
182		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	184	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
183	185		<kbd>esc</kbd> close</button>
184	186		</div>
185	187		<div class="keys-pref">

@@ -313,7 +315,7 @@
313	315		<div class="panel-head">
314	316		<label for="refs-filter" class="sr">filter branches and tags</label>
315	317		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
316		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	318	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
317	319		<kbd>esc</kbd>
318	320		</button>
319	321		</div>

@@ -340,73 +342,73 @@
340	342		<div class="panel-head">
341	343		<label for="cmd-q" class="sr">go to</label>
342	344		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
343		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	345	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
344	346		<kbd>esc</kbd>
345	347		</button>
346	348		</div>
347	349		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
348	350		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
349		-	<a href="/" tabindex="-1">
	351	+	<a role="presentation" data-href="/">
350	352		<span class="lbl">home</span>
351	353		<span class="k">go</span>
352	354		</a>
353	355		</li>
354	356		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
355		-	<a href="/long" tabindex="-1">
	357	+	<a role="presentation" data-href="/long">
356	358		<span class="lbl">summary</span>
357	359		<span class="k">section</span>
358	360		</a>
359	361		</li>
360	362		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
361		-	<a href="/long/tree/main" tabindex="-1">
	363	+	<a role="presentation" data-href="/long/tree/main">
362	364		<span class="lbl">files</span>
363	365		<span class="k">section</span>
364	366		</a>
365	367		</li>
366	368		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
367		-	<a href="/long/commits/main" tabindex="-1">
	369	+	<a role="presentation" data-href="/long/commits/main">
368	370		<span class="lbl">commits</span>
369	371		<span class="k">section</span>
370	372		</a>
371	373		</li>
372	374		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
373		-	<a href="/long/refs" tabindex="-1">
	375	+	<a role="presentation" data-href="/long/refs">
374	376		<span class="lbl">branches & tags</span>
375	377		<span class="k">section</span>
376	378		</a>
377	379		</li>
378	380		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
379		-	<a href="/long/merge-requests" tabindex="-1">
	381	+	<a role="presentation" data-href="/long/merge-requests">
380	382		<span class="lbl">merge requests</span>
381	383		<span class="k">section</span>
382	384		</a>
383	385		</li>
384	386		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
385		-	<a href="/long/releases" tabindex="-1">
	387	+	<a role="presentation" data-href="/long/releases">
386	388		<span class="lbl">releases</span>
387	389		<span class="k">section</span>
388	390		</a>
389	391		</li>
390	392		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
391		-	<a href="/long/actions" tabindex="-1">
	393	+	<a role="presentation" data-href="/long/actions">
392	394		<span class="lbl">actions</span>
393	395		<span class="k">section</span>
394	396		</a>
395	397		</li>
396	398		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch main">
397		-	<a href="/long/tree/main" tabindex="-1">
	399	+	<a role="presentation" data-href="/long/tree/main">
398	400		<span class="lbl">main</span>
399	401		<span class="k">branch</span>
400	402		</a>
401	403		</li>
402	404		<li id="cmd-o9" role="option" aria-selected="false" data-k="repo diffs">
403		-	<a href="/diffs" tabindex="-1">
	405	+	<a role="presentation" data-href="/diffs">
404	406		<span class="lbl">diffs</span>
405	407		<span class="k">repo</span>
406	408		</a>
407	409		</li>
408	410		<li id="cmd-o10" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
409		-	<a href="#" data-fire="keys" tabindex="-1">
	411	+	<a role="presentation" data-fire="keys">
410	412		<span class="lbl">turn single-key shortcuts off</span>
411	413		<span class="k">action</span>
412	414		</a>

M internal/app/testdata/web/commits-path.html +18 -16


@@ -183,18 +183,20 @@
183	183		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
184	184		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
185	185		</footer>
186		-	<div class="hint" role="status" aria-live="polite">
187		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	186	+	<div class="hint">
	187	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
188	188		</span>
	189	+	<span role="status" aria-live="polite">
189	190		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
190	191		</span>
191	192		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
192	193		</span>
	194	+	</span>
193	195		</div>
194	196		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
195	197		<div class="panel-head">
196	198		<h2>Keyboard shortcuts</h2>
197		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	199	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
198	200		<kbd>esc</kbd> close</button>
199	201		</div>
200	202		<div class="keys-pref">

@@ -328,7 +330,7 @@
328	330		<div class="panel-head">
329	331		<label for="refs-filter" class="sr">filter branches and tags</label>
330	332		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
331		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	333	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
332	334		<kbd>esc</kbd>
333	335		</button>
334	336		</div>

@@ -355,73 +357,73 @@
355	357		<div class="panel-head">
356	358		<label for="cmd-q" class="sr">go to</label>
357	359		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
358		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	360	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
359	361		<kbd>esc</kbd>
360	362		</button>
361	363		</div>
362	364		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
363	365		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
364		-	<a href="/" tabindex="-1">
	366	+	<a role="presentation" data-href="/">
365	367		<span class="lbl">home</span>
366	368		<span class="k">go</span>
367	369		</a>
368	370		</li>
369	371		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
370		-	<a href="/long" tabindex="-1">
	372	+	<a role="presentation" data-href="/long">
371	373		<span class="lbl">summary</span>
372	374		<span class="k">section</span>
373	375		</a>
374	376		</li>
375	377		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
376		-	<a href="/long/tree/main" tabindex="-1">
	378	+	<a role="presentation" data-href="/long/tree/main">
377	379		<span class="lbl">files</span>
378	380		<span class="k">section</span>
379	381		</a>
380	382		</li>
381	383		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
382		-	<a href="/long/commits/main" tabindex="-1">
	384	+	<a role="presentation" data-href="/long/commits/main">
383	385		<span class="lbl">commits</span>
384	386		<span class="k">section</span>
385	387		</a>
386	388		</li>
387	389		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
388		-	<a href="/long/refs" tabindex="-1">
	390	+	<a role="presentation" data-href="/long/refs">
389	391		<span class="lbl">branches & tags</span>
390	392		<span class="k">section</span>
391	393		</a>
392	394		</li>
393	395		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
394		-	<a href="/long/merge-requests" tabindex="-1">
	396	+	<a role="presentation" data-href="/long/merge-requests">
395	397		<span class="lbl">merge requests</span>
396	398		<span class="k">section</span>
397	399		</a>
398	400		</li>
399	401		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
400		-	<a href="/long/releases" tabindex="-1">
	402	+	<a role="presentation" data-href="/long/releases">
401	403		<span class="lbl">releases</span>
402	404		<span class="k">section</span>
403	405		</a>
404	406		</li>
405	407		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
406		-	<a href="/long/actions" tabindex="-1">
	408	+	<a role="presentation" data-href="/long/actions">
407	409		<span class="lbl">actions</span>
408	410		<span class="k">section</span>
409	411		</a>
410	412		</li>
411	413		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch main">
412		-	<a href="/long/tree/main" tabindex="-1">
	414	+	<a role="presentation" data-href="/long/tree/main">
413	415		<span class="lbl">main</span>
414	416		<span class="k">branch</span>
415	417		</a>
416	418		</li>
417	419		<li id="cmd-o9" role="option" aria-selected="false" data-k="repo diffs">
418		-	<a href="/diffs" tabindex="-1">
	420	+	<a role="presentation" data-href="/diffs">
419	421		<span class="lbl">diffs</span>
420	422		<span class="k">repo</span>
421	423		</a>
422	424		</li>
423	425		<li id="cmd-o10" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
424		-	<a href="#" data-fire="keys" tabindex="-1">
	426	+	<a role="presentation" data-fire="keys">
425	427		<span class="lbl">turn single-key shortcuts off</span>
426	428		<span class="k">action</span>
427	429		</a>

M internal/app/testdata/web/commits-root.html +19 -17


@@ -965,14 +965,16 @@
965	965		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
966	966		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
967	967		</footer>
968		-	<div class="hint" role="status" aria-live="polite">
969		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	968	+	<div class="hint">
	969	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
970	970		</span>
	971	+	<span role="status" aria-live="polite">
971	972		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
972	973		</span>
973	974		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
974	975		</span>
975		-	<span class="hint-live" data-state="connecting" hx-sse:connect="/-/events?topic=repo%3Along&view=commits&ref=main&head=SHA40" hx-swap="none" :text="data.state === 'offline' ? 'live updates paused' : ''" hx-on="htmx:sse:after:connection -> ermiteLive.back();
	976	+	</span>
	977	+	<span class="hint-live" role="status" data-state="connecting" hx-sse:connect="/-/events?topic=repo%3Along&view=commits&ref=main&head=SHA40" hx-swap="none" :text="data.state === 'offline' ? 'live updates paused' : ''" hx-on="htmx:sse:after:connection -> ermiteLive.back();
976	978		htmx:sse:close, htmx:sse:error -> ermiteLive.lost();
977	979		htmx:sse:error -> ermiteLive.error(event.detail.status);
978	980		htmx:sse:before:connection -> ermiteLive.gate(event);

@@ -984,7 +986,7 @@
984	986		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
985	987		<div class="panel-head">
986	988		<h2>Keyboard shortcuts</h2>
987		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	989	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
988	990		<kbd>esc</kbd> close</button>
989	991		</div>
990	992		<div class="keys-pref">

@@ -1118,7 +1120,7 @@
1118	1120		<div class="panel-head">
1119	1121		<label for="refs-filter" class="sr">filter branches and tags</label>
1120	1122		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
1121		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	1123	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
1122	1124		<kbd>esc</kbd>
1123	1125		</button>
1124	1126		</div>

@@ -1145,73 +1147,73 @@
1145	1147		<div class="panel-head">
1146	1148		<label for="cmd-q" class="sr">go to</label>
1147	1149		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
1148		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	1150	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
1149	1151		<kbd>esc</kbd>
1150	1152		</button>
1151	1153		</div>
1152	1154		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
1153	1155		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
1154		-	<a href="/" tabindex="-1">
	1156	+	<a role="presentation" data-href="/">
1155	1157		<span class="lbl">home</span>
1156	1158		<span class="k">go</span>
1157	1159		</a>
1158	1160		</li>
1159	1161		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
1160		-	<a href="/long" tabindex="-1">
	1162	+	<a role="presentation" data-href="/long">
1161	1163		<span class="lbl">summary</span>
1162	1164		<span class="k">section</span>
1163	1165		</a>
1164	1166		</li>
1165	1167		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
1166		-	<a href="/long/tree/main" tabindex="-1">
	1168	+	<a role="presentation" data-href="/long/tree/main">
1167	1169		<span class="lbl">files</span>
1168	1170		<span class="k">section</span>
1169	1171		</a>
1170	1172		</li>
1171	1173		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
1172		-	<a href="/long/commits/main" tabindex="-1">
	1174	+	<a role="presentation" data-href="/long/commits/main">
1173	1175		<span class="lbl">commits</span>
1174	1176		<span class="k">section</span>
1175	1177		</a>
1176	1178		</li>
1177	1179		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
1178		-	<a href="/long/refs" tabindex="-1">
	1180	+	<a role="presentation" data-href="/long/refs">
1179	1181		<span class="lbl">branches & tags</span>
1180	1182		<span class="k">section</span>
1181	1183		</a>
1182	1184		</li>
1183	1185		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
1184		-	<a href="/long/merge-requests" tabindex="-1">
	1186	+	<a role="presentation" data-href="/long/merge-requests">
1185	1187		<span class="lbl">merge requests</span>
1186	1188		<span class="k">section</span>
1187	1189		</a>
1188	1190		</li>
1189	1191		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
1190		-	<a href="/long/releases" tabindex="-1">
	1192	+	<a role="presentation" data-href="/long/releases">
1191	1193		<span class="lbl">releases</span>
1192	1194		<span class="k">section</span>
1193	1195		</a>
1194	1196		</li>
1195	1197		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
1196		-	<a href="/long/actions" tabindex="-1">
	1198	+	<a role="presentation" data-href="/long/actions">
1197	1199		<span class="lbl">actions</span>
1198	1200		<span class="k">section</span>
1199	1201		</a>
1200	1202		</li>
1201	1203		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch main">
1202		-	<a href="/long/tree/main" tabindex="-1">
	1204	+	<a role="presentation" data-href="/long/tree/main">
1203	1205		<span class="lbl">main</span>
1204	1206		<span class="k">branch</span>
1205	1207		</a>
1206	1208		</li>
1207	1209		<li id="cmd-o9" role="option" aria-selected="false" data-k="repo diffs">
1208		-	<a href="/diffs" tabindex="-1">
	1210	+	<a role="presentation" data-href="/diffs">
1209	1211		<span class="lbl">diffs</span>
1210	1212		<span class="k">repo</span>
1211	1213		</a>
1212	1214		</li>
1213	1215		<li id="cmd-o10" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
1214		-	<a href="#" data-fire="keys" tabindex="-1">
	1216	+	<a role="presentation" data-fire="keys">
1215	1217		<span class="lbl">turn single-key shortcuts off</span>
1216	1218		<span class="k">action</span>
1217	1219		</a>

M internal/app/testdata/web/commits-small.html +21 -19


@@ -310,14 +310,16 @@
310	310		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
311	311		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
312	312		</footer>
313		-	<div class="hint" role="status" aria-live="polite">
314		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	313	+	<div class="hint">
	314	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
315	315		</span>
	316	+	<span role="status" aria-live="polite">
316	317		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
317	318		</span>
318	319		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
319	320		</span>
320		-	<span class="hint-live" data-state="connecting" hx-sse:connect="/-/events?topic=repo%3Adiffs&view=commits&ref=main&head=SHA40" hx-swap="none" :text="data.state === 'offline' ? 'live updates paused' : ''" hx-on="htmx:sse:after:connection -> ermiteLive.back();
	321	+	</span>
	322	+	<span class="hint-live" role="status" data-state="connecting" hx-sse:connect="/-/events?topic=repo%3Adiffs&view=commits&ref=main&head=SHA40" hx-swap="none" :text="data.state === 'offline' ? 'live updates paused' : ''" hx-on="htmx:sse:after:connection -> ermiteLive.back();
321	323		htmx:sse:close, htmx:sse:error -> ermiteLive.lost();
322	324		htmx:sse:error -> ermiteLive.error(event.detail.status);
323	325		htmx:sse:before:connection -> ermiteLive.gate(event);

@@ -329,7 +331,7 @@
329	331		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
330	332		<div class="panel-head">
331	333		<h2>Keyboard shortcuts</h2>
332		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	334	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
333	335		<kbd>esc</kbd> close</button>
334	336		</div>
335	337		<div class="keys-pref">

@@ -463,7 +465,7 @@
463	465		<div class="panel-head">
464	466		<label for="refs-filter" class="sr">filter branches and tags</label>
465	467		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
466		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	468	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
467	469		<kbd>esc</kbd>
468	470		</button>
469	471		</div>

@@ -498,85 +500,85 @@
498	500		<div class="panel-head">
499	501		<label for="cmd-q" class="sr">go to</label>
500	502		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
501		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	503	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
502	504		<kbd>esc</kbd>
503	505		</button>
504	506		</div>
505	507		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
506	508		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
507		-	<a href="/" tabindex="-1">
	509	+	<a role="presentation" data-href="/">
508	510		<span class="lbl">home</span>
509	511		<span class="k">go</span>
510	512		</a>
511	513		</li>
512	514		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
513		-	<a href="/diffs" tabindex="-1">
	515	+	<a role="presentation" data-href="/diffs">
514	516		<span class="lbl">summary</span>
515	517		<span class="k">section</span>
516	518		</a>
517	519		</li>
518	520		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
519		-	<a href="/diffs/tree/main" tabindex="-1">
	521	+	<a role="presentation" data-href="/diffs/tree/main">
520	522		<span class="lbl">files</span>
521	523		<span class="k">section</span>
522	524		</a>
523	525		</li>
524	526		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
525		-	<a href="/diffs/commits/main" tabindex="-1">
	527	+	<a role="presentation" data-href="/diffs/commits/main">
526	528		<span class="lbl">commits</span>
527	529		<span class="k">section</span>
528	530		</a>
529	531		</li>
530	532		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
531		-	<a href="/diffs/refs" tabindex="-1">
	533	+	<a role="presentation" data-href="/diffs/refs">
532	534		<span class="lbl">branches & tags</span>
533	535		<span class="k">section</span>
534	536		</a>
535	537		</li>
536	538		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
537		-	<a href="/diffs/merge-requests" tabindex="-1">
	539	+	<a role="presentation" data-href="/diffs/merge-requests">
538	540		<span class="lbl">merge requests</span>
539	541		<span class="k">section</span>
540	542		</a>
541	543		</li>
542	544		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
543		-	<a href="/diffs/releases" tabindex="-1">
	545	+	<a role="presentation" data-href="/diffs/releases">
544	546		<span class="lbl">releases</span>
545	547		<span class="k">section</span>
546	548		</a>
547	549		</li>
548	550		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
549		-	<a href="/diffs/actions" tabindex="-1">
	551	+	<a role="presentation" data-href="/diffs/actions">
550	552		<span class="lbl">actions</span>
551	553		<span class="k">section</span>
552	554		</a>
553	555		</li>
554	556		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch main">
555		-	<a href="/diffs/tree/main" tabindex="-1">
	557	+	<a role="presentation" data-href="/diffs/tree/main">
556	558		<span class="lbl">main</span>
557	559		<span class="k">branch</span>
558	560		</a>
559	561		</li>
560	562		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch side">
561		-	<a href="/diffs/tree/side" tabindex="-1">
	563	+	<a role="presentation" data-href="/diffs/tree/side">
562	564		<span class="lbl">side</span>
563	565		<span class="k">branch</span>
564	566		</a>
565	567		</li>
566	568		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0.0">
567		-	<a href="/diffs/tree/v1.0.0" tabindex="-1">
	569	+	<a role="presentation" data-href="/diffs/tree/v1.0.0">
568	570		<span class="lbl">v1.0.0</span>
569	571		<span class="k">tag</span>
570	572		</a>
571	573		</li>
572	574		<li id="cmd-o11" role="option" aria-selected="false" data-k="repo long">
573		-	<a href="/long" tabindex="-1">
	575	+	<a role="presentation" data-href="/long">
574	576		<span class="lbl">long</span>
575	577		<span class="k">repo</span>
576	578		</a>
577	579		</li>
578	580		<li id="cmd-o12" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
579		-	<a href="#" data-fire="keys" tabindex="-1">
	581	+	<a role="presentation" data-fire="keys">
580	582		<span class="lbl">turn single-key shortcuts off</span>
581	583		<span class="k">action</span>
582	584		</a>

M internal/app/testdata/web/empty.html +9 -7


@@ -86,18 +86,20 @@
86	86		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
87	87		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
88	88		</footer>
89		-	<div class="hint" role="status" aria-live="polite">
90		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	89	+	<div class="hint">
	90	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
91	91		</span>
	92	+	<span role="status" aria-live="polite">
92	93		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
93	94		</span>
94	95		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
95	96		</span>
	97	+	</span>
96	98		</div>
97	99		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
98	100		<div class="panel-head">
99	101		<h2>Keyboard shortcuts</h2>
100		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	102	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
101	103		<kbd>esc</kbd> close</button>
102	104		</div>
103	105		<div class="keys-pref">

@@ -231,25 +233,25 @@
231	233		<div class="panel-head">
232	234		<label for="cmd-q" class="sr">go to</label>
233	235		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
234		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	236	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
235	237		<kbd>esc</kbd>
236	238		</button>
237	239		</div>
238	240		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
239	241		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
240		-	<a href="/" tabindex="-1">
	242	+	<a role="presentation" data-href="/">
241	243		<span class="lbl">home</span>
242	244		<span class="k">go</span>
243	245		</a>
244	246		</li>
245	247		<li id="cmd-o1" role="option" aria-selected="false" data-k="repo demo">
246		-	<a href="/demo" tabindex="-1">
	248	+	<a role="presentation" data-href="/demo">
247	249		<span class="lbl">demo</span>
248	250		<span class="k">repo</span>
249	251		</a>
250	252		</li>
251	253		<li id="cmd-o2" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
252		-	<a href="#" data-fire="keys" tabindex="-1">
	254	+	<a role="presentation" data-fire="keys">
253	255		<span class="lbl">turn single-key shortcuts off</span>
254	256		<span class="k">action</span>
255	257		</a>

M internal/app/testdata/web/home.html +11 -9


@@ -182,14 +182,16 @@
182	182		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
183	183		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
184	184		</footer>
185		-	<div class="hint" role="status" aria-live="polite">
186		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	185	+	<div class="hint">
	186	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
187	187		</span>
	188	+	<span role="status" aria-live="polite">
188	189		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
189	190		</span>
190	191		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
191	192		</span>
192		-	<span class="hint-live" data-state="connecting" hx-sse:connect="/-/events?topic=home" hx-swap="none" :text="data.state === 'offline' ? 'live updates paused' : ''" hx-on="htmx:sse:after:connection -> ermiteLive.back();
	193	+	</span>
	194	+	<span class="hint-live" role="status" data-state="connecting" hx-sse:connect="/-/events?topic=home" hx-swap="none" :text="data.state === 'offline' ? 'live updates paused' : ''" hx-on="htmx:sse:after:connection -> ermiteLive.back();
193	195		htmx:sse:close, htmx:sse:error -> ermiteLive.lost();
194	196		htmx:sse:error -> ermiteLive.error(event.detail.status);
195	197		htmx:sse:before:connection -> ermiteLive.gate(event);

@@ -201,7 +203,7 @@
201	203		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
202	204		<div class="panel-head">
203	205		<h2>Keyboard shortcuts</h2>
204		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	206	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
205	207		<kbd>esc</kbd> close</button>
206	208		</div>
207	209		<div class="keys-pref">

@@ -335,31 +337,31 @@
335	337		<div class="panel-head">
336	338		<label for="cmd-q" class="sr">go to</label>
337	339		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
338		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	340	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
339	341		<kbd>esc</kbd>
340	342		</button>
341	343		</div>
342	344		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
343	345		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
344		-	<a href="/" tabindex="-1">
	346	+	<a role="presentation" data-href="/">
345	347		<span class="lbl">home</span>
346	348		<span class="k">go</span>
347	349		</a>
348	350		</li>
349	351		<li id="cmd-o1" role="option" aria-selected="false" data-k="repo quiet">
350		-	<a href="/quiet" tabindex="-1">
	352	+	<a role="presentation" data-href="/quiet">
351	353		<span class="lbl">quiet</span>
352	354		<span class="k">repo</span>
353	355		</a>
354	356		</li>
355	357		<li id="cmd-o2" role="option" aria-selected="false" data-k="repo demo">
356		-	<a href="/demo" tabindex="-1">
	358	+	<a role="presentation" data-href="/demo">
357	359		<span class="lbl">demo</span>
358	360		<span class="k">repo</span>
359	361		</a>
360	362		</li>
361	363		<li id="cmd-o3" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
362		-	<a href="#" data-fire="keys" tabindex="-1">
	364	+	<a role="presentation" data-fire="keys">
363	365		<span class="lbl">turn single-key shortcuts off</span>
364	366		<span class="k">action</span>
365	367		</a>

M internal/app/testdata/web/not-found-page.html +8 -6


@@ -75,18 +75,20 @@
75	75		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
76	76		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
77	77		</footer>
78		-	<div class="hint" role="status" aria-live="polite">
79		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	78	+	<div class="hint">
	79	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
80	80		</span>
	81	+	<span role="status" aria-live="polite">
81	82		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
82	83		</span>
83	84		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
84	85		</span>
	86	+	</span>
85	87		</div>
86	88		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
87	89		<div class="panel-head">
88	90		<h2>Keyboard shortcuts</h2>
89		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	91	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
90	92		<kbd>esc</kbd> close</button>
91	93		</div>
92	94		<div class="keys-pref">

@@ -220,19 +222,19 @@
220	222		<div class="panel-head">
221	223		<label for="cmd-q" class="sr">go to</label>
222	224		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
223		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	225	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
224	226		<kbd>esc</kbd>
225	227		</button>
226	228		</div>
227	229		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
228	230		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
229		-	<a href="/" tabindex="-1">
	231	+	<a role="presentation" data-href="/">
230	232		<span class="lbl">home</span>
231	233		<span class="k">go</span>
232	234		</a>
233	235		</li>
234	236		<li id="cmd-o1" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
235		-	<a href="#" data-fire="keys" tabindex="-1">
	237	+	<a role="presentation" data-fire="keys">
236	238		<span class="lbl">turn single-key shortcuts off</span>
237	239		<span class="k">action</span>
238	240		</a>

M internal/app/testdata/web/not-found.html +8 -6


@@ -75,18 +75,20 @@
75	75		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
76	76		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
77	77		</footer>
78		-	<div class="hint" role="status" aria-live="polite">
79		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	78	+	<div class="hint">
	79	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
80	80		</span>
	81	+	<span role="status" aria-live="polite">
81	82		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
82	83		</span>
83	84		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
84	85		</span>
	86	+	</span>
85	87		</div>
86	88		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
87	89		<div class="panel-head">
88	90		<h2>Keyboard shortcuts</h2>
89		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	91	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
90	92		<kbd>esc</kbd> close</button>
91	93		</div>
92	94		<div class="keys-pref">

@@ -220,19 +222,19 @@
220	222		<div class="panel-head">
221	223		<label for="cmd-q" class="sr">go to</label>
222	224		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
223		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	225	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
224	226		<kbd>esc</kbd>
225	227		</button>
226	228		</div>
227	229		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
228	230		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
229		-	<a href="/" tabindex="-1">
	231	+	<a role="presentation" data-href="/">
230	232		<span class="lbl">home</span>
231	233		<span class="k">go</span>
232	234		</a>
233	235		</li>
234	236		<li id="cmd-o1" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
235		-	<a href="#" data-fire="keys" tabindex="-1">
	237	+	<a role="presentation" data-fire="keys">
236	238		<span class="lbl">turn single-key shortcuts off</span>
237	239		<span class="k">action</span>
238	240		</a>

M internal/app/testdata/web/refs.html +22 -20


@@ -192,14 +192,16 @@
192	192		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
193	193		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
194	194		</footer>
195		-	<div class="hint" role="status" aria-live="polite">
196		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	195	+	<div class="hint">
	196	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
197	197		</span>
	198	+	<span role="status" aria-live="polite">
198	199		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
199	200		</span>
200	201		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
201	202		</span>
202		-	<span class="hint-live" data-state="connecting" hx-sse:connect="/-/events?topic=repo%3Ademo&view=refs" hx-swap="none" :text="data.state === 'offline' ? 'live updates paused' : ''" hx-on="htmx:sse:after:connection -> ermiteLive.back();
	203	+	</span>
	204	+	<span class="hint-live" role="status" data-state="connecting" hx-sse:connect="/-/events?topic=repo%3Ademo&view=refs" hx-swap="none" :text="data.state === 'offline' ? 'live updates paused' : ''" hx-on="htmx:sse:after:connection -> ermiteLive.back();
203	205		htmx:sse:close, htmx:sse:error -> ermiteLive.lost();
204	206		htmx:sse:error -> ermiteLive.error(event.detail.status);
205	207		htmx:sse:before:connection -> ermiteLive.gate(event);

@@ -211,7 +213,7 @@
211	213		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
212	214		<div class="panel-head">
213	215		<h2>Keyboard shortcuts</h2>
214		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	216	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
215	217		<kbd>esc</kbd> close</button>
216	218		</div>
217	219		<div class="keys-pref">

@@ -345,7 +347,7 @@
345	347		<div class="panel-head">
346	348		<label for="refs-filter" class="sr">filter branches and tags</label>
347	349		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
348		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	350	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
349	351		<kbd>esc</kbd>
350	352		</button>
351	353		</div>

@@ -384,91 +386,91 @@
384	386		<div class="panel-head">
385	387		<label for="cmd-q" class="sr">go to</label>
386	388		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
387		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	389	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
388	390		<kbd>esc</kbd>
389	391		</button>
390	392		</div>
391	393		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
392	394		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
393		-	<a href="/" tabindex="-1">
	395	+	<a role="presentation" data-href="/">
394	396		<span class="lbl">home</span>
395	397		<span class="k">go</span>
396	398		</a>
397	399		</li>
398	400		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
399		-	<a href="/demo" tabindex="-1">
	401	+	<a role="presentation" data-href="/demo">
400	402		<span class="lbl">summary</span>
401	403		<span class="k">section</span>
402	404		</a>
403	405		</li>
404	406		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
405		-	<a href="/demo/tree/main" tabindex="-1">
	407	+	<a role="presentation" data-href="/demo/tree/main">
406	408		<span class="lbl">files</span>
407	409		<span class="k">section</span>
408	410		</a>
409	411		</li>
410	412		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
411		-	<a href="/demo/commits/main" tabindex="-1">
	413	+	<a role="presentation" data-href="/demo/commits/main">
412	414		<span class="lbl">commits</span>
413	415		<span class="k">section</span>
414	416		</a>
415	417		</li>
416	418		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
417		-	<a href="/demo/refs" tabindex="-1">
	419	+	<a role="presentation" data-href="/demo/refs">
418	420		<span class="lbl">branches & tags</span>
419	421		<span class="k">section</span>
420	422		</a>
421	423		</li>
422	424		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
423		-	<a href="/demo/merge-requests" tabindex="-1">
	425	+	<a role="presentation" data-href="/demo/merge-requests">
424	426		<span class="lbl">merge requests</span>
425	427		<span class="k">section</span>
426	428		</a>
427	429		</li>
428	430		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
429		-	<a href="/demo/releases" tabindex="-1">
	431	+	<a role="presentation" data-href="/demo/releases">
430	432		<span class="lbl">releases</span>
431	433		<span class="k">section</span>
432	434		</a>
433	435		</li>
434	436		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
435		-	<a href="/demo/actions" tabindex="-1">
	437	+	<a role="presentation" data-href="/demo/actions">
436	438		<span class="lbl">actions</span>
437	439		<span class="k">section</span>
438	440		</a>
439	441		</li>
440	442		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch feature/x">
441		-	<a href="/demo/tree/feature/x" tabindex="-1">
	443	+	<a role="presentation" data-href="/demo/tree/feature/x">
442	444		<span class="lbl">feature/x</span>
443	445		<span class="k">branch</span>
444	446		</a>
445	447		</li>
446	448		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch main">
447		-	<a href="/demo/tree/main" tabindex="-1">
	449	+	<a role="presentation" data-href="/demo/tree/main">
448	450		<span class="lbl">main</span>
449	451		<span class="k">branch</span>
450	452		</a>
451	453		</li>
452	454		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v0.1.0">
453		-	<a href="/demo/tree/v0.1.0" tabindex="-1">
	455	+	<a role="presentation" data-href="/demo/tree/v0.1.0">
454	456		<span class="lbl">v0.1.0</span>
455	457		<span class="k">tag</span>
456	458		</a>
457	459		</li>
458	460		<li id="cmd-o11" role="option" aria-selected="false" data-k="tag v0.2.0">
459		-	<a href="/demo/tree/v0.2.0" tabindex="-1">
	461	+	<a role="presentation" data-href="/demo/tree/v0.2.0">
460	462		<span class="lbl">v0.2.0</span>
461	463		<span class="k">tag</span>
462	464		</a>
463	465		</li>
464	466		<li id="cmd-o12" role="option" aria-selected="false" data-k="repo quiet">
465		-	<a href="/quiet" tabindex="-1">
	467	+	<a role="presentation" data-href="/quiet">
466	468		<span class="lbl">quiet</span>
467	469		<span class="k">repo</span>
468	470		</a>
469	471		</li>
470	472		<li id="cmd-o13" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
471		-	<a href="#" data-fire="keys" tabindex="-1">
	473	+	<a role="presentation" data-fire="keys">
472	474		<span class="lbl">turn single-key shortcuts off</span>
473	475		<span class="k">action</span>
474	476		</a>

M internal/app/testdata/web/summary.html +22 -20


@@ -218,14 +218,16 @@
218	218		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
219	219		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
220	220		</footer>
221		-	<div class="hint" role="status" aria-live="polite">
222		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	221	+	<div class="hint">
	222	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
223	223		</span>
	224	+	<span role="status" aria-live="polite">
224	225		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
225	226		</span>
226	227		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
227	228		</span>
228		-	<span class="hint-live" data-state="connecting" hx-sse:connect="/-/events?topic=repo%3Ademo&view=summary" hx-swap="none" :text="data.state === 'offline' ? 'live updates paused' : ''" hx-on="htmx:sse:after:connection -> ermiteLive.back();
	229	+	</span>
	230	+	<span class="hint-live" role="status" data-state="connecting" hx-sse:connect="/-/events?topic=repo%3Ademo&view=summary" hx-swap="none" :text="data.state === 'offline' ? 'live updates paused' : ''" hx-on="htmx:sse:after:connection -> ermiteLive.back();
229	231		htmx:sse:close, htmx:sse:error -> ermiteLive.lost();
230	232		htmx:sse:error -> ermiteLive.error(event.detail.status);
231	233		htmx:sse:before:connection -> ermiteLive.gate(event);

@@ -237,7 +239,7 @@
237	239		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
238	240		<div class="panel-head">
239	241		<h2>Keyboard shortcuts</h2>
240		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	242	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
241	243		<kbd>esc</kbd> close</button>
242	244		</div>
243	245		<div class="keys-pref">

@@ -371,7 +373,7 @@
371	373		<div class="panel-head">
372	374		<label for="refs-filter" class="sr">filter branches and tags</label>
373	375		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
374		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	376	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
375	377		<kbd>esc</kbd>
376	378		</button>
377	379		</div>

@@ -410,91 +412,91 @@
410	412		<div class="panel-head">
411	413		<label for="cmd-q" class="sr">go to</label>
412	414		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
413		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	415	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
414	416		<kbd>esc</kbd>
415	417		</button>
416	418		</div>
417	419		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
418	420		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
419		-	<a href="/" tabindex="-1">
	421	+	<a role="presentation" data-href="/">
420	422		<span class="lbl">home</span>
421	423		<span class="k">go</span>
422	424		</a>
423	425		</li>
424	426		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
425		-	<a href="/demo" tabindex="-1">
	427	+	<a role="presentation" data-href="/demo">
426	428		<span class="lbl">summary</span>
427	429		<span class="k">section</span>
428	430		</a>
429	431		</li>
430	432		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
431		-	<a href="/demo/tree/main" tabindex="-1">
	433	+	<a role="presentation" data-href="/demo/tree/main">
432	434		<span class="lbl">files</span>
433	435		<span class="k">section</span>
434	436		</a>
435	437		</li>
436	438		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
437		-	<a href="/demo/commits/main" tabindex="-1">
	439	+	<a role="presentation" data-href="/demo/commits/main">
438	440		<span class="lbl">commits</span>
439	441		<span class="k">section</span>
440	442		</a>
441	443		</li>
442	444		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
443		-	<a href="/demo/refs" tabindex="-1">
	445	+	<a role="presentation" data-href="/demo/refs">
444	446		<span class="lbl">branches & tags</span>
445	447		<span class="k">section</span>
446	448		</a>
447	449		</li>
448	450		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
449		-	<a href="/demo/merge-requests" tabindex="-1">
	451	+	<a role="presentation" data-href="/demo/merge-requests">
450	452		<span class="lbl">merge requests</span>
451	453		<span class="k">section</span>
452	454		</a>
453	455		</li>
454	456		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
455		-	<a href="/demo/releases" tabindex="-1">
	457	+	<a role="presentation" data-href="/demo/releases">
456	458		<span class="lbl">releases</span>
457	459		<span class="k">section</span>
458	460		</a>
459	461		</li>
460	462		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
461		-	<a href="/demo/actions" tabindex="-1">
	463	+	<a role="presentation" data-href="/demo/actions">
462	464		<span class="lbl">actions</span>
463	465		<span class="k">section</span>
464	466		</a>
465	467		</li>
466	468		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch feature/x">
467		-	<a href="/demo/tree/feature/x" tabindex="-1">
	469	+	<a role="presentation" data-href="/demo/tree/feature/x">
468	470		<span class="lbl">feature/x</span>
469	471		<span class="k">branch</span>
470	472		</a>
471	473		</li>
472	474		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch main">
473		-	<a href="/demo/tree/main" tabindex="-1">
	475	+	<a role="presentation" data-href="/demo/tree/main">
474	476		<span class="lbl">main</span>
475	477		<span class="k">branch</span>
476	478		</a>
477	479		</li>
478	480		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v0.1.0">
479		-	<a href="/demo/tree/v0.1.0" tabindex="-1">
	481	+	<a role="presentation" data-href="/demo/tree/v0.1.0">
480	482		<span class="lbl">v0.1.0</span>
481	483		<span class="k">tag</span>
482	484		</a>
483	485		</li>
484	486		<li id="cmd-o11" role="option" aria-selected="false" data-k="tag v0.2.0">
485		-	<a href="/demo/tree/v0.2.0" tabindex="-1">
	487	+	<a role="presentation" data-href="/demo/tree/v0.2.0">
486	488		<span class="lbl">v0.2.0</span>
487	489		<span class="k">tag</span>
488	490		</a>
489	491		</li>
490	492		<li id="cmd-o12" role="option" aria-selected="false" data-k="repo quiet">
491		-	<a href="/quiet" tabindex="-1">
	493	+	<a role="presentation" data-href="/quiet">
492	494		<span class="lbl">quiet</span>
493	495		<span class="k">repo</span>
494	496		</a>
495	497		</li>
496	498		<li id="cmd-o13" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
497		-	<a href="#" data-fire="keys" tabindex="-1">
	499	+	<a role="presentation" data-fire="keys">
498	500		<span class="lbl">turn single-key shortcuts off</span>
499	501		<span class="k">action</span>
500	502		</a>

M internal/app/testdata/web/tree-nested.html +21 -19


@@ -117,9 +117,9 @@
117	117		<kbd>j</kbd>
118	118		<kbd>k</kbd> move · <kbd>l</kbd> open · <kbd>h</kbd> back</p>
119	119		</div>
120		-	<div id="finder" class="tree-card" hidden>
121		-	<p id="finder-status" class="dim" aria-live="polite">
	120	+	<p id="finder-status" class="dim" role="status">
122	121		</p>
	122	+	<div id="finder" class="tree-card" hidden>
123	123		<ul id="finder-list" class="cmd-list" role="listbox" aria-label="Files">
124	124		</ul>
125	125		</div>

@@ -156,18 +156,20 @@
156	156		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
157	157		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
158	158		</footer>
159		-	<div class="hint" role="status" aria-live="polite">
160		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	159	+	<div class="hint">
	160	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
161	161		</span>
	162	+	<span role="status" aria-live="polite">
162	163		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
163	164		</span>
164	165		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
165	166		</span>
	167	+	</span>
166	168		</div>
167	169		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
168	170		<div class="panel-head">
169	171		<h2>Keyboard shortcuts</h2>
170		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	172	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
171	173		<kbd>esc</kbd> close</button>
172	174		</div>
173	175		<div class="keys-pref">

@@ -301,7 +303,7 @@
301	303		<div class="panel-head">
302	304		<label for="refs-filter" class="sr">filter branches and tags</label>
303	305		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
304		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	306	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
305	307		<kbd>esc</kbd>
306	308		</button>
307	309		</div>

@@ -336,79 +338,79 @@
336	338		<div class="panel-head">
337	339		<label for="cmd-q" class="sr">go to</label>
338	340		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
339		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	341	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
340	342		<kbd>esc</kbd>
341	343		</button>
342	344		</div>
343	345		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
344	346		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
345		-	<a href="/" tabindex="-1">
	347	+	<a role="presentation" data-href="/">
346	348		<span class="lbl">home</span>
347	349		<span class="k">go</span>
348	350		</a>
349	351		</li>
350	352		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
351		-	<a href="/files" tabindex="-1">
	353	+	<a role="presentation" data-href="/files">
352	354		<span class="lbl">summary</span>
353	355		<span class="k">section</span>
354	356		</a>
355	357		</li>
356	358		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
357		-	<a href="/files/tree/main" tabindex="-1">
	359	+	<a role="presentation" data-href="/files/tree/main">
358	360		<span class="lbl">files</span>
359	361		<span class="k">section</span>
360	362		</a>
361	363		</li>
362	364		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
363		-	<a href="/files/commits/main" tabindex="-1">
	365	+	<a role="presentation" data-href="/files/commits/main">
364	366		<span class="lbl">commits</span>
365	367		<span class="k">section</span>
366	368		</a>
367	369		</li>
368	370		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
369		-	<a href="/files/refs" tabindex="-1">
	371	+	<a role="presentation" data-href="/files/refs">
370	372		<span class="lbl">branches & tags</span>
371	373		<span class="k">section</span>
372	374		</a>
373	375		</li>
374	376		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
375		-	<a href="/files/merge-requests" tabindex="-1">
	377	+	<a role="presentation" data-href="/files/merge-requests">
376	378		<span class="lbl">merge requests</span>
377	379		<span class="k">section</span>
378	380		</a>
379	381		</li>
380	382		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
381		-	<a href="/files/releases" tabindex="-1">
	383	+	<a role="presentation" data-href="/files/releases">
382	384		<span class="lbl">releases</span>
383	385		<span class="k">section</span>
384	386		</a>
385	387		</li>
386	388		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
387		-	<a href="/files/actions" tabindex="-1">
	389	+	<a role="presentation" data-href="/files/actions">
388	390		<span class="lbl">actions</span>
389	391		<span class="k">section</span>
390	392		</a>
391	393		</li>
392	394		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch feature/x">
393		-	<a href="/files/tree/feature/x" tabindex="-1">
	395	+	<a role="presentation" data-href="/files/tree/feature/x">
394	396		<span class="lbl">feature/x</span>
395	397		<span class="k">branch</span>
396	398		</a>
397	399		</li>
398	400		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch main">
399		-	<a href="/files/tree/main" tabindex="-1">
	401	+	<a role="presentation" data-href="/files/tree/main">
400	402		<span class="lbl">main</span>
401	403		<span class="k">branch</span>
402	404		</a>
403	405		</li>
404	406		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0">
405		-	<a href="/files/tree/v1.0" tabindex="-1">
	407	+	<a role="presentation" data-href="/files/tree/v1.0">
406	408		<span class="lbl">v1.0</span>
407	409		<span class="k">tag</span>
408	410		</a>
409	411		</li>
410	412		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
411		-	<a href="#" data-fire="keys" tabindex="-1">
	413	+	<a role="presentation" data-fire="keys">
412	414		<span class="lbl">turn single-key shortcuts off</span>
413	415		<span class="k">action</span>
414	416		</a>

M internal/app/testdata/web/tree-root.html +21 -19


@@ -111,9 +111,9 @@
111	111		<kbd>j</kbd>
112	112		<kbd>k</kbd> move · <kbd>l</kbd> open · <kbd>h</kbd> back</p>
113	113		</div>
114		-	<div id="finder" class="tree-card" hidden>
115		-	<p id="finder-status" class="dim" aria-live="polite">
	114	+	<p id="finder-status" class="dim" role="status">
116	115		</p>
	116	+	<div id="finder" class="tree-card" hidden>
117	117		<ul id="finder-list" class="cmd-list" role="listbox" aria-label="Files">
118	118		</ul>
119	119		</div>

@@ -377,18 +377,20 @@
377	377		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
378	378		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
379	379		</footer>
380		-	<div class="hint" role="status" aria-live="polite">
381		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	380	+	<div class="hint">
	381	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
382	382		</span>
	383	+	<span role="status" aria-live="polite">
383	384		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
384	385		</span>
385	386		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
386	387		</span>
	388	+	</span>
387	389		</div>
388	390		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
389	391		<div class="panel-head">
390	392		<h2>Keyboard shortcuts</h2>
391		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	393	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
392	394		<kbd>esc</kbd> close</button>
393	395		</div>
394	396		<div class="keys-pref">

@@ -522,7 +524,7 @@
522	524		<div class="panel-head">
523	525		<label for="refs-filter" class="sr">filter branches and tags</label>
524	526		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
525		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	527	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
526	528		<kbd>esc</kbd>
527	529		</button>
528	530		</div>

@@ -557,79 +559,79 @@
557	559		<div class="panel-head">
558	560		<label for="cmd-q" class="sr">go to</label>
559	561		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
560		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	562	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
561	563		<kbd>esc</kbd>
562	564		</button>
563	565		</div>
564	566		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
565	567		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
566		-	<a href="/" tabindex="-1">
	568	+	<a role="presentation" data-href="/">
567	569		<span class="lbl">home</span>
568	570		<span class="k">go</span>
569	571		</a>
570	572		</li>
571	573		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
572		-	<a href="/files" tabindex="-1">
	574	+	<a role="presentation" data-href="/files">
573	575		<span class="lbl">summary</span>
574	576		<span class="k">section</span>
575	577		</a>
576	578		</li>
577	579		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
578		-	<a href="/files/tree/main" tabindex="-1">
	580	+	<a role="presentation" data-href="/files/tree/main">
579	581		<span class="lbl">files</span>
580	582		<span class="k">section</span>
581	583		</a>
582	584		</li>
583	585		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
584		-	<a href="/files/commits/main" tabindex="-1">
	586	+	<a role="presentation" data-href="/files/commits/main">
585	587		<span class="lbl">commits</span>
586	588		<span class="k">section</span>
587	589		</a>
588	590		</li>
589	591		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
590		-	<a href="/files/refs" tabindex="-1">
	592	+	<a role="presentation" data-href="/files/refs">
591	593		<span class="lbl">branches & tags</span>
592	594		<span class="k">section</span>
593	595		</a>
594	596		</li>
595	597		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
596		-	<a href="/files/merge-requests" tabindex="-1">
	598	+	<a role="presentation" data-href="/files/merge-requests">
597	599		<span class="lbl">merge requests</span>
598	600		<span class="k">section</span>
599	601		</a>
600	602		</li>
601	603		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
602		-	<a href="/files/releases" tabindex="-1">
	604	+	<a role="presentation" data-href="/files/releases">
603	605		<span class="lbl">releases</span>
604	606		<span class="k">section</span>
605	607		</a>
606	608		</li>
607	609		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
608		-	<a href="/files/actions" tabindex="-1">
	610	+	<a role="presentation" data-href="/files/actions">
609	611		<span class="lbl">actions</span>
610	612		<span class="k">section</span>
611	613		</a>
612	614		</li>
613	615		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch feature/x">
614		-	<a href="/files/tree/feature/x" tabindex="-1">
	616	+	<a role="presentation" data-href="/files/tree/feature/x">
615	617		<span class="lbl">feature/x</span>
616	618		<span class="k">branch</span>
617	619		</a>
618	620		</li>
619	621		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch main">
620		-	<a href="/files/tree/main" tabindex="-1">
	622	+	<a role="presentation" data-href="/files/tree/main">
621	623		<span class="lbl">main</span>
622	624		<span class="k">branch</span>
623	625		</a>
624	626		</li>
625	627		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0">
626		-	<a href="/files/tree/v1.0" tabindex="-1">
	628	+	<a role="presentation" data-href="/files/tree/v1.0">
627	629		<span class="lbl">v1.0</span>
628	630		<span class="k">tag</span>
629	631		</a>
630	632		</li>
631	633		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
632		-	<a href="#" data-fire="keys" tabindex="-1">
	634	+	<a role="presentation" data-fire="keys">
633	635		<span class="lbl">turn single-key shortcuts off</span>
634	636		<span class="k">action</span>
635	637		</a>

M internal/app/testdata/web/tree-slash-ref.html +21 -19


@@ -114,9 +114,9 @@
114	114		<kbd>j</kbd>
115	115		<kbd>k</kbd> move · <kbd>l</kbd> open · <kbd>h</kbd> back</p>
116	116		</div>
117		-	<div id="finder" class="tree-card" hidden>
118		-	<p id="finder-status" class="dim" aria-live="polite">
	117	+	<p id="finder-status" class="dim" role="status">
119	118		</p>
	119	+	<div id="finder" class="tree-card" hidden>
120	120		<ul id="finder-list" class="cmd-list" role="listbox" aria-label="Files">
121	121		</ul>
122	122		</div>

@@ -153,18 +153,20 @@
153	153		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
154	154		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
155	155		</footer>
156		-	<div class="hint" role="status" aria-live="polite">
157		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	156	+	<div class="hint">
	157	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
158	158		</span>
	159	+	<span role="status" aria-live="polite">
159	160		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
160	161		</span>
161	162		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
162	163		</span>
	164	+	</span>
163	165		</div>
164	166		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
165	167		<div class="panel-head">
166	168		<h2>Keyboard shortcuts</h2>
167		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	169	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
168	170		<kbd>esc</kbd> close</button>
169	171		</div>
170	172		<div class="keys-pref">

@@ -298,7 +300,7 @@
298	300		<div class="panel-head">
299	301		<label for="refs-filter" class="sr">filter branches and tags</label>
300	302		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
301		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	303	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
302	304		<kbd>esc</kbd>
303	305		</button>
304	306		</div>

@@ -333,79 +335,79 @@
333	335		<div class="panel-head">
334	336		<label for="cmd-q" class="sr">go to</label>
335	337		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
336		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	338	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
337	339		<kbd>esc</kbd>
338	340		</button>
339	341		</div>
340	342		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
341	343		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
342		-	<a href="/" tabindex="-1">
	344	+	<a role="presentation" data-href="/">
343	345		<span class="lbl">home</span>
344	346		<span class="k">go</span>
345	347		</a>
346	348		</li>
347	349		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
348		-	<a href="/files" tabindex="-1">
	350	+	<a role="presentation" data-href="/files">
349	351		<span class="lbl">summary</span>
350	352		<span class="k">section</span>
351	353		</a>
352	354		</li>
353	355		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
354		-	<a href="/files/tree/main" tabindex="-1">
	356	+	<a role="presentation" data-href="/files/tree/main">
355	357		<span class="lbl">files</span>
356	358		<span class="k">section</span>
357	359		</a>
358	360		</li>
359	361		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
360		-	<a href="/files/commits/main" tabindex="-1">
	362	+	<a role="presentation" data-href="/files/commits/main">
361	363		<span class="lbl">commits</span>
362	364		<span class="k">section</span>
363	365		</a>
364	366		</li>
365	367		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
366		-	<a href="/files/refs" tabindex="-1">
	368	+	<a role="presentation" data-href="/files/refs">
367	369		<span class="lbl">branches & tags</span>
368	370		<span class="k">section</span>
369	371		</a>
370	372		</li>
371	373		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
372		-	<a href="/files/merge-requests" tabindex="-1">
	374	+	<a role="presentation" data-href="/files/merge-requests">
373	375		<span class="lbl">merge requests</span>
374	376		<span class="k">section</span>
375	377		</a>
376	378		</li>
377	379		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
378		-	<a href="/files/releases" tabindex="-1">
	380	+	<a role="presentation" data-href="/files/releases">
379	381		<span class="lbl">releases</span>
380	382		<span class="k">section</span>
381	383		</a>
382	384		</li>
383	385		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
384		-	<a href="/files/actions" tabindex="-1">
	386	+	<a role="presentation" data-href="/files/actions">
385	387		<span class="lbl">actions</span>
386	388		<span class="k">section</span>
387	389		</a>
388	390		</li>
389	391		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch feature/x">
390		-	<a href="/files/tree/feature/x" tabindex="-1">
	392	+	<a role="presentation" data-href="/files/tree/feature/x">
391	393		<span class="lbl">feature/x</span>
392	394		<span class="k">branch</span>
393	395		</a>
394	396		</li>
395	397		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch main">
396		-	<a href="/files/tree/main" tabindex="-1">
	398	+	<a role="presentation" data-href="/files/tree/main">
397	399		<span class="lbl">main</span>
398	400		<span class="k">branch</span>
399	401		</a>
400	402		</li>
401	403		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0">
402		-	<a href="/files/tree/v1.0" tabindex="-1">
	404	+	<a role="presentation" data-href="/files/tree/v1.0">
403	405		<span class="lbl">v1.0</span>
404	406		<span class="k">tag</span>
405	407		</a>
406	408		</li>
407	409		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
408		-	<a href="#" data-fire="keys" tabindex="-1">
	410	+	<a role="presentation" data-fire="keys">
409	411		<span class="lbl">turn single-key shortcuts off</span>
410	412		<span class="k">action</span>
411	413		</a>

M internal/app/testdata/web/tree-subdir.html +21 -19


@@ -114,9 +114,9 @@
114	114		<kbd>j</kbd>
115	115		<kbd>k</kbd> move · <kbd>l</kbd> open · <kbd>h</kbd> back</p>
116	116		</div>
117		-	<div id="finder" class="tree-card" hidden>
118		-	<p id="finder-status" class="dim" aria-live="polite">
	117	+	<p id="finder-status" class="dim" role="status">
119	118		</p>
	119	+	<div id="finder" class="tree-card" hidden>
120	120		<ul id="finder-list" class="cmd-list" role="listbox" aria-label="Files">
121	121		</ul>
122	122		</div>

@@ -169,18 +169,20 @@
169	169		<button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
170	170		<kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
171	171		</footer>
172		-	<div class="hint" role="status" aria-live="polite">
173		-	<span class="hint-nav" :text="document.body.dataset.nav \|\| ''">
	172	+	<div class="hint">
	173	+	<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav \|\| ''">
174	174		</span>
	175	+	<span role="status" aria-live="polite">
175	176		<span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
176	177		</span>
177	178		<span class="hint-flash" :text="document.body.dataset.flash \|\| ''">
178	179		</span>
	180	+	</span>
179	181		</div>
180	182		<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
181	183		<div class="panel-head">
182	184		<h2>Keyboard shortcuts</h2>
183		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	185	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
184	186		<kbd>esc</kbd> close</button>
185	187		</div>
186	188		<div class="keys-pref">

@@ -314,7 +316,7 @@
314	316		<div class="panel-head">
315	317		<label for="refs-filter" class="sr">filter branches and tags</label>
316	318		<input id="refs-filter" type="search" placeholder="Switch branch or tag…" autocomplete="off" data-pick="#panel-refs li" hx-on:input="ermite.filter(this)">
317		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	319	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
318	320		<kbd>esc</kbd>
319	321		</button>
320	322		</div>

@@ -349,79 +351,79 @@
349	351		<div class="panel-head">
350	352		<label for="cmd-q" class="sr">go to</label>
351	353		<input id="cmd-q" type="search" placeholder="Go to a section, branch, tag, file or repository…" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="cmd-list" aria-activedescendant="cmd-o0" hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)" hx-on:keydown="ermite.cmdKey(event)">
352		-	<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()">
	354	+	<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
353	355		<kbd>esc</kbd>
354	356		</button>
355	357		</div>
356	358		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
357	359		<li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
358		-	<a href="/" tabindex="-1">
	360	+	<a role="presentation" data-href="/">
359	361		<span class="lbl">home</span>
360	362		<span class="k">go</span>
361	363		</a>
362	364		</li>
363	365		<li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
364		-	<a href="/files" tabindex="-1">
	366	+	<a role="presentation" data-href="/files">
365	367		<span class="lbl">summary</span>
366	368		<span class="k">section</span>
367	369		</a>
368	370		</li>
369	371		<li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
370		-	<a href="/files/tree/main" tabindex="-1">
	372	+	<a role="presentation" data-href="/files/tree/main">
371	373		<span class="lbl">files</span>
372	374		<span class="k">section</span>
373	375		</a>
374	376		</li>
375	377		<li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
376		-	<a href="/files/commits/main" tabindex="-1">
	378	+	<a role="presentation" data-href="/files/commits/main">
377	379		<span class="lbl">commits</span>
378	380		<span class="k">section</span>
379	381		</a>
380	382		</li>
381	383		<li id="cmd-o4" role="option" aria-selected="false" data-k="section branches & tags">
382		-	<a href="/files/refs" tabindex="-1">
	384	+	<a role="presentation" data-href="/files/refs">
383	385		<span class="lbl">branches & tags</span>
384	386		<span class="k">section</span>
385	387		</a>
386	388		</li>
387	389		<li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
388		-	<a href="/files/merge-requests" tabindex="-1">
	390	+	<a role="presentation" data-href="/files/merge-requests">
389	391		<span class="lbl">merge requests</span>
390	392		<span class="k">section</span>
391	393		</a>
392	394		</li>
393	395		<li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
394		-	<a href="/files/releases" tabindex="-1">
	396	+	<a role="presentation" data-href="/files/releases">
395	397		<span class="lbl">releases</span>
396	398		<span class="k">section</span>
397	399		</a>
398	400		</li>
399	401		<li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
400		-	<a href="/files/actions" tabindex="-1">
	402	+	<a role="presentation" data-href="/files/actions">
401	403		<span class="lbl">actions</span>
402	404		<span class="k">section</span>
403	405		</a>
404	406		</li>
405	407		<li id="cmd-o8" role="option" aria-selected="false" data-k="branch feature/x">
406		-	<a href="/files/tree/feature/x" tabindex="-1">
	408	+	<a role="presentation" data-href="/files/tree/feature/x">
407	409		<span class="lbl">feature/x</span>
408	410		<span class="k">branch</span>
409	411		</a>
410	412		</li>
411	413		<li id="cmd-o9" role="option" aria-selected="false" data-k="branch main">
412		-	<a href="/files/tree/main" tabindex="-1">
	414	+	<a role="presentation" data-href="/files/tree/main">
413	415		<span class="lbl">main</span>
414	416		<span class="k">branch</span>
415	417		</a>
416	418		</li>
417	419		<li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0">
418		-	<a href="/files/tree/v1.0" tabindex="-1">
	420	+	<a role="presentation" data-href="/files/tree/v1.0">
419	421		<span class="lbl">v1.0</span>
420	422		<span class="k">tag</span>
421	423		</a>
422	424		</li>
423	425		<li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
424		-	<a href="#" data-fire="keys" tabindex="-1">
	426	+	<a role="presentation" data-fire="keys">
425	427		<span class="lbl">turn single-key shortcuts off</span>
426	428		<span class="k">action</span>
427	429		</a>