fix(website): restore the claims the trim broke and cover the demo grid

The previous commit traded accuracy for grid height and lost. Trimming
the what-is-webjs card cut the two phrases that were carrying it: without
'with JSDoc in node_modules' the framework claim is flatly false, since
core resolves its default entry to dist/webjs-core.js, and without 'read
from one source' the AGENTS.md sentence claims five tools read a file
three of them do not. Both phrases are back, and the length is won by
dropping a convention detail instead.

The demo grid was also entirely unasserted, so it could have been
deleted with every test in the file still green. It now pins both panels,
their correspondence, and the accessible name each block carries, plus a
snippet-window assertion mirroring the one on the sibling page.

The role=region fix goes site-wide rather than stopping at one page: the
prohibited-name construct was on ten more blocks. The one block that is
not focusable loses its name instead of gaining a role, since nothing can
focus it to hear one.

Author: vivek7405

website/app/page.ts

@@ -103,7 +103,7 @@ function codeWindow(title: string, sample: string) {
   return html`
     <figure class=${WIN}>
       <figcaption class=${WINBAR}>${DOTS}<span class=${WINNAME}>${title}</span></figcaption>
-      <pre class="scroll-thin m-0 p-4 overflow-x-auto font-mono text-sm leading-[1.7] [tab-size:2] flex-1" tabindex="0" aria-label=${title + ' code sample'}><code>${highlight(sample)}</code></pre>
+      <pre class="scroll-thin m-0 p-4 overflow-x-auto font-mono text-sm leading-[1.7] [tab-size:2] flex-1" role="region" tabindex="0" aria-label=${title + ' code sample'}><code>${highlight(sample)}</code></pre>
     </figure>
   `;
 }
