Fix feedback from create PR

Signed-off-by: soupette <cyril@strapi.io>

packages/core/admin/admin/src/pages/Users/ListPage/ModalForm/index.js

@@ -29,7 +29,7 @@ import stepper from './utils/stepper';
 
 const ModalForm = ({ queryName, onToggle }) => {
   const [currentStep, setStep] = useState('create');
-  const [isSubmitting, setIsSubmiting] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [registrationToken, setRegistrationToken] = useState(null);
   const queryClient = useQueryClient();
   const { formatMessage } = useIntl();
@@ -40,10 +40,11 @@ const ModalForm = ({ queryName, onToggle }) => {
       setRegistrationToken(data.data.registrationToken);
       await queryClient.invalidateQueries(queryName);
       goNext();
-      setIsSubmiting(false);
+      setIsSubmitting(false);
     },
     onError: err => {
       console.error(err.response);
+      setIsSubmitting(false);
 
       toggleNotification({
         type: 'warning',
@@ -62,7 +63,7 @@ const ModalForm = ({ queryName, onToggle }) => {
 
   const handleSubmit = async body => {
     lockApp();
-    setIsSubmiting(true);
+    setIsSubmitting(true);
 
     postMutation.mutateAsync(body);
   };

packages/core/admin/admin/src/pages/Users/components/MagicLink/MagicLinkWrapper.js

@@ -1,13 +1,15 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '@strapi/parts/Box';
 import { Row } from '@strapi/parts/Row';
 import { Stack } from '@strapi/parts/Stack';
 import { Text } from '@strapi/parts/Text';
+import { Tooltip } from '@strapi/parts/Tooltip';
 import { useNotification } from '@strapi/helper-plugin';
-import { Duplicate } from '@strapi/icons';
+import Duplicate from '@strapi/icons/Duplicate';
 import styled from 'styled-components';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { useIntl } from 'react-intl';
 
 // FIXME replace with parts when ready
 const Envelope = () => (
@@ -26,10 +28,9 @@ const Envelope = () => (
   </svg>
 );
 
-const Wrapper = styled.div`
+const Wrapper = styled.button`
   padding-left: ${({ theme }) => theme.spaces[2]};
   font-size: ${({ theme }) => theme.spaces[3]};
-  cursor: pointer;
   svg {
     > g,
     path {
@@ -40,11 +41,24 @@ const Wrapper = styled.div`
 
 const MagicLinkWrapper = ({ children, target }) => {
   const toggleNotification = useNotification();
+  const copyButtonRef = useRef();
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    if (copyButtonRef.current) {
+      copyButtonRef.current.focus();
+    }
+  }, []);
 
   const handleCopy = () => {
     toggleNotification({ type: 'info', message: { id: 'notification.link-copied' } });
   };
 
+  const copyLabel = formatMessage({
+    id: 'app.component.CopyToClipboard.label',
+    defaultMessage: 'Copy to clipboard',
+  });
+
   return (
     <Box padding={6} background="neutral0" shadow="tableShadow" hasRadius>
       <Row>
@@ -57,14 +71,16 @@ const MagicLinkWrapper = ({ children, target }) => {
               <Text small textColor="neutral800" highlighted>
                 {target}
               </Text>
-              <CopyToClipboard onCopy={handleCopy} text={target}>
+              <Tooltip description={copyLabel}>
-                <Wrapper small>
+                <CopyToClipboard onCopy={handleCopy} text={target}>
-                  <Duplicate />
+                  <Wrapper small type="button" ref={copyButtonRef}>
-                </Wrapper>
+                    <Duplicate />
-              </CopyToClipboard>
+                  </Wrapper>
+                </CopyToClipboard>
+              </Tooltip>
             </Stack>
 
-            <Text small textColor="neutral500" highlighted>
+            <Text small textColor="neutral600" highlighted>
               {children}
             </Text>
           </Stack>

packages/core/admin/admin/src/pages/Users/components/SelectRoles/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Select, Option } from '@strapi/parts';
+import { Select, Option } from '@strapi/parts/Select';
 import { useQuery } from 'react-query';
 import styled, { keyframes } from 'styled-components';
 import LoadingIcon from '@strapi/icons/LoadingIcon';

packages/core/admin/admin/src/translations/en.json

@@ -211,6 +211,7 @@
   "app.components.Button.confirm": "Confirm",
   "app.components.Button.reset": "Reset",
   "app.components.Button.save": "Save",
+  "app.component.CopyToClipboard.label": "Copy to clipboard",
   "app.components.ComingSoonPage.comingSoon": "Coming soon",
   "app.components.ConfirmDialog.title": "Confirmation",
   "app.components.DownloadInfo.download": "Download in progress...",

packages/core/helper-plugin/lib/src/components/GenericInput/index.js

@@ -37,7 +37,6 @@ const Input = ({
   if (type === 'bool') {
     return (
       <ToggleInput
-        aria-label={name}
         checked={value}
         disabled={disabled}
         hint={hint}
@@ -69,7 +68,6 @@ const Input = ({
 
   return (
     <TextInput
-      aria-label={name}
       disabled={disabled}
       error={errorMessage}
       label={label}