IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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 2023-06-07 19:29:36 +05:30 committed by GitHub
parent 305fac6507
commit 0ccd82c1d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 86 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
webapp/channels/src/components/login/__snapshots__/login.test.tsx.snap
View File

@ -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>

15
webapp/channels/src/components/login/login.tsx
View File

@ -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'>