fix: update color on active state for accent button in high contrast mode

[khamudom]

Pull request checklist

• Addresses an existing issue: Fixes #0000
• Include a change request file using $ yarn change

Description of changes

set active state on appearance accent button to remove the accent color when button is pressed.

before

after

Focus areas to test

(optional)

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: bbbace7c4afcdc1829d61dadc1955fbfd09482fb (build)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 23fcf7b:

Sandbox	Source
Fluent UI Button	Configuration
codesandbox-react-template	Configuration
codesandbox-react-northstar-template	Configuration

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	861	873	5000
BaseButton	mount	942	949	5000
Breadcrumb	mount	2510	2515	1000
ButtonNext	mount	503	506	5000
Checkbox	mount	1647	1574	5000
CheckboxBase	mount	1378	1383	5000
ChoiceGroup	mount	5010	4962	5000
ComboBox	mount	954	987	1000
CommandBar	mount	9834	9892	1000
ContextualMenu	mount	6027	5993	1000
DefaultButton	mount	1134	1175	5000
DetailsRow	mount	3789	3756	5000
DetailsRowFast	mount	3738	3773	5000
DetailsRowNoStyles	mount	3479	3540	5000
Dialog	mount	2183	2138	1000
DocumentCardTitle	mount	151	150	1000
Dropdown	mount	3291	3303	5000
FocusTrapZone	mount	1739	1754	5000
FocusZone	mount	1777	1724	5000
IconButton	mount	1815	1832	5000
Label	mount	323	339	5000
Layer	mount	1792	1823	5000
Link	mount	456	459	5000
MakeStyles	mount	1723	1762	50000
MenuButton	mount	1523	1511	5000
MessageBar	mount	1958	2016	5000
Nav	mount	3328	3314	1000
OverflowSet	mount	1023	1026	5000
Panel	mount	2050	2059	1000
Persona	mount	816	830	1000
Pivot	mount	1386	1421	1000
PrimaryButton	mount	1316	1320	5000
Rating	mount	8043	8026	5000
SearchBox	mount	1366	1392	5000
Shimmer	mount	2716	2635	5000
Slider	mount	1984	2019	5000
SpinButton	mount	5129	5500	5000
Spinner	mount	415	404	5000
SplitButton	mount	3186	3217	5000
Stack	mount	518	523	5000
StackWithIntrinsicChildren	mount	1625	1597	5000
StackWithTextChildren	mount	4779	4845	5000
SwatchColorPicker	mount	10366	10455	5000
Tabs	mount	1407	1416	1000
TagPicker	mount	2526	2560	5000
TeachingBubble	mount	11714	11624	5000
Text	mount	431	437	5000
TextField	mount	1403	1404	5000
ThemeProvider	mount	1168	1160	5000
ThemeProvider	virtual-rerender	596	575	5000
ThemeProviderNext	mount	6407	6448	5000
Toggle	mount	805	807	5000
buttonNative	mount	116	107	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AvatarMinimalPerf.default	214	194	1.1:1
AttachmentMinimalPerf.default	172	160	1.08:1
ButtonMinimalPerf.default	183	169	1.08:1
LabelMinimalPerf.default	422	391	1.08:1
TableMinimalPerf.default	447	415	1.08:1
TreeWith60ListItems.default	192	180	1.07:1
ChatWithPopoverPerf.default	382	361	1.06:1
FlexMinimalPerf.default	314	297	1.06:1
ImageMinimalPerf.default	418	393	1.06:1
LayoutMinimalPerf.default	390	368	1.06:1
SegmentMinimalPerf.default	382	361	1.06:1
SkeletonMinimalPerf.default	400	378	1.06:1
IconMinimalPerf.default	690	652	1.06:1
ListNestedPerf.default	601	571	1.05:1
RefMinimalPerf.default	238	226	1.05:1
TextAreaMinimalPerf.default	551	524	1.05:1
FormMinimalPerf.default	461	443	1.04:1
MenuMinimalPerf.default	886	856	1.04:1
ProviderMinimalPerf.default	1056	1020	1.04:1
AnimationMinimalPerf.default	423	411	1.03:1
ListWith60ListItems.default	678	660	1.03:1
LoaderMinimalPerf.default	704	685	1.03:1
MenuButtonMinimalPerf.default	1640	1586	1.03:1
ReactionMinimalPerf.default	404	392	1.03:1
StatusMinimalPerf.default	731	712	1.03:1
TableManyItemsPerf.default	2061	2009	1.03:1
BoxMinimalPerf.default	369	360	1.02:1
ButtonOverridesMissPerf.default	1755	1721	1.02:1
ChatMinimalPerf.default	656	644	1.02:1
DialogMinimalPerf.default	766	751	1.02:1
DividerMinimalPerf.default	386	380	1.02:1
ItemLayoutMinimalPerf.default	1341	1318	1.02:1
ListCommonPerf.default	674	661	1.02:1
PopupMinimalPerf.default	566	556	1.02:1
TreeMinimalPerf.default	805	787	1.02:1
AccordionMinimalPerf.default	161	159	1.01:1
CardMinimalPerf.default	589	582	1.01:1
DropdownMinimalPerf.default	3082	3050	1.01:1
EmbedMinimalPerf.default	4203	4148	1.01:1
HeaderMinimalPerf.default	392	388	1.01:1
HeaderSlotsPerf.default	828	819	1.01:1
InputMinimalPerf.default	1274	1264	1.01:1
ProviderMergeThemesPerf.default	1618	1609	1.01:1
RadioGroupMinimalPerf.default	469	464	1.01:1
SplitButtonMinimalPerf.default	3910	3885	1.01:1
TooltipMinimalPerf.default	994	980	1.01:1
CheckboxMinimalPerf.default	2787	2775	1:1
DatepickerMinimalPerf.default	5424	5439	1:1
DropdownManyItemsPerf.default	718	717	1:1
SliderMinimalPerf.default	1588	1586	1:1
CustomToolbarPrototype.default	3857	3864	1:1
ToolbarMinimalPerf.default	976	972	1:1
CarouselMinimalPerf.default	475	478	0.99:1
GridMinimalPerf.default	352	354	0.99:1
ButtonSlotsPerf.default	571	580	0.98:1
AttachmentSlotsPerf.default	1169	1200	0.97:1
ListMinimalPerf.default	527	546	0.97:1
RosterPerf.default	1214	1250	0.97:1
TextMinimalPerf.default	368	378	0.97:1
ChatDuplicateMessagesPerf.default	291	305	0.95:1
VideoMinimalPerf.default	640	674	0.95:1
PortalMinimalPerf.default	145	155	0.94:1
AlertMinimalPerf.default	270	305	0.89:1

[msft-fluent-ui-bot]

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release