[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/a11y/aria-disable.directive.ts

@@ -0,0 +1,12 @@
+import { Directive, inject } from "@angular/core";
+
+import { AriaDisabledClickCaptureService } from "./aria-disabled-click-capture.service";
+
+@Directive({
+  host: {
+    "[attr.bit-aria-disable]": "true",
+  },
+})
+export class AriaDisableDirective {
+  protected ariaDisabledClickCaptureService = inject(AriaDisabledClickCaptureService);
+}

libs/components/src/a11y/aria-disabled-click-capture.service.ts

@@ -0,0 +1,30 @@
+import { DOCUMENT } from "@angular/common";
+import { Injectable, Inject, NgZone, OnDestroy } from "@angular/core";
+
+@Injectable({ providedIn: "root" })
+export class AriaDisabledClickCaptureService implements OnDestroy {
+  private listener!: (e: MouseEvent | KeyboardEvent) => void;
+
+  constructor(
+    @Inject(DOCUMENT) private document: Document,
+    private ngZone: NgZone,
+  ) {
+    this.ngZone.runOutsideAngular(() => {
+      this.listener = (e: MouseEvent | KeyboardEvent) => {
+        const btn = (e.target as HTMLElement).closest(
+          '[aria-disabled="true"][bit-aria-disable="true"]',
+        );
+        if (btn) {
+          e.stopPropagation();
+          e.preventDefault();
+          return false;
+        }
+      };
+      this.document.addEventListener("click", this.listener, /* capture */ true);
+    });
+  }
+
+  ngOnDestroy() {
+    this.document.removeEventListener("click", this.listener, true);
+  }
+}

libs/components/src/a11y/index.ts

@@ -1 +1,3 @@
 export * from "./a11y-title.directive";
+export * from "./aria-disabled-click-capture.service";
+export * from "./aria-disable.directive";