Skip to content

fix(Dialog,AlertDialog): omit aria-labelledby/describedby when title/description absent#631

Open
sridhar-3009 wants to merge 4 commits into
vuetifyjs:masterfrom
sridhar-3009:fix/dialog-dangling-aria-idrefs-608
Open

fix(Dialog,AlertDialog): omit aria-labelledby/describedby when title/description absent#631
sridhar-3009 wants to merge 4 commits into
vuetifyjs:masterfrom
sridhar-3009:fix/dialog-dangling-aria-idrefs-608

Conversation

@sridhar-3009

Copy link
Copy Markdown
Contributor

Problem

DialogContent and AlertDialogContent unconditionally emit aria-labelledby={titleId} and aria-describedby={descriptionId} even when DialogTitle / DialogDescription are not rendered. If the referenced element doesn't exist in the DOM, the IDREF is dangling — invalid per the ARIA spec. Screen readers may announce empty text or skip the dialog's accessible name.

Closes #608.

Solution

Presence-track Title and Description sub-components using ShallowRef<boolean> in the root context, set/unset via onMounted/onUnmounted. Content components then gate the ARIA attributes on whether the sub-component is actually present:

'aria-labelledby': context.titlePresent.value ? context.titleId : undefined,
'aria-describedby': context.descriptionPresent.value ? context.descriptionId : undefined,

Files changed: DialogRoot.vue, DialogTitle.vue, DialogDescription.vue, DialogContent.vue, AlertDialogRoot.vue, AlertDialogTitle.vue, AlertDialogDescription.vue, AlertDialogContent.vue.

@github-actions

github-actions Bot commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

Changeset found — this change will be included in the next release. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] a11y: unconditional aria-labelledby/describedby emit dangling IDREFs (Dialog, AlertDialog, Progress)

1 participant