7.0: Keyboard focus should be visible on selected footers in pickers in high contrast

[elisabethcvs]

Pull request checklist

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

Description of changes

v8 PR - #15985

Currently, keyboard focus is not visible for SuggestionsHeaderFooterItems in high contrast. Regularly they get the same treatment as suggestion items. I added a high contrast state.

In v8, I added an example that has this, but for the backport I'm going as small as possible.

[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 731f118:

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

[fabricteam]

Perf Analysis

No significant results to display.

All results

Scenario	Render type	7.0 Ticks	PR Ticks	Iterations	Status
BaseButton	mount	990	979	5000
Breadcrumb	mount	41765	41625	5000
Checkbox	mount	1658	1666	5000
CheckboxBase	mount	1402	1428	5000
ChoiceGroup	mount	5339	5291	5000
ComboBox	mount	1000	1001	1000
CommandBar	mount	7891	7741	1000
ContextualMenu	mount	13769	13838	1000
DefaultButton	mount	1198	1206	5000
DetailsRow	mount	3793	3847	5000
DetailsRowFast	mount	3855	3819	5000
DetailsRowNoStyles	mount	3531	3593	5000
Dialog	mount	1530	1593	1000
DocumentCardTitle	mount	1872	1834	1000
Dropdown	mount	2706	2776	5000
FocusTrapZone	mount	1748	1787	5000
FocusZone	mount	1863	1871	5000
IconButton	mount	1874	1950	5000
Label	mount	371	336	5000
Layer	mount	2062	2063	5000
Link	mount	461	476	5000
MenuButton	mount	1534	1573	5000
MessageBar	mount	2130	2155	5000
Nav	mount	3401	3437	1000
OverflowSet	mount	1475	1488	5000
Panel	mount	1499	1568	1000
Persona	mount	874	864	1000
Pivot	mount	1488	1478	1000
PrimaryButton	mount	1338	1386	5000
Rating	mount	8169	8319	5000
SearchBox	mount	1346	1379	5000
Shimmer	mount	2760	2749	5000
Slider	mount	1637	1628	5000
SpinButton	mount	5426	5450	5000
Spinner	mount	453	437	5000
SplitButton	mount	3438	3421	5000
Stack	mount	533	540	5000
StackWithIntrinsicChildren	mount	1531	1556	5000
StackWithTextChildren	mount	5028	4992	5000
SwatchColorPicker	mount	10770	10796	5000
TagPicker	mount	2963	2903	5000
TeachingBubble	mount	50899	51111	5000
Text	mount	468	469	5000
TextField	mount	1483	1433	5000
Toggle	mount	850	896	5000
button	mount	111	113	5000

[size-auditor]

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	office-ui-fabric-react-FloatingPicker	234 kB	234.272 kB	272 bytes

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

Baseline commit: ee7e8ae5574b8367f83024e5dc32aca23d2fd31b (build)

[msft-fluent-ui-bot]

🎉office-ui-fabric-react@v7.157.1 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site