iter(g267): 补 Windows 强制色高对比兜底
This commit is contained in:
@@ -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` 同步状态。
|
||||
|
||||
## 目录
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user