From 2f3f5e82972ffc2e29621404ccc6b1dd55f395b6 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 26 May 2026 05:36:33 +0000
Subject: [PATCH] feat: add ARIA labels and focus rings to playground inputs

Co-authored-by: aloewright <3641844+aloewright@users.noreply.github.com>
---
 apps/quill/client/components/playground-view.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/quill/client/components/playground-view.tsx b/apps/quill/client/components/playground-view.tsx
index 511226b4..bd61d887 100644
--- a/apps/quill/client/components/playground-view.tsx
+++ b/apps/quill/client/components/playground-view.tsx
@@ -295,7 +295,8 @@ export function PlaygroundView({
       <div className="mb-6 grid gap-3 md:grid-cols-3">
         <Control label="Guide">
           <select
-            className="pp-select"
+            aria-label="Guide"
+            className="pp-select focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--strand-color-accent-lede)]"
             onChange={(e) => setGuideSlug(e.target.value)}
             value={guideSlug}
           >
@@ -309,7 +310,8 @@ export function PlaygroundView({
 
         <Control label="Preset">
           <select
-            className="pp-select"
+            aria-label="Preset"
+            className="pp-select focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--strand-color-accent-lede)]"
             onChange={(e) => setPresetSlug(e.target.value as UseCase | "")}
             value={presetSlug}
           >
@@ -326,6 +328,7 @@ export function PlaygroundView({
 
         <Control label={`Temperature · ${temperature.toFixed(1)}`}>
           <input
+            aria-label="Temperature"
             className="w-full"
             max="1"
             min="0"
@@ -341,7 +344,8 @@ export function PlaygroundView({
       <div className="grid gap-5 md:grid-cols-2">
         <Panel label="Input">
           <textarea
-            className="min-h-[220px] w-full resize-y bg-transparent text-sm focus:outline-none"
+            aria-label="Input"
+            className="min-h-[220px] w-full resize-y bg-transparent text-sm focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--strand-color-accent-lede)]"
             onChange={(e) => setInput(e.target.value)}
             placeholder="Paste a customer message, a prompt, a paragraph to rewrite…"
             style={{ color: "var(--strand-color-ink-primary)" }}
@@ -362,6 +366,7 @@ export function PlaygroundView({
                     style={{ color: "var(--strand-color-ink-muted)" }}
                   >
                     <input
+                      aria-label="Extra pass (slower)"
                       checked={humanizeExtraPass}
                       disabled={isRunning}
                       onChange={(e) => setHumanizeExtraPass(e.target.checked)}
@@ -719,6 +724,7 @@ function HumanizeToggle({
       }}
     >
       <input
+        aria-label="Humanize output"
         checked={on}
         disabled={disabled || !authenticated}
         onChange={onToggle}