From 0ccd82c1d4d57c193751d3b1b471b612f5f22ed3 Mon Sep 17 00:00:00 2001
From: Sai Deepesh <saideepesh000@gmail.com>
Date: Wed, 7 Jun 2023 19:29:36 +0530
Subject: [PATCH] [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>
---
 .../login/__snapshots__/login.test.tsx.snap   | 79 ++++++++--------
 .../channels/src/components/login/login.tsx   | 91 +++++++++----------
 2 files changed, 86 insertions(+), 84 deletions(-)

diff --git a/webapp/channels/src/components/login/__snapshots__/login.test.tsx.snap b/webapp/channels/src/components/login/__snapshots__/login.test.tsx.snap
index 88ed5da5c6..5f0c938d07 100644
--- a/webapp/channels/src/components/login/__snapshots__/login.test.tsx.snap
+++ b/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,48 +64,52 @@ exports[`components/login/Login should match snapshot with base login 1`] = `
           >
             Log in
           </p>
-          <div
-            className="login-body-card-form"
+          <form
+            onSubmit={[Function]}
           >
-            <ForwardRef
-              autoFocus={true}
-              containerClassName="login-body-card-form-input"
-              disabled={false}
-              hasError={false}
-              inputSize="large"
-              name="loginId"
-              onChange={[Function]}
-              placeholder="Email"
-              type="text"
-              value=""
-            />
-            <ForwardRef
-              className="login-body-card-form-password-input"
-              disabled={false}
-              hasError={false}
-              inputSize="large"
-              onChange={[Function]}
-              value=""
-            />
             <div
-              className="login-body-card-form-link"
+              className="login-body-card-form"
             >
-              <Link
-                to="/reset_password"
+              <ForwardRef
+                autoFocus={true}
+                containerClassName="login-body-card-form-input"
+                disabled={false}
+                hasError={false}
+                inputSize="large"
+                name="loginId"
+                onChange={[Function]}
+                placeholder="Email"
+                type="text"
+                value=""
+              />
+              <ForwardRef
+                className="login-body-card-form-password-input"
+                disabled={false}
+                hasError={false}
+                inputSize="large"
+                onChange={[Function]}
+                value=""
+              />
+              <div
+                className="login-body-card-form-link"
               >
-                Forgot your password?
-              </Link>
+                <Link
+                  to="/reset_password"
+                >
+                  Forgot your password?
+                </Link>
+              </div>
+              <SaveButton
+                btnClass="btn-primary"
+                defaultMessage="Log in"
+                disabled={false}
+                extraClasses="login-body-card-form-button-submit large"
+                onClick={[Function]}
+                saving={false}
+                savingMessage="Logging in…"
+              />
             </div>
-            <SaveButton
-              btnClass="btn-primary"
-              defaultMessage="Log in"
-              disabled={false}
-              extraClasses="login-body-card-form-button-submit large"
-              onClick={[Function]}
-              saving={false}
-              savingMessage="Logging in…"
-            />
-          </div>
+          </form>
         </div>
       </div>
     </div>
diff --git a/webapp/channels/src/components/login/login.tsx b/webapp/channels/src/components/login/login.tsx
index f72e7df0f0..68bf1c8b19 100644
--- a/webapp/channels/src/components/login/login.tsx
+++ b/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,44 +774,50 @@ const Login = ({onCustomizeHeader}: LoginProps) => {
                                 />
                             )}
                             {enableBaseLogin && (
-                                <div className='login-body-card-form'>
-                                    <Input
-                                        ref={loginIdInput}
-                                        name='loginId'
-                                        containerClassName='login-body-card-form-input'
-                                        type='text'
-                                        inputSize={SIZE.LARGE}
-                                        value={loginId}
-                                        onChange={handleInputOnChange}
-                                        hasError={hasError}
-                                        placeholder={getInputPlaceholder()}
-                                        disabled={isWaiting}
-                                        autoFocus={true}
-                                    />
-                                    <PasswordInput
-                                        ref={passwordInput}
-                                        className='login-body-card-form-password-input'
-                                        value={password}
-                                        inputSize={SIZE.LARGE}
-                                        onChange={handlePasswordInputOnChange}
-                                        hasError={hasError}
-                                        disabled={isWaiting}
-                                    />
-                                    {(enableSignInWithUsername || enableSignInWithEmail) && (
-                                        <div className='login-body-card-form-link'>
-                                            <Link to='/reset_password'>
-                                                {formatMessage({id: 'login.forgot', defaultMessage: 'Forgot your password?'})}
-                                            </Link>
-                                        </div>
-                                    )}
-                                    <SaveButton
-                                        extraClasses='login-body-card-form-button-submit large'
-                                        saving={isWaiting}
-                                        onClick={preSubmit}
-                                        defaultMessage={formatMessage({id: 'login.logIn', defaultMessage: 'Log in'})}
-                                        savingMessage={formatMessage({id: 'login.logingIn', defaultMessage: 'Logging in…'})}
-                                    />
-                                </div>
+                                <form
+                                    onSubmit={(event: FormEvent<HTMLFormElement>) => {
+                                        preSubmit(event as unknown as React.MouseEvent);
+                                    }}
+                                >
+                                    <div className='login-body-card-form'>
+                                        <Input
+                                            ref={loginIdInput}
+                                            name='loginId'
+                                            containerClassName='login-body-card-form-input'
+                                            type='text'
+                                            inputSize={SIZE.LARGE}
+                                            value={loginId}
+                                            onChange={handleInputOnChange}
+                                            hasError={hasError}
+                                            placeholder={getInputPlaceholder()}
+                                            disabled={isWaiting}
+                                            autoFocus={true}
+                                        />
+                                        <PasswordInput
+                                            ref={passwordInput}
+                                            className='login-body-card-form-password-input'
+                                            value={password}
+                                            inputSize={SIZE.LARGE}
+                                            onChange={handlePasswordInputOnChange}
+                                            hasError={hasError}
+                                            disabled={isWaiting}
+                                        />
+                                        {(enableSignInWithUsername || enableSignInWithEmail) && (
+                                            <div className='login-body-card-form-link'>
+                                                <Link to='/reset_password'>
+                                                    {formatMessage({id: 'login.forgot', defaultMessage: 'Forgot your password?'})}
+                                                </Link>
+                                            </div>
+                                        )}
+                                        <SaveButton
+                                            extraClasses='login-body-card-form-button-submit large'
+                                            saving={isWaiting}
+                                            onClick={preSubmit}
+                                            defaultMessage={formatMessage({id: 'login.logIn', defaultMessage: 'Log in'})}
+                                            savingMessage={formatMessage({id: 'login.logingIn', defaultMessage: 'Logging in…'})}
+                                        />
+                                    </div>
+                                </form>
                             )}
                             {enableBaseLogin && enableExternalSignup && (
                                 <div className='login-body-card-form-divider'>