fix(aria/combobox): empty aria-controls when the popup widget has no id

[lazerg]

ngComboboxWidget reads its ID off the host element, so a popup whose widget doesn't set one (for example the dialog popup in the docs, where the widget is a plain div) leaves the combobox with aria-controls="", which Axe flags. The same happened when the ID came from a host binding such as ngListbox, since it isn't on the element yet when the widget reads it.

The widget now generates an ID after the first render if the element still doesn't have one, and re-reads the ID at that point so binding-provided ones are picked up.

Fixes#33640.

[ok7sai]

Thanks for the fix! Overall looks good.

[ok7sai]

I'd suggest restructure the test group to something like

describe('ComboboxWidget', () => {
it('should auto-generate an ID on widget when none is provided', async () => {
// Tests plain widget without id -> receives 'ng-combobox-widget-X'
});
it('should preserve an explicit ID on the widget element', async () => {
// Tests <div ngComboboxWidget id="custom-id"> -> uses 'custom-id'
});
it('should prioritize sibling directive IDs over generated IDs', async () => {
// Tests <div ngComboboxWidget ngListbox> -> uses 'ng-listbox-X'
});
});

For better describing the wanted behaviors.

[lazerg]

Done in da624a1. Two of the three fail on main; the explicit-id one passes there and guards against a regression.

[crisbeto]

This PR was merged into the repository. The changes were merged into the following branches:

• main: c87e3a5
• 22.1.x: 020f144