Render the listbox whenever the Select component is rendered

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 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.

Thanks!

Start with BaseSelect.tsx and the proposed PR #804, focusing on SelectTrigger and its forceRender={true} option. The work is done when the listbox can be rendered from the initial Select render and accessibility audits no longer encounter an aria-controls reference to a missing element.