fix(website): back out two overreaching fixes and pin the a11y rule site-wide

Two corrections from the last round were themselves the regression, and
checking both premises confirmed it.

The compiled-bundle clause is back to exactly its pre-change wording. It
appears five times across the site and in root AGENTS.md, so editing one
instance left the page disagreeing with its own FAQ, with the FAQPage
schema that FAQ feeds, and with /why-webjs. Whether the claim holds
everywhere is a real question and not this PR's; the PR now takes no
position on it.

The toggled usage block is back to carrying nothing. Its content is one
37-character line that never becomes a scroll container at any width a
reader will use, so the tabindex added for it was a permanent tab stop
on inert content rather than the rescue of an unreachable region.

The negative prompt assertion was a tripwire for one literal under a
message promising much more, so it now asserts the property the section
actually claims: the prompt panel contains no framework vocabulary at
all, which no rewording walks past. And the name rule is pinned across
all three pages that render code blocks, in its own file, since the rule
belongs to the site rather than to one page and covering one page is how
the other two drifted.

Author: vivek7405

website/app/page.ts

@@ -232,7 +232,7 @@ export default function LandingPage() {
             <div class="flex-1 grid place-items-center px-6 py-10 group-has-[:checked]/stage:hidden">
               <like-button count="3"></like-button>
             </div>
-            <pre class="hidden group-has-[:checked]/stage:block flex-1 m-0 p-5 overflow-x-auto font-mono text-xs leading-[1.72] text-left" role="region" tabindex="0" aria-label="like-button usage"><code>${highlight(USAGE_SAMPLE)}</code></pre>
+            <pre class="hidden group-has-[:checked]/stage:block flex-1 m-0 p-5 overflow-x-auto font-mono text-xs leading-[1.72] text-left"><code>${highlight(USAGE_SAMPLE)}</code></pre>
             <div class="px-4 py-3 border-t border-border text-center font-mono text-xs leading-[1.5] text-fg-subtle">
               Server-rendered first, then upgraded. Click it.
             </div>

website/app/what-is-webjs/page.ts

@@ -161,7 +161,7 @@ const PROSE = 'text-fg-muted text-base leading-[1.7] m-0';
 const CAPABILITIES = [
   {
     title: 'AI-first, readable end to end',
-    body: 'Predictable file conventions and an explicit .server.ts boundary decide the shape of an app, so an agent edits one route without reading the whole app, and ordinary words are enough to ask for a new one. Every app ships an AGENTS.md contract that Claude Code, Cursor, Copilot, Gemini, and opencode read from one source, and the framework itself sits in node_modules as plain JavaScript with JSDoc you can open and read.',
+    body: 'Predictable file conventions and an explicit .server.ts boundary decide the shape of an app, so an agent edits one route without reading the whole app, and ordinary words are enough to ask for a new one. Every app ships an AGENTS.md contract that Claude Code, Cursor, Copilot, Gemini, and opencode read from one source, and the framework itself is plain JavaScript with JSDoc in node_modules rather than a compiled bundle.',
   },
   {
     title: 'Web components, server-rendered',

website/test/ssr/pre-block-a11y.test.ts

@@ -0,0 +1,71 @@
+/**
+ * The accessible name on every code block the marketing pages render.
+ *
+ * A <pre> maps to ARIA role `generic`, and ARIA prohibits an author-supplied
+ * name on `generic`, so a bare <pre aria-label="..."> gives a spec-following
+ * screen reader a name it will not announce. Every block that carries a name
+ * therefore carries an explicit `role="region"` to make that name one ARIA
+ * permits, and because a named region is a landmark, the names have to be
+ * unique per page or they collapse into an ambiguous pair in the landmark list.
+ *
+ * This lives in its own file rather than inside each page's test because the
+ * rule is a property of the SITE, not of one page. The pages here were fixed
+ * together, and pinning them together is what stops the next one from drifting
+ * back: the sweep that fixed them originally covered one page, and the other
+ * two went unobserved until a review caught it.
+ */
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { renderToString } from '@webjsdev/core/server';
+import Home from '#app/page.ts';
+import WhatIsWebJs from '#app/what-is-webjs/page.ts';
+import Why from '#app/why-webjs/page.ts';
+
+/** Every `<pre …>` open tag in the rendered HTML, attribute order as authored. */
+function preTags(html: string) {
+  return html.match(/<pre\b[^>]*>/g) ?? [];
+}
+
+function nameOf(tag: string) {
+  return tag.match(/aria-label="([^"]*)"/)?.[1];
+}
+
+const PAGES = [
+  { name: '/', render: () => Home() },
+  { name: '/what-is-webjs', render: () => WhatIsWebJs() },
+  { name: '/why-webjs', render: () => Why() },
+];
+
+for (const page of PAGES) {
+  test(`every named code block on ${page.name} carries a role that permits the name`, async () => {
+    const tags = preTags(await renderToString(page.render()));
+    assert.ok(tags.length > 0, 'the page renders at least one code block');
+    const named = tags.filter(nameOf);
+    assert.ok(named.length > 0, 'the page renders at least one NAMED code block, so this test has something to check');
+    for (const tag of named) {
+      // Read the role by attribute, not by position: an order-sensitive regex
+      // would red on correct markup that simply wrote the attributes the other
+      // way round.
+      assert.match(tag, /\brole="region"/, `a named pre is missing role=region, so its name is one ARIA prohibits: ${nameOf(tag)}`);
+    }
+  });
+
+  test(`no two code blocks on ${page.name} share a landmark name`, async () => {
+    const named = preTags(await renderToString(page.render())).map(nameOf).filter(Boolean);
+    assert.deepEqual([...new Set(named)], named, `duplicate landmark names on ${page.name}: ${named.join(', ')}`);
+  });
+}
+
+test('a code block with no name needs no role, so it adds no landmark', async () => {
+  // The home page's toggled usage block holds one short line that never becomes
+  // a scroll container at a real viewport width. It carries no name and no
+  // focus stop on purpose, and promoting it would add an empty-ish landmark and
+  // a permanent tab stop on content nothing can interact with.
+  const tags = preTags(await renderToString(Home()));
+  const unnamed = tags.filter((t) => !nameOf(t));
+  assert.ok(unnamed.length > 0, 'the home page still renders an unnamed code block');
+  for (const tag of unnamed) {
+    assert.doesNotMatch(tag, /\brole="region"/, 'an unnamed block claims a landmark role it has no name for');
+    assert.doesNotMatch(tag, /\btabindex=/, 'an unnamed, non-scrolling block takes a tab stop for nothing');
+  }
+});

website/test/ssr/why-webjs-ssr.test.ts

@@ -42,20 +42,19 @@ test('the plain-language section pairs a prompt against the files the convention
   // their correspondence, and the accessible name each scrollable block needs.
   const out = await renderToString(Why());
   assert.ok(out.includes('Let customers book a table'), 'the prompt panel carries a request written in ordinary words');
-  // Plain substring, not a regex spanning the chevron: the prompt's > lives in
-  // its own span, so anything asserting the two are adjacent can never match
-  // and would sit here green while the regression it names is fully present.
-  assert.ok(!out.includes('Build a page'), 'the prompt does not name a page, which the file panel would then have to match one for one');
   for (const file of ['app/book/page.ts', 'app/staff/bookings/page.ts', 'modules/bookings/actions/create.server.ts', 'db/schema.server.ts']) {
     assert.ok(out.includes(file), `the file panel answers the prompt with ${file}`);
   }
   assert.ok(out.includes('<span class="ml-2 font-mono font-medium text-xs leading-none text-fg-subtle">files</span>'), 'the file listing is labelled files, not terminal');
-  // <pre> maps to role generic, where ARIA prohibits an author-supplied name,
-  // so every named scrollable block on this page carries an explicit role.
-  const named = out.match(/<pre[^>]*aria-label=/g) ?? [];
-  const region = out.match(/<pre[^>]*role="region"[^>]*aria-label=/g) ?? [];
-  assert.equal(named.length, 4, 'the page renders its four named code blocks');
-  assert.equal(region.length, named.length, 'every named pre carries role=region, so the name is one ARIA permits');
+
+  // The section's whole claim is that the prompt needs no framework vocabulary,
+  // so assert that property of the prompt panel itself rather than tripwiring
+  // one historical phrasing, which any reworded regression would walk past.
+  const prompt = out.slice(out.indexOf('aria-label="A plain-language prompt'), out.indexOf('Where the conventions put it'));
+  assert.ok(prompt.includes('Let customers'), 'the slice really is the prompt panel');
+  for (const jargon of ['page.ts', '.server.ts', 'route', 'component', 'schema', 'action']) {
+    assert.ok(!prompt.includes(jargon), `the prompt says nothing about ${jargon}, so it reads as a request rather than a spec`);
+  }
 });
 
 test('the /why-webjs description answers in the snippet window a SERP actually shows', async () => {