优化 2026 前端无障碍与响应式体验

完善 2026 主题的移动端与桌面端交互体验,修复多项可访问性和信息展示问题。

- 允许浏览器缩放,补充焦点样式、按钮名称、表单标签和对话框键盘焦点管理\n- 支持 reduced-motion,扩大公共页、后台导航、记录列表和分页控件的触控区域\n- 优化系统设置分区导航、密码显示、字段语义和底部粘性保存栏\n- 压缩移动文件列表操作区,改善桌面表格滚动可达性和统计值截断\n- 优化仪表盘指标、趋势摘要、进度条语义及中英文文案
This commit is contained in:
2026-07-21 11:03:13 +08:00
parent 2f020f5d42
commit b60c003ec2
29 changed files with 638 additions and 312 deletions
+5 -2
View File
@@ -12,6 +12,8 @@
id="code"
v-model="code"
type="text"
inputmode="text"
autocomplete="one-time-code"
ref="codeInput"
class="w-full px-4 py-3 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 pr-10"
:class="[
@@ -21,6 +23,7 @@
]"
:placeholder="t('retrieve.codeInput.placeholder')"
required
:aria-invalid="error"
:readonly="inputStatus.readonly"
maxlength="5"
@focus="isInputFocused = true"
@@ -42,8 +45,8 @@
</div>
<button
type="submit"
class="w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold py-3 px-4 rounded-lg hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105 hover:shadow-lg relative overflow-hidden group"
:disabled="inputStatus.loading"
class="group relative w-full overflow-hidden rounded-lg bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 px-4 py-3 font-bold text-white transition duration-300 hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:opacity-50 motion-safe:hover:scale-[1.02] disabled:hover:scale-100"
:disabled="inputStatus.loading || code.trim().length !== 5"
>
<span class="flex items-center justify-center relative z-10">
<span>{{ inputStatus.loading ? t('common.loading') : t('retrieve.submit') }}</span>