Accessibility implementation of the Dropdown component seems confusing

[iamkyrylo]

The current implementation is based on the following elements: <select> and <input> with a list of options (<ul>) bound by the aria-haspopup attribute. The issue is that the select and input elements are not technically connected as one structure, and screen readers identify them as two unrelated elements. Yes, you pass the inputId to bind the textbox with the label, but there is also an empty and unlabelled select. Then, after interacting with the textbox and choosing an option from the list, the previously empty select populates with one selected option, and input also gets the value🤷‍♂️

As a developer, I also find this confusing. I can’t ensure that a particular combobox has a specific value. Instead, I can only verify that the document contains the selected option, without any direct reference to the combobox. Here’s an example of what I mean:

describe('Countries dropdown', () => {
    it('should select a country option when clicked', async () => {
        const user = userEvent();

        render(<>
            <label htmlFor="countries">Countries</label>
            <Dropdown inputId="countries" options={countries} optionLabel="name" />
        </>);

        await user.click(screen.getByLabelText('Countries'));
        await user.click(screen.getByRole('option', { name: 'Rome' }));

        // What I want to test is that the option is selected
        // I can check if the document has the selected option by
        expect(screen.getByRole('option', { name: 'Rome', selected: true, hidden: true })).toBeInTheDocument();
        // or by
        expect(screen.getByText('Rome', { ignore: 'option' })).toBeInTheDocument();
        // but I would like to ensure that a certain select element has the selected option
        expect(screen.getByRole('combobox', { name: 'Countries' })).toHaveValue('Rome');
    });
});

From my perspective, keeping the select element is redundant. The Dropdown component should inherit the accessibility implementation of the MultiSelect component, using <input> with the combobox role and value:

<input role="combobox" id={inputId} value={selectedOptionValue} />

[melloware]

@iamkyrylo PrimeTek tries to keep them all in sync and PrimeVue is usually out front can you check what PrimeVue Dropdown accessibility is?

[iamkyrylo]

PrimeVue seems to follow exactly what I suggest. The accessibility approach is based only on one element with role="combobox":

PrimeVue:

PrimeReact:

If aligning both implementations is a priority, let me know if you need help with this upgrade. I can find time to create an issue and contribute.

[melloware]

@iamkyrylo sure if that is what PrimeVue does then PrimeReact should be the same. PR would be great!