Fix PR feedback

Signed-off-by: HichamELBSI <elabbassih@gmail.com>

packages/core/admin/admin/src/layouts/UnauthenticatedLayout.js

@@ -16,7 +16,7 @@ export const Column = styled(Row)`
 const UnauthenticatedLayout = ({ children }) => {
   return (
     <div>
-      <Row justifyContent="flex-end">
+      <Row as="header" justifyContent="flex-end">
         <Box paddingTop={6} paddingRight={8}>
           <LocaleToggle isLogged />
         </Box>

packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js

@@ -18,8 +18,8 @@ import { useIntl } from 'react-intl';
 import { Formik } from 'formik';
 
 import { Column } from '../../../../layouts/UnauthenticatedLayout';
-import { useConfigurations } from '../../../../hooks';
 import Form from './Form';
+import Logo from '../Logo';
 
 const AuthButton = styled(Button)`
   display: inline-block;
@@ -37,7 +37,6 @@ const FieldActionWrapper = styled(FieldAction)`
 
 const Login = ({ onSubmit, schema }) => {
   const [passwordShown, setPasswordShown] = useState(false);
-  const { authLogo } = useConfigurations();
   const { formatMessage } = useIntl();
 
   return (
@@ -55,7 +54,7 @@ const Login = ({ onSubmit, schema }) => {
         {({ values, errors, handleChange }) => (
           <Form noValidate>
             <Column>
-              <img src={authLogo} alt="" aria-hidden style={{ height: '72px' }} />
+              <Logo />
               <Box paddingTop="6" paddingBottom="1">
                 <H1 id="welcome">{formatMessage({ id: 'Auth.form.welcome.title' })}</H1>
               </Box>
@@ -64,7 +63,11 @@ const Login = ({ onSubmit, schema }) => {
                   {formatMessage({ id: 'Auth.form.welcome.subtitle' })}
                 </Subtitle>
               </Box>
-              {errors.errorMessage && <Text textColor="danger600">{errors.errorMessage}</Text>}
+              {errors.errorMessage && (
+                <Text id="global-form-error" role="alert" tabIndex={-1} textColor="danger600">
+                  {errors.errorMessage}
+                </Text>
+              )}
             </Column>
 
             <Stack size={6}>
@@ -87,7 +90,10 @@ const Login = ({ onSubmit, schema }) => {
                 endAction={
                   // eslint-disable-next-line react/jsx-wrap-multilines
                   <FieldActionWrapper
-                    onClick={() => setPasswordShown(prev => !prev)}
+                    onClick={e => {
+                      e.stopPropagation();
+                      setPasswordShown(prev => !prev);
+                    }}
                     label={formatMessage({
                       id: passwordShown
                         ? 'Auth.form.password.show-password'

packages/core/admin/admin/src/pages/AuthPage/components/Login/Form.js

@@ -28,6 +28,13 @@ const FormWithFocus = props => {
         errorEl.focus();
       }
     }
+    if (!isSubmitting && !isValidating && Object.keys(errors).length) {
+      const el = document.getElementById('global-form-error');
+
+      if (el) {
+        el.focus();
+      }
+    }
   }, [errors, isSubmitting, isValidating, touched]);
 
   return <Form {...props} noValidate />;

packages/core/admin/admin/src/pages/AuthPage/components/Logo/Img.js

@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-const Img = styled.img`
-  height: 36px;
-`;
-
-export { Img };

packages/core/admin/admin/src/pages/AuthPage/components/Logo/index.js

@@ -1,10 +1,15 @@
 import React from 'react';
+import styled from 'styled-components';
 import { useConfigurations } from '../../../../hooks';
 
+const Img = styled.img`
+  height: 72px;
+`;
+
 const Logo = () => {
   const { authLogo } = useConfigurations();
 
-  return <img src={authLogo} alt="strapi" style={{ height: '72px' }} />;
+  return <Img src={authLogo} aria-hidden alt="" />;
 };
 
 export default Logo;

packages/core/admin/admin/src/pages/AuthPage/index.js

@@ -91,6 +91,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
   };
 
   const handleSubmit = async (e, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
     const body = omit(e, fieldsToOmit);
     const requestURL = `/admin/${endPoint}`;