[PM-23816] Revert aria disabled buttons (#15656)

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

This reverts commit 682f1f83d9.

* fix import

* bring back story fixes

apps/browser/src/vault/popup/components/vault-v2/vault-generator-dialog/vault-generator-dialog.component.spec.ts

@@ -76,8 +76,10 @@ describe("VaultGeneratorDialogComponent", () => {
     component.onValueGenerated("test-password");
     fixture.detectChanges();
 
-    const button = fixture.debugElement.query(By.css("[data-testid='select-button']"));
-    expect(button.attributes["aria-disabled"]).toBe(undefined);
+    const button = fixture.debugElement.query(
+      By.css("[data-testid='select-button']"),
+    ).nativeElement;
+    expect(button.disabled).toBe(false);
   });
 
   it("should disable the button if no value has been generated", () => {
@@ -88,8 +90,10 @@ describe("VaultGeneratorDialogComponent", () => {
     generator.algorithmSelected.emit({ useGeneratedValue: "Use Password" } as any);
     fixture.detectChanges();
 
-    const button = fixture.debugElement.query(By.css("[data-testid='select-button']"));
-    expect(button.attributes["aria-disabled"]).toBe("true");
+    const button = fixture.debugElement.query(
+      By.css("[data-testid='select-button']"),
+    ).nativeElement;
+    expect(button.disabled).toBe(true);
   });
 
   it("should disable the button if no algorithm is selected", () => {
@@ -100,8 +104,10 @@ describe("VaultGeneratorDialogComponent", () => {
     generator.valueGenerated.emit("test-password");
     fixture.detectChanges();
 
-    const button = fixture.debugElement.query(By.css("[data-testid='select-button']"));
-    expect(button.attributes["aria-disabled"]).toBe("true");
+    const button = fixture.debugElement.query(
+      By.css("[data-testid='select-button']"),
+    ).nativeElement;
+    expect(button.disabled).toBe(true);
   });
 
   it("should update button text when algorithm is selected", () => {

apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.spec.ts

@@ -70,8 +70,10 @@ describe("WebVaultGeneratorDialogComponent", () => {
     generator.valueGenerated.emit("test-password");
     fixture.detectChanges();
 
-    const button = fixture.debugElement.query(By.css("[data-testid='select-button']"));
-    expect(button.attributes["aria-disabled"]).toBe(undefined);
+    const button = fixture.debugElement.query(
+      By.css("[data-testid='select-button']"),
+    ).nativeElement;
+    expect(button.disabled).toBe(false);
   });
 
   it("should disable the button if no value has been generated", () => {
@@ -82,8 +84,10 @@ describe("WebVaultGeneratorDialogComponent", () => {
     generator.algorithmSelected.emit({ useGeneratedValue: "Use Password" } as any);
     fixture.detectChanges();
 
-    const button = fixture.debugElement.query(By.css("[data-testid='select-button']"));
-    expect(button.attributes["aria-disabled"]).toBe("true");
+    const button = fixture.debugElement.query(
+      By.css("[data-testid='select-button']"),
+    ).nativeElement;
+    expect(button.disabled).toBe(true);
   });
 
   it("should disable the button if no algorithm is selected", () => {
@@ -94,8 +98,10 @@ describe("WebVaultGeneratorDialogComponent", () => {
     generator.valueGenerated.emit("test-password");
     fixture.detectChanges();
 
-    const button = fixture.debugElement.query(By.css("[data-testid='select-button']"));
-    expect(button.attributes["aria-disabled"]).toBe("true");
+    const button = fixture.debugElement.query(
+      By.css("[data-testid='select-button']"),
+    ).nativeElement;
+    expect(button.disabled).toBe(true);
   });
 
   it("should close with selected value when confirmed", () => {

libs/components/src/button/button.component.spec.ts

@@ -34,25 +34,23 @@ describe("Button", () => {
     expect(buttonDebugElement.nativeElement.disabled).toBeFalsy();
   });
 
-  it("should be aria-disabled and not html attribute disabled when disabled is true", () => {
+  it("should be disabled when disabled is true", () => {
     testAppComponent.disabled = true;
     fixture.detectChanges();
-    expect(buttonDebugElement.attributes["aria-disabled"]).toBe("true");
-    expect(buttonDebugElement.nativeElement.disabled).toBeFalsy();
+
+    expect(buttonDebugElement.nativeElement.disabled).toBeTruthy();
     // Anchor tags cannot be disabled.
   });
 
-  it("should be aria-disabled not html attribute disabled when attribute disabled is true", () => {
-    fixture.detectChanges();
-    expect(disabledButtonDebugElement.attributes["aria-disabled"]).toBe("true");
-    expect(disabledButtonDebugElement.nativeElement.disabled).toBeFalsy();
+  it("should be disabled when attribute disabled is true", () => {
+    expect(disabledButtonDebugElement.nativeElement.disabled).toBeTruthy();
   });
 
   it("should be disabled when loading is true", () => {
     testAppComponent.loading = true;
     fixture.detectChanges();
 
-    expect(buttonDebugElement.attributes["aria-disabled"]).toBe("true");
+    expect(buttonDebugElement.nativeElement.disabled).toBeTruthy();
   });
 });
 

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

@@ -1,20 +1,9 @@
 import { NgClass } from "@angular/common";
-import {
-  HostBinding,
-  Component,
-  model,
-  computed,
-  input,
-  ElementRef,
-  inject,
-  Signal,
-  booleanAttribute,
-} from "@angular/core";
+import { input, HostBinding, Component, model, computed, booleanAttribute } from "@angular/core";
 import { toObservable, toSignal } from "@angular/core/rxjs-interop";
 import { debounce, interval } from "rxjs";
 
 import { ButtonLikeAbstraction, ButtonType, ButtonSize } from "../shared/button-like.abstraction";
-import { ariaDisableElement } from "../utils";
 
 const focusRing = [
   "focus-visible:tw-ring-2",
@@ -62,7 +51,7 @@ const buttonStyles: Record<ButtonType, string[]> = {
   providers: [{ provide: ButtonLikeAbstraction, useExisting: ButtonComponent }],
   imports: [NgClass],
   host: {
-    "[attr.aria-disabled]": "disabledAttr()",
+    "[attr.disabled]": "disabledAttr()",
   },
 })
 export class ButtonComponent implements ButtonLikeAbstraction {
@@ -79,28 +68,27 @@ export class ButtonComponent implements ButtonLikeAbstraction {
       "focus:tw-outline-none",
     ]
       .concat(this.block() ? ["tw-w-full", "tw-block"] : ["tw-inline-block"])
+      .concat(buttonStyles[this.buttonType() ?? "secondary"])
       .concat(
         this.showDisabledStyles() || this.disabled()
           ? [
-              "aria-disabled:!tw-bg-secondary-300",
-              "hover:tw-bg-secondary-300",
-              "aria-disabled:tw-border-secondary-300",
-              "hover:tw-border-secondary-300",
-              "aria-disabled:!tw-text-muted",
-              "hover:!tw-text-muted",
-              "aria-disabled:tw-cursor-not-allowed",
-              "hover:tw-no-underline",
-              "aria-disabled:tw-pointer-events-none",
+              "disabled:tw-bg-secondary-300",
+              "disabled:hover:tw-bg-secondary-300",
+              "disabled:tw-border-secondary-300",
+              "disabled:hover:tw-border-secondary-300",
+              "disabled:!tw-text-muted",
+              "disabled:hover:!tw-text-muted",
+              "disabled:tw-cursor-not-allowed",
+              "disabled:hover:tw-no-underline",
             ]
           : [],
       )
-      .concat(buttonStyles[this.buttonType() ?? "secondary"])
       .concat(buttonSizeStyles[this.size() || "default"]);
   }
 
   protected disabledAttr = computed(() => {
     const disabled = this.disabled() != null && this.disabled() !== false;
-    return disabled || this.loading() ? true : undefined;
+    return disabled || this.loading() ? true : null;
   });
 
   /**
@@ -139,10 +127,5 @@ export class ButtonComponent implements ButtonLikeAbstraction {
     toObservable(this.loading).pipe(debounce((isLoading) => interval(isLoading ? 75 : 0))),
   );
 
-  readonly disabled = model<boolean>(false);
-  private el = inject(ElementRef<HTMLButtonElement>);
-
-  constructor() {
-    ariaDisableElement(this.el.nativeElement, this.disabledAttr as Signal<boolean | undefined>);
-  }
+  disabled = model<boolean>(false);
 }

libs/components/src/form-field/form-field.component.html

@@ -46,7 +46,7 @@
       </div>
     </div>
     <div
-      class="tw-gap-1 tw-bg-background tw-rounded-lg tw-flex tw-min-h-11 [&:has(input:disabled,input:read-only,textarea:read-only):not(:has(button:not([aria-disabled='true'])))]:tw-bg-secondary-100"
+      class="tw-gap-1 tw-bg-background tw-rounded-lg tw-flex tw-min-h-11 [&:not(:has(button:enabled)):has(input:read-only)]:tw-bg-secondary-100 [&:not(:has(button:enabled)):has(textarea:read-only)]:tw-bg-secondary-100"
     >
       <div
         #prefixContainer

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

@@ -1,22 +1,12 @@
 // 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,
-  inject,
-  input,
-  model,
-  Signal,
-} from "@angular/core";
+import { Component, computed, ElementRef, HostBinding, input, model } 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";
 
@@ -112,41 +102,41 @@ const styles: Record<IconButtonType, string[]> = {
 
 const disabledStyles: Record<IconButtonType, string[]> = {
   contrast: [
-    "aria-disabled:tw-opacity-60",
-    "aria-disabled:hover:tw-border-transparent",
-    "aria-disabled:hover:tw-bg-transparent",
+    "disabled:tw-opacity-60",
+    "disabled:hover:tw-border-transparent",
+    "disabled:hover:tw-bg-transparent",
   ],
   main: [
-    "aria-disabled:!tw-text-secondary-300",
-    "aria-disabled:hover:tw-border-transparent",
-    "aria-disabled:hover:tw-bg-transparent",
+    "disabled:!tw-text-secondary-300",
+    "disabled:hover:tw-border-transparent",
+    "disabled:hover:tw-bg-transparent",
   ],
   muted: [
-    "aria-disabled:!tw-text-secondary-300",
-    "aria-disabled:hover:tw-border-transparent",
-    "aria-disabled:hover:tw-bg-transparent",
+    "disabled:!tw-text-secondary-300",
+    "disabled:hover:tw-border-transparent",
+    "disabled:hover:tw-bg-transparent",
   ],
   primary: [
-    "aria-disabled:tw-opacity-60",
-    "aria-disabled:hover:tw-border-primary-600",
-    "aria-disabled:hover:tw-bg-primary-600",
+    "disabled:tw-opacity-60",
+    "disabled:hover:tw-border-primary-600",
+    "disabled:hover:tw-bg-primary-600",
   ],
   secondary: [
-    "aria-disabled:tw-opacity-60",
-    "aria-disabled:hover:tw-border-text-muted",
-    "aria-disabled:hover:tw-bg-transparent",
-    "aria-disabled:hover:!tw-text-muted",
+    "disabled:tw-opacity-60",
+    "disabled:hover:tw-border-text-muted",
+    "disabled:hover:tw-bg-transparent",
+    "disabled:hover:!tw-text-muted",
   ],
   danger: [
-    "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",
+    "disabled:!tw-text-secondary-300",
+    "disabled:hover:tw-border-transparent",
+    "disabled:hover:tw-bg-transparent",
+    "disabled:hover:!tw-text-secondary-300",
   ],
   light: [
-    "aria-disabled:tw-opacity-60",
-    "aria-disabled:hover:tw-border-transparent",
-    "aria-disabled:hover:tw-bg-transparent",
+    "disabled:tw-opacity-60",
+    "disabled:hover:tw-border-transparent",
+    "disabled:hover:tw-bg-transparent",
   ],
   unstyled: [],
 };
@@ -173,7 +163,7 @@ const sizes: Record<IconButtonSize, string[]> = {
   ],
   imports: [NgClass],
   host: {
-    "[attr.aria-disabled]": "disabledAttr()",
+    "[attr.disabled]": "disabledAttr()",
   },
 })
 export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableElement {
@@ -245,10 +235,5 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
     return this.elementRef.nativeElement;
   }
 
-  private elementRef = inject(ElementRef);
-
-  constructor() {
-    const element = this.elementRef.nativeElement;
-    ariaDisableElement(element, this.disabledAttr as Signal<boolean | undefined>);
-  }
+  constructor(private elementRef: ElementRef) {}
 }

libs/components/src/link/link.directive.ts

@@ -1,6 +1,4 @@
-import { HostBinding, Directive, inject, ElementRef, input, booleanAttribute } from "@angular/core";
-
-import { ariaDisableElement } from "../utils";
+import { input, HostBinding, Directive } from "@angular/core";
 
 export type LinkType = "primary" | "secondary" | "contrast" | "light";
 
@@ -60,11 +58,6 @@ const commonStyles = [
   "before:tw-transition",
   "focus-visible:before:tw-ring-2",
   "focus-visible:tw-z-10",
-  "aria-disabled:tw-no-underline",
-  "aria-disabled:tw-pointer-events-none",
-  "aria-disabled:!tw-text-secondary-300",
-  "aria-disabled:hover:!tw-text-secondary-300",
-  "aria-disabled:hover:tw-no-underline",
 ];
 
 @Directive()
@@ -95,19 +88,9 @@ export class AnchorLinkDirective extends LinkDirective {
   selector: "button[bitLink]",
 })
 export class ButtonLinkDirective extends LinkDirective {
-  private el = inject(ElementRef<HTMLButtonElement>);
-
-  disabled = input(false, { transform: booleanAttribute });
-
   @HostBinding("class") get classList() {
     return ["before:-tw-inset-y-[0.25rem]"]
       .concat(commonStyles)
       .concat(linkStyles[this.linkType()] ?? []);
   }
-
-  constructor() {
-    super();
-
-    ariaDisableElement(this.el.nativeElement, this.disabled);
-  }
 }

libs/components/src/utils/aria-disable-element.ts

@@ -1,29 +0,0 @@
-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,3 +1,2 @@
-export * from "./aria-disable-element";
 export * from "./function-to-observable";
 export * from "./i18n-mock.service";