Improvement: Allow us to passthrough id + other important props (aria-labelledBy, etc)

[amcurative]

#1041 - this is a related discussion

As it stands, it seems in your code, specifically for Listbox, any prop provided such as "aria-labelledBy" on a ListButton is not respected and simply replaced with your own logic. This hinders flexibility and forces a certain pattern that may not fit all use cases and is counter-intuitive.

What should happen is, if I provide this as a prop, it should take precedence and thus override your custom logic for this value.

This allows for greater customization and flexibility.

For example, I use your listbox but in my case I don't want to follow your pattern of putting <Listbox.Label> inside the component. Instead I have a label that sits outside this component. I have no way to link it to the listbox.

I should be able to pass "aria-labelledBy" or "id" the ListBox component or ListBox.Button and it should take precedence and not be ignored, then my custom label can work with this component and maintain accessibility.

Another example is element id, right now its being auto generated by this lib, ie "headlessui-listbox-button-1" and completely ignoring what I pass in. As a developer, I want to be able to control this id, to possibly make it consistent with the rest of my ids or so I can refer to it elsewhere such as in my label with the htmlFor attribute. I can only do that If I can determine the id of the listbox.

This can probably be applied across the board to other components but Listbox would be a nice place to start.