[MM 22957] webapp a11y: fix sso btns focus issue (#23326)

* make suggested changes

* added form tag and removed event handler

* fix snapshot

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/login/__snapshots__/login.test.tsx.snap

@@ -57,7 +57,6 @@ exports[`components/login/Login should match snapshot with base login 1`] = `
       >
         <div
           className="login-body-card-content"
-          onKeyDown={[Function]}
           tabIndex={0}
         >
           <p
@@ -65,6 +64,9 @@ exports[`components/login/Login should match snapshot with base login 1`] = `
           >
             Log in
           </p>
+          <form
+            onSubmit={[Function]}
+          >
             <div
               className="login-body-card-form"
             >
@@ -107,6 +109,7 @@ exports[`components/login/Login should match snapshot with base login 1`] = `
                 savingMessage="Logging in…"
               />
             </div>
+          </form>
         </div>
       </div>
     </div>

webapp/channels/src/components/login/login.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useState, useEffect, useRef, useCallback} from 'react';
+import React, {useState, useEffect, useRef, useCallback, FormEvent} from 'react';
 import {useIntl} from 'react-intl';
 import {Link, useLocation, useHistory} from 'react-router-dom';
 import {useSelector, useDispatch} from 'react-redux';
@@ -672,12 +672,6 @@ const Login = ({onCustomizeHeader}: LoginProps) => {
         setBrandImageError(true);
     };
 
-    const onEnterKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === Constants.KeyCodes.ENTER[0]) {
-            preSubmit(e);
-        }
-    };
-
     const getCardTitle = () => {
         if (CustomDescriptionText) {
             return CustomDescriptionText;
@@ -765,7 +759,6 @@ const Login = ({onCustomizeHeader}: LoginProps) => {
                     <div className={classNames('login-body-card', {'custom-branding': enableCustomBrand, 'with-error': hasError})}>
                         <div
                             className='login-body-card-content'
-                            onKeyDown={onEnterKeyDown}
                             tabIndex={0}
                         >
                             <p className='login-body-card-title'>
@@ -781,6 +774,11 @@ const Login = ({onCustomizeHeader}: LoginProps) => {
                                 />
                             )}
                             {enableBaseLogin && (
+                                <form
+                                    onSubmit={(event: FormEvent<HTMLFormElement>) => {
+                                        preSubmit(event as unknown as React.MouseEvent);
+                                    }}
+                                >
                                     <div className='login-body-card-form'>
                                         <Input
                                             ref={loginIdInput}
@@ -819,6 +817,7 @@ const Login = ({onCustomizeHeader}: LoginProps) => {
                                             savingMessage={formatMessage({id: 'login.logingIn', defaultMessage: 'Logging in…'})}
                                         />
                                     </div>
+                                </form>
                             )}
                             {enableBaseLogin && enableExternalSignup && (
                                 <div className='login-body-card-form-divider'>