habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/flows: use aria-invalid attribute to better show invalid input fields (#7661)

Browse Source 
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L
2023-11-21 15:07:30 +01:00
committed by GitHub
parent 78f47a8726
commit 2c6ac73e0a
2 changed files with 25 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/flow/stages/password/PasswordStage.ts
View File

@ -28,6 +28,11 @@ export class PasswordStage extends BaseStage<PasswordChallenge, PasswordChalleng
timer?: number;
hasError(field: string): boolean {
const errors = (this.challenge?.responseErrors || {})[field];
return (errors || []).length > 0;
}
renderInput(): HTMLInputElement {
this.input = document.createElement("input");
this.input.type = "password";
@ -38,6 +43,7 @@ export class PasswordStage extends BaseStage<PasswordChallenge, PasswordChalleng
this.input.classList.add("pf-c-form-control");
this.input.required = true;
this.input.value = PasswordManagerPrefill.password || "";
this.input.setAttribute("aria-invalid", this.hasError("password").toString());
// This is somewhat of a crude way to get autofocus, but in most cases the `autofocus` attribute
// isn't enough, due to timing within shadow doms and such.
this.timer = window.setInterval(() => {