As it stand right now, the listbox is added to the DOM after the user interacts with the Select component. This is a problem because it will throw an error when running accessibility tests. Listbox is rendered after the user interacts with the component, but this is not good enough.
Technical description of the issue
The problem is that the [role="combobox"] element has aria-controls attribute equal to the id of the [role="listbox"] element, but since this element does not exist when the page is first rendered, it will throw an error when running accessibility audits.
Proposed solution
Allow rendering (at least optionally) the listbox element from the start. You can do this by passing prop 'forceRender={true}' to SelectTrigger in BaseSelect.tsx, and control this with a prop received from Select. I've created a PR for this, but open to suggestion on how it can be done differently.
Description
As it stand right now, the listbox is added to the DOM after the user interacts with the Select component. This is a problem because it will throw an error when running accessibility tests. Listbox is rendered after the user interacts with the component, but this is not good enough.
Technical description of the issue
The problem is that the
[role="combobox"]element hasaria-controlsattribute equal to the id of the[role="listbox"]element, but since this element does not exist when the page is first rendered, it will throw an error when running accessibility audits.Proposed solution
Allow rendering (at least optionally) the listbox element from the start. You can do this by passing prop 'forceRender={true}' to SelectTrigger in BaseSelect.tsx, and control this with a prop received from Select. I've created a PR for this, but open to suggestion on how it can be done differently.
Thanks!