[BUG] - Screen Reader Announcement Issue in Select Component Due to Multiple aria-labelledby References

[kimskovhusandersen]

NextUI Version

2.4.8

Describe the bug

In the Select component, the screen reader (VoiceOver) announces the label and value together in a confusing way, such as:
"Dog Select an animal, list box pop-up collapsed."

This occurs because the aria-labelledby attribute on the Select component’s button references multiple elements (react-aria2285256286-:r3p: and react-aria2285256286-:r3l:). As a result, the screen reader concatenates the text from these elements into a single, unclear announcement without proper separation.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Use the Select component in a screen reader-enabled environment.
2. Open the dropdown and select an option.
3. Observe the screen reader's announcement after selecting an option.

Expected behavior

The screen reader should announce the label and value distinctly, such as:
"Dog, Select an animal, list box pop-up collapsed."

Screenshots or Videos

Screen.Recording.2024-11-19.at.11.57.56.mov

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-1576 [BUG] - Screen Reader Announcement Issue in Select Component Due to Multiple aria-labelledby References