From 352ec251cb067d86b239ec4b0ba8f3178ad1821a Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 25 May 2026 05:30:11 +0000
Subject: [PATCH] chore: add a11y focus state and label to playground textarea

Co-authored-by: aloewright <3641844+aloewright@users.noreply.github.com>
---
 .Jules/palette.md                                | 3 +++
 apps/quill/client/components/playground-view.tsx | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 7af9e36b..cb9bcc91 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -1,3 +1,6 @@
 ## 2025-03-05 - Form controls missing focus indicators and ARIA labels
 **Learning:** Found that custom search inputs and select dropdowns were using `focus:outline-none` but missing visual focus states, impairing keyboard accessibility. Additionally, they were missing explicit ARIA labels.
 **Action:** Always ensure any interactive control using `focus:outline-none` has a corresponding `focus-visible:` ring state added (using standard `focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--strand-color-accent-lede)]`), and verify inputs have `aria-label` or related `aria-labelledby`.
+## 2026-05-25 - Missing ARIA Labels on Textareas with Custom Outlines
+**Learning:** Interactive textareas using `focus:outline-none` in custom panels lack proper accessibility indicators and labels.
+**Action:** Ensure such elements are decorated with explicit `aria-label`s and standard focus visible rings (like `focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--strand-color-accent-lede)]`).
diff --git a/apps/quill/client/components/playground-view.tsx b/apps/quill/client/components/playground-view.tsx
index 511226b4..8a967214 100644
--- a/apps/quill/client/components/playground-view.tsx
+++ b/apps/quill/client/components/playground-view.tsx
@@ -341,7 +341,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 text"
+            className="min-h-[220px] w-full resize-y rounded-md 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)" }}