[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/utils/aria-disable-element.ts

@@ -0,0 +1,29 @@
+import { Signal, effect } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { fromEvent } from "rxjs";
+
+/**
+ * a11y helper util used to `aria-disable` elements as opposed to using the HTML `disabled` attr.
+ * - Removes HTML `disabled` attr and replaces it with `aria-disabled="true"`
+ * - Captures click events and prevents them from propagating
+ */
+export function ariaDisableElement(element: HTMLElement, isDisabled: Signal<boolean | undefined>) {
+  effect(() => {
+    if (element.hasAttribute("disabled") || isDisabled()) {
+      // Remove native disabled and set aria-disabled. Capture click event
+      element.removeAttribute("disabled");
+
+      element.setAttribute("aria-disabled", "true");
+    }
+  });
+
+  fromEvent(element, "click")
+    .pipe(takeUntilDestroyed())
+    .subscribe((event: Event) => {
+      if (isDisabled()) {
+        event.stopPropagation();
+        event.preventDefault();
+        return false;
+      }
+    });
+}

libs/components/src/utils/index.ts

@@ -1,2 +1,3 @@
+export * from "./aria-disable-element";
 export * from "./function-to-observable";
 export * from "./i18n-mock.service";