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