High contrast issues in components

[betrue-final-final]

Are you willing to submit a PR to fix? (Yes)

Requested priority: (Normal)

Hey, I was looking through Master in high contrast and noticed some issues:

1. Carets in the UI are still grey, and should be windowText system color
   

2. Cards should have a windowText color border around them
   

3. ChoiceGroup with icons has grey icons for disabled. Should use grayText system color
   

4. Borders around people in people picker make it hard to tell where focus is
   
   Same for SwatchColorPicker
   

5. Disabled dropdown does not have a border
   

6. Personas have an extraneous square around them.
   

7. Theme Generator only shows grey
   

8. We should consider reversing primary buttons so people can distinguish them
   

9. Why is upload link color and the others aren't?
   

10. MessageBar close X has weird square brackets around it
    

11. Detailslist hover selection check should have a circle border
    

12. We may consider making focus 2px for Detailslist, as it's hard to see it
    

13. There's a black dot in the middle of toggle thumbs
    

14. We should reverse the "on" toggle for better visibility
    

15. Progress bar is hard to see. We may consider dropping the top line of the empty track so the fill an be seen better.
    

16. Why does spinner look so weird in high contrast?
    

[kristoferbrown]

@betrue-final-final, a couple questions as I'm starting to go down this list:

• What component does 1 occur in? I can't see that happen anywhere.
• Can you still repro 2 in master? It appears to have been fixed by the last HC bugfix PR.
• Item 6 is occurring due to a regression preventing the WindowText border I put around initial only personas from being a circle. This got me thinking, is there a better way to handle initial only personas, or is just a border circle enough?

[betrue-final-final]

#1 seems to be a no-repro now
#2 is no repro!
For high contrast, we don't have backgrounds, just borders. Alternately we could reverse them and make them white with black initials.

[Hardhik]

Please add this to the above list.
https://developer.microsoft.com/en-us/fabric#/components/dropdown
The focus on dropdown is not visible in high contrast white mode.

[kristoferbrown]

@Hardhik, interesting it looks like the dark purple color that the default black-on-white high contrast palette uses for selected items is close enough to to black that it's really hard to see the border change colors when focused.

@betrue-final-final, do you think this is enough of an issue that we should rethink the focus styling on this component? The fix would probably be to make the background of the component (or just a highlight under the text) be the Highlight color instead of changing the border color. What do you think?