fix(v8 ColorSwatchPicker): Add border to white color in high contrast mode

[emmayjiang]

Previous Behavior

In high contrast mode, there was not enough contrast between the white color and the background.

New Behavior

There is now a border around the white color in high contrast mode.

Confirmation that it works on Windows:

Related Issue(s)

• Fixes ADO bug

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react Fluent UI React (entire library)	1.015 MB 282.182 kB	1.015 MB 282.181 kB	60 B -1 B
react SwatchColorPicker	191.117 kB 58.19 kB	191.177 kB 58.196 kB	60 B 6 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react ActivityItem	71.236 kB 23.357 kB
react Announced	38.493 kB 13.297 kB
react Autofill	15.428 kB 4.768 kB
react Breadcrumb	202.406 kB 60.482 kB
react Button	195.858 kB 56.697 kB
react ButtonGrid	180.792 kB 54.683 kB
react Calendar	121.905 kB 37.046 kB
react Callout	84.33 kB 27.648 kB
react Check	53.204 kB 17.848 kB
react Checkbox	59.985 kB 19.903 kB
react ChoiceGroup	65.494 kB 21.489 kB
react ChoiceGroupOption	58.767 kB 19.362 kB
react Coachmark	93.151 kB 29.428 kB
react Color	7.789 kB 3.127 kB
react ColorPicker	135.359 kB 42.257 kB
react ComboBox	252.295 kB 72.392 kB
react CommandBar	203.447 kB 60.224 kB
react ContextualMenu	155.273 kB 48.228 kB
react DatePicker	184.333 kB 56.194 kB
react DateTimeUtilities	5.244 kB 1.849 kB
react DetailsList	230.107 kB 65.952 kB
react Dialog	211.784 kB 63.237 kB
react Divider	19.603 kB 6.845 kB
react DocumentCard	217.399 kB 64.512 kB
react DragDrop	8.343 kB 2.724 kB
react DraggableZone	34.305 kB 11.509 kB
react Dropdown	234.345 kB 68.729 kB
react ExtendedPicker	96.924 kB 27.92 kB
react Fabric	41.745 kB 14.366 kB
react Facepile	210.998 kB 63.254 kB
react FloatingPicker	242.44 kB 69.088 kB
react FocusTrapZone	17.03 kB 5.924 kB
react FocusZone	55.182 kB 17.503 kB
react Grid	180.792 kB 54.683 kB
react GroupedList	135.178 kB 40.798 kB
react GroupedListV2	122.767 kB 37.881 kB
react HoverCard	97.179 kB 30.82 kB
react Icon	51.885 kB 17.272 kB
react Icons	66.361 kB 24.397 kB
react Image	46.904 kB 15.707 kB
react Keytip	81.693 kB 26.766 kB
react KeytipData	14.039 kB 4.588 kB
react KeytipLayer	103.478 kB 32.017 kB
react Keytips	106.25 kB 33.023 kB
react Label	38.347 kB 13.257 kB
react Layer	48.099 kB 16.367 kB
react Link	39.682 kB 13.67 kB
react List	39.4 kB 12.481 kB
react MarqueeSelection	74.541 kB 22.44 kB
react MessageBar	190.922 kB 57.155 kB
react Modal	93.747 kB 30.278 kB
react Nav	188.398 kB 56.575 kB
react OverflowSet	33.393 kB 11.329 kB
react Overlay	40.902 kB 14.095 kB
react Panel	201.456 kB 60.076 kB
react Persona	114.967 kB 36.546 kB
react PersonaCoin	114.967 kB 36.546 kB
react PersonaPresence	58.074 kB 19.384 kB
react Pickers	294.462 kB 82.501 kB
react Pivot	189.29 kB 57.329 kB
react Popup	12.294 kB 4.195 kB
react Positioning	22.807 kB 7.701 kB
react PositioningContainer	73.85 kB 23.765 kB
react ProgressIndicator	39.504 kB 13.554 kB
react Rating	82.143 kB 26.144 kB
react ResizeGroup	13.338 kB 4.377 kB
react ResponsiveMode	8.13 kB 2.966 kB
react ScrollablePane	55.563 kB 17.734 kB
react SearchBox	189.171 kB 56.737 kB
react SelectableOption	724 B 413 B
react SelectedItemsList	232.95 kB 67.977 kB
react Selection	42.464 kB 12.301 kB
react Separator	35.384 kB 12.146 kB
react Shimmer	49.259 kB 16.268 kB
react ShimmeredDetailsList	240.889 kB 68.7 kB
react Slider	57.651 kB 19.217 kB
react SpinButton	192.874 kB 57.835 kB
react Spinner	41.777 kB 14.478 kB
react Stack	41.734 kB 14.268 kB
react Sticky	32.613 kB 10.509 kB
react Styling	46.033 kB 15.135 kB
react TeachingBubble	206.173 kB 61.106 kB
react Text	36.908 kB 12.822 kB
react TextField	80.816 kB 25.332 kB
react Theme	43.501 kB 14.183 kB
react ThemeGenerator	12.392 kB 4.126 kB
react TimePicker	242.077 kB 70.14 kB
react Toggle	46.225 kB 15.986 kB
react Tooltip	87.456 kB 28.268 kB
react Utilities	82.931 kB 25.148 kB
react Viewport	23.888 kB 7.656 kB
react WeeklyDayPicker	102.058 kB 31.861 kB
react WindowProvider	1.059 kB 541 B

