UDashboardSidebar - reka-ui errors on open

[moshetanzer]

Environment

• Operating System: Darwin
• Node Version: v22.11.0
• Nuxt Version: 3.16.0
• CLI Version: 3.22.5
• Nitro Version: 2.11.6
• Package Manager: [email protected]
• Builder: -
• User Config: modules, devtools, app, css, runtimeConfig, future, compatibilityDate, telemetry, eslint
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], @vueuse/[email protected], @nuxt/[email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3

Reproduction

<UDashboardSidebar
      collapsible
      resizable
    >
      <template #header>
        <div class="flex items-center gap-2">
          <UIcon
            name="i-solar-buildings-2-bold"
            class="w-7 h-7"
          />
          <span class="flex items-center gap-2 font-semibold text-lg logo">example</span>
        </div>
      </template>
      <UNavigationMenu
        orientation="vertical"
        :items="links"
      />
      <div class="flex-1" />
      <UNavigationMenu
        orientation="vertical"

        :items="footerLinks"
      />
      <USeparator class="sticky bottom-0" />
      <template #footer>
        <span class="text-xs text-neutral-500 tracking-tight">Version {{ useRuntimeConfig().public.version }}</span>
      </template>
    </UDashboardSidebar>

Description

Hey,
Every time sidebar is opened i get the following warns in console:

utils.ts:34  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.reka-ui.com/docs/components/dialog.html#title

and

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

Also, do think in general we should avoid Reka UI error messages...

[moshetanzer]

Not sure if it is due to this issue, but the sidebar doesnt close automatily after navigation either...

[czarsbenemoriendi]

Its not exactly a bug. This is warning thrown by Reka UI and exist in development only: https://github.com/unovue/radix-vue/blob/v2/packages/core/src/Dialog/DialogContentImpl.vue#L61

Here you have the solution #3215 (comment)

[moshetanzer]

Yeah don’t think that will work for slideover though. It just pollutes logs since every time it opened it shows and when using collapsible it becomes a pain.

[thewebbeckons]

Facing this as well because when you use a custom slot for header (ie. building some UI element within the title/description section) you'll always get these warnings.

[benjamincanac]

Those warnings are only displayed by Reka UI in development, you can ignore them.

[Cyril30]

Not sure if it is due to this issue, but the sidebar doesnt close automatily after navigation either...

I am facing the same issue. The sidebar doesnt close automatically after navigation when opened.

I also came on this post because of these warnings also appearing in my app. But the solution provided #3215 (comment) can't be applied as I think there is no title or description prop to set to UDashboardSidebar component.

[HugoRCD]

@Cyril30 You can copy this logic to close the sidebar while navigating: https://github.com/nuxt-ui-pro/dashboard/blob/main/app/layouts/default.vue

[strokirk]

@benjamincanac Lots of warnings in development isn't ideal though, right? Ideally there would be a way to develop the app with zero warnings.