Fluentui: Narrator is counting hidden options when Dropdown is closed, but not when open

[raharri]

Environment Information

• Package version(s): 7.60.1
• Browser and OS versions: Microsoft Edge 44.18362.449.0

Describe the issue:

When a Dropdown is provided with a list of four IDropdownOption items and one of those items has the property hidden: true, Narrator reads out "Selection contains four items", but when the dropdown is opened by pressing alt + down key, there are only three elements that read as "one of three", "two of three", etc.

Please provide a reproduction of the issue in a codepen:

1. Go to https://codepen.io/raharri/pen/XWWxNjb?&editable=true
2. Turn on Narrator
3. Tab to the rendered dropdown

Actual behavior:

Narrator reads out "Selection contains four items"

Expected behavior:

Narrator should read "Selection contains three items"

[kenotron]

This appears to be a narrator bug - we don't actually mark any item counts. In fact, we have done what is needed obvious because Narrator was able to interpret the 1 of 3 on the 2nd prompt. Narrator should be consistent with itself.

[kenotron]

Per our guide: https://github.com/OfficeDev/office-ui-fabric-react/wiki/Accessibility-Troubleshooting#narrator

The best way to file feedback is via the feedback hub built into Windows. Put Accessibility and Narrator in the feedback item for increased visibility.

Please separately follow up by submitting a feedback with the codepen.io example you have encountered.

[smhigley]

@kenotron if you look at the generated markup of the dropdown in that codepen, you can see that the selected option within the collapsed listbox has aria-setsize="4", even though there are only 3 visible options. This is the root cause of the bug, not a Narrator issue:

<div data-is-focusable="true" id="Dropdown1" tabindex="0" role="listbox" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Dropdown1-label Dropdown1-option" class="ms-Dropdown dropdown-53">
   <span id="Dropdown1-option" class="ms-Dropdown-title ms-Dropdown-titleIsPlaceHolder title-54" aria-live="polite" aria-atomic="true" aria-invalid="false" role="option" aria-setsize="4">Select an option</span><span class="ms-Dropdown-caretDownWrapper caretDownWrapper-55"><i data-icon-name="ChevronDown" aria-hidden="true" class="ms-Dropdown-caretDown caretDown-71"></i></span>
</div>

[kenotron]

Thanks for pointing out - I just now saw the attribute. I've added a fix for this!

[smhigley]

That's awesome, thanks for fixing it so quickly!

[msft-github-bot]

:tada:This issue was addressed in #11238, which has now been successfully released as [email protected].:tada:

Handy links:

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