DialogContent requires a DialogTitle for the component to be accessible for screen reader users.

[simonmaass]

Environment

• Operating System: Windows_NT
• Node Version: v22.13.1
• Nuxt Version: 3.15.4
• CLI Version: 3.21.1
• Nitro Version: 2.10.4
• Package Manager: yarn@1.22.22
• Builder: -
• User Config: compatibilityDate, modules, imports, devtools, experimental, app, css, vue, site, runtimeConfig, build, sourcemap, future, vite, typescript, eslint, prismic, pwa, sentry
• Runtime Modules: @samk-dev/nuxt-vcalendar@1.0.4, @nuxt/fonts@0.10.3, @nuxt/eslint@0.7.6, @nuxt/ui@3.0.0-alpha.12, @nuxt/image@1.9.0, @nuxtjs/prismic@4.0.1, @nuxtjs/robots@5.2.2, @sentry/nuxt/module@8.52.0, @vee-validate/nuxt@4.15.0, @vite-pwa/nuxt@0.10.6, @vueuse/nuxt@12.5.0, @zadigetvoltaire/nuxt-gtm@0.0.13, nuxt-lodash@2.5.3
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.0-alpha.12

Reproduction

Description

Warning: DialogContent requires a DialogTitle for the component to be accessible for screen reader users.

Warning: Missing Description or aria-describedby="undefined" for DialogContent.

Additional context

No response

Logs

[benjamincanac]

This is warning thrown by Reka UI: https://github.com/unovue/radix-vue/blob/v2/packages/core/src/Dialog/DialogContentImpl.vue#L61 in development only. We can't do much about this.

[strokirk]

Notes: To avoid the warning, you need to ensure you set both the title and description props, and avoid using the header slot. Either body + footer or content are fine to use.

1. Use <UModal title="Title" description="Description><template #body>Some stuff...

2. Use <UModal title="Title" description="Description><template #content>Some stuff...

[StirStudios]

@strokirk this indeed solved the issue! Thanks for the tip!