Fix PR feedback

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

packages/core/admin/admin/src/components/Theme/index.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 import PropTypes from 'prop-types';
-// import GlobalStyle from '../GlobalStyle';
+import GlobalStyle from '../GlobalStyle';
 import Fonts from '../Fonts';
 
 const Theme = ({ children, theme }) => (
   <ThemeProvider theme={theme}>
-    {/* <GlobalStyle /> */}
+    <GlobalStyle />
     <Fonts />
     {children}
   </ThemeProvider>

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

@@ -14,6 +14,7 @@ import {
   TrackingContext,
 } from '@strapi/helper-plugin';
 import { SkipToContent } from '@strapi/parts';
+import { useIntl } from 'react-intl';
 import PrivateRoute from '../../components/PrivateRoute';
 import { createRoute, makeUniqueRoutes } from '../../utils';
 import AuthPage from '../AuthPage';
@@ -27,6 +28,7 @@ const AuthenticatedApp = lazy(() =>
 
 function App() {
   const toggleNotification = useNotification();
+  const { formatMessage } = useIntl();
   const [{ isLoading, hasAdmin, uuid }, setState] = useState({ isLoading: true, hasAdmin: false });
 
   const authRoutes = useMemo(() => {
@@ -106,7 +108,7 @@ function App() {
 
   return (
     <Suspense fallback={<LoadingIndicatorPage />}>
-      <SkipToContent>Skip to content</SkipToContent>
+      <SkipToContent>{formatMessage({ id: 'skipToContent' })}</SkipToContent>
       <TrackingContext.Provider value={uuid}>
         <Switch>
           {authRoutes}

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

@@ -3,11 +3,11 @@ import { Box, Stack, H1, Text, Subtitle, Button, Checkbox, TextInput, Main } fro
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Formik, Form } from 'formik';
+import { Formik } from 'formik';
 
 import { Column } from '../../../../layouts/UnauthenticatedLayout';
 import { useConfigurations } from '../../../../hooks';
-import FormikFocusError from './FormikFocusError';
+import Form from './Form';
 
 const AuthButton = styled(Button)`
   display: inline-block;
@@ -32,9 +32,8 @@ const Login = ({ onSubmit, schema }) => {
       >
         {({ values, errors, handleChange }) => (
           <Form noValidate>
-            <FormikFocusError />
             <Column>
-              <img src={authLogo} alt="strapi-app-logo" style={{ height: '72px' }} />
+              <img src={authLogo} alt="" aria-hidden style={{ height: '72px' }} />
               <Box paddingTop="6" paddingBottom="1">
                 <H1 id="welcome">{formatMessage({ id: 'Auth.form.welcome.title' })}</H1>
               </Box>

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

@@ -1,7 +1,7 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
-import { useFormikContext, getIn } from 'formik';
+import { Form, useFormikContext, getIn } from 'formik';
 
-const FormikFocusError = () => {
+const FormWithFocus = props => {
   const { isSubmitting, isValidating, errors, touched } = useFormikContext();
 
   useEffect(() => {
@@ -30,7 +30,7 @@ const FormikFocusError = () => {
     }
   }, [errors, isSubmitting, isValidating, touched]);
 
-  return null;
+  return <Form {...props} noValidate />;
 };
 
-export default FormikFocusError;
+export default FormWithFocus;

packages/core/admin/ee/admin/pages/AuthPage/components/Providers/SSOProviders.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text, Row, Grid, GridItem } from '@strapi/parts';
+import { Text, Row, Grid, GridItem, Tooltip } from '@strapi/parts';
 import styled from 'styled-components';
+import { useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 const SSOButton = styled.a`
@@ -12,7 +13,11 @@ const SSOButton = styled.a`
   height: ${48 / 16}rem;
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
   border-radius: ${({ theme }) => theme.borderRadius};
-  text-decoration: none;
+  text-decoration: inherit;
+  &:link {
+    text-decoration: none;
+  }
+  color: ${({ theme }) => theme.colors.neutral600};
 `;
 
 const SSOProvidersWrapper = styled(Row)`
@@ -29,13 +34,15 @@ const SSOProvidersWrapper = styled(Row)`
 
 const SSOProviderButton = ({ provider }) => {
   return (
-    <SSOButton href={`${strapi.backendURL}/admin/connect/${provider.uid}`}>
+    <Tooltip label={provider.displayName}>
-      {provider.icon ? (
+      <SSOButton href={`${strapi.backendURL}/admin/connect/${provider.uid}`}>
-        <img src={provider.icon} alt={provider.displayName} height="32px" />
+        {provider.icon ? (
-      ) : (
+          <img src={provider.icon} aria-hidden alt="" height="32px" />
-        <Text>{provider.displayName}</Text>
+        ) : (
-      )}
+          <Text>{provider.displayName}</Text>
-    </SSOButton>
+        )}
+      </SSOButton>
+    </Tooltip>
   );
 };
 
@@ -48,6 +55,8 @@ SSOProviderButton.propTypes = {
 };
 
 const SSOProviders = ({ providers, displayAllProviders }) => {
+  const { formatMessage } = useIntl();
+
   if (displayAllProviders) {
     return (
       <Grid gap={4}>
@@ -69,9 +78,15 @@ const SSOProviders = ({ providers, displayAllProviders }) => {
           </GridItem>
         ))}
         <GridItem col={4}>
-          <SSOButton as={Link} to="/auth/providers">
+          <Tooltip
-            <span>•••</span>
+            label={formatMessage({
-          </SSOButton>
+              id: 'Auth.form.button.login.providers.see-more',
+            })}
+          >
+            <SSOButton as={Link} to="/auth/providers">
+              <span aroa-hidden>•••</span>
+            </SSOButton>
+          </Tooltip>
         </GridItem>
       </Grid>
     );