#31 fix(web): ARIA semantics for MR panels, dialogs, palette, forms and status regions

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	+	}

@@ -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"


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


@@ -29,22 +29,52 @@ templ IssueForm(l Layout, p IssueFormPage) {
29		<input type="hidden" name="form_token" value={ p.FormToken }/>	29		<input type="hidden" name="form_token" value={ p.FormToken }/>
30		<input type="hidden" name="solution" value=""/>	30		<input type="hidden" name="solution" value=""/>
31		<label for="issue-title">title</label>	31		<label for="issue-title">title</label>
32	-	<input id="issue-title" name="title" type="text" required autocomplete="off" value={ p.Title }/>	32	+	<input
33	-	<output data-for="issue-title" data-max={ itoa(p.MaxTitle) } for="issue-title">{ itoa(runeCount(p.Title)) } / { itoa(p.MaxTitle) }</output>	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		if p.ErrorField == "title" {	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		<label for="issue-body">description</label>	48		<label for="issue-body">description</label>
38	-	<textarea id="issue-body" name="body" rows="8" placeholder="Markdown, optional">{ p.Body }</textarea>	49	+	<textarea
39	-	<output data-for="issue-body" data-max={ itoa(p.MaxBody) } for="issue-body">{ itoa(runeCount(p.Body)) } / { itoa(p.MaxBody) }</output>	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		if p.ErrorField == "body" {	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		<label for="issue-author">name (optional, not verified)</label>	63		<label for="issue-author">name (optional, not verified)</label>
44	-	<input id="issue-author" name="author" type="text" autocomplete="off" value={ p.Author }/>	64	+	<input
45	-	<output data-for="issue-author" data-max={ itoa(p.MaxAuthor) } for="issue-author">{ itoa(runeCount(p.Author)) } / { itoa(p.MaxAuthor) }</output>	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		if p.ErrorField == "author" {	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		<div class="hp" aria-hidden="true">	79		<div class="hp" aria-hidden="true">
50		<label for="issue-website">Leave this field empty</label>	80		<label for="issue-website">Leave this field empty</label>

@@ -65,3 +95,11 @@ templ issueFormRail() {
65		<p class="dim">The owner reads every issue before it appears. Plain text and Markdown only; no address of yours is kept.</p>	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		</section>	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)


@@ -79,9 +79,9 @@ func TestIssueFormGet(t *testing.T) {
79		`action="/proj/issues/new"`, ` hidden`, `data-issue-form`, `data-nonce="AAECAwQFBgcICQoLDA0ODw"`,	79		`action="/proj/issues/new"`, ` hidden`, `data-issue-form`, `data-nonce="AAECAwQFBgcICQoLDA0ODw"`,
80		`data-difficulty="18"`, `data-min-submit-at="1700000003000"`, `data-worker="/-/static/js/pow-worker.`,	80		`data-difficulty="18"`, `data-min-submit-at="1700000003000"`, `data-worker="/-/static/js/pow-worker.`,
81		`name="token" value="tok-1.sig"`, `name="form_token" value="form-1"`, `name="solution" value=""`,	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		`<div class="hp" aria-hidden="true">`, `name="website" type="text" tabindex="-1" autocomplete="off"`,	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		`/-/static/js/issue-form.`,	85		`/-/static/js/issue-form.`,
86		} {	86		} {
87		assert.Contains(t, body, want)	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	+	});


@@ -83,7 +83,7 @@ function keydown(target, key, elementHandler, extra = {}) {
83		// ---- the palette --------------------------------------------------------	83		// ---- the palette --------------------------------------------------------
84			84
85		function palette() {	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		const items = [li('go home', 'home'), li('section files', 'files'), li('branch main', 'main')];	87		const items = [li('go home', 'home'), li('section files', 'files'), li('branch main', 'main')];
88		items[0].setAttribute('data-cursor', '');	88		items[0].setAttribute('data-cursor', '');
89		const input = el('input', { id: 'cmd-q', attrs: { role: 'combobox', 'aria-controls': 'cmd-list' } });	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		assert.ok(hits.length > 0, 'a file hit came');	137		assert.ok(hits.length > 0, 'a file hit came');
138		for (const h of hits) {	138		for (const h of hits) {
139		assert.equal(h.getAttribute('role'), 'option');	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		assert.ok(h.id);	142		assert.ok(h.id);
141		}	143		}
142		assert.equal(p.list.children.length, new Set(p.list.children.map((i) => i.id)).size, 'ids stay unique');	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		f.q.closest = () => f.q; // the global handler sees a field being typed in	175		f.q.closest = () => f.q; // the global handler sees a field being typed in
174		const e = keydown(f.q, 'Escape', (ev) => F.key(f.q, ev));	176		const e = keydown(f.q, 'Escape', (ev) => F.key(f.q, ev));
175		assert.equal(f.q.value, '');	177		assert.equal(f.q.value, '');
			178	+	assert.equal(doc.getElementById('finder-status').textContent, '');
176		assert.equal(e.stopped, true);	179		assert.equal(e.stopped, true);
177		assert.equal(e.prevented, true);	180		assert.equal(e.prevented, true);
178		assert.equal(blurred, false, 'the field keeps the focus');	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		doc.querySelector = oldQuery;	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.

   return e;
 };
 const status = () => document.getElementById('finder-status').textContent;
-const hrefs = (list) => list.children.map((li) => li.querySelector('a').href);
+const hrefs = (list) => list.children.map((li) => li.querySelector('a').dataset.href);
 test('Enter before the results opens the top hit once they come', async () => {
   const p = page();
   await settle();
   assert.equal(p.finderList.children.length > 0, true);
   assert.equal(dom.clicked.length, 1);
-  assert.equal(dom.clicked[0].href, hrefs(p.finderList)[0]);
+  assert.equal(dom.clicked[0].dataset.href, hrefs(p.finderList)[0]);
-  assert.match(dom.clicked[0].href, /^\/blob\/main\/.*tree/);
+  assert.match(dom.clicked[0].dataset.href, /^\/blob\/main\/.*tree/);
   assert.equal(fetches, 1);
 });
   assert.equal(items[2].getAttribute('aria-selected'), 'true');
   assert.equal(items[0].getAttribute('aria-selected'), 'false');
   assert.equal(p.q.getAttribute('aria-activedescendant'), items[2].id);
-  assert.equal(dom.clicked[0].href, items[2].querySelector('a').href);
+  assert.equal(dom.clicked[0].dataset.href, items[2].querySelector('a').dataset.href);
   // The arrows move from there.
   F.key(p.q, key('ArrowUp'));
   assert.equal(p.q.getAttribute('aria-activedescendant'), items[1].id);
   const hits = p.cmdList.children.filter((li) => li.className === 'finder-hit');
   assert.equal(hits.length, 4);
   assert.equal(p.cmdList.children[0].className, 'entry', 'the entries stay first');
-  assert.deepEqual(hits.map((li) => li.querySelector('a').href).sort(), [
+  assert.deepEqual(hits.map((li) => li.querySelector('a').dataset.href).sort(), [
     '/blob/main/docs/web/tree-view.md',
     '/blob/main/internal/adapters/web/tree.go',
     '/blob/main/internal/adapters/web/tree.templ',
     '/blob/main/src/treehouse.txt',
   ]);
-  assert.equal(hits[0].querySelector('a').tabIndex, -1);
+  assert.equal(hits[0].querySelector('a').hasAttribute('href'), false);
+  assert.equal(hits[0].querySelector('a').hasAttribute('tabindex'), false);
   assert.equal(hits[0].querySelector('.k').textContent, 'file');
   assert.equal(p.cmdList.children.filter((li) => li.hasAttribute('data-cursor')).length, 1, 'one cursor');
     assert.equal(dom.clicked.length, 0, 'nothing to open before the frame');
     flushFrames();
     await settle();
-    assert.deepEqual(dom.clicked.map((a) => a.href), ['/blob/main/cmd/ermite/main.go']);
+    assert.deepEqual(dom.clicked.map((a) => a.dataset.href), ['/blob/main/cmd/ermite/main.go']);
   } finally {
     dom.holdFrames = false;
   }
   p.cmdQ.value = 'readme'; // typed before the search of "tree" finished
   F.palette(p.cmdQ);
   await settle();
-  const got = p.cmdList.children.filter((li) => li.className === 'finder-hit').map((li) => li.querySelector('a').href);
+  const got = p.cmdList.children.filter((li) => li.className === 'finder-hit').map((li) => li.querySelector('a').dataset.href);
   assert.deepEqual(got, ['/blob/main/README.md']);
   // 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	+	});


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

@@ -531,3 +531,35 @@ test('intercepted Cancel resets the entire comment form', () => {
531		assert.equal(window.ermiteMR.hasDraft(), false);	531		assert.equal(window.ermiteMR.hasDraft(), false);
532		} finally { Object.assign(globalThis, saved); c.restore(); }	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>


@@ -296,7 +296,7 @@ templ commentView(c CommentView, suffix string) {
296		<button type="button" class="btn" data-js data-quote={ c.Quote }>Quote</button>	296		<button type="button" class="btn" data-js data-quote={ c.Quote }>Quote</button>
297		}	297		}
298		if c.Edit != nil {	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		if c.Delete != nil {	301		if c.Delete != nil {
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>	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		templ mrFooter(p MRPage) {	374		templ mrFooter(p MRPage) {
375		<footer class="mr-footer">	375		<footer class="mr-footer">
376	-	<nav data-mr-tabs aria-label="Branch details">	376	+	<div data-mr-tabs data-js role="group" aria-label="Branch details">
377	-	<a id="mr-tab-commits" href="#mr-commits">Commits <span class="count">{ p.CommitCount }</span></a>	377	+	<button type="button" id="mr-tab-commits" aria-expanded="true" aria-controls="mr-commits">Commits <span class="count">{ p.CommitCount }</span></button>
378	-	<a id="mr-tab-checks" href="#mr-checks">	378	+	<button type="button" id="mr-tab-checks" aria-expanded="true" aria-controls="mr-checks-panel">
379		{ "Checks " }	379		{ "Checks " }
380		<span data-checks-label>	380		<span data-checks-label>
381		if p.ChecksSum.Total > 0 {	381		if p.ChecksSum.Total > 0 {

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

@@ -421,7 +421,7 @@ templ mrFooter(p MRPage) {
421		<p class="note">{ p.CommitsNote }</p>	421		<p class="note">{ p.CommitsNote }</p>
422		}	422		}
423		</div>	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		@MRChecks(p.Checks)	425		@MRChecks(p.Checks)
426		</div>	426		</div>
427		</footer>	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")

 	p := MRPage{CommitCount: "500+", CommitsNote: "more commits", Modes: []string{"squash", "merge"}, ChecksBlock: true,
 		ChecksSum: ChecksSummary{Total: 2, Label: "1/2", Title: "1/2 failed"}, Box: &MergeBox{Signed: true, Fingerprint: "fingerprint", HeadGone: true}}
 	footer := renderToString(t, mrFooter(p))
-	assert.Contains(t, footer, `<footer class="mr-footer"><nav data-mr-tabs`)
+	assert.Contains(t, footer, `<footer class="mr-footer"><div data-mr-tabs data-js role="group"`)
 	assert.NotContains(t, footer, `<details`)
 	assert.NotContains(t, footer, `<summary`)
-	// No hidden attribute: the CSS shows the panel of the URL fragment until
+	// Both panels are readable without scripts; JS enhances native buttons.
-	// mr.js takes over, so the tabs work as anchors without scripts.
+	assert.Contains(t, footer, `id="mr-commits" data-mr-panel role="group"`)
-	assert.Contains(t, footer, `id="mr-commits" data-mr-panel role="region"`)
+	assert.Contains(t, footer, `id="mr-checks-panel" data-mr-panel role="group"`)
-	assert.Contains(t, footer, `id="mr-checks-panel" data-mr-panel role="region"`)
 	assert.NotContains(t, footer, `data-mr-panel hidden`)
 	css, err := staticFS.ReadFile("static/css/60-mr.css")
 	require.NoError(t, err)
-	assert.Contains(t, string(css), `&:not([data-panels]) [data-mr-panel]:not(:target, :has(:target)) { display: none; }`)
+	assert.NotContains(t, string(css), `:not([data-panels])`)
+	assert.Contains(t, footer, `<button type="button" id="mr-tab-commits" aria-expanded="true" aria-controls="mr-commits">`)
+	assert.Contains(t, footer, `<button type="button" id="mr-tab-checks" aria-expanded="true" aria-controls="mr-checks-panel">`)
 	assert.Contains(t, footer, `data-mr-tabs`)
 	assert.Contains(t, footer, `id="mr-commits"`)
 	assert.Contains(t, footer, `id="mr-checks"`)
-	assert.Contains(t, footer, `<table class="mr-commits">`)
+	assert.Contains(t, footer, `<table class="mr-commits" aria-label="Commits">`)
 	assert.Contains(t, footer, "500+")
 	assert.Contains(t, footer, "more commits")
 	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>


@@ -11,7 +11,7 @@ import (
11		// show on that page only.	11		// show on that page only.
12		templ OverlayHelp(mr bool) {	12		templ OverlayHelp(mr bool) {
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()">	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		<div class="keys-pref">	15		<div class="keys-pref">
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>	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		<p id="keys-note" class="dim">Single-key shortcuts are on. ctrl k and esc work whatever this says.</p>	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		data-pick="#panel-refs li"	60		data-pick="#panel-refs li"
61		hx-on:input="ermite.filter(this)"	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		</div>	64		</div>
65		<div class="panel-cols" data-picklist>	65		<div class="panel-cols" data-picklist>
66		<section aria-label="Branches">	66		<section aria-label="Branches">

@@ -123,13 +123,13 @@ templ OverlayCmd(items []CmdItem) {
123		hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)"	123		hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)"
124		hx-on:keydown="ermite.cmdKey(event)"	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		</div>	127		</div>
128		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">	128		<ul id="cmd-list" class="cmd-list" role="listbox" aria-label="Targets">
129		for i, c := range items {	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		</ul>	133		</ul>
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>	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		</dialog>	135		</dialog>

M internal/adapters/web/overlays_templ.go +35 -12 generated file: collapsed

load diff

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		}


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

M internal/adapters/web/shell_templ.go +1 -1


@@ -936,7 +936,7 @@ func Hint(l Layout) templ.Component {
936	936		templ_7745c5c3_Var47 = templ.NopComponent
937	937		}
938	938		ctx = templ.ClearChildren(ctx)
939		-	templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 90, "<div class=\"hint\" role=\"status\" aria-live=\"polite\"><span class=\"hint-nav\" :text=\"document.body.dataset.nav \|\| ''\"></span> <span class=\"hint-sel\" :text=\"document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''\"></span> <span class=\"hint-flash\" :text=\"document.body.dataset.flash \|\| ''\"></span>")
	939	+	templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 90, "<div class=\"hint\"><span aria-hidden=\"true\" class=\"hint-nav\" :text=\"document.body.dataset.nav \|\| ''\"></span> <span role=\"status\" aria-live=\"polite\"><span class=\"hint-sel\" :text=\"document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''\"></span> <span class=\"hint-flash\" :text=\"document.body.dataset.flash \|\| ''\"></span></span>")
940	940		if templ_7745c5c3_Err != nil {
941	941		return templ_7745c5c3_Err
942	942		}


@@ -936,7 +936,7 @@ func Hint(l Layout) templ.Component {
936		templ_7745c5c3_Var47 = templ.NopComponent	936		templ_7745c5c3_Var47 = templ.NopComponent
937		}	937		}
938		ctx = templ.ClearChildren(ctx)	938		ctx = templ.ClearChildren(ctx)
939	-	templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 90, "<div class=\"hint\" role=\"status\" aria-live=\"polite\"><span class=\"hint-nav\" :text=\"document.body.dataset.nav \|\| ''\"></span> <span class=\"hint-sel\" :text=\"document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''\"></span> <span class=\"hint-flash\" :text=\"document.body.dataset.flash \|\| ''\"></span>")	939	+	templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 90, "<div class=\"hint\"><span aria-hidden=\"true\" class=\"hint-nav\" :text=\"document.body.dataset.nav \|\| ''\"></span> <span role=\"status\" aria-live=\"polite\"><span class=\"hint-sel\" :text=\"document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''\"></span> <span class=\"hint-flash\" :text=\"document.body.dataset.flash \|\| ''\"></span></span>")
940		if templ_7745c5c3_Err != nil {	940		if templ_7745c5c3_Err != nil {
941		return templ_7745c5c3_Err	941		return templ_7745c5c3_Err
942		}	942		}

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

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

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); }

     font-size: var(--fs-s);
     /* the tabs are buttons: a thin border, the count in a darker badge;
        the open one in the teal accent */
-    & nav { display: flex; flex-wrap: wrap; gap: var(--s2); }
+    & [data-mr-tabs] { display: flex; flex-wrap: wrap; gap: var(--s2); }
-    & [data-mr-tabs] a {
+    & [data-mr-tabs] button {
       display: inline-flex; align-items: center; gap: var(--s1);
       padding: 2px var(--s2); border: 1px solid var(--border-strong); border-radius: var(--r-s);
       color: var(--ink-dim); text-decoration: none; cursor: pointer;
     }
     & [data-checks-label] { color: var(--ink-dim); font-size: var(--fs-xs); }
     & [data-mr-tabs] .count { margin-left: 0; color: var(--ink-hi); background: var(--bg-canvas); box-shadow: inset 0 0 0 1px var(--border); }
-    & [data-mr-tabs] a:hover { background: var(--bg-strong); color: var(--ink-hi); }
+    & [data-mr-tabs] button:hover { background: var(--bg-strong); color: var(--ink-hi); }
-    & [data-mr-tabs] a[aria-expanded="true"] { border-color: var(--teal); color: var(--teal); background: var(--bg-surface); }
+    & [data-mr-tabs] button[aria-expanded="true"] { border-color: var(--teal); color: var(--teal); background: var(--bg-surface); }
     & [data-mr-panel] { padding-block-start: var(--s2); overflow-x: auto; }
     & [hidden] { display: none; }
-    /* Until mr.js drives the panels (data-panels, then [hidden]), only the
+    /* Without scripts both panels remain visible; disclosure controls use data-js. */
-       panel of the URL fragment shows: the tabs work as anchors without
-       scripts, and no panel flashes open before the script runs. */
-    &:not([data-panels]) [data-mr-panel]:not(:target, :has(:target)) { display: none; }
     & section h2 { font-size: var(--fs-s); color: var(--ink-dim); }
     & table { width: 100%; border-collapse: collapse; }
     & 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		}


@@ -48,6 +48,6 @@
48		#diffs[data-mr] .ln a[data-range-start] { outline: 2px solid var(--focus); background: var(--sel); }	48		#diffs[data-mr] .ln a[data-range-start] { outline: 2px solid var(--focus); background: var(--sel); }
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); }	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		#diffs[data-mr] .cform { scroll-margin-block: calc(var(--hdr-h) + 12px); }	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;


@@ -134,7 +134,12 @@
134	dialog(id, focusId) {	134		dialog(id, focusId) {
135	const d = document.getElementById(id);	135		const d = document.getElementById(id);
136	if (!d) return;	136		if (!d) return;
		137	+	const opener = document.activeElement;
137	ermite.closeDialogs();	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	d.showModal();	143		d.showModal();
139	if (id === 'panel-cmd') window.ermiteCmd?.sync();	144		if (id === 'panel-cmd') window.ermiteCmd?.sync();
140	if (focusId) document.getElementById(focusId)?.focus();	145		if (focusId) document.getElementById(focusId)?.focus();

@@ -672,6 +677,16 @@
672	const menu = el.closest('details.menu');	677		const menu = el.closest('details.menu');
673	if (menu) closeMenu(menu);	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	// A click outside an open menu closes it.	690		// A click outside an open menu closes it.
676	addEventListener('click', (e) => {	691		addEventListener('click', (e) => {
677	for (const d of $$('details.menu[open]')) if (!d.contains(e.target)) d.open = false;	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;

     return lbl;
   }
-  // hitLink is the link of path i of the result: its label, out of the tab order.
+  // hitLink is the presentation wrapper of path i; the option owns activation.
   function hitLink(res, i) {
     const path = res.idx.paths[i];
     const a = document.createElement('a');
-    a.href = blobHref(path);
+    a.dataset.href = blobHref(path);
-    a.tabIndex = -1;
+    a.setAttribute('role', 'presentation');
     a.append(label(path, positions(res.idx, i, res.q)));
     return a;
   }
   // showTree: no query, the directory again, with j/k and Enter on its rows.
   function showTree(el) {
+    status('');
     rendered = null;
     pendingEnter = null;
     $('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);


@@ -241,7 +241,7 @@ window.ermiteMR = (() => {
241		reveal(id);	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		let disposePanels = () => {};	245		let disposePanels = () => {};
246		// The tabs are disclosure buttons (aria-expanded + aria-controls), not a	246		// The tabs are disclosure buttons (aria-expanded + aria-controls), not a
247		// tablist: a tablist always has a selected tab, and here every panel can be	247		// tablist: a tablist always has a selected tab, and here every panel can be

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

@@ -522,7 +522,7 @@ window.ermiteMR = (() => {
522		const files = new Map($$('#diffs details.dfile').map((f) => [f.dataset.file, f.open]));	522		const files = new Map($$('#diffs details.dfile').map((f) => [f.dataset.file, f.open]));
523		const folded = $('.r-files')?.hasAttribute('data-folded');	523		const folded = $('.r-files')?.hasAttribute('data-folded');
524		const railY = $('.rail')?.scrollTop, filesY = $('.r-files .files')?.scrollTop;	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		const active = document.activeElement;	526		const active = document.activeElement;
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') };	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		for (const f of $$('#diffs details.dfile', page)) if (files.has(f.dataset.file)) f.open = files.get(f.dataset.file);	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">

 			</div>
 			<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>
 		</div>
+		<p id="finder-status" class="dim" role="status"></p>
 		<div id="finder" class="tree-card" hidden>
-			<p id="finder-status" class="dim" aria-live="polite"></p>
 			<ul id="finder-list" class="cmd-list" role="listbox" aria-label="Files"></ul>
 		</div>
 		<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>

 <button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?">
 <kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
 </footer>
-<div class="hint" role="status" aria-live="polite">
+<div class="hint">
-<span class="hint-nav" :text="document.body.dataset.nav || ''">
+<span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav || ''">
 </span>
+<span role="status" aria-live="polite">
 <span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''">
 </span>
 <span class="hint-flash" :text="document.body.dataset.flash || ''">
 </span>
+</span>
 </div>
 <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()">
+<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">
 <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()">
+<button type="button" class="panel-x" aria-label="Close (esc)" hx-on:click="closest('dialog').close()">
 <kbd>esc</kbd>
 </button>
 </div>
 <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()">
+<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">
 <li id="cmd-o0" role="option" aria-selected="true" data-k="go home" data-cursor>
-<a href="/" tabindex="-1">
+<a role="presentation" data-href="/">
 <span class="lbl">home</span>
 <span class="k">go</span>
 </a>
 </li>
 <li id="cmd-o1" role="option" aria-selected="false" data-k="section summary">
-<a href="/files" tabindex="-1">
+<a role="presentation" data-href="/files">
 <span class="lbl">summary</span>
 <span class="k">section</span>
 </a>
 </li>
 <li id="cmd-o2" role="option" aria-selected="false" data-k="section files">
-<a href="/files/tree/main" tabindex="-1">
+<a role="presentation" data-href="/files/tree/main">
 <span class="lbl">files</span>
 <span class="k">section</span>
 </a>
 </li>
 <li id="cmd-o3" role="option" aria-selected="false" data-k="section commits">
-<a href="/files/commits/main" tabindex="-1">
+<a role="presentation" data-href="/files/commits/main">
 <span class="lbl">commits</span>
 <span class="k">section</span>
 </a>
 </li>
 <li id="cmd-o4" role="option" aria-selected="false" data-k="section branches &amp; tags">
-<a href="/files/refs" tabindex="-1">
+<a role="presentation" data-href="/files/refs">
 <span class="lbl">branches &amp; tags</span>
 <span class="k">section</span>
 </a>
 </li>
 <li id="cmd-o5" role="option" aria-selected="false" data-k="section merge requests">
-<a href="/files/merge-requests" tabindex="-1">
+<a role="presentation" data-href="/files/merge-requests">
 <span class="lbl">merge requests</span>
 <span class="k">section</span>
 </a>
 </li>
 <li id="cmd-o6" role="option" aria-selected="false" data-k="section releases">
-<a href="/files/releases" tabindex="-1">
+<a role="presentation" data-href="/files/releases">
 <span class="lbl">releases</span>
 <span class="k">section</span>
 </a>
 </li>
 <li id="cmd-o7" role="option" aria-selected="false" data-k="section actions">
-<a href="/files/actions" tabindex="-1">
+<a role="presentation" data-href="/files/actions">
 <span class="lbl">actions</span>
 <span class="k">section</span>
 </a>
 </li>
 <li id="cmd-o8" role="option" aria-selected="false" data-k="branch feature/x">
-<a href="/files/tree/feature/x" tabindex="-1">
+<a role="presentation" data-href="/files/tree/feature/x">
 <span class="lbl">feature/x</span>
 <span class="k">branch</span>
 </a>
 </li>
 <li id="cmd-o9" role="option" aria-selected="false" data-k="branch main">
-<a href="/files/tree/main" tabindex="-1">
+<a role="presentation" data-href="/files/tree/main">
 <span class="lbl">main</span>
 <span class="k">branch</span>
 </a>
 </li>
 <li id="cmd-o10" role="option" aria-selected="false" data-k="tag v1.0">
-<a href="/files/tree/v1.0" tabindex="-1">
+<a role="presentation" data-href="/files/tree/v1.0">
 <span class="lbl">v1.0</span>
 <span class="k">tag</span>
 </a>
 </li>
 <li id="cmd-o11" role="option" aria-selected="false" data-k="action turn single-key shortcuts on off keyboard">
-<a href="#" data-fire="keys" tabindex="-1">
+<a role="presentation" data-fire="keys">
 <span class="lbl">turn single-key shortcuts off</span>
 <span class="k">action</span>
 </a>

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

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

show this file

Merge settings

Comments0 open / 0

Commit	Subject	Author	Date	Signature
f5cbe22	test(app): update web goldens for the ARIA changes	brice	4h ago	GPG Verified
1f47bc8	fix(web): keep MR panels open on refresh, expose one option per palette result, clear finder status	brice	4h ago	GPG Verified
21b3830	fix(web): improve ARIA semantics of MR panels, dialogs, palette, forms and status regions	brice	5h ago	GPG Verified