Windows High Contrast issues

[devongovett]

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
• [ ] 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?
• [ ] ProgressCircle – Indeterminate over background is not visible
• [ ] SearchField – "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
• [ ] Switch - Missing hover state for selected
• [ ] 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
• [ ] 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

[LFDanLu]

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

[devongovett]

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

[devongovett]

Looks like that Firefox issue was fixed 8 days ago!