[v3] UButton wrapped with UChip as a Modal/Drawer trigger: aria-* attributes wrong

[madebyfabian]

Environment

• Operating System: Darwin
• Node Version: v20.14.0
• Nuxt Version: 3.13.2
• CLI Version: 3.15.0
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: default
• Runtime Modules: @nuxt/[email protected]
• Build Modules: -

Version

3.0.0-alpha.7

Reproduction

https://github.com/madebyfabian/nuxt-ui3-drawer-chip-button-reprod

Description

Probably super edge-case, sorry in advance 😄. Reproduction repo is linked, could not create a stackblitz because it seems tailwind v4 does not work with stackblitz.

---

The issue is that if you use a <UChip> to wrap your <UButton> that acts as a trigger for <UModal> or <UDrawer> (probably also for other components?), the aria-* values are not applied properly.

So usually, the trigger button HTML should look like this:

<button type="button" aria-haspopup="dialog" aria-expanded="false" data-state="closed" class="...">...</button>

But when wrapped with a Chip (see the app.vue in the reproduction repo), it looks like this:

<div class="relative inline-flex items-center justify-center shrink-0" type="button" aria-haspopup="dialog" aria-expanded="false" data-state="closed">
  <button type="button" class="...">
    <span class="truncate">...</span>
  </button>
  <span class="rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap bg-[var(--ui-primary)] h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform" ></span>
</div>

so the aria-* attributes are applied to the parent <div> node and not the <button>, which causes Lighthouse to complain (thats why I noticed).

---

Not sure if that's a Nuxt UI specific issue or it's more in the underlying Vue Radix.

Additional context

No response

Logs

No response

[DrxcoDev]

Your issue is that wrapping a inside a causes aria-* attributes to be applied to the parent

, not the , leading to accessibility issues in Lighthouse. Try adjusting the nesting or check if it’s a known issue with Vue Radix components.

[madebyfabian]

@DrxcoDev Thanks for your comment, unfortunately I think some parts of it got trimmed away, that happens when you write a component name but without backticks

[benjamincanac]

Thanks for the report! 😊