[a11y]: The <label> element does not have descriptive text that identifies the expected input

Package

@carbon/ibm-products

Browser

Chrome

Operating System

MacOS

Package version

1.40.0

React version

18.2.0

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker

Assistive technology

No response

Description

Missing Descriptive Text for Elements: The element associated with input fields does not contain descriptive text that clearly identifies the expected input.

MultiSelect Dropdown Error Display Bug: There is a bug with the MultiSelect dropdown functionality where error messages are being displayed in an unintended location within the user interface. Instead of appearing directly below or next to the MultiSelect component, the error messages are shown elsewhere in the UI, making it unclear to users which input field the error refers to.

WCAG 2.1 Violation

No response

Reproduction/example

https://codesandbox.io/p/devbox/dazzling-sanderson-7p8z9k?workspaceId=aef1e2f0-a29f-4df8-8da4-6a62a57c276b

Steps to reproduce

1.Navigate to the page containing the MultiSelect dropdown. 2.Attempt to select an option or leave the selection blank in the MultiSelect dropdown that triggers an error (e.g., validation error). 3.Observe where the error message is displayed in the UI.

Code of Conduct

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

carbon-design-system / ibm-products