[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>
Этот коммит содержится в:
Sai Deepesh
@@ -57,7 +57,6 @@ exports[`components/login/Login should match snapshot with base login 1`] = `
|
|||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="login-body-card-content"
|
className="login-body-card-content"
|
||||||
onKeyDown={[Function]}
|
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
>
|
>
|
||||||
<p
|
<p
|
||||||
@@ -65,48 +64,52 @@ exports[`components/login/Login should match snapshot with base login 1`] = `
|
|||||||
>
|
>
|
||||||
Log in
|
Log in
|
||||||
</p>
|
</p>
|
||||||
<div
|
<form
|
||||||
className="login-body-card-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
|
<div
|
||||||
className="login-body-card-form-link"
|
className="login-body-card-form"
|
||||||
>
|
>
|
||||||
<Link
|
<ForwardRef
|
||||||
to="/reset_password"
|
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>
|
</div>
|
||||||
<SaveButton
|
</form>
|
||||||
btnClass="btn-primary"
|
|
||||||
defaultMessage="Log in"
|
|
||||||
disabled={false}
|
|
||||||
extraClasses="login-body-card-form-button-submit large"
|
|
||||||
onClick={[Function]}
|
|
||||||
saving={false}
|
|
||||||
savingMessage="Logging in…"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||||
// See LICENSE.txt for license information.
|
// 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 {useIntl} from 'react-intl';
|
||||||
import {Link, useLocation, useHistory} from 'react-router-dom';
|
import {Link, useLocation, useHistory} from 'react-router-dom';
|
||||||
import {useSelector, useDispatch} from 'react-redux';
|
import {useSelector, useDispatch} from 'react-redux';
|
||||||
@@ -672,12 +672,6 @@ const Login = ({onCustomizeHeader}: LoginProps) => {
|
|||||||
setBrandImageError(true);
|
setBrandImageError(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onEnterKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
||||||
if (e.key === Constants.KeyCodes.ENTER[0]) {
|
|
||||||
preSubmit(e);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getCardTitle = () => {
|
const getCardTitle = () => {
|
||||||
if (CustomDescriptionText) {
|
if (CustomDescriptionText) {
|
||||||
return 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={classNames('login-body-card', {'custom-branding': enableCustomBrand, 'with-error': hasError})}>
|
||||||
<div
|
<div
|
||||||
className='login-body-card-content'
|
className='login-body-card-content'
|
||||||
onKeyDown={onEnterKeyDown}
|
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
>
|
>
|
||||||
<p className='login-body-card-title'>
|
<p className='login-body-card-title'>
|
||||||
@@ -781,44 +774,50 @@ const Login = ({onCustomizeHeader}: LoginProps) => {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{enableBaseLogin && (
|
{enableBaseLogin && (
|
||||||
<div className='login-body-card-form'>
|
<form
|
||||||
<Input
|
onSubmit={(event: FormEvent<HTMLFormElement>) => {
|
||||||
ref={loginIdInput}
|
preSubmit(event as unknown as React.MouseEvent);
|
||||||
name='loginId'
|
}}
|
||||||
containerClassName='login-body-card-form-input'
|
>
|
||||||
type='text'
|
<div className='login-body-card-form'>
|
||||||
inputSize={SIZE.LARGE}
|
<Input
|
||||||
value={loginId}
|
ref={loginIdInput}
|
||||||
onChange={handleInputOnChange}
|
name='loginId'
|
||||||
hasError={hasError}
|
containerClassName='login-body-card-form-input'
|
||||||
placeholder={getInputPlaceholder()}
|
type='text'
|
||||||
disabled={isWaiting}
|
inputSize={SIZE.LARGE}
|
||||||
autoFocus={true}
|
value={loginId}
|
||||||
/>
|
onChange={handleInputOnChange}
|
||||||
<PasswordInput
|
hasError={hasError}
|
||||||
ref={passwordInput}
|
placeholder={getInputPlaceholder()}
|
||||||
className='login-body-card-form-password-input'
|
disabled={isWaiting}
|
||||||
value={password}
|
autoFocus={true}
|
||||||
inputSize={SIZE.LARGE}
|
/>
|
||||||
onChange={handlePasswordInputOnChange}
|
<PasswordInput
|
||||||
hasError={hasError}
|
ref={passwordInput}
|
||||||
disabled={isWaiting}
|
className='login-body-card-form-password-input'
|
||||||
/>
|
value={password}
|
||||||
{(enableSignInWithUsername || enableSignInWithEmail) && (
|
inputSize={SIZE.LARGE}
|
||||||
<div className='login-body-card-form-link'>
|
onChange={handlePasswordInputOnChange}
|
||||||
<Link to='/reset_password'>
|
hasError={hasError}
|
||||||
{formatMessage({id: 'login.forgot', defaultMessage: 'Forgot your password?'})}
|
disabled={isWaiting}
|
||||||
</Link>
|
/>
|
||||||
</div>
|
{(enableSignInWithUsername || enableSignInWithEmail) && (
|
||||||
)}
|
<div className='login-body-card-form-link'>
|
||||||
<SaveButton
|
<Link to='/reset_password'>
|
||||||
extraClasses='login-body-card-form-button-submit large'
|
{formatMessage({id: 'login.forgot', defaultMessage: 'Forgot your password?'})}
|
||||||
saving={isWaiting}
|
</Link>
|
||||||
onClick={preSubmit}
|
</div>
|
||||||
defaultMessage={formatMessage({id: 'login.logIn', defaultMessage: 'Log in'})}
|
)}
|
||||||
savingMessage={formatMessage({id: 'login.logingIn', defaultMessage: 'Logging in…'})}
|
<SaveButton
|
||||||
/>
|
extraClasses='login-body-card-form-button-submit large'
|
||||||
</div>
|
saving={isWaiting}
|
||||||
|
onClick={preSubmit}
|
||||||
|
defaultMessage={formatMessage({id: 'login.logIn', defaultMessage: 'Log in'})}
|
||||||
|
savingMessage={formatMessage({id: 'login.logingIn', defaultMessage: 'Logging in…'})}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
)}
|
)}
|
||||||
{enableBaseLogin && enableExternalSignup && (
|
{enableBaseLogin && enableExternalSignup && (
|
||||||
<div className='login-body-card-form-divider'>
|
<div className='login-body-card-form-divider'>
|
||||||
|
|||||||
Ссылка в новой задаче
Block a user