[a11y]: Dropdown does not use aria-describedby to link help text with component

[mbgower]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

React storybook

React version

https://react.carbondesignsystem.com/?path=/story/components-multiselect--default

Automated testing tool and ruleset

n/a

Assistive technology

JAWS

Description

Any helper text should be automatically surfaced to assistive technologies through the use of aria-describedby.
This should happen on ALL Carbon components that can have helper text.
it is in place for Text input, so it only needs to be emulated for Dropdown/MultiSelect Dropdown and any other components that do not have it

Steps to resolve:

1. Given the div holding the helper text an appropriate ID
2. use this ID with aria-describedby on the div holding the input.

This means that the input will have its programmatic label announced by a Screen Reader, and then have any helper text read out after a pause.

It also means that any caution or warning text appearing in the helper text area will also be announced.

WCAG 2.1 Violation

https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-multiselect--default

Steps to reproduce

1. Inspect the Helper text and confirm there is no ID associated with it.
2. If ID exists, inspect input and confirm there is no use of aria-describedby

OR
Turn on JAWS and tab to Dropdown. JAWS will read the input and any option value, but will not announce the helper text.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[mbgower]

Note. You could also consider giving this helper text a role of "status", which would ensure that any changes to the text due to cautions or errors would be announced. (For instance, a user puts in a wrong value, causing the message to updated.) This may already be handled in a different way by Carbon, but it is worth validating that and pursuing the use of the status role if there is nothing in place.

[mbgower]

@sstrubberg Much as I think this is tactically an important thing to prioritize, IMO it does not warrant the same priority as some other items, since it can be argued that failing to surface helper text through aria-describedby is not a failure; just a really nice user feature.
Assuming there is a way to surface error messages (which replace help text) to ATs, this can be downgraded (reluctantly).

[mbgower]

<button type="button" class="cds--list-box__field" id="downshift-0-toggle-button" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="downshift-0-label downshift-0-toggle-button" aria-describedby="multiselect-helper-text-1"><div class="cds--tag cds--tag--filter cds--tag--high-contrast"><span class="cds--tag__label" title="3">3</span><div role="button" tabindex="0" class="cds--tag__close-icon" aria-label="Clear all selected items" title="Clear all selected items"><svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"></path></svg></div></div><span id="multiselect-field-label-1" class="cds--list-box__label">Multiselect Label</span><div class="cds--list-box__menu-icon"><svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" name="chevron--down" aria-label="Open menu" width="16" height="16" viewBox="0 0 16 16" role="img"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path><title>Open menu</title></svg></div></button>

I added this attribute and value on the button. I looks good in the accessible tree, but I'm in the middle of a someone's presentation, so cannot start JAWS to test :)
aria-describedby="multiselect-helper-text-1"