From 478787ce91723e5efe2ccab158d215dfbcc3b7b8 Mon Sep 17 00:00:00 2001
From: argszero <argszero@argszerodeMac-mini.local>
Date: Sat, 12 Sep 2026 02:41:08 +0800
Subject: [PATCH] fix(ui): translate aria-label attributes and repair the
 search-clear tooltips
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`applyStatic()` rewrites exactly three hooks - `[data-i18n]` (text),
`[data-i18n-ph]` (placeholder) and `[data-i18n-title]` (title). There was no
hook for `aria-label`, so the nine `aria-label` attributes written in the static
markup stayed Chinese in English mode. Because `aria-label` outranks `title`
when the accessible name is computed, an English screen-reader user heard
Chinese while the visible tooltip was English - the two attributes contradicted
each other on the same element.

Add a fourth pass to `applyStatic()`: `[data-i18n-label]` -> `setAttribute(
"aria-label", t(key))`, mirroring the existing title pass, and tag the nine
sites. All three keys involved already exist in both packs, so no translations
are added - this was missing wiring, not missing text:

  - `#login-theme-toggle`, `#theme-toggle` -> `theme.toggle.title`
  - six `button.search-clear`             -> `mk.clear`
  - `#help-panel` (role="dialog")         -> `help.title`

While wiring those up, two adjacent defects on the same buttons surfaced and are
fixed here:

  - the clear button inside `#ak-search` carried `data-i18n-title=
    "common.search"`, so its tooltip read "Search" (搜索) on a *clear* button -
    wrong in both languages; its sibling on `#mk-search` correctly uses
    `mk.clear`.
  - four clear buttons (`#emp-search`, `#od-search`, `#model-search`,
    `#ops-search`) had a bare `title="清空搜索"` with no i18n hook at all and
    stayed Chinese in English mode.

Cache-bust bump `?v=20260911-11` -> `?v=20260911-12` (5 references).

Verified in a headless browser against a baseline built by the same generator
(`git archive HEAD ui`), EN and ZH, on two surfaces (login and an authenticated
view), with the pre-existing `[data-i18n-title]` hook kept as a built-in
negative control (CJK-free in EN in the *baseline* too, so the probe demonstrably
sees translations). 24/24 assertions pass:

  - EN aria-label sites still Chinese: 9 -> 0; sites carrying the hook: 0 -> 9
  - EN unhooked Chinese titles: 4 -> 0; hooked title sites: 10 -> 14
  - ZH aria-labels still Chinese (9) - no regression
  - EN values: theme toggles `Toggle light / dark theme`, clear buttons
    `Clear search`, help panel `Shortcuts`; ZH now matches each element's own
    tooltip
  - the mislabel is gone: no `search-clear` aria-label says "Search"

A runtime `I18n.setLang("en")` switch with no reload confirms the baseline keeps
Chinese while its `title` goes English (the contradiction), and the fixed
attributes follow the switch.
---
 ui/index.html | 28 ++++++++++++++--------------
 ui/js/i18n.js | 10 +++++++++-
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 1b58c92..0294015 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>AITokenPool</title>
 <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%234ecdc4'/%3E%3Cstop offset='1' stop-color='%232a9d8f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='14' fill='url(%23g)'/%3E%3Ctext x='32' y='43' font-family='-apple-system,Segoe UI,Arial,sans-serif' font-size='30' font-weight='800' text-anchor='middle' fill='%23062021'%3EAT%3C/text%3E%3C/svg%3E">
-<link rel="stylesheet" href="css/style.css?v=20260911-11">
+<link rel="stylesheet" href="css/style.css?v=20260911-12">
 </head>
 <body>
 
 <!-- ======================= 登录页（rant 2026-09-11T16:23:43：左右分栏 + 品牌叙事 + 端点卡片） ======================= -->
 <div id="login-view" class="login-view">
