Button component: link buttons should not use aria-disabled

[afercia]

Description

Discovered while checking #62080

The Button component accepts a href prop which is supposed to be an URL. When set, the Button renders an <a> element: a link with a proper href attribute.

However, when the Button component receives also the disabled and ;__experimentalIsFocusable props both set to true, the rendered link gets an aria-disabled="true" attribute.

That's not correct for two reasons:

• It's invalid HTML: aria-disabled-true is invalid on an <a> element.
• Conceptually incorrect: links can't be 'disabled'. Either they are links or not.

Weirdly enough, when setting __experimentalIsFocusable to false and keeping the href prop, the Button is rendered as a disabled <button> element.

Rendered invalid HTML example:

<a href="https://wordpress.org" aria-disabled="true" class="components-button">Code is poetry</a>

It is worth mentioning that links can't 'really' be disabled. Their real nature is to not be disabled. The defautl action can be prevented via JavaScript to make a click event do nothing but that's less than ideal. It's against the nature of a link.That's the reason why an aria-disabled="true" or disabled attribute on <a> elements are invalid HTML.

Step-by-step reproduction instructions

• Go to https://wordpress.github.io/gutenberg/?path=/story/components-button--default&args=disabled:!true;__experimentalIsFocusable:!true
• Make sure both the __experimentalIsFocusable and disabled props are set to true.
• Set the href prop to https://wordpress.org
• Inspect the button rendered at the top of the page.
• Oberve it renders and <a> element with an aria-disabled="true" attribute.

Screenshots, screen recording, code snippet

aria-disabled="true" invalid HTML

disabled invalid HTML

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[afercia]

Note: I think this problem was discussed when first implementing the Button component but never fully addressed, nor I could find a specific issue about it.

[mirka]

I noticed this issue as well when testing edge cases in the TypeScript types for Button. For what it's worth, TypeScript will error on cases where a disabled is used together with href. But we should definitely fix the runtime behavior.

gutenberg/packages/components/src/button/test/index.tsx

Lines 634 to 635 in ffb6c43

	{ /* @ts-expect-error - although the runtime behavior will allow this to be an anchor, this is probably a mistake. */ }
	<Button disabled __experimentalIsFocusable href="foo" />