Windows High Contrast issues

devongovett commented 2 years ago

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 and identified a few issues:

[ ] Action Group Emphasized outline
[ ] Toggle Button Emphasized outline
[ ] Logic Button background colors
[ ] Focused, Selected Calendar Cells
[ ] Needs more stories migrated to forced colors

LFDanLu commented 2 years ago

Note: to validate against changes made in https://github.com/adobe/react-spectrum/pull/2830

devongovett commented 2 years ago

Firefox issue for forced-color-adjust support: https://bugzilla.mozilla.org/show_bug.cgi?id=1591210

devongovett commented 1 year ago

Looks like that Firefox issue was fixed 8 days ago!

adobe / react-spectrum

Windows High Contrast issues #2949