Add role to FocusZone in BasePickerListBelow

[mattlind]

Pull request checklist

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

Description of changes

Added role attribute to the FocusZone that contains the selected items for BasePickerListBelow. Previously there was no role set so adding a role like "list-item" to an item produced by the onRenderItem callback didn't read out in screen readers as item number n of m.

Focus areas to test

• Tested that screen reader now read item "n" of "m" in the sample site: https://developer.microsoft.com/en-us/fabric#/controls/web/peoplepicker

Microsoft Reviewers: Open in CodeFlow

[size-auditor]

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	Pickers	263.005 kB	263.017 kB	12 bytes

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

Baseline commit: 58691b0adf66ee810bbc9b055c92b76706c67dc0 (build)

[msft-github-bot]

Component Perf Analysis

No significant results to display.

All results

Scenario	Master Ticks	PR Ticks	Status
BaseButton	785	807
BaseButton (experiments)	1060	1055
DefaultButton	1055	1060
DefaultButton (experiments)	2041	2020
DetailsRow	3343	3444
DetailsRow (fast icons)	3404	3491
DetailsRow without styles	3161	3214
DocumentCardTitle with truncation	33974	33964
MenuButton	1379	1391
MenuButton (experiments)	3755	3656
PrimaryButton	1284	1259
PrimaryButton (experiments)	2130	2103
SplitButton	2931	2927
SplitButton (experiments)	7225	7250
Stack	522	504
Stack with Intrinsic children	1215	1198
Stack with Text children	4557	4505
Text	410	412
Toggle	915	902
Toggle (experiments)	2369	2418
button	63	69

[joschect]

@mattlind Thanks for submitting this fix! It looks like it would break aria rules for users who don't have role="listitem" already on their selected items. I think that either adding selectedItemsContainerProps: IFocusZoneProps' or renderSelectedItemsContainer` to props might be another way of doing this.

[mattlind]

@mattlind Thanks for submitting this fix! It looks like it would break aria rules for users who don't have role="listitem" already on their selected items. I think that either adding selectedItemsContainerProps: IFocusZoneProps' or renderSelectedItemsContainer` to props might be another way of doing this.

I did it this way because that was how the other instance was doing the same thing above.

<SelectionZone selection={this.selection} selectionMode={SelectionMode.multiple}>
            <div className={classNames.text}>
              {items.length > 0 && (
                <span id={this._ariaMap.selectedItems} className={classNames.itemsWrapper} role={'list'}>
                  {this.renderItems()}
                </span>
              )}

[joschect]

@mattlind That makes sense then. Approved to bring everything in line.

[msft-github-bot]

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

Handy links:

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

[shivasai09]

is it possible to cherry pick this change to version 6?

[msft-github-bot]

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

Handy links:

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