Windows High Contrast issues
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
These were found in the initial testing session, before #2830 was merged. I've tried to omit the ones that are fixed in that PR, but we will need to test the changes there as well.
- [ ] ActionButton – Hover state missing in static color variants
- [ ] ActionGroup – compact ActionGroup selected button is thinner than the non selected button
- [ ] ActionGroup – Selected button is missing border
- [ ] ActionGroup/ToggleButton – isEmphasized hover state is the same as selection
- [x] Button – CTA button grows by 2px on hover
- [ ] Button – no active state. Do we need one?
- [ ] Button – overBackground hover state is dimmed
- [ ] ClearButton - no overBackground hover state
- [ ] DialogTrigger – Popover arrow is really hard to see
- [ ] Divider – Is invisible
- [ ] IllustratedMessage – In WHCM, the illustration is dim in Chrome/Edge, but bold in Firefox
- [ ] LogicButton – "and" and "or" variants are the same in WHCM
- [ ] Menu – missing hover state
- [ ] Meter – Colors are not visible at all in Firefox
- [ ] Meter – colors of meter might not be high contrast enough?
- [x] ProgressCircle – Indeterminate over background is not visible
- [ ] SearchField/SearchAutocomplete – "x" button has a background that overlaps the focus ring
- [ ] SearchField – Icon is bold in Chrome/Edge but dim in Firefox
- [ ] StatusLight – Colors are not visible at all in Firefox
- [ ] StatusLight – The colors might not pass contrast in WHCM
- [x] Switch - Missing hover state for selected
- [x] TableView/ListView - missing keyboard focus and selection states
- [ ] Tabs – In firefox, selected tab text is not visible
- [ ] Tabs – transition on icon between selected and unselected states looks silly
- [ ] Tabs – with flex container story, first tab is not rounded
- [ ] Tabs - Missing hover state
- [ ] TextField – Validation icon is red/green in Firefox, but white in Edge
- [ ] TextField/TextArea/etc. – Disabled state in Firefox is not right
- [ ] Toast – Clear button does not have a hover state
- [ ] Tooltip – Arrow is a square in Firefox
- [ ] Tooltip – positive/negative/info variants have different colored tip, but not a different colored border
From 2nd testing session:
- [ ] ActionButton - Keyboard focus state should be blue like other components
- [ ] Calendar – Invalid state isn't very obvious. Invalid selected date is the same color as a normal selected date and the error message text is the same color
- [ ] Calendar - remove the highlight for today's date in WHCM, it is confusing since it looks the same as a selected date
- [ ] ColorArea - ColorArea should have a border around it to help contrast it against the background (see ColorSlider and ColorWheel)
- [ ] ColorSlider - Color thumb should have a white outline in light HCM themes
- [ ] ColorThumb - Color preview (tear drop) needs a thicker white outline
- [ ] DateField - Field doesn't get the proper hover state (no outline change), compare with DatePicker
- [ ] DateField - Missing styles for mouse focus state.
- [ ] NumberField - gets the keyboard focus style on mouse focus.
- [ ] NumberField/ComboBox - validationState=invalid has focus state by default
- [ ] Picker - placeholder text should look the same as normal text. Right now it is green like disabled text
- [ ] RangeCalendar - Keyboard focus ring isn't very visible when displayed on a selected date. Consider making it thicker or adding a black ring as well
- [ ] TableView - In highlight selection, the selected rows are not very visible compared to keyboard focused.
- [ ] Tabs - A border is added around the TabPanel in WHCM, is that intentional?
- [ ] Tabs - focus ring around the tab is hard to distinguish from the tab itself. should it be a halo ring?
- [ ] Tabs - icons in tabs flash weirdly when the tab is selected
- [ ] Tabs - faint blue tab line is still visible with isEmphasized style.
- [ ] Tabs - icons are white in isEmphasized tabs.
- [ ] TextField - validationState=invalid lacks hover state
For WHCM FF, there are many issues captured here: https://docs.google.com/spreadsheets/d/1p4VJnyVTab5BZE-iY9isv0NuZv6vx3W3ghzNWJN0HMY/edit#gid=515442378
Additonal FF issue:
- [ ] Checkbox - Focus ring is not visible in WHCM
- [ ] ComboBox chevron is hard to see in WHCM
Added [Chromatic Forced Colors Project](https://www.chromatic.com/builds?appId=651b502f6b74abaae4ee734c) and identified a few issues:
- [ ] [Action Group Emphasized outline](https://www.chromatic.com/test?appId=651b502f6b74abaae4ee734c&id=65286b7fda0594c86d013039)
- [ ] [Toggle Button Emphasized outline](https://www.chromatic.com/test?appId=651b502f6b74abaae4ee734c&id=65286b7fda0594c86d013040)
- [ ] [Logic Button background colors](https://www.chromatic.com/test?appId=651b502f6b74abaae4ee734c&id=65286b7fda0594c86d01303f)
- [ ] [Focused, Selected Calendar Cells](https://www.chromatic.com/component?appId=651b502f6b74abaae4ee734c&csfId=calendarcell&buildNumber=10&k=652877b35dc1e1b36ea8525f-1200px-snapshot-true&h=8&b=-2)
- [ ] Needs more stories migrated to forced colors
Contributor guide
Assessment
This issue has not been assessed yet.