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/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
• 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
• 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]

Note: to validate against changes made in #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!