[CL-295] Use aria-disabled on buttons (#15009)

* Use aria-disabled for button disabled state

* remove import from testing story

* use aria-disabled attr on bitLink button

* remove unnecessary story attrs

* remove disabled attr if on button element

* create caprture click util

* use caprture click util and fix tests

* fix lint errors

* fix event type

* combine click capture and attr modification

* fix lint error. Commit spec changes left out of last commit in error

* inject element ref

* move aria-disabled styles to common

* move disabled logic into util

* fix broken async actions stories

* fix broken tests asserting disabled attr

* have test check for string true vlalue

* fix Signal type

* fix form-field story import

* remove injector left in error

* aria-disable icon buttons

* update form component css selector to look for aria-disabled buttons

* use correct types. pass nativeElement directly

* add JSDoc comment for util function

---------

Co-authored-by: Will Martin <contact@willmartian.com>

libs/components/src/icon-button/icon-button.component.ts

@@ -1,12 +1,22 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { NgClass } from "@angular/common";
-import { Component, computed, ElementRef, HostBinding, Input, model } from "@angular/core";
+import {
+  Component,
+  computed,
+  ElementRef,
+  HostBinding,
+  inject,
+  Input,
+  model,
+  Signal,
+} from "@angular/core";
 import { toObservable, toSignal } from "@angular/core/rxjs-interop";
 import { debounce, interval } from "rxjs";
 
 import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstraction";
 import { FocusableElement } from "../shared/focusable-element";
+import { ariaDisableElement } from "../utils";
 
 export type IconButtonType = ButtonType | "contrast" | "main" | "muted" | "light";
 
@@ -102,41 +112,41 @@ const styles: Record<IconButtonType, string[]> = {
 
 const disabledStyles: Record<IconButtonType, string[]> = {
   contrast: [
-    "disabled:tw-opacity-60",
-    "disabled:hover:tw-border-transparent",
-    "disabled:hover:tw-bg-transparent",
+    "aria-disabled:tw-opacity-60",
+    "aria-disabled:hover:tw-border-transparent",
+    "aria-disabled:hover:tw-bg-transparent",
   ],
   main: [
-    "disabled:!tw-text-secondary-300",
-    "disabled:hover:tw-border-transparent",
-    "disabled:hover:tw-bg-transparent",
+    "aria-disabled:!tw-text-secondary-300",
+    "aria-disabled:hover:tw-border-transparent",
+    "aria-disabled:hover:tw-bg-transparent",
   ],
   muted: [
-    "disabled:!tw-text-secondary-300",
-    "disabled:hover:tw-border-transparent",
-    "disabled:hover:tw-bg-transparent",
+    "aria-disabled:!tw-text-secondary-300",
+    "aria-disabled:hover:tw-border-transparent",
+    "aria-disabled:hover:tw-bg-transparent",
   ],
   primary: [
-    "disabled:tw-opacity-60",
-    "disabled:hover:tw-border-primary-600",
-    "disabled:hover:tw-bg-primary-600",
+    "aria-disabled:tw-opacity-60",
+    "aria-disabled:hover:tw-border-primary-600",
+    "aria-disabled:hover:tw-bg-primary-600",
   ],
   secondary: [
-    "disabled:tw-opacity-60",
-    "disabled:hover:tw-border-text-muted",
-    "disabled:hover:tw-bg-transparent",
-    "disabled:hover:!tw-text-muted",
+    "aria-disabled:tw-opacity-60",
+    "aria-disabled:hover:tw-border-text-muted",
+    "aria-disabled:hover:tw-bg-transparent",
+    "aria-disabled:hover:!tw-text-muted",
   ],
   danger: [
-    "disabled:!tw-text-secondary-300",
-    "disabled:hover:tw-border-transparent",
-    "disabled:hover:tw-bg-transparent",
-    "disabled:hover:!tw-text-secondary-300",
+    "aria-disabled:!tw-text-secondary-300",
+    "aria-disabled:hover:tw-border-transparent",
+    "aria-disabled:hover:tw-bg-transparent",
+    "aria-disabled:hover:!tw-text-secondary-300",
   ],
   light: [
-    "disabled:tw-opacity-60",
-    "disabled:hover:tw-border-transparent",
-    "disabled:hover:tw-bg-transparent",
+    "aria-disabled:tw-opacity-60",
+    "aria-disabled:hover:tw-border-transparent",
+    "aria-disabled:hover:tw-bg-transparent",
   ],
   unstyled: [],
 };
@@ -163,7 +173,7 @@ const sizes: Record<IconButtonSize, string[]> = {
   ],
   imports: [NgClass],
   host: {
-    "[attr.disabled]": "disabledAttr()",
+    "[attr.aria-disabled]": "disabledAttr()",
   },
 })
 export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableElement {
@@ -233,5 +243,10 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
     return this.elementRef.nativeElement;
   }
 
-  constructor(private elementRef: ElementRef) {}
+  private elementRef = inject(ElementRef);
+
+  constructor() {
+    const element = this.elementRef.nativeElement;
+    ariaDisableElement(element, this.disabledAttr as Signal<boolean | undefined>);
+  }
 }