From 725c9119c2baff7630767547274e5715145d9573 Mon Sep 17 00:00:00 2001
From: ightevenmckane187 <214069160+ightevenmckane187@users.noreply.github.com>
Date: Sun, 23 Aug 2026 09:56:21 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20accessible=20cl?=
 =?UTF-8?q?ear=20button=20to=20User=20ID=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add an interactive clear button (`#clear-user-id-btn`) with `aria-label="Clear User ID"` inside the User ID input field.
- Add input wrapper styling with right padding (`padding-right: 28px`) to avoid text overlap.
- Add click listener to clear input value, restore focus, update cURL preview, and toggle button visibility dynamically based on input length.
- Add unit test coverage in `tests/server.test.ts` verifying button rendering and accessibility attributes.
---
 src/server.ts        | 86 ++++++++++++++++++++++++++++++++++++++++----
 tests/server.test.ts |  8 +++++
 2 files changed, 87 insertions(+), 7 deletions(-)

diff --git a/src/server.ts b/src/server.ts
index 6677f37..9943f01 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -136,16 +136,45 @@ export const PRE_RENDERED_STYLES = `
         font-weight: 500;
         margin-bottom: 0.5rem;
     }
+    .input-wrapper {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        max-width: 300px;
+    }
     #user-id-input {
         background: var(--bg-color);
         border: 1px solid var(--border-color);
         color: var(--text-color);
-        padding: 8px 12px;
+        padding: 8px 28px 8px 12px;
         border-radius: 6px;
         font-size: 1rem;
         width: 100%;
-        max-width: 300px;
         transition: border-color 0.2s;
+        box-sizing: border-box;
+    }
+    .clear-btn {
+        position: absolute;
+        right: 6px;
+        top: 50%;
+        transform: translateY(-50%);
+        background: none;
+        border: none;
+        color: var(--text-color);
+        opacity: 0.6;
+        cursor: pointer;
+        padding: 2px 6px;
+        font-size: 0.875rem;
+        border-radius: 50%;
+        display: none;
+        line-height: 1;
+        transition: opacity 0.2s, background-color 0.2s;
+    }
+    .clear-btn:hover { opacity: 1; background: rgba(0, 0, 0, 0.1); }
+    [data-theme='dark'] .clear-btn:hover { background: rgba(255, 255, 255, 0.1); }
+    .clear-btn:focus-visible {
+        outline: 2px solid var(--primary);
+        opacity: 1;
     }
     .theme-icon {
         transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -230,7 +259,6 @@ export const PRE_RENDERED_STYLES = `
     .copy-button.copied .check-icon { display: block; }
     .input-group { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
     .input-group label { font-size: 0.875rem; font-weight: 500; }
-    .input-group input { background: var(--bg-color); border: 1px solid var(--border-color); color: var(--text-color); padding: 8px 12px; border-radius: 6px; font-size: 0.875rem; width: 100%; max-width: 300px; }
     .counter-container { display: flex; justify-content: space-between; max-width: 300px; align-items: baseline; flex-wrap: wrap; gap: 8px; }
     #user-id-counter { font-size: 0.75rem; opacity: 0.7; }
     #user-id-counter.near-limit { color: #d63031; opacity: 1; font-weight: bold; }
@@ -616,16 +644,45 @@ app.get("/", (req: Request, res: Response) => {
                     font-weight: 500;
                     margin-bottom: 0.5rem;
                 }
+                .input-wrapper {
+                    position: relative;
+                    display: inline-block;
+                    width: 100%;
+                    max-width: 300px;
+                }
                 #user-id-input {
                     background: var(--bg-color);
                     border: 1px solid var(--border-color);
                     color: var(--text-color);
-                    padding: 8px 12px;
+                    padding: 8px 28px 8px 12px;
                     border-radius: 6px;
                     font-size: 1rem;
                     width: 100%;
-                    max-width: 300px;
                     transition: border-color 0.2s;
+                    box-sizing: border-box;
+                }
+                .clear-btn {
+                    position: absolute;
+                    right: 6px;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    background: none;
+                    border: none;
+                    color: var(--text-color);
+                    opacity: 0.6;
+                    cursor: pointer;
+                    padding: 2px 6px;
+                    font-size: 0.875rem;
+                    border-radius: 50%;
+                    display: none;
+                    line-height: 1;
+                    transition: opacity 0.2s, background-color 0.2s;
+                }
+                .clear-btn:hover { opacity: 1; background: rgba(0, 0, 0, 0.1); }
+                [data-theme='dark'] .clear-btn:hover { background: rgba(255, 255, 255, 0.1); }
+                .clear-btn:focus-visible {
+                    outline: 2px solid var(--primary);
+                    opacity: 1;
                 }
                 .theme-icon {
                     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -710,7 +767,6 @@ app.get("/", (req: Request, res: Response) => {
                 .copy-button.copied .check-icon { display: block; }
                 .input-group { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
                 .input-group label { font-size: 0.875rem; font-weight: 500; }
-                .input-group input { background: var(--bg-color); border: 1px solid var(--border-color); color: var(--text-color); padding: 8px 12px; border-radius: 6px; font-size: 0.875rem; width: 100%; max-width: 300px; }
                 .counter-container { display: flex; justify-content: space-between; max-width: 300px; align-items: baseline; flex-wrap: wrap; gap: 8px; }
                 #user-id-counter { font-size: 0.75rem; opacity: 0.7; }
                 #user-id-counter.near-limit { color: #d63031; opacity: 1; font-weight: bold; }
@@ -894,7 +950,10 @@ app.get("/", (req: Request, res: Response) => {
                         <label for="user-id-input">Customize your User ID: <kbd aria-hidden="true" class="kb-shortcut">/</kbd></label>
                         <span id="user-id-counter" aria-live="polite">0 of 128 characters used</span>
                     </div>
-                    <input type="text" id="user-id-input" placeholder="demo-user" maxlength="128" spellcheck="false" aria-describedby="user-id-counter" aria-keyshortcuts="/">
+                    <div class="input-wrapper">
+                        <input type="text" id="user-id-input" placeholder="demo-user" maxlength="128" spellcheck="false" aria-describedby="user-id-counter" aria-keyshortcuts="/">
+                        <button type="button" id="clear-user-id-btn" class="clear-btn" aria-label="Clear User ID" title="Clear User ID">✕</button>
+                    </div>
                 </div>
                 <div class="input-row">
                     <button id="create-session-btn" aria-keyshortcuts="s" aria-busy="false">
@@ -995,6 +1054,7 @@ app.get("/", (req: Request, res: Response) => {
                 const curlCommand = document.getElementById('curl-command');
                 const userIdInput = document.getElementById('user-id-input');
                 const userIdCounter = document.getElementById('user-id-counter');
+                const clearUserIdBtn = document.getElementById('clear-user-id-btn');
                 const createSessionBtn = document.getElementById('create-session-btn');
 
                 function updateCurlCommand() {
@@ -1014,6 +1074,18 @@ app.get("/", (req: Request, res: Response) => {
                     } else {
                         userIdCounter.classList.remove('near-limit');
                     }
+
+                    if (clearUserIdBtn) {
+                        clearUserIdBtn.style.display = length > 0 ? 'block' : 'none';
+                    }
+                }
+
+                if (clearUserIdBtn) {
+                    clearUserIdBtn.addEventListener('click', () => {
+                        userIdInput.value = '';
+                        updateCurlCommand();
+                        userIdInput.focus();
+                    });
                 }
 
                 userIdInput.addEventListener('input', updateCurlCommand);
diff --git a/tests/server.test.ts b/tests/server.test.ts
index e13a25e..c795ab6 100644
--- a/tests/server.test.ts
+++ b/tests/server.test.ts
@@ -133,4 +133,12 @@ describe("Server Security and Health", () => {
     expect(response.text).toContain("outline: 3px solid var(--primary);");
     expect(response.text).toContain("outline-offset: 2px;");
   });
+
+  it("should render an accessible clear button for user-id-input", async () => {
+    const response = await request(app).get("/");
+    expect(response.status).toBe(200);
+    expect(response.text).toContain('id="clear-user-id-btn"');
+    expect(response.text).toContain('aria-label="Clear User ID"');
+    expect(response.text).toContain("clearUserIdBtn.addEventListener('click'");
+  });
 });