@@ -216,7 +216,7 @@ export default function LandingPage() {
         <div class="hero-stage max-w-5xl mx-auto grid grid-cols-1 wide:grid-cols-2 rounded-2xl overflow-hidden border border-border-strong bg-bg-sunken shadow-[var(--shadow)]">
           <div class="min-w-0 border-b wide:border-b-0 wide:border-r border-border bg-bg-subtle">
             <div class=${WINBAR}>${DOTS}<span class=${WINNAME}>components/like-button.ts</span></div>
-            <pre class="scroll-thin m-0 p-5 overflow-x-auto font-mono text-xs leading-[1.72] [tab-size:2] text-left" tabindex="0" aria-label="like-button component source"><code>${highlight(HERO_SAMPLE)}</code></pre>
+            <pre class="scroll-thin m-0 p-5 overflow-x-auto font-mono text-xs leading-[1.72] [tab-size:2] text-left" role="region" tabindex="0" aria-label="like-button component source"><code>${highlight(HERO_SAMPLE)}</code></pre>
           </div>
           <div class="group/stage flex flex-col min-w-0 bg-bg">
             <input type="checkbox" id="stage-usage" class="sr-only peer" />
@@ -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" 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>
@@ -384,7 +384,7 @@ export default function LandingPage() {
             <span class="text-xs font-medium leading-none text-accent">Full-stack</span>
             <h3 class="font-display font-bold text-lg leading-[1.25] m-0">Pages + API + components</h3>
             <p class="m-0 text-sm leading-[1.6] text-fg-muted">SSR pages, web components, server actions, Drizzle, streaming, and a browsable feature gallery. Auth (login, sessions, a protected route) ships as a gallery card. The default.</p>
-            <pre class="scroll-thin m-0 px-3.5 py-3 overflow-x-auto rounded-lg border border-border bg-bg-subtle font-mono text-xs leading-[1.6] text-fg-muted" tabindex="0" aria-label="Example files">app/page.ts
+            <pre class="scroll-thin m-0 px-3.5 py-3 overflow-x-auto rounded-lg border border-border bg-bg-subtle font-mono text-xs leading-[1.6] text-fg-muted" role="region" tabindex="0" aria-label="Example files">app/page.ts
 components/counter.ts
 actions/posts.server.ts</pre>
             <div class="cmd-foot pt-2 mt-auto font-mono text-xs leading-[1.6] text-fg-muted max-w-full min-w-0"><copy-cmd>npm create webjs@latest my-app</copy-cmd></div>
@@ -393,7 +393,7 @@ actions/posts.server.ts</pre>
             <span class="text-xs font-medium leading-none text-accent">Backend (API)</span>
             <h3 class="font-display font-bold text-lg leading-[1.25] m-0">Route handlers + Database</h3>
             <p class="m-0 text-sm leading-[1.6] text-fg-muted">A backend-only app, no UI or SSR. File-based route handlers, modules, middleware, rate limiting, WebSockets, a database, and a backend-features gallery.</p>
-            <pre class="scroll-thin m-0 px-3.5 py-3 overflow-x-auto rounded-lg border border-border bg-bg-subtle font-mono text-xs leading-[1.6] text-fg-muted" tabindex="0" aria-label="Example files">app/api/users/route.ts
+            <pre class="scroll-thin m-0 px-3.5 py-3 overflow-x-auto rounded-lg border border-border bg-bg-subtle font-mono text-xs leading-[1.6] text-fg-muted" role="region" tabindex="0" aria-label="Example files">app/api/users/route.ts
 app/api/chat/route.ts
 middleware.ts</pre>
             <div class="cmd-foot pt-2 mt-auto font-mono text-xs leading-[1.6] text-fg-muted max-w-full min-w-0"><copy-cmd>npm create webjs@latest my-api -- --template api</copy-cmd></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, one server function per file, and an explicit .server.ts boundary keep the context small, so an agent edits one route without reading the whole app, and a request written in ordinary words still lands in the right shape. Every app ships one AGENTS.md contract that Claude Code, Cursor, Copilot, Gemini, and opencode all read, and the framework is plain JavaScript rather than a compiled bundle.',
+    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',
@@ -207,7 +207,7 @@ function codeWindow(title: string, sample: string, label: string) {
   return html`
     <figure class=${WIN}>
       <figcaption class=${WINBAR}>${DOTS}<span class=${WINNAME}>${title}</span></figcaption>
-      <pre class="scroll-thin m-0 p-4 overflow-x-auto font-mono text-sm leading-[1.7] [tab-size:2] flex-1" tabindex="0" aria-label=${label}><code>${highlight(sample)}</code></pre>
+      <pre class="scroll-thin m-0 p-4 overflow-x-auto font-mono text-sm leading-[1.7] [tab-size:2] flex-1" role="region" tabindex="0" aria-label=${label}><code>${highlight(sample)}</code></pre>
     </figure>
   `;
 }

website/app/why-webjs/page.ts

@@ -24,7 +24,7 @@ export function generateMetadata(ctx: { url: string }) {
   const image = `${origin}/public/og-why.png`;
   const title = 'Why WebJs - The Framework Your AI Agent Already Understands';
   const description =
-    'WebJs is a full-stack JavaScript framework you can describe in plain language, because the file conventions land an app in the right shape whatever model you use. Nothing is hidden behind a build step, so any AI model reads the framework source from node_modules, reasons about the whole stack, and debugs it. No training data required, no single blessed model, on the web components and HTML every model already knows.';
+    'WebJs is a full-stack JavaScript framework you describe in plain language, because the file conventions land an app in the right shape whatever model you use. Nothing is hidden behind a build step, so any AI model reads the framework source from node_modules, reasons about the whole stack, and debugs it. No training data required, no single blessed model, on the web components and HTML every model already knows.';
   return {
     title,
     description,
@@ -200,7 +200,7 @@ Counter.register('counter');
               <pre class="scroll-thin m-0 p-4 overflow-x-auto font-mono text-sm leading-[1.7] [tab-size:2] flex-1" role="region" tabindex="0" aria-label="The files a WebJs app grows for that request"><code>app/book/page.ts
 <span class="text-fg-subtle">  the page, server-rendered to real HTML</span>
 app/staff/bookings/page.ts
-<span class="text-fg-subtle">  the list, behind the session check</span>
+<span class="text-fg-subtle">  the staff view, its own route</span>
 modules/bookings/actions/create.server.ts
 <span class="text-fg-subtle">  the write, server-side by extension</span>
 db/schema.server.ts

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

@@ -35,6 +35,35 @@ test('the pitch page makes the plain-language prompt and cross-model quality arg
   assert.ok(out.includes('quality of what comes back'), 'ties model-agnosticism to output quality, not just to whether a model works');
 });
 
+test('the plain-language section pairs a prompt against the files the conventions produce', async () => {
+  // The prose above the demo carries the argument, but the two windows are what
+  // SHOW it, and they were previously unasserted: the whole grid could be
+  // deleted with every test in this file still green. These pin both panels,
+  // 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');
+  assert.ok(!/> Build a page/.test(out), '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');
+});
+
+test('the /why-webjs description answers in the snippet window a SERP actually shows', async () => {
+  // Mirrors the assertion on /what-is-webjs. The claim this page leads with is
+  // only worth adding if it survives truncation, and nothing pinned that here.
+  const { description } = generateMetadata({ url: 'https://webjs.dev/why-webjs' });
+  const firstSentence = description.slice(0, description.indexOf('. ') + 1);
+  assert.ok(firstSentence.length <= 160, `first sentence is ${firstSentence.length} chars, over the 160-char snippet window`);
+  assert.ok(firstSentence.includes('plain language'), 'the plain-language claim is inside the snippet window, not past it');
+});
+
 test('why metadata is self-consistent and points at the dedicated /why-webjs social card', () => {
   const m = generateMetadata({ url: 'https://webjs.dev/why-webjs' });
   assert.equal(m.openGraph.title, m.title, 'og:title matches the <title>');