1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-19 01:33:33 +00:00

[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
This commit is contained in:
Bryan Cunningham
2025-08-21 09:14:08 -04:00
committed by GitHub
parent 0daa6913d2
commit b0f46004ff
15 changed files with 165 additions and 53 deletions

View File

@@ -0,0 +1,19 @@
import { Signal } from "@angular/core";
import { toObservable, takeUntilDestroyed } from "@angular/core/rxjs-interop";
/**
* 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"`
*/
export function ariaDisableElement(el: HTMLElement, disabled: Signal<boolean | undefined>) {
toObservable(disabled)
.pipe(takeUntilDestroyed())
.subscribe((isDisabled) => {
if (isDisabled) {
el.removeAttribute("disabled");
el.setAttribute("aria-disabled", "true");
} else {
el.removeAttribute("aria-disabled");
}
});
}

View File

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