iter(g85): 进度条补可访问名与语义色

This commit is contained in:
HIsheR
2026-10-26 13:03:43 +08:00
parent b2beb43736
commit bd64e437b1
8 changed files with 68 additions and 32 deletions
+8
View File
@@ -1036,6 +1036,14 @@
"acceptance": "width 为数字的列在表头右缘出现手柄:拖动实时改对应 <col> 宽度(下限 56px,拖出表头仍跟手),聚焦手柄后 ← → 每次 ±8px,双击复位到声明宽度;拖拽/双击不触发排序;拖拽期间全局禁选文本;样式走令牌且有 reduced-motion 兜底;dataTable ≤ 200 行;npm run check 全绿",
"notes": "自补:可用性;拖拽与键盘共用 apply 单一写宽入口,逻辑拆到 columnResize.ts 免撑大 dataTable",
"status": "done"
},
{
"id": "g85",
"title": "进度条补可访问名与语义色",
"motivation": "定量态只有 aria-valuenow,没有名称——读屏只念「50%」,不知道是什么在 50%;且除 accent/success 外没有失败告警色,同步失败也只能显示成一片蓝",
"acceptance": "新增 label(可访问名,不确定态缺省「进行中」兜底)与 variant(default/success/warning/danger);语义色规则置于 .ua-done 之后同特异性胜出,满格不回退 success;样式只消费 --ua-* 令牌;文档 props/steps 与演示同步;npm run check 全绿",
"notes": "自补:无障碍 + 视觉语义;CSS 层用特异性解决 variant 与满格 success 的冲突,不加 JS 分支",
"status": "open"
}
]
}
+16 -10
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-26T05:00:45.858Z",
"generatedAt": "2026-10-26T05:03:25.043Z",
"repoRoot": ".",
"packages": [
{
@@ -1252,23 +1252,29 @@
{
"n": "value",
"t": "Signal<number>",
"d": "当前进度 0-100 信号,变化自动平滑过渡(越界钳制)"
"d": "当前进度 0-100 的信号;不传即不确定态(未知时长的加载)"
},
{
"n": "showText",
"t": "boolean",
"d": "是否显示百分比文字;缺省 true",
"df": "true"
"d": "是否右侧显示百分比;缺省 true(不确定态忽略)"
},
{
"n": "label",
"t": "string",
"d": "可访问名,如「上传进度」;缺省不确定态念「进行中」"
},
{
"n": "variant",
"t": "'default' | 'success' | 'warning' | 'danger'",
"d": "填充语义色;缺省 default(满格自动切 success)"
}
],
"example": "const pct = signal(0); progress({ value: pct }); setInterval(() => pct((pct() + 5) % 105), 400)",
"steps": [
"时长未知的加载直接 progress() 不传 value:填充块匀速往复,不显示百分比,读屏读作进行中",
"创建数值信号 pct = signal(0),范围 0-100(越界自动钳制)",
"传入 value,填充宽度与百分比文字随信号平滑过渡",
"进行中填充带流动条纹,到 100% 自动变 success 色并停止条纹",
"不需要百分比文字时传 showText: false",
"定量进度用 value 信号:满格自动切 success 色并停止条纹,role=progressbar + aria-valuenow 同步"
"传 value 信号给定量进度,不传则退化为往复的不确定态",
"label 写清这是什么进度,读屏会把名称与百分比一起念出来",
"失败或告警用 variant: 'danger' / 'warning',该颜色在满格时也不被 success 覆盖"
]
},
{