From 2569737ad5b0eae61602cd0858bbb56296c28d3f Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 24 May 2026 05:24:41 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20explicit=20ARIA?=
 =?UTF-8?q?=20labels=20and=20visual=20focus=20states=20to=20playground=20f?=
 =?UTF-8?q?orm=20controls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 7af9e36b..d5f853f7 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`.
+## 2025-05-24 - Form controls nested in generic wrapper components need ARIA labels
+**Learning:** Custom UI wrappers like `<Control>` and `<Panel>` that rely exclusively on passing child inputs rather than using `htmlFor` and `id` cause interactive elements to be orphaned from a screen reader perspective, requiring explicit `aria-label` attributes directly on the child `select`, `input`, or `textarea`.
+**Action:** Always verify elements nested inside `<Control>` and `<Panel>` have explicit `aria-label` attributes to ensure screen reader accessibility, alongside restoring keyboard focus states.
diff --git a/apps/quill/client/components/playground-view.tsx b/apps/quill/client/components/playground-view.tsx
index 511226b4..fb47162c 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="Select guide"
+            className="pp-select focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--strand-color-accent-lede)] focus:outline-none"
             onChange={(e) => setGuideSlug(e.target.value)}
             value={guideSlug}
           >
@@ -309,7 +310,8 @@ export function PlaygroundView({
 
         <Control label="Preset">
           <select
-            className="pp-select"
+            aria-label="Select preset"
+            className="pp-select focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--strand-color-accent-lede)] focus:outline-none"
             onChange={(e) => setPresetSlug(e.target.value as UseCase | "")}
             value={presetSlug}
           >
@@ -326,7 +328,8 @@ export function PlaygroundView({
 
         <Control label={`Temperature · ${temperature.toFixed(1)}`}>
           <input
-            className="w-full"
+            aria-label="Temperature"
+            className="w-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--strand-color-accent-lede)] focus:outline-none"
             max="1"
             min="0"
             onChange={(e) => setTemperature(Number.parseFloat(e.target.value))}
@@ -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 text"
+            className="min-h-[220px] w-full resize-y bg-transparent text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--strand-color-accent-lede)] focus:outline-none"
             onChange={(e) => setInput(e.target.value)}
             placeholder="Paste a customer message, a prompt, a paragraph to rewrite…"
             style={{ color: "var(--strand-color-ink-primary)" }}