Add autofocus to username input (#14572)

* Add autofocus to username input

* add cypress test for autofocusing username input

frontend/src/metabase/auth/components/LdapAndEmailForm.jsx

@@ -36,6 +36,7 @@ export default class LdapAndEmailForm extends Component {
               }
               placeholder={t`youlooknicetoday@email.com`}
               validate={ldapEnabled ? validate.required() : validate.email()}
+              autoFocus
             />
             <FormField
               name="password"

frontend/src/metabase/components/form/widgets/FormInputWidget.jsx

@@ -2,13 +2,20 @@ import React from "react";
 
 import { formDomOnlyProps } from "metabase/lib/redux";
 
-const FormInputWidget = ({ type = "text", placeholder, field, readOnly }) => (
+const FormInputWidget = ({
+  type = "text",
+  placeholder,
+  field,
+  readOnly,
+  autoFocus,
+}) => (
   <input
     className="Form-input full"
     type={type}
     placeholder={placeholder}
     aria-labelledby={`${field.name}-label`}
     readOnly={readOnly}
+    autoFocus={autoFocus}
     {...formDomOnlyProps(field)}
   />
 );

frontend/test/metabase/scenarios/auth/signin.cy.spec.js

@@ -31,7 +31,9 @@ describe("scenarios > auth > signin", () => {
 
   it("should greet users after successful login", () => {
     cy.visit("/auth/login");
-    cy.findByLabelText("Email address").type(USERS.admin.username);
+    cy.findByLabelText("Email address")
+      .should("be.focused")
+      .type(USERS.admin.username);
     cy.findByLabelText("Password").type(USERS.admin.password);
     cy.findByText("Sign in").click();
     cy.contains(/[a-z ]+, Bob/i);