DashboardSearchButton: Invalid HTML structure: <div> inside <button>

[caiotarifa]

Environment

• Operating system: macOS 25.3.0
• CPU: Apple M3 (8 cores)
• Node.js version: v24.11.0
• nuxt/cli version: 3.34.0
• Package manager: pnpm@10.32.1
• Nuxt version: 4.4.2
• Nitro version: 2.13.1
• Builder: vite@7.3.1

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.5.1

Reproduction

The issue can also be verified by rendering the component and inspecting the DOM in the browser devtools.

Description

The DashboardSearchButton component currently renders a <div> element inside a <button>. This results in invalid HTML semantics, since interactive elements like should only contain phrasing content. Placing a block-level <div> inside a <button> can lead to accessibility issues and inconsistent behavior across browsers and assistive technologies.

This structure should be refactored to use semantically valid elements (e.g., <span> or other inline elements) or adjust the component layout so that block-level elements are not nested inside the <button>.

Additional context

No response

Logs

[mdotme]

Yeah it's indeed <div> element is used in trailing slot. Maybe we should change that to <span>? @benjamincanac

https://github.com/nuxt/ui/blob/v4/src/runtime/components/DashboardSearchButton.vue#L117