Dropdown: Enhance accessibility by exposing combobox role

[iamkyrylo]

Describe the bug

This issue was recently discussed in the Discussions, and I'm excited to finally create a PR addressing it. I’m creating this issue to provide context for the PR. While I believe this change aligns with the project’s goals, please feel free to decline it if it doesn't.

Introduction

The Dropdown component currently includes:

• Hidden input element: Supports form submissions and focus events.
• Hidden select element: Provides a combobox with the selected option for screen readers.
• Visible span label or input element: Displays the selected option or serves as an editable input for searching options.

Problem

The current accessibility approach relies on two hidden elements: input and select, which makes it unnecessarily complex and less effective. This could be simplified by directly assigning the combobox role to the span label. Making this change would:

• Improve labeling and accessibility.
• Create clear relationships between elements.
• Accurately represent states like disabled or invalid using aria attributes.

A similar approach is already implemented in PrimeVue, demonstrating its benefits. Applying this improvement to PrimeReact would enhance the user experience and bring it in line with your company's standards.

Testing challenges

The current implementation complicates testing and requires additional boilerplate with passing props through pt or creating a wrapper.

Common test cases:

1. Finding the dropdown using the combobox role:

   const combobox = screen.getByRole('combobox', { name: 'Cities' });

   This fails because the label is tied to the hidden input, which has the textbox role.

2. Clicking on the dropdown to open the menu:

   await user.click(combobox);

   This fails because the input is hidden and not clickable as the element inherits pointer-events: none, even with combobox role.

3. Finding the menu using the associated label:

   await screen.findByRole('listbox', { name: 'Cities' });

   This fails because the list isn’t bound to the input using aria-controls, despite documentation suggesting otherwise.

Reproducer

https://stackblitz.com/edit/vitejs-vite-7rwuaddq?file=src%2FApp.test.tsx

System Information

"primereact": "^10.9.1"
"react": "^18.3.1"
"@testing-library/react": "^16.1.0"

Steps to reproduce the behavior

1. Open sandbox
2. Run npm test in the terminal
3. Try to play with the test and see the result

Expected behavior

role="combobox" is assigned directly to the visible span label or an editable input element and the redundant hidden select element is deprecated.