Form Components: Accessibility Tree not updating when id changes

[nmerget]

Currently, we add a default id to our form components like textarea,input, etc.
OnMount we update the id and which is connected with the <label>.

The accessibility tree isn't updating when this id changes. Therefore the label gets duplicated for screen-reader users:

A solution could be to move the form-component into the <label> or work with aria-hidden ?

[mfranzke]

I don't see a use case for an id that would change after initially mounted. Is this mainly meant for resilience ?

[nmerget]

Our implementation looks like this:

	onMount(() => {
		state._id = props.id || 'input-' + uuid();
		state._dataListId = props.dataListId || `datalist-${uuid()}`;
	});

	onUpdate(() => {
		if (state._id) {
			state._messageId = state._id + DEFAULT_MESSAGE_ID_SUFFIX;
			state._validMessageId = state._id + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
			state._invalidMessageId =
				state._id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
		}
	}, [state._id]);

We need to connect all messages for aria-describedby