palantir/blueprint

Windows High Contrast mode styling issues

Open

#5,622 创建于 2022年9月27日

在 GitHub 查看
 (0 评论) (0 反应) (0 负责人)TypeScript (20,263 star) (2,167 fork)batch import
Domain: accessibilityP2Package: corePackage: tableType: bughelp wanted

描述

Follow-up issues from #5524

Environment

  • Package version(s): @blueprintjs/core as of #5524
  • Operating System: Windows with High Contrast mode enabled
  • Browser name and version: Edge

Styling issues

Listed below roughly in order of importance:

Active tab indicator is hard/impossible to see

Progress bar is invisible

Slider filled track is invisible

Non ideal state icon stroke has low contrast

we shouldn't apply the opacity adjustment in high contrast mode:

Skeleton styling has no effect

maybe we should make the text color transparent?

Tables

Not 100% sure what we should do here, but adding borders between all cells probably makes the most sense. Also a thicker border between row/col headers and the table body

贡献者指南

技术栈
typescriptreacthtmlcss
领域
frontendaccessibility
议题类型
accessibility
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
2
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-3 hours
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
fresh
清晰度议题是否清楚说明期望改动、验收标准和下一步。
mostly clear
前置要求
Basic CSSReact component familiarityAccessibility concepts
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
70
研究方向
Start by reviewing the linked PR #5524 for context. Examine the CSS files for the mentioned components: Tabs, ProgressBar, Slider, NonIdealState, Skeleton, and Table in @blueprintjs/core/src/components. For each sub issue, add CSS rules within a forced colors media query (@media (forced colors: active)) to override colors with transparent or high contrast alternatives. Specifically, for the active tab indicator, set the border color to CanvasText; for the progress bar, set the fill color to Highlight; for the slider, set the track color to Highlight; for the non ideal state icon, remove opacity; for skeleton, set text color to transparent; and for tables, add borders between cells. Test on Windows with High Contrast mode enabled.