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:
19
libs/components/src/utils/aria-disable-element.ts
Normal file
19
libs/components/src/utils/aria-disable-element.ts
Normal 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");
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1,2 +1,3 @@
|
||||
export * from "./aria-disable-element";
|
||||
export * from "./function-to-observable";
|
||||
export * from "./i18n-mock.service";
|
||||
|
||||
Reference in New Issue
Block a user