From 380c5bbbe2fea4c0b4d464f05b748d4337e9bca0 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Thu, 23 May 2024 11:17:57 +0200
Subject: [PATCH] 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
---
 src/Umbraco.Web.UI.Login/src/auth.element.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/Umbraco.Web.UI.Login/src/auth.element.ts b/src/Umbraco.Web.UI.Login/src/auth.element.ts
index 0007c22031..2414bfc0a6 100644
--- a/src/Umbraco.Web.UI.Login/src/auth.element.ts
+++ b/src/Umbraco.Web.UI.Login/src/auth.element.ts
@@ -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',