fix: use form control mixin in uui-button

Author: madsrasmussen

packages/uui-button/lib/uui-button.element.ts

@@ -3,7 +3,7 @@ import {
   UUIHorizontalShakeKeyframes,
 } from '@umbraco-ui/uui-base/lib/animations';
 import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
-import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import { FormControlMixin, LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import {
   InterfaceLookDefaultValue,
@@ -14,7 +14,7 @@ import {
   iconWrong,
 } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
 import { css, html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 
 export type UUIButtonState = null | 'waiting' | 'success' | 'failed';
 
@@ -41,7 +41,9 @@ export type UUIButtonType = 'submit' | 'button' | 'reset';
  *  @cssprop --uui-button-contrast-disabled - overwrite the text color for disabled state
  */
 @defineElement('uui-button')
-export class UUIButtonElement extends LabelMixin('', LitElement) {
+export class UUIButtonElement extends FormControlMixin(
+  LabelMixin('', LitElement)
+) {
   static styles = [
     UUIHorizontalShakeKeyframes,
     css`
@@ -554,20 +556,18 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
   @property({ type: String, reflect: true })
   state: UUIButtonState = null;
 
-  /**
-   * This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.  Read more about form controls here https://web.dev/more-capable-form-controls/
-   * @type {boolean}
-   */
-  static readonly formAssociated = true;
-
-  private _internals;
+  @query('#button')
+  protected _button!: HTMLInputElement;
 
   constructor() {
     super();
-    this._internals = (this as any).attachInternals();
     this.addEventListener('click', this._onHostClick);
   }
 
+  protected getFormElement(): HTMLElement {
+    return this._button;
+  }
+
   private _onHostClick(e: MouseEvent) {
     if (this.disabled) {
       e.preventDefault();
@@ -637,7 +637,7 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
 
   render() {
     return html`
-      <button ?disabled=${this.disabled} aria-label="${this.label}">
+      <button id="button" ?disabled=${this.disabled} aria-label="${this.label}">
         ${this.renderState()} ${this.renderLabel()}
         <slot name="extra"></slot>
       </button>