feat: add autofocus to the email/username field (#16350)

this field will be automatically focused when the user sees the login screen, and it should be valid according to a11y best practices as this is the first and main element on the page

fixes #16276
This commit is contained in:
Jacob Overgaard
2024-05-23 11:17:57 +02:00
committed by GitHub
parent aabb5b7c48
commit 380c5bbbe2

View File

@@ -19,6 +19,7 @@ const createInput = (opts: {
autocomplete: AutoFill;
label: string;
inputmode: string;
autofocus?: boolean;
}) => {
const input = document.createElement('input');
input.type = opts.type;
@@ -28,6 +29,7 @@ const createInput = (opts: {
input.required = true;
input.inputMode = opts.inputmode;
input.ariaLabel = opts.label;
input.autofocus = opts.autofocus || false;
return input;
};
@@ -171,6 +173,7 @@ export default class UmbAuthElement extends UmbLitElement {
autocomplete: 'username',
label: labelUsername,
inputmode: this.usernameIsEmail ? 'email' : '',
autofocus: true,
});
this._passwordInput = createInput({
id: 'password-input',