fix(stage6): post-merge review (a11y + refs + beta + slim empty state)

[satra]

Addresses the gemini-code-assist review comments on PRs #9 + #10, the axe-core a11y audit from the live production site, and the user's beta-tag + empty-state trim.

Summary

• state_key docstring corrected: removed the contradictory "picks the most recent by mtime" sentence; the function now documents that more than one rollup is a hard error by design.
• references.yaml authors for the NeuroScape entries are now Mario Senden (the canonical author per the Aperture Neuro paper); titles follow the same Author (Year) — title format as the rest of the registry; year corrected to 2026.
• A11y: ran axe-core against production — only serious violation was scrollable-region-focusable on every overflow-y: auto container. Added tabindex=\"0\" + role=\"region\" + aria-label to the cluster-grid, related-list scroll containers, facet options scroll, and cart items. New site/src/tests/e2e/a11y.spec.ts runs the axe audit on home / about / permalink and fails on critical or serious violations.
• (beta) tag added to the page title + h1.
• Empty-state tip in the right pane no longer lists "Models × inputs" and "Cells" — just "Accepted abstracts". Those numbers were developer-facing.
• About page: Stage 6 TL;DR now documents the a11y posture (axe-core probe + keyboard-reachable scroll regions).

Test plan

• pnpm test:unit --run (56/56)
• pnpm exec vite build clean
• link_check.py passes against the cleaned-up references.yaml
• axe a11y probe re-runs against the deployed preview — should now report 0 critical / 0 serious
• Production deploy succeeds; home + about + permalink render the (beta) tag

🤖 Generated with Claude Code

[gemini-code-assist]

Code Review

This pull request focuses on accessibility enhancements and the integration of automated accessibility testing using @axe-core/playwright. Key changes include adding ARIA labels and keyboard focusability to scrollable components like the CartDrawer, DetailPanel, and FacetSidebar, alongside updating the site branding to a 'beta' status. Reviewer feedback suggests refactoring the new E2E tests to leverage Playwright fixtures instead of manual browser management for better performance and resource handling. Additionally, there are recommendations to make tabindex and aria-label attributes conditional on content length to avoid unnecessary tab stops for keyboard users and to preserve list semantics by removing redundant role="region" attributes.

[gemini-code-assist]

Import the Page type and remove the unused chromium import, as browser management should be handled by Playwright fixtures.

Suggested change

	import { test, expect, chromium } from '@playwright/test';
	import { test, expect, type Page } from '@playwright/test';

[gemini-code-assist]

The auditRoute function manually launches and closes browser instances for each test. This is an anti-pattern in Playwright that prevents leveraging built-in fixtures, parallelization, and proper resource cleanup.

Refactor the function to accept the page fixture and remove the manual browser management. Also, consider replacing waitForTimeout with a more robust wait condition (e.g., waiting for a specific element that indicates data loading is complete).

async function auditRoute(
	page: Page,
	pathSuffix: string,
	label: string,
	waitFor: string = 'main'
): Promise<void> {
	await page.setViewportSize({ width: 1440, height: 900 });
	const url = `${BASE.replace(/\/$/, '')}${pathSuffix}`;
	await page.goto(url, { waitUntil: 'load' });
	await page.waitForSelector(waitFor, { timeout: 30000 });
	await page.waitForTimeout(2500); // let hydration + data-package fetch settle

	const results = await new AxeBuilder({ page })
		.withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
		.analyze();

	const critical = results.violations.filter((v) => v.impact === 'critical');
	const serious = results.violations.filter((v) => v.impact === 'serious');
	const moderate = results.violations.filter((v) => v.impact === 'moderate');
	const minor = results.violations.filter((v) => v.impact === 'minor');

	console.log(
		`[${label}] axe results: ${critical.length} critical, ${serious.length} serious, ${moderate.length} moderate, ${minor.length} minor`
	);
	for (const v of [...critical, ...serious]) {
		console.log(`  · ${v.impact?.toUpperCase()} (${v.id}) — ${v.help}`);
		for (const node of v.nodes.slice(0, 3)) {
			console.log(`      target: ${node.target}`);
		}
	}
	for (const v of moderate.slice(0, 3)) {
		console.log(`  · MODERATE (${v.id}) — ${v.help}`);
	}
	// Critical / serious fail the test; moderate / minor are logged only.
	expect(critical, `critical a11y issues on ${label}`).toEqual([]);
	expect(serious, `serious a11y issues on ${label}`).toEqual([]);
}

[gemini-code-assist]

Update these tests to use the page fixture provided by Playwright.

Suggested change

	test('axe — home page', async () => {
	await auditRoute('/', 'home', '[data-testid="search-input"]');
	});
	test('axe — about page', async () => {
	await auditRoute('/about/', 'about', 'main');
	});
	test('axe — home page', async ({ page }) => {
	await auditRoute(page, '/', 'home', '[data-testid="search-input"]');
	});
	test('axe — about page', async ({ page }) => {
	await auditRoute(page, '/about/', 'about', 'main');
	});

[gemini-code-assist]

Refactor this test to use the page fixture and remove the redundant browser launch. This ensures consistency and better performance by reusing the managed browser instance.

test('axe — abstract permalink page', async ({ page }) => {
	await page.goto(`${BASE.replace(/\/$/, '')}/`, { waitUntil: 'load' });
	await page.waitForSelector('[data-testid="result-card"]', { timeout: 30000 });
	const posterId = await page.locator('[data-testid="result-card"]').first().getAttribute('data-poster-id');
	if (!posterId) {
		test.skip();
		return;
	}
	await auditRoute(
		page,
		`/abstract/${encodeURIComponent(posterId)}/`,
		`permalink-${posterId}`,
		'[data-testid="detail-panel"]'
	);
});

[gemini-code-assist]

Unconditional tabindex="0" adds unnecessary tab stops for keyboard users when the list is too short to scroll. Additionally, role="region" on a <ul> overrides its implicit list role, which can be confusing for screen reader users.

Consider making the focusability and labeling conditional on content length (similar to the implementation in FacetSidebar.svelte) and removing the role attribute to preserve list semantics.

				<ul
					class="cluster-grid"
					tabindex={clusterMemberships.length > 5 ? 0 : -1}
					aria-label={clusterMemberships.length > 5 ? "Cluster membership across all (model × input) cells" : undefined}
				>

[gemini-code-assist]

Apply conditional tabindex and aria-label here to avoid unnecessary tab stops on short lists, and remove role="region" to maintain list semantics.

						<ul class="related-list related-scroll" data-testid="related-nearest-list" tabindex={nearest.length > 5 ? 0 : -1} aria-label={nearest.length > 5 ? "Most-similar abstracts list" : undefined}>

[gemini-code-assist]

Apply conditional tabindex and aria-label here as well, and remove role="region".

						<ul class="related-list related-scroll" data-testid="related-farthest-list" tabindex={farthest.length > 5 ? 0 : -1} aria-label={farthest.length > 5 ? "Most-different abstracts list" : undefined}>

[gemini-code-assist]

Make tabindex and aria-label conditional on the number of items to avoid unnecessary tab stops when the cart list is not scrollable.

			<ul class="items" tabindex={items.length > 5 ? 0 : -1} aria-label={items.length > 5 ? "Your saved abstracts" : undefined}>