Dropdown ariaLabel not handled correctly

[ConorWuertz]

Environment Information

• Package version(s): 6.47.0
  Also visible in the current source code in master

Actual behavior:

When we provide both a label and an ariaLabel prop to the Dropdown component, the rendered "listbox" role element includes the aria-label attribute and also contains an aria-labelledby attribute that refers to the label element.

Expected behavior:

The expected behavior in my opinion would be for there to be no aria-labelledby attribute in addition to the aria-label attribute if we include the ariaLabel prop. The problem here is that screen readers will ignore the aria-label if we have an aria-labelledby attribute as well. The current behavior makes it impossible to include a visual label and an ariaLabel and have the ariaLabel take precedence for screen readers.

Priorities and help requested:

Are you willing to submit a PR to fix? Yes

Requested priority: Normal

Products/sites affected: Microsoft Teams (Shifts app)

[kenotron]

@betrue-final-final - would you mind confirming this is indeed the right behavior?
@ConorWuertz - would you mind submitting a PR for this? Feel free to combine this with the other a11y bug

[ConorWuertz]

@betrue-final-final any feedback on this?

[betrue-final-final]

If someone could describe what the proposal is in end user terms it would help, otherwise @cschlechty may be able to help with the proper code.

[ConorWuertz]

Developers may want to provide a concise visual label for the Dropdown component. Combined with other visual elements on the screen, this might suffice to communicate the purpose of the Dropdown. But for visually impaired end users using the dropdown, that concise visual label may not provide enough information to fully communicate what the Dropdown is for. Currently, if we provide a visual label to the component, screen readers will read that label regardless of any provided ARIA label.

My proposal is that when developers provide an ARIA label to this component in addition to a regular, visual label, the component should honor the aria label and ensure that screen readers read the aria label instead of the visual label.

[msft-github-bot]

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

Handy Links:

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