[CL-796] unrevert aria disabled buttons (#15924)

* 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

* WIP

* WIP

* inject service in directive

* remove console log

* remove disabled attr left in error

* update comments

* remove unnecessary logic

* remove :disabled psuedo selector as its apparently not needed

* fix event type

* coerce disabled attr to boolean

* remove duplicate style concat left by conflict resolution

* add back buttonStyles default

* move reactive logic back to helper

* add test to ensure menu button doesn't open when trigger is disabled

* remove menu toggle to fix tests

* remove disabled menu story

* Fix usage of bitLink in verify email component

* Update varaible name

* no longer pass destroyRef

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

@@ -1,11 +1,22 @@
 import { NgClass } from "@angular/common";
-import { Component, computed, effect, ElementRef, HostBinding, input, model } from "@angular/core";
+import {
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  HostBinding,
+  inject,
+  input,
+  model,
+} from "@angular/core";
 import { toObservable, toSignal } from "@angular/core/rxjs-interop";
 import { debounce, interval } from "rxjs";
 
+import { AriaDisableDirective } from "../a11y";
 import { setA11yTitleAndAriaLabel } from "../a11y/set-a11y-title-and-aria-label";
 import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
 import { FocusableElement } from "../shared/focusable-element";
+import { ariaDisableElement } from "../utils";
 
 export type IconButtonType = "primary" | "danger" | "contrast" | "main" | "muted" | "nav-contrast";
 
@@ -78,7 +89,6 @@ const sizes: Record<IconButtonSize, string[]> = {
   ],
   imports: [NgClass],
   host: {
-    "[attr.disabled]": "disabledAttr()",
     /**
      * When the `bitIconButton` input is dynamic from a consumer, Angular doesn't put the
      * `bitIconButton` attribute into the DOM. We use the attribute as a css selector in
@@ -87,6 +97,7 @@ const sizes: Record<IconButtonSize, string[]> = {
      */
     "[attr.bitIconButton]": "icon()",
   },
+  hostDirectives: [AriaDisableDirective],
 })
 export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableElement {
   readonly icon = model.required<string>({ alias: "bitIconButton" });
@@ -118,7 +129,7 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
       .concat(sizes[this.size()])
       .concat(
         this.showDisabledStyles() || this.disabled()
-          ? ["disabled:tw-opacity-60", "disabled:hover:!tw-bg-transparent"]
+          ? ["aria-disabled:tw-opacity-60", "aria-disabled:hover:!tw-bg-transparent"]
           : [],
       );
   }
@@ -129,7 +140,7 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
 
   protected disabledAttr = computed(() => {
     const disabled = this.disabled() != null && this.disabled() !== false;
-    return disabled || this.loading() ? true : null;
+    return disabled || this.loading();
   });
 
   /**
@@ -168,8 +179,14 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
     return this.elementRef.nativeElement;
   }
 
-  constructor(private elementRef: ElementRef) {
-    const originalTitle = this.elementRef.nativeElement.getAttribute("title");
+  private elementRef = inject(ElementRef);
+
+  constructor() {
+    const element = this.elementRef.nativeElement;
+
+    ariaDisableElement(element, this.disabledAttr);
+
+    const originalTitle = element.getAttribute("title");
 
     effect(() => {
       setA11yTitleAndAriaLabel({