fix: add area-describedby to components that use helperText

[francinelucca]

Closes #12722

Adds aria-describedby attribute to components that use helperText:

• Multiselect
• Dropdown
• Combobox
• DatePickerInput
• NumberInput
• ProgressBar
• Select
• TextArea
• ControlledPasswordInput
• PasswordInput
• RadioButtonGroup -- todo: confirm with michael

Changelog

Changed

• Added aria-describedby attribute in Multiselect, Dropdown, Combobox, DatePickerInput, NumberInput, Select, ProgressBar,TextArea, ControlledPasswordInput, PasswordInput, RadioButtonGroup

Testing / Reviewing

Components should behave and look exactly the same. Voiceover now reads helper text when focused on input

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	641495c
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/642f78783b2ce600088fcfa5
😎 Deploy Preview	https://deploy-preview-13371--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	641495c
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/642f78781f2aa20008f16360
😎 Deploy Preview	https://deploy-preview-13371--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[alisonjoseph]

Tested all components and all are working as intended.

One little thing, do we want to add helperText to the Playground Argtypes for DatePicker?

helperText: {
   control: { type: 'text' },
   table: {
     category: 'DatePickerInput',
   },
 },

[francinelucca]

Tested all components and all are working as intended.

One little thing, do we want to add helperText to the Playground Argtypes for DatePicker?

helperText: {
   control: { type: 'text' },
   table: {
     category: 'DatePickerInput',
   },
 },

done!

[aledavila]

@francinelucca LGTM! one thing I just merged in helperText for RadioButtonGroup. Could you add the aria-describedby to that component as well if you can please TIA

[francinelucca]

Resubmitting for review.

For RadioButtonGroup and CheckboxGroup I tried setting the aria-describedby on the legend instead of the fieldset but got the same result. couldn't get mac's VoiceOver to read it. For both instances the accessibility tree correctly shows the description text:

so I decided to leave it in the fieldset. I found this proof case that saw voiceover skipping over the aria-describedby in fieldset in VoiceOver while other a11y tools did read it https://russmaxdesign.github.io/accessible-forms/fieldset-error02.html
FYI @mbgower

[alisonjoseph]

LGTM!