Description

The MorphingDialog component currently has broken accessibility relationships because the aria-labelledby and aria-describedby attributes on the dialog container do not match the IDs of the title and description components.

Current Behavior

1. Title Mismatch: MorphingDialogContent expects motion-ui-morphing-dialog-title-${uniqueId}, but MorphingDialogTitle has no id attribute at all.
2. Description Mismatch: MorphingDialogContent expects motion-ui-morphing-dialog-description-${uniqueId}, but MorphingDialogDescription uses the ID dialog-description-${uniqueId}.

Expected Behavior

The aria-labelledby and aria-describedby values in MorphingDialogContent should exactly match the id attributes assigned to the MorphingDialogTitle and MorphingDialogDescription elements.

Proposed Solution

Standardize the naming convention and ensure IDs are applied to the child components.

1. MorphingDialogContent

Update the aria references to a consistent format:
aria-labelledby={motion-ui-morphing-dialog-title-${uniqueId}}
aria-describedby={motion-ui-morphing-dialog-description-${uniqueId}}

2. MorphingDialogTitle

Add the missing ID prop:
id={motion-ui-morphing-dialog-title-${uniqueId}}

3. MorphingDialogDescription

Update the ID prop to match the new format:
id={motion-ui-morphing-dialog-description-${uniqueId}}

Affected Component

components/core/morphing-dialog.tsx