✨ 优化 2026 前端无障碍与响应式体验
完善 2026 主题的移动端与桌面端交互体验,修复多项可访问性和信息展示问题。 - 允许浏览器缩放,补充焦点样式、按钮名称、表单标签和对话框键盘焦点管理\n- 支持 reduced-motion,扩大公共页、后台导航、记录列表和分页控件的触控区域\n- 优化系统设置分区导航、密码显示、字段语义和底部粘性保存栏\n- 压缩移动文件列表操作区,改善桌面表格滚动可达性和统计值截断\n- 优化仪表盘指标、趋势摘要、进度条语义及中英文文案
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user