-  <button type="button" class="icon-btn login-theme" id="login-theme-toggle" data-i18n-title="theme.toggle.title" title="切换亮色 / 深色主题" aria-label="切换主题">
+  <button type="button" class="icon-btn login-theme" id="login-theme-toggle" data-i18n-label="theme.toggle.title" data-i18n-title="theme.toggle.title" title="切换亮色 / 深色主题" aria-label="切换主题">
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="ico-sun" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="ico-moon" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
   </button>
@@ -154,7 +154,7 @@ <h2 id="auth-title" data-i18n="login.title">进入平台</h2>
           <strong id="side-name"></strong>
           <span><span data-i18n="common.balance">点数余额</span> <b id="side-balance">0</b></span>
         </div>
-        <button type="button" class="theme-toggle" id="theme-toggle" data-i18n-title="theme.toggle.title" title="切换亮色 / 深色主题" aria-label="切换主题">
+        <button type="button" class="theme-toggle" id="theme-toggle" data-i18n-label="theme.toggle.title" data-i18n-title="theme.toggle.title" title="切换亮色 / 深色主题" aria-label="切换主题">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="ico-sun" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="ico-moon" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
         </button>
@@ -220,7 +220,7 @@ <h2 data-i18n="view.marketplace">模型市场</h2>
       <div class="toolbar">
         <span class="search">
           <input id="mk-search" class="input" data-i18n-ph="mk.search.ph" placeholder="搜索模型名 / 厂商…">
-          <button type="button" class="search-clear" hidden aria-label="清空搜索" data-i18n-title="mk.clear" title="清空搜索">×</button>
+          <button type="button" class="search-clear" hidden data-i18n-label="mk.clear" aria-label="清空搜索" data-i18n-title="mk.clear" title="清空搜索">×</button>
         </span>
         <select id="mk-provider" class="input">
           <option value="" data-i18n="mk.provider.all">全部厂商</option>
@@ -512,7 +512,7 @@ <h3 data-i18n="settings.apikey">API Key</h3>
         </div>
         <span class="search" style="display:block;margin-bottom:10px">
           <input id="ak-search" class="input" data-i18n-ph="settings.ak.search.ph" placeholder="搜索 key 名字…">
-          <button type="button" class="search-clear" hidden aria-label="清空搜索" data-i18n-title="common.search" title="清空搜索">×</button>
+          <button type="button" class="search-clear" hidden data-i18n-label="mk.clear" aria-label="清空搜索" data-i18n-title="mk.clear" title="清空搜索">×</button>
         </span>
         <div class="table-wrap compact">
           <table class="table">
@@ -593,7 +593,7 @@ <h3 data-i18n="admin.emp.list">成员列表</h3>
             </div>
             <span class="search">
               <input id="emp-search" class="input" data-i18n-ph="admin.emp.search.ph" placeholder="搜索成员 / 部门…">
-              <button type="button" class="search-clear" hidden aria-label="清空搜索" title="清空搜索">×</button>
+              <button type="button" class="search-clear" hidden data-i18n-label="mk.clear" aria-label="清空搜索" data-i18n-title="mk.clear" title="清空搜索">×</button>
             </span>
           </div>
           <div class="table-wrap compact">
@@ -632,7 +632,7 @@ <h3 data-i18n="admin.usage.byDept">按部门用量</h3>
         <div class="toolbar">
           <span class="search">
             <input id="od-search" class="input" data-i18n-ph="admin.org.search.ph" placeholder="搜索部门…">
-            <button type="button" class="search-clear" hidden aria-label="清空搜索" title="清空搜索">×</button>
+            <button type="button" class="search-clear" hidden data-i18n-label="mk.clear" aria-label="清空搜索" data-i18n-title="mk.clear" title="清空搜索">×</button>
           </span>
           <span class="grow"></span>
           <button class="btn btn-primary btn-sm" id="add-dept-btn" data-i18n="admin.org.add">添加部门</button>
@@ -670,7 +670,7 @@ <h3 id="dept-form-title">添加部门</h3>
         <div class="toolbar">
           <span class="search">
             <input id="model-search" class="input" data-i18n-ph="admin.models.search.ph" placeholder="搜索模型…">
