From 94586e38a4c058240d39ef6632b3728ba4971962 Mon Sep 17 00:00:00 2001
From: OpenClaw Agent <openclawd@cloonar.com>
Date: Mon, 23 Feb 2026 13:04:45 +0000
Subject: [PATCH] Add WCAG 2.1 AA compliant aria-labels to form inputs

- Added aria-label to recoverEmailInput: 'Email address for key recovery'
- Added aria-label to recoverCode: '6-digit verification code'
- Added aria-label to emailChangeApiKey: 'Your API key'
- Added aria-label to emailChangeNewEmail: 'New email address'
- Added aria-label to emailChangeCode: '6-digit verification code for email change'

Fixes accessibility issue where screen readers couldn't announce input purposes in modal dialogs.
---
 public/index.html     | 10 +++++-----
 public/src/index.html | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/public/index.html b/public/index.html
index 95c75d9..0761904 100644
--- a/public/index.html
+++ b/public/index.html
@@ -600,7 +600,7 @@ html, body {
       <h2>Recover your API key</h2>
       <p>Enter the email you signed up with. We'll send a verification code.</p>
       <div class="signup-error" id="recoverError"></div>
-      <input type="email" id="recoverEmailInput" placeholder="your.email@example.com" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:16px;" required>
+      <input type="email" id="recoverEmailInput" aria-label="Email address for key recovery" placeholder="your.email@example.com" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:16px;" required>
       <button class="btn btn-primary" style="width:100%" id="recoverBtn">Send Verification Code →</button>
       <p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">Your key will be shown here after verification — never sent via email</p>
     </div>
@@ -614,7 +614,7 @@ html, body {
       <h2>Enter verification code</h2>
       <p>We sent a 6-digit code to <strong id="recoverEmailDisplay"></strong></p>
       <div class="signup-error" id="recoverVerifyError"></div>
-      <input type="text" id="recoverCode" placeholder="123456" maxlength="6" pattern="[0-9]{6}" inputmode="numeric" style="width:100%;padding:14px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:1.4rem;letter-spacing:0.3em;text-align:center;margin-bottom:16px;font-family:monospace;" required>
+      <input type="text" id="recoverCode" aria-label="6-digit verification code" placeholder="123456" maxlength="6" pattern="[0-9]{6}" inputmode="numeric" style="width:100%;padding:14px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:1.4rem;letter-spacing:0.3em;text-align:center;margin-bottom:16px;font-family:monospace;" required>
       <button class="btn btn-primary" style="width:100%" id="recoverVerifyBtn">Verify →</button>
       <p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">Code expires in 15 minutes</p>
     </div>
@@ -644,8 +644,8 @@ html, body {
       <h2>Change your email</h2>
       <p>Enter your API key and new email address.</p>
       <div class="signup-error" id="emailChangeError"></div>
-      <input type="text" id="emailChangeApiKey" placeholder="Your API key (df_free_... or df_pro_...)" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:12px;font-family:monospace;" required>
-      <input type="email" id="emailChangeNewEmail" placeholder="new.email@example.com" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:16px;" required>
+      <input type="text" id="emailChangeApiKey" aria-label="Your API key" placeholder="Your API key (df_free_... or df_pro_...)" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:12px;font-family:monospace;" required>
+      <input type="email" id="emailChangeNewEmail" aria-label="New email address" placeholder="new.email@example.com" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:16px;" required>
       <button class="btn btn-primary" style="width:100%" id="emailChangeBtn">Send Verification Code →</button>
       <p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">A verification code will be sent to your new email</p>
     </div>
@@ -659,7 +659,7 @@ html, body {
       <h2>Enter verification code</h2>
       <p>We sent a 6-digit code to <strong id="emailChangeEmailDisplay"></strong></p>
       <div class="signup-error" id="emailChangeVerifyError"></div>
-      <input type="text" id="emailChangeCode" placeholder="123456" maxlength="6" pattern="[0-9]{6}" inputmode="numeric" style="width:100%;padding:14px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:1.4rem;letter-spacing:0.3em;text-align:center;margin-bottom:16px;font-family:monospace;" required>
+      <input type="text" id="emailChangeCode" aria-label="6-digit verification code for email change" placeholder="123456" maxlength="6" pattern="[0-9]{6}" inputmode="numeric" style="width:100%;padding:14px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:1.4rem;letter-spacing:0.3em;text-align:center;margin-bottom:16px;font-family:monospace;" required>
       <button class="btn btn-primary" style="width:100%" id="emailChangeVerifyBtn">Verify →</button>
       <p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">Code expires in 15 minutes</p>
     </div>
diff --git a/public/src/index.html b/public/src/index.html
index 95c75d9..0761904 100644
--- a/public/src/index.html
+++ b/public/src/index.html
@@ -600,7 +600,7 @@ html, body {
       <h2>Recover your API key</h2>
       <p>Enter the email you signed up with. We'll send a verification code.</p>
       <div class="signup-error" id="recoverError"></div>
-      <input type="email" id="recoverEmailInput" placeholder="your.email@example.com" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:16px;" required>
+      <input type="email" id="recoverEmailInput" aria-label="Email address for key recovery" placeholder="your.email@example.com" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:16px;" required>
       <button class="btn btn-primary" style="width:100%" id="recoverBtn">Send Verification Code →</button>
       <p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">Your key will be shown here after verification — never sent via email</p>
     </div>
@@ -614,7 +614,7 @@ html, body {
       <h2>Enter verification code</h2>
       <p>We sent a 6-digit code to <strong id="recoverEmailDisplay"></strong></p>
       <div class="signup-error" id="recoverVerifyError"></div>
-      <input type="text" id="recoverCode" placeholder="123456" maxlength="6" pattern="[0-9]{6}" inputmode="numeric" style="width:100%;padding:14px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:1.4rem;letter-spacing:0.3em;text-align:center;margin-bottom:16px;font-family:monospace;" required>
+      <input type="text" id="recoverCode" aria-label="6-digit verification code" placeholder="123456" maxlength="6" pattern="[0-9]{6}" inputmode="numeric" style="width:100%;padding:14px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:1.4rem;letter-spacing:0.3em;text-align:center;margin-bottom:16px;font-family:monospace;" required>
       <button class="btn btn-primary" style="width:100%" id="recoverVerifyBtn">Verify →</button>
       <p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">Code expires in 15 minutes</p>
     </div>
@@ -644,8 +644,8 @@ html, body {
       <h2>Change your email</h2>
       <p>Enter your API key and new email address.</p>
       <div class="signup-error" id="emailChangeError"></div>
-      <input type="text" id="emailChangeApiKey" placeholder="Your API key (df_free_... or df_pro_...)" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:12px;font-family:monospace;" required>
-      <input type="email" id="emailChangeNewEmail" placeholder="new.email@example.com" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:16px;" required>
+      <input type="text" id="emailChangeApiKey" aria-label="Your API key" placeholder="Your API key (df_free_... or df_pro_...)" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:12px;font-family:monospace;" required>
+      <input type="email" id="emailChangeNewEmail" aria-label="New email address" placeholder="new.email@example.com" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:16px;" required>
       <button class="btn btn-primary" style="width:100%" id="emailChangeBtn">Send Verification Code →</button>
       <p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">A verification code will be sent to your new email</p>
     </div>
@@ -659,7 +659,7 @@ html, body {
       <h2>Enter verification code</h2>
       <p>We sent a 6-digit code to <strong id="emailChangeEmailDisplay"></strong></p>
       <div class="signup-error" id="emailChangeVerifyError"></div>
-      <input type="text" id="emailChangeCode" placeholder="123456" maxlength="6" pattern="[0-9]{6}" inputmode="numeric" style="width:100%;padding:14px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:1.4rem;letter-spacing:0.3em;text-align:center;margin-bottom:16px;font-family:monospace;" required>
+      <input type="text" id="emailChangeCode" aria-label="6-digit verification code for email change" placeholder="123456" maxlength="6" pattern="[0-9]{6}" inputmode="numeric" style="width:100%;padding:14px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:1.4rem;letter-spacing:0.3em;text-align:center;margin-bottom:16px;font-family:monospace;" required>
       <button class="btn btn-primary" style="width:100%" id="emailChangeVerifyBtn">Verify →</button>
       <p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">Code expires in 15 minutes</p>
     </div>