_{🤖 This report was generated against 23f7636c9eec05ec96691b32be169e7186b0f918}

[fabricteam]

Perf Analysis (@fluentui/react)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
GroupedListV2	virtual-rerender	219	356	2	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	640	629	5000
Breadcrumb	mount	1698	1705	1000
Checkbox	mount	1665	1747	5000
CheckboxBase	mount	1476	1495	5000
ChoiceGroup	mount	2982	2959	5000
ComboBox	mount	703	686	1000
CommandBar	mount	6621	6547	1000
ContextualMenu	mount	11710	11689	1000
DefaultButton	mount	772	788	5000
DetailsRow	mount	2253	2233	5000
DetailsRowFast	mount	2234	2186	5000
DetailsRowNoStyles	mount	2032	2063	5000
Dialog	mount	2864	2742	1000
DocumentCardTitle	mount	229	226	1000
Dropdown	mount	1994	2011	5000
FocusTrapZone	mount	1148	1158	5000
FocusZone	mount	1097	1085	5000
GroupedList	mount	42349	42093	2
GroupedList	virtual-rerender	20306	20391	2
GroupedList	virtual-rerender-with-unmount	52408	51524	2
GroupedListV2	mount	224	235	2
GroupedListV2	virtual-rerender	219	356	2	Possible regression
GroupedListV2	virtual-rerender-with-unmount	240	228	2
IconButton	mount	1180	1143	5000
Label	mount	348	343	5000
Layer	mount	2777	2768	5000
Link	mount	402	397	5000
MenuButton	mount	1022	982	5000
MessageBar	mount	21906	21520	5000
Nav	mount	2080	2039	1000
OverflowSet	mount	786	804	5000
Panel	mount	1928	1893	1000
Persona	mount	780	740	1000
Pivot	mount	910	922	1000
PrimaryButton	mount	940	943	5000
Rating	mount	4709	4810	5000
SearchBox	mount	933	945	5000
Shimmer	mount	1864	1897	5000
Slider	mount	1340	1330	5000
SpinButton	mount	2912	2987	5000
Spinner	mount	392	405	5000
SplitButton	mount	1887	1936	5000
Stack	mount	409	429	5000
StackWithIntrinsicChildren	mount	883	868	5000
StackWithTextChildren	mount	2838	2788	5000
SwatchColorPicker	mount	6451	6529	5000
TagPicker	mount	1475	1467	5000
Text	mount	399	392	5000
TextField	mount	944	947	5000
ThemeProvider	mount	879	847	5000
ThemeProvider	virtual-rerender	579	577	5000
ThemeProvider	virtual-rerender-with-unmount	1305	1323	5000
Toggle	mount	604	617	5000
buttonNative	mount	196	194	5000

[emmayjiang]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 4 pipeline(s).