nuxt/ui

[Modal] Using content slot: `DialogContent` requires a `DialogTitle`

Closed this issue · 1 comments

onurusluca commented

Environment

Operating System: Windows_NT
Node Version: v20.18.0
Nuxt Version: -
CLI Version: 3.14.0
Nitro Version: -
Package Manager: unknown
Builder: -
User Config: -
Runtime Modules: -
Build Modules: -

Version

v3.0.0-alpha.6

Reproduction

Cannot use v3 on stackblitz so no repo.

Description

Using below code from docs, I am getting a warning when using the content slot.

<UModal>
      <UButton label="Open" color="neutral" variant="subtle" />
      <template #content>
        <Placeholder class="m-4 h-48" />
      </template>
    </UModal>

index.js?v=e9de77c9:2483 Warning: DialogContent requires a DialogTitle for the component to be accessible for screen reader users.
If you want to hide the DialogTitle, you can wrap it with our VisuallyHidden component.
For more information, see https://www.radix-vue.com/components/dialog.html#title

index.js?v=e9de77c9:2485 Warning: Missing Description or aria-describedby="undefined" for DialogContent.

Is there any way to suppress this? What is the best practice here? Should I just ignore this?
I need to use content because content of the modal is a different component with dynamic title and description.

Because header and footer slots are used with body, adding a header will results in the same error. Also It doesn't display the header.

<UModal>
      <UButton label="Open" color="neutral" variant="subtle" />

      <template #header> My Modal </template>
      <template #content>
        <Placeholder class="m-4 h-48" />
      </template>
    </UModal>

Because we are using content, title or description won't make a difference either.

<UModal 
    title="Modal with description"
    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
>
      <UButton label="Open" color="neutral" variant="subtle" />

      <template #header> My Modal </template>
      <template #content>
        <Placeholder class="m-4 h-48" />
      </template>
    </UModal>

Additional context

No response

Logs

No response

benjamincanac commented

This is a warning thrown by Radix Vue on development only, there's not much we can do about it for now. Will check in the next major (Reka UI) once I migrate.

  • 👍1