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
- Title Mismatch:
MorphingDialogContent expects motion-ui-morphing-dialog-title-${uniqueId}, but MorphingDialogTitle has no id attribute at all.
- 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
Description
The
MorphingDialogcomponent currently has broken accessibility relationships because thearia-labelledbyandaria-describedbyattributes on the dialog container do not match the IDs of the title and description components.Current Behavior
MorphingDialogContentexpectsmotion-ui-morphing-dialog-title-${uniqueId}, butMorphingDialogTitlehas noidattribute at all.MorphingDialogContentexpectsmotion-ui-morphing-dialog-description-${uniqueId}, butMorphingDialogDescriptionuses the IDdialog-description-${uniqueId}.Expected Behavior
The
aria-labelledbyandaria-describedbyvalues inMorphingDialogContentshould exactly match theidattributes assigned to theMorphingDialogTitleandMorphingDialogDescriptionelements.Proposed Solution
Standardize the naming convention and ensure IDs are applied to the child components.
1.
MorphingDialogContentUpdate the aria references to a consistent format:
aria-labelledby={
motion-ui-morphing-dialog-title-${uniqueId}}aria-describedby={
motion-ui-morphing-dialog-description-${uniqueId}}2.
MorphingDialogTitleAdd the missing ID prop:
id={
motion-ui-morphing-dialog-title-${uniqueId}}3.
MorphingDialogDescriptionUpdate the ID prop to match the new format:
id={
motion-ui-morphing-dialog-description-${uniqueId}}Affected Component
components/core/morphing-dialog.tsx