bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-11 22:03:36 +00:00
Code Issues Releases Wiki Activity

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

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

This reverts commit 682f1f83d9.

* fix import

* bring back story fixes
This commit is contained in:
Bryan Cunningham
2025-07-17 11:40:22 -04:00
committed by GitHub
parent 127fed70ac
commit 250e46ee70
9 changed files with 71 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

14
libs/components/src/button/button.component.spec.ts
View File

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

43
libs/components/src/button/button.component.ts
View File

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

2
libs/components/src/form-field/form-field.component.html
View File

@@ -46,7 +46,7 @@
</div> </div>
</div> </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 <div
#prefixContainer #prefixContainer

67
libs/components/src/icon-button/icon-button.component.ts
View File

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

19
libs/components/src/link/link.directive.ts
View File

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

29
libs/components/src/utils/aria-disable-element.ts
View File

@@ -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;
}
});
}

1
libs/components/src/utils/index.ts
View File

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