Test landing-page demo interactions and accessibility

package.json

@@ -81,6 +81,7 @@
     "lint": "tsc --noEmit && eslint ."
   },
   "devDependencies": {
+    "@axe-core/playwright": "4.12.1",
     "@playwright/test": "1.62.0",
     "@tailwindcss/postcss": "4.2.1",
     "@types/node": "22.19.19",

site/demo-controller.js

@@ -23,9 +23,15 @@ export function focusLoopTarget(activeIndex, lastIndex, shiftKey) {
 export function shouldHandleFileArrow({
   pickerIsOpen,
   targetAcceptsText,
+  targetHandlesArrow,
   demoHasFocus,
 }) {
-  return !pickerIsOpen && !targetAcceptsText && demoHasFocus;
+  return (
+    !pickerIsOpen &&
+    !targetAcceptsText &&
+    !targetHandlesArrow &&
+    demoHasFocus
+  );
 }
 
 export function swipeDirection(distance, threshold = 48) {

site/index.html

@@ -201,7 +201,12 @@ <h1 id="hero-title">
                   <h1 data-demo-heading-path></h1>
                 </div>
               </header>
-              <div class="demo-diff-scroll">
+              <div
+                class="demo-diff-scroll"
+                role="region"
+                aria-label="Scrollable unified diff"
+                tabindex="0"
+              >
                 <div
                   class="demo-diff-lines"
                   data-demo-diff
@@ -216,7 +221,12 @@ <h1 data-demo-heading-path></h1>
             </section>
 
             <aside class="demo-summary-pane" aria-label="Agent note">
-              <div class="demo-summary-scroll">
+              <div
+                class="demo-summary-scroll"
+                role="region"
+                aria-label="Scrollable agent note"
+                tabindex="0"
+              >
                 <div class="demo-summary-kicker">
                   <span>Agent note</span>
                   <span data-demo-summary-count>01 / 10</span>

site/script.js

@@ -21,6 +21,7 @@ copyButton?.addEventListener("click", async () => {
     copyButton.textContent = "Copied";
     copyStatus.textContent = "Command copied";
   } catch {
+    copyButton.textContent = "Copy";
     copyStatus.textContent = "Copy failed. Select the command and copy it.";
   }
 
@@ -29,6 +30,7 @@ copyButton?.addEventListener("click", async () => {
   statusTimer = setTimeout(() => {
     copyStatus.classList.remove("is-visible");
     copyButton.textContent = "Copy";
+    copyStatus.textContent = "";
   }, 2200);
 });
 
@@ -358,6 +360,11 @@ if (demo) {
       !shouldHandleFileArrow({
         pickerIsOpen,
         targetAcceptsText,
+        targetHandlesArrow: Boolean(
+          event.target.closest(
+            ".demo-diff-scroll, .demo-summary-scroll",
+          ),
+        ),
         demoHasFocus: demo.contains(document.activeElement),
       })
     ) {
@@ -374,7 +381,11 @@ if (demo) {
   });
 
   elements.page.addEventListener("click", (event) => {
-    if (!event.target.closest("button, a, input")) {
+    if (
+      !event.target.closest(
+        "button, a, input, .demo-diff-scroll, .demo-summary-scroll",
+      )
+    ) {
       demo.focus({ preventScroll: true });
     }
   });

site/styles.css

@@ -20,6 +20,7 @@
   --paper-deep: #f1ebdf;
   --ink: #20231f;
   --muted: #73766d;
+  --muted-strong: #62645e;
   --quiet: #aaa99f;
   --line: #d8d1c4;
   --line-dark: #333831;
@@ -454,6 +455,12 @@ code {
   scrollbar-width: thin;
 }
 
+.demo-diff-scroll:focus-visible,
+.demo-summary-scroll:focus-visible {
+  outline: 2px solid var(--blue);
+  outline-offset: -2px;
+}
+
 .demo-diff-lines {
   font: 450 11.5px/1.6 "Geist Mono", monospace;
   min-width: max-content;
@@ -473,7 +480,7 @@ code {
 }
 
 .demo-diff-row--meta {
-  color: #8f8e86;
+  color: var(--muted-strong);
 }
 
 .demo-diff-row--hunk {
@@ -545,7 +552,7 @@ code {
 .demo-diff-footer {
   align-items: center;
   border-top: 1px solid var(--line);
-  color: var(--muted);
+  color: var(--muted-strong);
   display: flex;
   font: 500 9px/1 "Geist Mono", monospace;
   justify-content: space-between;
@@ -767,6 +774,10 @@ code {
   padding: 0 3px;
 }
 
+.demo-picker-search:focus-within {
+  box-shadow: inset 0 0 0 2px var(--blue);
+}
+
 .demo-picker-search > span {
   font-size: 22px;
 }
@@ -782,12 +793,17 @@ code {
   width: 100%;
 }
 
+.demo-picker-search input:focus-visible {
+  outline: 2px solid var(--blue);
+  outline-offset: 2px;
+}
+
 .demo-picker-search input::placeholder {
   color: #a6a49b;
 }
 
 .demo-picker-search small {
-  color: var(--muted);
+  color: var(--muted-strong);
   font: 500 9px/1 "Geist Mono", monospace;
 }
 
@@ -822,7 +838,7 @@ code {
 }
 
 .demo-picker-row-index {
-  color: var(--quiet);
+  color: var(--muted-strong);
   font: 500 9px/1 "Geist Mono", monospace;
 }