mirror of
https://github.com/mattermost/mattermost.git
synced 2025-02-25 18:55:24 -06:00
[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>
This commit is contained in:
Sai Deepesh
GitHub
parent
305fac6507
commit
0ccd82c1d4
@ -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>
|
||||
|
||||
@ -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'>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user