bug: UButton to prop doesn't follow the disabled state

[sandros94]

Version

@nuxthq/ui: v2.2.0 & v2.6.0
nuxt: v3.5.0 & v3.6.5

Reproduction Link

Stackblitz repro

Steps to reproduce

<template>
  <div>
    <UButton label="Active with to" to="/test" />
    <UButton label="Disabled with to" disabled to="/test" />
    <UButton label="Disabled" disabled />
  </div>
</template>

What is Expected?

The disabled button that has a to prop should be unclickable.

What is actually happening?

The disabled button with a to prop not only is clickable with the correct link, but it is visibly active regardless of the disabled state.

[benjamincanac]

Indeed, when using the UButton with a :to prop it creates an html <a>.

I can make a fix to remove the href when its disabled, but the visual style of the button won't be reflected as the disabled attribute doesn't exist on an <a>.

[benjamincanac]

With this commit, when setting disabled on a <UButton> / <ULink> (used underneath by the button), the <a> HTML element will have its href removed and the role="link" aria-disabled="true" attributes added.

This will make the link semantically valid. However, the styling will not be applied as Tailwind CSS disabled variant can't be used for this case.

Followed recommendations from this article: https://www.scottohara.me/blog/2021/05/28/disabled-links.html