Cherry-pick picker tag selection accessibility improvement to FluentUI 7.0

[TeenieSu]

Pull request checklist

• Addresses an existing issue: Apply fix Pickers: Improving picker tag selection accessibility #17723 to version 7.0
• Include a change request file using $ yarn change

Description of changes

Apply picker tag selection accessibility improvement to FluentUI 7.0

Focus areas to test

(optional)

[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 98a70bc:

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

[size-auditor]

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	office-ui-fabric-react-Pickers	279.498 kB	279.843 kB	345 bytes

 Over Tolerance (1024 B)  Over Baseline  Below Baseline  New   Removed 1 kB = 1000 B

Baseline commit: 0694956f9cb3d57db60fd2adf8663036af63ff19 (build)

[fabricteam]

Perf Analysis

No significant results to display.

All results

Scenario	Render type	7.0 Ticks	PR Ticks	Iterations	Status
BaseButton	mount	877	924	5000
Breadcrumb	mount	41419	41299	5000
Checkbox	mount	1591	1558	5000
CheckboxBase	mount	1330	1297	5000
ChoiceGroup	mount	4890	4838	5000
ComboBox	mount	867	925	1000
CommandBar	mount	7506	7545	1000
ContextualMenu	mount	13387	13616	1000
DefaultButton	mount	1096	1145	5000
DetailsRow	mount	3674	3644	5000
DetailsRowFast	mount	3798	3691	5000
DetailsRowNoStyles	mount	3502	3554	5000
Dialog	mount	1717	1684	1000
DocumentCardTitle	mount	1809	1793	1000
Dropdown	mount	2431	2421	5000
FocusTrapZone	mount	1711	1717	5000
FocusZone	mount	1778	1805	5000
IconButton	mount	1686	1710	5000
Label	mount	326	332	5000
Layer	mount	1886	1919	5000
Link	mount	446	428	5000
MenuButton	mount	1447	1451	5000
MessageBar	mount	2036	2040	5000
Nav	mount	3259	3235	1000
OverflowSet	mount	1380	1400	5000
Panel	mount	1437	1423	1000
Persona	mount	794	779	1000
Pivot	mount	1397	1426	1000
PrimaryButton	mount	1263	1248	5000
Rating	mount	7662	7661	5000
SearchBox	mount	1218	1275	5000
Shimmer	mount	2517	2551	5000
Slider	mount	1478	1480	5000
SpinButton	mount	4962	4904	5000
Spinner	mount	410	395	5000
SplitButton	mount	3125	3138	5000
Stack	mount	485	492	5000
StackWithIntrinsicChildren	mount	1660	1633	5000
StackWithTextChildren	mount	4704	4693	5000
SwatchColorPicker	mount	10368	10389	5000
TagPicker	mount	2771	2309	5000
TeachingBubble	mount	50181	50616	5000
Text	mount	403	426	5000
TextField	mount	1387	1382	5000
Toggle	mount	821	798	5000
button	mount	108	99	5000

[TeenieSu]

@microsoft/cxe-red could you please help review?

[ecraig12345]

Thanks for the contribution, but unfortunately removing the FocusZone is too high risk/potentially breaking for us to do in version 7 at this point. If anyone would like the pickers without a FocusZone, they'll need to upgrade to version 8.

It might be possible to pull some of the smaller non-breaking changes back to 7 if you're interested in any of those. @smhigley would have a better idea of which changes would be possible to pull out.

[msft-fluent-ui-bot]

This pull request has been automatically marked as stale because it was marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 5 days of this comment. Thank you for your contributions to Fluent UI!