Fluentui: [Accessiblity][Screen Reader] Dropdowns have to too many readable items using Narrator

[davidleacy]

Bug Report

• __Package version(s)__: 5.81.1
• __Browser and OS versions__: Windows 10 / Microsoft Edge / Windows Narrator

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? No

Requested priority: Normal

Products/sites affected: Upcoming Microsoft site.

Describe the issue:

When using Windows Narrator with Edge in Item mode (CapLk + UP/DOWN to switch modes) and navigating through items in a ui fabric dropdown(CapLk + LEFT/RIGHT), the narrator finds three items in the un-expanded dropdown, this is confusing for screen reader users. Ideally this would be one item.

Actual behavior:

Using the controlled example on the sample site with option b selected in Narrator item mode:

1. 'Controlled Example, Editable ComboBox, Option b, Collapsed'
2. 'Selected, Selection contains 0 items'
3. 'Option b'

Expected behavior:

Not 100% sure here on the text itself, but I think just one item with text 'Controlled Example, Editable ComboBox, Option b, Collapsed' would suffice.

If applicable, please provide a codepen repro:

The sample website provides a good example.
https://developer.microsoft.com/en-us/fabric#/components/dropdown#Overview

[jordandrako]

@lynamemi Could you look at this or delegate to the right person?

[lynamemi]

Took a look at this, and not sure if I'm reproing

@davidleacy Do you mean ComboBox or Dropdown? You mention both in different places. While they are similar, they are different controls at this point.

@betrue-final-final I navigated around ComboBox and Dropdown a little but didn't hear anything too fishy. Can you test this also for repro?

[davidleacy]

Hi @lynamemi, I mean Dropdown, when I originally opened this bug the dropdowns were being called out as Comboboxs by Windows Narrator, that appears to fixed, can't repro on the sample site.

The issues above that do still remain are the fact that the dropdown is considered as 3 items why the Narrator in item view, the biggest issue here is when the screen reader reads "selection, 0 items selected" this is incorrect in this context.

I assume these inconsistencies are due to the Dropdown being a combobox under the hood to support the multiselect scenario but causes these dropdowns to not behave normally to the screen reader.

[davidleacy]

Polite bump @lynamemi @jordandrako

[cliffkoh]

A fix to #5354 might fix some of what you observed.

[davidleacy]

Thanks @cliffkoh, #5385 seems to address a lot of the issues and accessibility bugs my team has in relation to dropdowns.

[cliffkoh]

Closing because #5385 is merged.