palantir/blueprint

Windows High Contrast mode styling issues

Open

#5622 opened on Sep 27, 2022

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
Domain: accessibilityP2Package: corePackage: tableType: bughelp wanted

Description

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

Contributor guide

Tech stack
typescriptreacthtmlcss
Domain
frontendaccessibility
Issue type
accessibility
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Basic CSSReact component familiarityAccessibility concepts
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
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.