iter(g267): 补 Windows 强制色高对比兜底

This commit is contained in:
HIsheR
2026-10-26 22:51:23 +08:00
parent a7b34894ed
commit cf44880df7
2 changed files with 57 additions and 0 deletions
+1
View File
@@ -25,6 +25,7 @@ accordion · affix · alert · anchor · autoComplete · avatar · avatarGroup
- 对比度:令牌层 18 组「前景色 × 底色」在亮 / 暗 × 常规 / 高对比四套主题下都不低于 WCAG 阈值(正文 7、常规 4.5、禁用 2.6、焦点描边等非文本 3),`npm run audit:contrast` 是这条约定的门禁;系统开启「提高对比度」时边框与弱文字自动加深一档
- 键盘焦点:所有库内元素统一 `outline: 2px solid var(--ua-color-accent)`(focus-visible 专属,鼠标点击不出现),组件自绘的 box-shadow 光环与它叠加不冲突。
- 关键交互都有键盘等价:Tab 进焦点、Enter/空格 激活、↑↓/Home/End 在列表类组件内移动、Esc 逐层关闭(内层先关,不连带外层)。
- 高对比模式:除「提高对比度」偏好外,Windows 强制色(`@media (forced-colors: active)`)下也有兜底——浮层与控件改回真边框(不再靠阴影)、选中态改用系统 Highlight 高亮底、占位与骨架走 GrayText,避免高对比下「控件隐形」。
- 语义与播报:modal/drawer 带 `role="dialog" aria-modal`、toast/notification/empty/result 带 `role="status"/"alert"`,切换类组件用 `aria-selected`/`aria-expanded` 同步状态。
## 目录
+56
View File
@@ -5499,3 +5499,59 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
border-left: 1px solid var(--ua-border-subtle);
margin-left: var(--ua-space-2);
}
/* ---- Windows 高对比模式(forced-colors: active)兜底 ----
高对比模式用系统色板强制替换颜色,会剥掉 box-shadow、并把自绘底色抹平:
于是「靠阴影当边框」的浮层、「靠淡色底表达选中」的选项全部消失,控件看起来是一块空白。
这里只补结构与状态,不指定品牌色——具体颜色交给系统关键字(CanvasText / Highlight / GrayText)。
注意:焦点描边不在这里重写,全局 outline 的颜色会被系统自动强制(写死色值反而撞 outline-literal 门禁)。 */
@media (forced-colors: active) {
/* 1) 结构:把「阴影当边框」的容器换回真边框,否则卡片与浮层会融进页面底 */
.ua-card,
.ua-modal,
.ua-drawer,
.ua-pop,
.ua-menu,
.ua-select-pop,
.ua-json,
.ua-tip,
.ua-toast,
.ua-layout-sider {
border: 1px solid CanvasText;
box-shadow: none; /* 阴影在最上层被剥掉,留着只会让「有没有边框」更难判断 */
}
/* 2) 控件轮廓:按钮与输入框平时靠底色区分,高对比下底色一律被抹平 */
.ua-button,
.ua-input,
.ua-textarea,
.ua-select-trigger,
.ua-input-group,
.ua-checkbox,
.ua-switch,
.ua-tag,
.ua-badge {
border: 1px solid CanvasText;
}
/* 3) 选中态:淡色底在高对比下不可见,改用系统高亮底 + 反白字 */
.ua-option[aria-selected='true'],
.ua-menu-item[aria-checked='true'],
.ua-tab[aria-selected='true'],
.ua-tab-active,
.ua-step.is-active {
background: Highlight;
color: HighlightText;
forced-color-adjust: none; /* 保住高亮底:不关掉调整的话系统会把 Highlight 也归一到窗口底色 */
}
/* 4) 占位与骨架:GrayText 是系统给「占位 / 不可交互」的那一档颜色 */
.ua-skeleton,
.ua-progress-fill {
background: GrayText;
}
.ua-input::placeholder,
.ua-textarea::placeholder {
color: GrayText;
}
}