Substantially improve accessibility of Dropdown component

[cliffkoh]

Pull request checklist

• Addresses an existing issue: Fixes Dropdown accessibility issues #5354, label for Dropdown component is not read by screen reader #5347, DropDown: control type is defined as list #5266, [Accessiblity][Screen Reader] Dropdowns have to too many readable items using Narrator #4565, Dropdown ARIA issues. #4676, Accessibility: Narrator: When focus is on dropdown, its role is not announced #5110, DropDown: Narrator announces 'selection contains 0 items' on item selection #5270 Dropdown does not say how many items it has, or announce the value change #2654, Dropdown not annoucing value of dropdown option on up or down arrow key press when dropdown is in collapsed state #4432
• Include a change request file using $ npm run change

Description of changes

Substantially improves Dropdown accessibility, particularly for single select dropdown. Multi-select dropdown could still use some more polish, but is improved quite substantially as well with this change.

Also fixed various code issues and loose typings (e.g. the options props for Dropdown was of any type this entire time!!! we were calling super() in constructor twice!!!! We were mutating props!!! etc.)

Microsoft Reviewers: Open in CodeFlow

[natalieethell]

spacing here?

[cliffkoh]

Oh weird..

[natalieethell]

could this be combined with the above else?

[cliffkoh]

yes :)

[betrue-final-final]

Alright so there are some problems. As soon as I get to the page it keeps repeating "Select an Option, 1of 5, non-selected,"
Also the order of text is backwards when you start arrowing down to options. It currently says
"5 of 7, non-selected, Option e"
When it should say
"Option e, 5 of 7, non-selected, "

[cliffkoh]

@betrue-final-final assuming you are talking about my branch but look at my screen capture above, it isn't what you described...

It in fact says the right thing.

[betrue-final-final]

I'll send you my Narrator buddy output as soon as I get back to my computer.

[cliffkoh]

I don't know what to do if I cannot repro it though. Could you point to somewhere in the implementation that I should tweak?

[betrue-final-final]

I just had a thought. I realize that the bug where it starts announcing the dropdowns without them being in focus I was in scan mode. I'm not totally sure how you would change the order of the text...

[betrue-final-final]

My Narrator buddy output:

Starting Narrator Buddy
Starting Narrator
Office UI Fabric React Examples and 22 more pages - Microsoft Edge window, Microsoft Edge, custom,
Scan
Select an Option, 1 of 5, non-selected,
Select an Option, 1 of 10, non-selected,
Select an Option, 1 of 7, non-selected,
Select an Option, 1 of 10, non-selected,
Office UI Fabric React Examples, Test Coverage. Good, link,
value http://localhost:4322/#/components-status, read-only,
Edit Dropdown Overview on GitHub, link,
Tooltip, https://github.com/OfficeDev/office-ui-fabric-react/edit/master/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownOverview.md.
Select an Option, 1 of 10, non-selected,
Select an Option, 1 of 7, non-selected,
Select an Option, 1 of 10, non-selected,
Select an Option, 1 of 5, non-selected,
Select an Option, 1 of 10, non-selected,
Select an Option, 1 of 10, non-selected,
Select an Option, 1 of 5, non-selected,
Select an Option, 1 of 10, non-selected,
Select an Option, 1 of 10, non-selected,
Select an Option, 1 of 5, non-selected,
Select an Option, 1 of 7, non-selected,
value https://github.com/OfficeDev/office-ui-fabric-react/edit/master/packages/office-ui-fabric-react/src/components/Dropdown/docs/DropdownOverview.md, read-only,
Edit Dropdown Dos on GitHub, link,
Edit Dropdown Don'ts on GitHub, link,
Show code, button,
Option a, 1 of 10, selected,
Basic uncontrolled example:, Option a, 1 of 10, selected,
Set focus, button,
Option a, 1 of 7, selected,
Controlled example:, Option a, 1 of 7, selected,
Multi-Select uncontrolled example:
Controlled example:, Option a selected, selection contains 7 items,
Option a, 1 of 7, selected,
2 of 7, non-selected, Option b
3 of 7, non-selected, Option c
4 of 7, non-selected, Option d
5 of 7, non-selected, Option e
Exiting Narrator

[betrue-final-final]

Ok, now the order seems correct, but I'm still getting unprompted dropdown output without focus.

[cliffkoh]

Hi @betrue-final-final, I believe I have fixed the issue where all options are read out. I also tested this with cases where a specific option is pre-selected the moment the page load. In all of these cases, we no longer read the options.

Thanks for testing and reporting this behavior.

[cliffkoh]

Technically a breaking change since the API surface changed, but on the other hand, this is more akin to type tightening (fixing bugs in our type declaration so that they're better and catch more issues) and the way you fundamentally would expect the API surface to perform has not changed.

Just like as in the case with the Typescript compiler, our present position is that we do not consider these as major-version-only changes.

[betrue-final-final]

This sounded great! Nice work Cliff.