-            <button type="button" class="search-clear" hidden aria-label="清空搜索" title="清空搜索">×</button>
+            <button type="button" class="search-clear" hidden data-i18n-label="mk.clear" aria-label="清空搜索" data-i18n-title="mk.clear" title="清空搜索">×</button>
           </span>
           <span class="grow"></span>
           <button class="btn btn-primary btn-sm" id="add-model-btn" data-i18n="admin.models.add">添加模型</button>
@@ -782,7 +782,7 @@ <h3 data-i18n="ops.users.title">用户充值</h3>
             </div>
             <span class="search">
               <input id="ops-search" class="input" data-i18n-ph="ops.users.search.ph" placeholder="搜索用户名 / 邮箱…">
-              <button type="button" class="search-clear" hidden aria-label="清空搜索" title="清空搜索">×</button>
+              <button type="button" class="search-clear" hidden data-i18n-label="mk.clear" aria-label="清空搜索" data-i18n-title="mk.clear" title="清空搜索">×</button>
             </span>
           </div>
           <div class="table-wrap compact">
@@ -799,7 +799,7 @@ <h3 data-i18n="ops.users.title">用户充值</h3>
 </div>
 
 <!-- 快捷键帮助面板（rant 20:39:30 E：行内卡片，非 modal；? / Shift+/ 开合，Esc 关闭） -->
-<div id="help-panel" class="help-panel hidden" role="dialog" aria-label="快捷键帮助">
+<div id="help-panel" class="help-panel hidden" role="dialog" data-i18n-label="help.title" aria-label="快捷键帮助">
   <div class="help-head">
     <strong data-i18n="help.title">快捷键</strong>
     <button type="button" class="help-close" id="help-close" data-i18n-title="help.close.title" title="关闭（Esc）">×</button>
@@ -842,9 +842,9 @@ <h3 id="chat-title">使用模型</h3>
   </div>
 </div>
 
-<script src="js/api.js?v=20260911-11"></script>
-<script src="js/data.js?v=20260911-11"></script>
-<script src="js/i18n.js?v=20260911-11"></script>
-<script src="js/app.js?v=20260911-11"></script>
+<script src="js/api.js?v=20260911-12"></script>
+<script src="js/data.js?v=20260911-12"></script>
+<script src="js/i18n.js?v=20260911-12"></script>
+<script src="js/app.js?v=20260911-12"></script>
 </body>
 </html>
diff --git a/ui/js/i18n.js b/ui/js/i18n.js
index a151dbb..089c1e8 100644
--- a/ui/js/i18n.js
+++ b/ui/js/i18n.js
@@ -1718,7 +1718,8 @@
     return best === -1 ? msg : t(ERR_MAP[best][1]);
   }
 
-  // 静态文案批量替换：[data-i18n] 文本 + [data-i18n-ph] placeholder + [data-i18n-title] title
+  // 静态文案批量替换：[data-i18n] 文本 + [data-i18n-ph] placeholder
+  // + [data-i18n-title] title + [data-i18n-label] aria-label
   function applyStatic() {
     var i, els, key;
     els = document.querySelectorAll("[data-i18n]");
@@ -1736,6 +1737,13 @@
       key = els[i].getAttribute("data-i18n-title");
       if (key && ZH[key]) els[i].setAttribute("title", t(key));
     }
+    // aria-label 是无障碍名的主来源（优先级高于 title），必须与 title 同步语言，
+    // 否则英文模式下屏幕阅读器读到的仍是中文
+    els = document.querySelectorAll("[data-i18n-label]");
+    for (i = 0; i < els.length; i++) {
+      key = els[i].getAttribute("data-i18n-label");
+      if (key && ZH[key]) els[i].setAttribute("aria-label", t(key));
+    }
     if (document.documentElement) document.documentElement.setAttribute("lang", current === "en" ? "en" : "zh-CN");
   }