bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-12 14:23:32 +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

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
// @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) {}
}