From 83fdbdebf19f44cea512126cb22b0b78dd38b4ba Mon Sep 17 00:00:00 2001
From: mfrachet <marvin.frachet@strapi.io>
Date: Mon, 13 Sep 2021 09:14:43 +0200
Subject: [PATCH] Implicity main / h1

---
 .../src/content-manager/pages/App/index.js    |  4 +---
 .../pages/NoContentType/index.js              |  3 +--
 .../pages/NoContentType/tests/index.test.js   |  4 ++--
 .../pages/NoPermissions/index.js              |  3 +--
 .../pages/NoPermissions/tests/index.test.js   |  4 ++--
 .../components/ForgotPassword/index.js        |  4 ++--
 .../components/ForgotPasswordSuccess/index.js |  4 ++--
 .../AuthPage/components/Login/BaseLogin.js    |  4 ++--
 .../components/Login/tests/BaseLogin.test.js  | 19 ++++---------------
 .../pages/AuthPage/components/Oops/index.js   |  4 ++--
 .../components/Oops/tests/index.test.js       |  4 ++--
 .../AuthPage/components/Register/index.js     |  4 ++--
 .../components/Register/tests/index.test.js   | 19 ++++---------------
 .../components/ResetPassword/index.js         |  4 ++--
 .../ResetPassword/tests/index.test.js         | 14 +++-----------
 .../admin/src/pages/HomePage/HomeHeader.js    |  6 ++----
 .../admin/admin/src/pages/HomePage/index.js   |  3 +--
 .../src/pages/HomePage/tests/index.test.js    |  7 ++++---
 .../pages/ApplicationInfosPage/index.js       |  4 +---
 .../ApplicationInfosPage/tests/index.test.js  |  4 ++--
 .../pages/Roles/EditPage/index.js             |  4 +---
 .../tests/__snapshots__/index.test.js.snap    | 19 +++----------------
 .../pages/Roles/ListPage/index.js             |  3 +--
 .../pages/Roles/ListPage/tests/index.test.js  |  4 ++--
 .../pages/Users/EditPage/index.js             |  6 ++----
 .../pages/Users/ListPage/index.js             |  3 +--
 .../pages/Users/ListPage/tests/index.test.js  |  4 ++--
 .../EditView/components/WebhookForm/index.js  |  2 --
 .../pages/Webhooks/EditView/index.js          |  2 +-
 .../pages/Webhooks/ListView/index.js          |  4 +---
 .../Webhooks/ListView/tests/index.test.js     |  4 ++--
 .../AuthPage/components/Providers/index.js    |  4 ++--
 .../pages/SettingsPage/SingleSignOn/index.js  |  3 +--
 .../SingleSignOn/tests/index.test.js          |  4 ++--
 .../pages/Roles/CreatePage/index.js           |  4 +---
 .../tests/__snapshots__/index.test.js.snap    | 19 +++----------------
 .../pages/Roles/ListPage/index.js             |  3 +--
 packages/core/admin/package.json              |  4 ++--
 .../admin/src/pages/ListView/index.js         |  1 -
 .../PageTemplate/PageTemplate.stories.mdx     |  3 +--
 packages/core/helper-plugin/package.json      |  4 ++--
 .../admin/src/pages/SettingsPage/index.js     |  3 +--
 .../tests/__snapshots__/index.test.js.snap    |  4 ++--
 .../admin/src/components/LocaleList/index.js  |  3 +--
 .../FormModal/Input/tests/index.test.js       | 10 +---------
 .../admin/src/pages/Providers/index.js        |  9 +--------
 .../src/pages/Providers/tests/index.test.js   |  4 ++--
 .../admin/src/pages/Roles/EditPage/index.js   |  3 +--
 .../pages/Roles/EditPage/tests/index.test.js  |  4 ++--
 .../admin/src/pages/Roles/ListPage/index.js   |  4 +---
 .../pages/Roles/ListPage/tests/index.test.js  |  4 ++--
 yarn.lock                                     | 16 ++++++++--------
 52 files changed, 95 insertions(+), 195 deletions(-)

diff --git a/packages/core/admin/admin/src/content-manager/pages/App/index.js b/packages/core/admin/admin/src/content-manager/pages/App/index.js
index 2b1aebd9c2..1b0b2d7ee4 100644
--- a/packages/core/admin/admin/src/content-manager/pages/App/index.js
+++ b/packages/core/admin/admin/src/content-manager/pages/App/index.js
@@ -26,12 +26,10 @@ const App = () => {
   const { pathname } = useLocation();
   const { formatMessage } = useIntl();
 
-  // Check with @mfrachet if ok with a11y
   if (status === 'loading') {
     return (
-      <Main labelledBy="title" aria-busy="true">
+      <Main aria-busy="true">
         <HeaderLayout
-          id="title"
           title={formatMessage({
             id: getTrad('header.name'),
             defaultMessage: 'Content',
diff --git a/packages/core/admin/admin/src/content-manager/pages/NoContentType/index.js b/packages/core/admin/admin/src/content-manager/pages/NoContentType/index.js
index 94169a3701..788a72fd5f 100644
--- a/packages/core/admin/admin/src/content-manager/pages/NoContentType/index.js
+++ b/packages/core/admin/admin/src/content-manager/pages/NoContentType/index.js
@@ -13,9 +13,8 @@ const NoContentType = () => {
   useFocusWhenNavigate();
 
   return (
-    <Main labelledBy="title">
+    <Main>
       <HeaderLayout
-        id="title"
         title={formatMessage({
           id: getTrad('header.name'),
           defaultMessage: 'Content',
diff --git a/packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js b/packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js
index 4a9e19ce9e..eaa886bd19 100644
--- a/packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js
@@ -257,7 +257,7 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
       }
 
       <main
-        aria-labelledby="title"
+        aria-labelledby="main-content-title"
         class="c0"
         id="main-content"
         tabindex="-1"
@@ -278,7 +278,7 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
               >
                 <h1
                   class="c4"
-                  id="title"
+                  id="main-content-title"
                 >
                   Content
                 </h1>
diff --git a/packages/core/admin/admin/src/content-manager/pages/NoPermissions/index.js b/packages/core/admin/admin/src/content-manager/pages/NoPermissions/index.js
index f23812991d..825b590dd2 100644
--- a/packages/core/admin/admin/src/content-manager/pages/NoPermissions/index.js
+++ b/packages/core/admin/admin/src/content-manager/pages/NoPermissions/index.js
@@ -10,9 +10,8 @@ const NoPermissions = () => {
   useFocusWhenNavigate();
 
   return (
-    <Main labelledBy="title">
+    <Main>
       <HeaderLayout
-        id="title"
         title={formatMessage({
           id: getTrad('header.name'),
           defaultMessage: 'Content',
diff --git a/packages/core/admin/admin/src/content-manager/pages/NoPermissions/tests/index.test.js b/packages/core/admin/admin/src/content-manager/pages/NoPermissions/tests/index.test.js
index 76a2187fa7..56e7c88721 100644
--- a/packages/core/admin/admin/src/content-manager/pages/NoPermissions/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/pages/NoPermissions/tests/index.test.js
@@ -138,7 +138,7 @@ describe('<NoPermissions />', () => {
       }
 
       <main
-        aria-labelledby="title"
+        aria-labelledby="main-content-title"
         class="c0"
         id="main-content"
         tabindex="-1"
@@ -159,7 +159,7 @@ describe('<NoPermissions />', () => {
               >
                 <h1
                   class="c4"
-                  id="title"
+                  id="main-content-title"
                 >
                   Content
                 </h1>
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/ForgotPassword/index.js b/packages/core/admin/admin/src/pages/AuthPage/components/ForgotPassword/index.js
index 37b0010b59..326406aec6 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/ForgotPassword/index.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/ForgotPassword/index.js
@@ -15,7 +15,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
 
   return (
     <UnauthenticatedLayout>
-      <Main labelledBy="password-forgotten">
+      <Main>
         <LayoutContent>
           <Formik
             enableReinitialize
@@ -31,7 +31,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                 <Column>
                   <Logo />
                   <Box paddingTop={6} paddingBottom={7}>
-                    <H1 id="password-forgotten">
+                    <H1>
                       {formatMessage({
                         id: 'Auth.form.button.password-forgotten',
                         defaultMessage: 'Password forgotten',
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/ForgotPasswordSuccess/index.js b/packages/core/admin/admin/src/pages/AuthPage/components/ForgotPasswordSuccess/index.js
index 4c7d7835b9..78d041f728 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/ForgotPasswordSuccess/index.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/ForgotPasswordSuccess/index.js
@@ -12,12 +12,12 @@ const ForgotPasswordSuccess = () => {
 
   return (
     <UnauthenticatedLayout>
-      <Main labelledBy="email-sent">
+      <Main>
         <LayoutContent>
           <Column>
             <Logo />
             <Box paddingTop={6} paddingBottom={7}>
-              <H1 id="email-sent">
+              <H1>
                 {formatMessage({
                   id: 'app.containers.AuthPage.ForgotPasswordSuccess.title',
                   defaultMessage: 'Email sent',
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js b/packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js
index 393f1f59b2..d3bdadee08 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/Login/BaseLogin.js
@@ -26,7 +26,7 @@ const Login = ({ onSubmit, schema, children }) => {
   const { formatMessage } = useIntl();
 
   return (
-    <Main labelledBy="welcome">
+    <Main>
       <LayoutContent>
         <Formik
           enableReinitialize
@@ -44,7 +44,7 @@ const Login = ({ onSubmit, schema, children }) => {
               <Column>
                 <Logo />
                 <Box paddingTop={6} paddingBottom={1}>
-                  <H1 id="welcome">
+                  <H1>
                     {formatMessage({
                       id: 'Auth.form.welcome.title',
                       defaultMessage: 'Welcome back!',
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js b/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js
index 3c631bc14a..af7add616b 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js
@@ -370,6 +370,7 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
 
       .c19 {
         border: none;
+        border-radius: 4px;
         padding-left: 16px;
         padding-right: 16px;
         color: #32324d;
@@ -405,12 +406,9 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         color: inherit;
       }
 
-      .c19:focus {
-        outline: none;
-      }
-
       .c20 {
         border: none;
+        border-radius: 4px;
         padding-left: 16px;
         padding-right: 0;
         color: #32324d;
@@ -446,19 +444,10 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
         color: inherit;
       }
 
-      .c20:focus {
-        outline: none;
-      }
-
       .c18 {
         border: 1px solid #dcdce4;
         border-radius: 4px;
         background: #ffffff;
-        overflow: hidden;
-      }
-
-      .c18:focus-within {
-        border: 1px solid #4945ff;
       }
 
       .c25 {
@@ -547,7 +536,7 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
       }
 
       <main
-        aria-labelledby="welcome"
+        aria-labelledby="main-content-title"
         class="c0"
         id="main-content"
         tabindex="-1"
@@ -572,7 +561,7 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
               >
                 <h1
                   class="c8"
-                  id="welcome"
+                  id="main-content-title"
                 >
                   Welcome back!
                 </h1>
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Oops/index.js b/packages/core/admin/admin/src/pages/AuthPage/components/Oops/index.js
index becd70a448..5bf2196d4f 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/Oops/index.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/Oops/index.js
@@ -21,12 +21,12 @@ const Oops = () => {
 
   return (
     <UnauthenticatedLayout>
-      <Main labelledBy="email-sent">
+      <Main>
         <LayoutContent>
           <Column>
             <Logo />
             <Box paddingTop={6} paddingBottom={7}>
-              <H1 id="email-sent">
+              <H1>
                 {formatMessage({ id: 'Auth.components.Oops.title', defaultMessage: 'Oops...' })}
               </H1>
             </Box>
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Oops/tests/index.test.js b/packages/core/admin/admin/src/pages/AuthPage/components/Oops/tests/index.test.js
index 56ee0510e1..cf558d3f7a 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/Oops/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/Oops/tests/index.test.js
@@ -251,7 +251,7 @@ describe('ADMIN | PAGES | AUTH | Oops', () => {
           class="c6"
         >
           <main
-            aria-labelledby="email-sent"
+            aria-labelledby="main-content-title"
             class="c7"
             id="main-content"
             tabindex="-1"
@@ -272,7 +272,7 @@ describe('ADMIN | PAGES | AUTH | Oops', () => {
                 >
                   <h1
                     class="c14"
-                    id="email-sent"
+                    id="main-content-title"
                   >
                     Oops...
                   </h1>
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Register/index.js b/packages/core/admin/admin/src/pages/AuthPage/components/Register/index.js
index 66bedac6f4..291a9f0a54 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/Register/index.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/Register/index.js
@@ -106,11 +106,11 @@ const Register = ({ fieldsToDisable, noSignin, onSubmit, schema }) => {
         >
           {({ values, errors, handleChange }) => (
             <Form noValidate>
-              <Main labelledBy="welcome">
+              <Main>
                 <Column>
                   <Logo />
                   <Box paddingTop={6} paddingBottom={1}>
-                    <H1 id="welcome">
+                    <H1>
                       {formatMessage({
                         id: 'Auth.form.welcome.title',
                         defaultMessage: 'Welcome back!',
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js b/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js
index 388b58c06b..f11aea25e2 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js
@@ -376,6 +376,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
 
       .c29 {
         border: none;
+        border-radius: 4px;
         padding-left: 16px;
         padding-right: 16px;
         color: #32324d;
@@ -411,12 +412,9 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         color: inherit;
       }
 
-      .c29:focus {
-        outline: none;
-      }
-
       .c30 {
         border: none;
+        border-radius: 4px;
         padding-left: 16px;
         padding-right: 0;
         color: #32324d;
@@ -452,19 +450,10 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         color: inherit;
       }
 
-      .c30:focus {
-        outline: none;
-      }
-
       .c28 {
         border: 1px solid #dcdce4;
         border-radius: 4px;
         background: #ffffff;
-        overflow: hidden;
-      }
-
-      .c28:focus-within {
-        border: 1px solid #4945ff;
       }
 
       .c35 {
@@ -635,7 +624,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
               novalidate=""
             >
               <main
-                aria-labelledby="welcome"
+                aria-labelledby="main-content-title"
                 class="c11"
                 id="main-content"
                 tabindex="-1"
@@ -653,7 +642,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
                   >
                     <h1
                       class="c16"
-                      id="welcome"
+                      id="main-content-title"
                     >
                       Welcome back!
                     </h1>
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/index.js b/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/index.js
index ceab5c59f9..ad1f9c1c1a 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/index.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/index.js
@@ -19,7 +19,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
 
   return (
     <UnauthenticatedLayout>
-      <Main labelledBy="password-forgotten">
+      <Main>
         <LayoutContent>
           <Formik
             enableReinitialize
@@ -36,7 +36,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                 <Column>
                   <Logo />
                   <Box paddingTop={6} paddingBottom={7}>
-                    <H1 id="password-forgotten">
+                    <H1>
                       {formatMessage({
                         id: 'Auth.reset-password.title',
                         defaultMessage: 'Reset password',
diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js b/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js
index a4b519d626..0d72d9511f 100644
--- a/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js
@@ -319,6 +319,7 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
 
       .c23 {
         border: none;
+        border-radius: 4px;
         padding-left: 16px;
         padding-right: 0;
         color: #32324d;
@@ -354,19 +355,10 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
         color: inherit;
       }
 
-      .c23:focus {
-        outline: none;
-      }
-
       .c22 {
         border: 1px solid #dcdce4;
         border-radius: 4px;
         background: #ffffff;
-        overflow: hidden;
-      }
-
-      .c22:focus-within {
-        border: 1px solid #4945ff;
       }
 
       .c18 textarea {
@@ -506,7 +498,7 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
           class="c0 c8"
         >
           <main
-            aria-labelledby="password-forgotten"
+            aria-labelledby="main-content-title"
             class="c9"
             id="main-content"
             tabindex="-1"
@@ -531,7 +523,7 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
                   >
                     <h1
                       class="c16"
-                      id="password-forgotten"
+                      id="main-content-title"
                     >
                       Reset password
                     </h1>
diff --git a/packages/core/admin/admin/src/pages/HomePage/HomeHeader.js b/packages/core/admin/admin/src/pages/HomePage/HomeHeader.js
index 6fa3861119..d5660922bc 100644
--- a/packages/core/admin/admin/src/pages/HomePage/HomeHeader.js
+++ b/packages/core/admin/admin/src/pages/HomePage/HomeHeader.js
@@ -17,14 +17,14 @@ const StackCustom = styled(Stack)`
   align-items: flex-start;
 `;
 
-const HomeHeader = ({ hasCreatedContentType, id, onCreateCT }) => {
+const HomeHeader = ({ hasCreatedContentType, onCreateCT }) => {
   const { formatMessage } = useIntl();
 
   return (
     <div>
       <Box paddingLeft={6} paddingBottom={10}>
         <StackCustom size={5}>
-          <H1 id={id}>
+          <H1>
             {hasCreatedContentType
               ? formatMessage({
                   id: 'app.components.HomePage.welcome.again',
@@ -71,13 +71,11 @@ const HomeHeader = ({ hasCreatedContentType, id, onCreateCT }) => {
 
 HomeHeader.defaultProps = {
   hasCreatedContentType: undefined,
-  id: undefined,
   onCreateCT: undefined,
 };
 
 HomeHeader.propTypes = {
   hasCreatedContentType: PropTypes.bool,
-  id: PropTypes.string,
   onCreateCT: PropTypes.func,
 };
 
diff --git a/packages/core/admin/admin/src/pages/HomePage/index.js b/packages/core/admin/admin/src/pages/HomePage/index.js
index 3f877d89ab..dfdf98cea4 100644
--- a/packages/core/admin/admin/src/pages/HomePage/index.js
+++ b/packages/core/admin/admin/src/pages/HomePage/index.js
@@ -58,7 +58,7 @@ const HomePage = () => {
       <FormattedMessage id="HomePage.helmet.title" defaultMessage="Homepage">
         {title => <Helmet title={title[0]} />}
       </FormattedMessage>
-      <Main labelledBy="homepage">
+      <Main>
         <LogoContainer>
           <img alt="" aria-hidden src={Logo} />
         </LogoContainer>
@@ -67,7 +67,6 @@ const HomePage = () => {
             <GridItem col={8} s={12}>
               <HomeHeader
                 onCreateCT={handleClick}
-                id="homepage"
                 hasCreatedContentType={hasAlreadyCreatedContentTypes}
               />
             </GridItem>
diff --git a/packages/core/admin/admin/src/pages/HomePage/tests/index.test.js b/packages/core/admin/admin/src/pages/HomePage/tests/index.test.js
index a8c339150e..bbb724a91f 100644
--- a/packages/core/admin/admin/src/pages/HomePage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/HomePage/tests/index.test.js
@@ -619,7 +619,7 @@ describe('Homepage', () => {
           class="c1 c2"
         >
           <main
-            aria-labelledby="homepage"
+            aria-labelledby="main-content-title"
             class="c3"
             id="main-content"
             tabindex="-1"
@@ -628,7 +628,8 @@ describe('Homepage', () => {
               class="c4"
             >
               <img
-                alt="Strapi logo"
+                alt=""
+                aria-hidden="true"
                 src="IMAGE_MOCK"
               />
             </div>
@@ -653,7 +654,7 @@ describe('Homepage', () => {
                         >
                           <h1
                             class="c11"
-                            id="homepage"
+                            id="main-content-title"
                           >
                             Welcome on board!
                           </h1>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js
index b06d643a83..cae93c1689 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js
@@ -23,10 +23,8 @@ const ApplicationInfosPage = () => {
   return (
     <Layout>
       <SettingsPageTitle name="Application" />
-      <Main labelledBy="application">
+      <Main>
         <HeaderLayout
-          as="h1"
-          id="application"
           title={formatMessage({ id: 'Settings.application.title', defaultMessage: 'Application' })}
           subtitle={formatMessage({
             id: 'Settings.application.description',
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
index 367e293c59..8d8ce38d8d 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
@@ -258,7 +258,7 @@ describe('Application page', () => {
           class="c1 c2"
         >
           <main
-            aria-labelledby="application"
+            aria-labelledby="main-content-title"
             class="c3"
             id="main-content"
             tabindex="-1"
@@ -279,7 +279,7 @@ describe('Application page', () => {
                   >
                     <h1
                       class="c7"
-                      id="application"
+                      id="main-content-title"
                     >
                       Application
                     </h1>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/index.js
index e430c11b51..739f6cabe4 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/index.js
@@ -86,7 +86,7 @@ const EditPage = () => {
   const isFormDisabled = role.code === 'strapi-super-admin';
 
   return (
-    <Main labelledBy="title">
+    <Main>
       <SettingsPageTitle name="Roles" />
       <Formik
         enableReinitialize
@@ -102,7 +102,6 @@ const EditPage = () => {
           <form onSubmit={handleSubmit}>
             <>
               <HeaderLayout
-                id="title"
                 primaryAction={
                   <Stack horizontal size={2}>
                     <Button
@@ -138,7 +137,6 @@ const EditPage = () => {
                   id: 'Settings.roles.create.description',
                   defaultMessage: 'Define the rights given to the role',
                 })}
-                as="h1"
               />
               <ContentLayout>
                 <Stack size={6}>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap
index cf61ad5aa3..49531c40da 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap
@@ -348,6 +348,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
 
 .c26 {
   border: none;
+  border-radius: 4px;
   padding-left: 16px;
   padding-right: 16px;
   color: #32324d;
@@ -383,19 +384,10 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   color: inherit;
 }
 
-.c26:focus {
-  outline: none;
-}
-
 .c25 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
-  overflow: hidden;
-}
-
-.c25:focus-within {
-  border: 1px solid #4945ff;
 }
 
 .c23 textarea {
@@ -430,11 +422,6 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   font-size: 0.875rem;
   color: #32324d;
   background: #ffffff;
-  outline: none;
-}
-
-.c28:focus {
-  border: 1px solid #4945ff;
 }
 
 .c28::-webkit-input-placeholder {
@@ -558,7 +545,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
 
 <div>
   <main
-    aria-labelledby="title"
+    aria-labelledby="main-content-title"
     class="c0"
     id="main-content"
     tabindex="-1"
@@ -579,7 +566,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
             >
               <h1
                 class="c5"
-                id="title"
+                id="main-content-title"
               >
                 Edit a role
               </h1>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/index.js
index 58882235f2..449c8592d0 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/index.js
@@ -101,10 +101,9 @@ const RoleListPage = () => {
   // ! TODO - Add the search input
 
   return (
-    <Main labelledBy="title">
+    <Main>
       <SettingsPageTitle name="Roles" />
       <HeaderLayout
-        id="title"
         primaryAction={
           <Button onClick={handleToggleModalForCreatingRole} startIcon={<AddIcon />}>
             {formatMessage({
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/tests/index.test.js
index 0ee121cf2f..83f48eb7af 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/tests/index.test.js
@@ -401,7 +401,7 @@ describe('<ListPage />', () => {
       }
 
       <main
-        aria-labelledby="title"
+        aria-labelledby="main-content-title"
         class="c0"
         id="main-content"
         tabindex="-1"
@@ -422,7 +422,7 @@ describe('<ListPage />', () => {
               >
                 <h1
                   class="c5"
-                  id="title"
+                  id="main-content-title"
                 >
                   roles
                 </h1>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js
index d9c3b4def4..def5a77bd9 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js
@@ -130,10 +130,9 @@ const EditPage = ({ canUpdate }) => {
 
   if (isLoading) {
     return (
-      <Main labelledBy="title" aria-busy="true">
+      <Main aria-busy="true">
         <SettingsPageTitle name="Users" />
         <HeaderLayout
-          id="title"
           primaryAction={
             <Button disabled startIcon={<CheckIcon />} type="button">
               {formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
@@ -149,7 +148,7 @@ const EditPage = ({ canUpdate }) => {
   }
 
   return (
-    <Main labelledBy="title">
+    <Main>
       <SettingsPageTitle name="Users" />
       <Formik
         onSubmit={handleSubmit}
@@ -161,7 +160,6 @@ const EditPage = ({ canUpdate }) => {
           return (
             <Form>
               <HeaderLayout
-                id="title"
                 primaryAction={
                   <Button
                     disabled={isSubmitting || !canUpdate}
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/index.js
index 30e083e61a..0cfde2ce4d 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/index.js
@@ -85,10 +85,9 @@ const ListPage = () => {
   );
 
   return (
-    <Main labelledBy="title" aria-busy={isLoading}>
+    <Main aria-busy={isLoading}>
       <SettingsPageTitle name="Users" />
       <HeaderLayout
-        id="title"
         primaryAction={createAction}
         title={formatMessage({
           id: 'Settings.permissions.users.listview.header.title',
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js
index de38667337..542c8a265a 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js
@@ -790,7 +790,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
 
       <main
         aria-busy="true"
-        aria-labelledby="title"
+        aria-labelledby="main-content-title"
         class="c0"
         id="main-content"
         tabindex="-1"
@@ -811,7 +811,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
               >
                 <h1
                   class="c5"
-                  id="title"
+                  id="main-content-title"
                 >
                   Users
                 </h1>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/index.js
index 7ea6a5627f..d93cd918f1 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/index.js
@@ -50,7 +50,6 @@ const WebhookForm = ({
       {({ handleSubmit, errors, handleReset }) => (
         <Form noValidate>
           <HeaderLayout
-            id="title"
             primaryAction={
               <Stack horizontal size={2}>
                 <Button
@@ -94,7 +93,6 @@ const WebhookForm = ({
                 })}
               </Link>
             }
-            as="h1"
           />
           <ContentLayout>
             <Stack size={4}>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/index.js
index f4bc5de394..d6a3474c51 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/index.js
@@ -162,7 +162,7 @@ const EditView = () => {
   }
 
   return (
-    <Main labelledBy="title">
+    <Main>
       <SettingsPageTitle name="Webhooks" />
       <WebhookForm
         {...{
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js
index 790e6f2ceb..401f052ce6 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js
@@ -240,11 +240,9 @@ const ListView = () => {
   return (
     <Layout>
       <SettingsPageTitle name="Webhooks" />
-      <Main labelledBy="webhooks" aria-busy={isLoading || loadingWebhooks}>
+      <Main aria-busy={isLoading || loadingWebhooks}>
         <>
           <HeaderLayout
-            as="h1"
-            id="webhooks"
             title={formatMessage({ id: 'Settings.webhooks.title', defaultMessage: 'Webhooks' })}
             subtitle={formatMessage({
               id: 'Settings.webhooks.list.description',
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/tests/index.test.js
index 04312c91fc..74cb42f43b 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/tests/index.test.js
@@ -184,7 +184,7 @@ describe('Admin | containers | ListView', () => {
         >
           <main
             aria-busy="true"
-            aria-labelledby="webhooks"
+            aria-labelledby="main-content-title"
             class="c3"
             id="main-content"
             tabindex="-1"
@@ -205,7 +205,7 @@ describe('Admin | containers | ListView', () => {
                   >
                     <h1
                       class="c7"
-                      id="webhooks"
+                      id="main-content-title"
                     >
                       Webhooks
                     </h1>
diff --git a/packages/core/admin/ee/admin/pages/AuthPage/components/Providers/index.js b/packages/core/admin/ee/admin/pages/AuthPage/components/Providers/index.js
index 8350d473b5..7804b472fc 100644
--- a/packages/core/admin/ee/admin/pages/AuthPage/components/Providers/index.js
+++ b/packages/core/admin/ee/admin/pages/AuthPage/components/Providers/index.js
@@ -45,12 +45,12 @@ const Providers = () => {
 
   return (
     <UnauthenticatedLayout>
-      <Main labelledBy="welcome">
+      <Main>
         <LayoutContent>
           <Column>
             <Logo />
             <Box paddingTop={6} paddingBottom={1}>
-              <H1 id="welcome">{formatMessage({ id: 'Auth.form.welcome.title' })}</H1>
+              <H1>{formatMessage({ id: 'Auth.form.welcome.title' })}</H1>
             </Box>
             <Box paddingBottom={7}>
               <Subtitle textColor="neutral600">
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/index.js b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/index.js
index cf21ebef79..b36c107ebf 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/index.js
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/index.js
@@ -67,7 +67,7 @@ export const SingleSignOn = () => {
   const isHeaderButtonDisabled = isEqual(initialData, modifiedData);
 
   return (
-    <Main labelledBy="title" tabIndex={-1}>
+    <Main tabIndex={-1}>
       <SettingsPageTitle name="SSO" />
       <form
         onSubmit={e => {
@@ -80,7 +80,6 @@ export const SingleSignOn = () => {
         }}
       >
         <HeaderLayout
-          id="title"
           primaryAction={
             <Button
               data-testid="save-button"
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js
index b98465c098..654c0c2f32 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/index.test.js
@@ -254,7 +254,7 @@ describe('Admin | ee | SettingsPage | SSO', () => {
       }
 
       <main
-        aria-labelledby="title"
+        aria-labelledby="main-content-title"
         class="c0"
         id="main-content"
         tabindex="-1"
@@ -276,7 +276,7 @@ describe('Admin | ee | SettingsPage | SSO', () => {
                 >
                   <h1
                     class="c5"
-                    id="title"
+                    id="main-content-title"
                   >
                     Single Sign-On
                   </h1>
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/index.js b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/index.js
index e2cf82aadb..bc84e967b2 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/index.js
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/index.js
@@ -118,7 +118,7 @@ const CreatePage = () => {
   })} ${moment().format('LL')}`;
 
   return (
-    <Main labelledBy="title">
+    <Main>
       <SettingsPageTitle name="Roles" />
       <Formik
         initialValues={{ name: '', description: defaultDescription }}
@@ -130,7 +130,6 @@ const CreatePage = () => {
           <Form noValidate>
             <>
               <HeaderLayout
-                id="title"
                 primaryAction={
                   <Stack horizontal size={2}>
                     <Button
@@ -161,7 +160,6 @@ const CreatePage = () => {
                   id: 'Settings.roles.create.description',
                   defaultMessage: 'Define the rights given to the role',
                 })}
-                as="h1"
               />
               <ContentLayout>
                 <Stack size={6}>
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap
index 6f6e2715a2..5408e4541e 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap
@@ -348,6 +348,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
 
 .c26 {
   border: none;
+  border-radius: 4px;
   padding-left: 16px;
   padding-right: 16px;
   color: #32324d;
@@ -383,19 +384,10 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   color: inherit;
 }
 
-.c26:focus {
-  outline: none;
-}
-
 .c25 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
-  overflow: hidden;
-}
-
-.c25:focus-within {
-  border: 1px solid #4945ff;
 }
 
 .c23 textarea {
@@ -430,11 +422,6 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   font-size: 0.875rem;
   color: #32324d;
   background: #ffffff;
-  outline: none;
-}
-
-.c28:focus {
-  border: 1px solid #4945ff;
 }
 
 .c28::-webkit-input-placeholder {
@@ -558,7 +545,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
 
 <div>
   <main
-    aria-labelledby="title"
+    aria-labelledby="main-content-title"
     class="c0"
     id="main-content"
     tabindex="-1"
@@ -582,7 +569,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
             >
               <h1
                 class="c5"
-                id="title"
+                id="main-content-title"
               >
                 Create a role
               </h1>
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/ListPage/index.js b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/ListPage/index.js
index fee880100f..038cf30e86 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/ListPage/index.js
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/ListPage/index.js
@@ -249,10 +249,9 @@ const RoleListPage = () => {
   }
 
   return (
-    <Main labelledBy="title">
+    <Main>
       <SettingsPageTitle name="Roles" />
       <HeaderLayout
-        id="title"
         primaryAction={
           canCreate ? (
             <Button onClick={handleNewRoleClick} startIcon={<AddIcon />}>
diff --git a/packages/core/admin/package.json b/packages/core/admin/package.json
index 9249f780aa..23c40e2944 100644
--- a/packages/core/admin/package.json
+++ b/packages/core/admin/package.json
@@ -40,8 +40,8 @@
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@strapi/babel-plugin-switch-ee-ce": "1.0.0",
     "@strapi/helper-plugin": "3.6.8",
-    "@strapi/icons": "0.0.1-alpha.26",
-    "@strapi/parts": "0.0.1-alpha.26",
+    "@strapi/icons": "0.0.1-alpha.27",
+    "@strapi/parts": "0.0.1-alpha.27",
     "@strapi/utils": "3.6.8",
     "axios": "^0.21.1",
     "babel-loader": "8.2.2",
diff --git a/packages/core/content-type-builder/admin/src/pages/ListView/index.js b/packages/core/content-type-builder/admin/src/pages/ListView/index.js
index 5a6599b6d5..c5d11a9db1 100644
--- a/packages/core/content-type-builder/admin/src/pages/ListView/index.js
+++ b/packages/core/content-type-builder/admin/src/pages/ListView/index.js
@@ -257,7 +257,6 @@ const ListView = () => {
               })}
             </Link>
           }
-          as="h1"
         />
         <ContentLayout>
           <Stack size={4}>
diff --git a/packages/core/helper-plugin/lib/src/templates/PageTemplate/PageTemplate.stories.mdx b/packages/core/helper-plugin/lib/src/templates/PageTemplate/PageTemplate.stories.mdx
index 317955e096..c5911aed38 100644
--- a/packages/core/helper-plugin/lib/src/templates/PageTemplate/PageTemplate.stories.mdx
+++ b/packages/core/helper-plugin/lib/src/templates/PageTemplate/PageTemplate.stories.mdx
@@ -35,9 +35,8 @@ import { LoadingIndicatorPage, NoContent, NoPermissions } from '@strapi/helper-p
       return (
         <Box background="neutral100">
           <Layout>
-            <Main labelledBy="title" aria-busy={isLoading}>
+            <Main aria-busy={isLoading}>
               <HeaderLayout
-                id="title"
                 primaryAction={<Button startIcon={<AddIcon />}>Add an entry</Button>}
                 secondaryAction={
                   <Button variant="tertiary" startIcon={<EditIcon />}>
diff --git a/packages/core/helper-plugin/package.json b/packages/core/helper-plugin/package.json
index 790e04cf7a..53c3645e55 100644
--- a/packages/core/helper-plugin/package.json
+++ b/packages/core/helper-plugin/package.json
@@ -57,8 +57,8 @@
     "@storybook/builder-webpack5": "^6.3.7",
     "@storybook/manager-webpack5": "^6.3.7",
     "@storybook/react": "^6.3.7",
-    "@strapi/icons": "0.0.1-alpha.26",
-    "@strapi/parts": "0.0.1-alpha.26",
+    "@strapi/icons": "0.0.1-alpha.27",
+    "@strapi/parts": "0.0.1-alpha.27",
     "babel-loader": "^8.2.2",
     "cross-env": "^7.0.3",
     "enzyme": "^3.8.0",
diff --git a/packages/core/upload/admin/src/pages/SettingsPage/index.js b/packages/core/upload/admin/src/pages/SettingsPage/index.js
index 627b03a6c0..42cfc22555 100644
--- a/packages/core/upload/admin/src/pages/SettingsPage/index.js
+++ b/packages/core/upload/admin/src/pages/SettingsPage/index.js
@@ -118,7 +118,7 @@ export const SettingsPage = () => {
   };
 
   return (
-    <Main labelledBy="title" tabIndex={-1}>
+    <Main tabIndex={-1}>
       <Helmet
         title={formatMessage({
           id: getTrad('page.title'),
@@ -127,7 +127,6 @@ export const SettingsPage = () => {
       />
       <form onSubmit={handleSubmit}>
         <HeaderLayout
-          id="title"
           title={formatMessage({
             id: getTrad('settings.header.label'),
             defaultMessage: 'Media Library - Settings',
diff --git a/packages/core/upload/admin/src/pages/SettingsPage/tests/__snapshots__/index.test.js.snap b/packages/core/upload/admin/src/pages/SettingsPage/tests/__snapshots__/index.test.js.snap
index b8ad9f4441..934d37aed4 100644
--- a/packages/core/upload/admin/src/pages/SettingsPage/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/upload/admin/src/pages/SettingsPage/tests/__snapshots__/index.test.js.snap
@@ -220,7 +220,7 @@ exports[`Upload | SettingsPage renders and matches the snapshot 1`] = `
 
 <div>
   <main
-    aria-labelledby="title"
+    aria-labelledby="main-content-title"
     class="c0"
     id="main-content"
     tabindex="-1"
@@ -242,7 +242,7 @@ exports[`Upload | SettingsPage renders and matches the snapshot 1`] = `
             >
               <h1
                 class="c5"
-                id="title"
+                id="main-content-title"
               >
                 Media Library - Settings
               </h1>
diff --git a/packages/plugins/i18n/admin/src/components/LocaleList/index.js b/packages/plugins/i18n/admin/src/components/LocaleList/index.js
index dab5abdfc9..aabd415787 100644
--- a/packages/plugins/i18n/admin/src/components/LocaleList/index.js
+++ b/packages/plugins/i18n/admin/src/components/LocaleList/index.js
@@ -29,9 +29,8 @@ const LocaleList = ({ canUpdateLocale, canDeleteLocale, onToggleCreateModal, isC
   const handleEditLocale = canUpdateLocale ? setLocaleToEdit : undefined;
 
   return (
-    <Main labelledBy="title" tabIndex={-1}>
+    <Main tabIndex={-1}>
       <HeaderLayout
-        id="title"
         primaryAction={
           <Button startIcon={<AddIcon />} onClick={onToggleCreateModal}>
             {formatMessage({ id: getTrad('Settings.list.actions.add') })}
diff --git a/packages/plugins/users-permissions/admin/src/components/FormModal/Input/tests/index.test.js b/packages/plugins/users-permissions/admin/src/components/FormModal/Input/tests/index.test.js
index 7d54539097..3cd4985790 100644
--- a/packages/plugins/users-permissions/admin/src/components/FormModal/Input/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/components/FormModal/Input/tests/index.test.js
@@ -77,6 +77,7 @@ describe('<Input />', () => {
 
       .c6 {
         border: none;
+        border-radius: 4px;
         padding-left: 16px;
         padding-right: 16px;
         color: #32324d;
@@ -112,19 +113,10 @@ describe('<Input />', () => {
         color: inherit;
       }
 
-      .c6:focus {
-        outline: none;
-      }
-
       .c5 {
         border: 1px solid #dcdce4;
         border-radius: 4px;
         background: #ffffff;
-        overflow: hidden;
-      }
-
-      .c5:focus-within {
-        border: 1px solid #4945ff;
       }
 
       .c1 {
diff --git a/packages/plugins/users-permissions/admin/src/pages/Providers/index.js b/packages/plugins/users-permissions/admin/src/pages/Providers/index.js
index f0616694e1..56fc512eaa 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Providers/index.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Providers/index.js
@@ -136,15 +136,8 @@ export const ProvidersPage = () => {
   return (
     <Layout>
       <SettingsPageTitle name={pageTitle} />
-      <Main
-        labelledBy={formatMessage({
-          id: getTrad('HeaderNav.link.providers'),
-          defaultMessage: 'Providers',
-        })}
-      >
+      <Main>
         <HeaderLayout
-          as="h1"
-          id="providers"
           title={formatMessage({
             id: getTrad('HeaderNav.link.providers'),
             defaultMessage: 'Providers',
diff --git a/packages/plugins/users-permissions/admin/src/pages/Providers/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Providers/tests/index.test.js
index 7cf4fffd39..9e2a0d8cd1 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Providers/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Providers/tests/index.test.js
@@ -177,7 +177,7 @@ describe('Admin | containers | ProvidersPage', () => {
           class="c1 c2"
         >
           <main
-            aria-labelledby="Providers"
+            aria-labelledby="main-content-title"
             class="c3"
             id="main-content"
             tabindex="-1"
@@ -198,7 +198,7 @@ describe('Admin | containers | ProvidersPage', () => {
                   >
                     <h1
                       class="c7"
-                      id="providers"
+                      id="main-content-title"
                     >
                       Providers
                     </h1>
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/index.js b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/index.js
index 68b0329801..9050524d4b 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/index.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/index.js
@@ -62,7 +62,7 @@ const EditPage = () => {
   };
 
   return (
-    <Main labelledBy="title">
+    <Main>
       <SettingsPageTitle name="Roles" />
       <Formik
         enableReinitialize
@@ -73,7 +73,6 @@ const EditPage = () => {
         {({ handleSubmit }) => (
           <form onSubmit={handleSubmit}>
             <HeaderLayout
-              id="title"
               primaryAction={
                 !isLoading && (
                   <Button
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
index 74230e7122..e83e0016dd 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
@@ -116,7 +116,7 @@ it('renders users-permissions edit role and matches snapshot', () => {
     }
 
     <main
-      aria-labelledby="title"
+      aria-labelledby="main-content-title"
       class="c0"
       id="main-content"
       tabindex="-1"
@@ -137,7 +137,7 @@ it('renders users-permissions edit role and matches snapshot', () => {
               >
                 <h1
                   class="c4"
-                  id="title"
+                  id="main-content-title"
                 >
                   Authenticated
                 </h1>
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/index.js b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/index.js
index 3f9873c1b6..9a9debafd2 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/index.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/index.js
@@ -85,10 +85,8 @@ const RoleListPage = () => {
   return (
     <Layout>
       <SettingsPageTitle name={pageTitle} />
-      <Main aria-busy={isLoading} labelledBy="roles">
+      <Main aria-busy={isLoading}>
         <HeaderLayout
-          as="h1"
-          id="roles"
           title={formatMessage({
             id: 'Settings.roles.title',
             defaultMessage: 'Roles',
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/index.test.js
index 35b49f9e9f..9d98b28e64 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/tests/index.test.js
@@ -188,7 +188,7 @@ describe('Admin | containers | RoleListPage', () => {
         >
           <main
             aria-busy="true"
-            aria-labelledby="roles"
+            aria-labelledby="main-content-title"
             class="c3"
             id="main-content"
             tabindex="-1"
@@ -209,7 +209,7 @@ describe('Admin | containers | RoleListPage', () => {
                   >
                     <h1
                       class="c7"
-                      id="roles"
+                      id="main-content-title"
                     >
                       Roles
                     </h1>
diff --git a/yarn.lock b/yarn.lock
index bc810dbde7..b1fb653c73 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4910,15 +4910,15 @@
     resolve-from "^5.0.0"
     store2 "^2.12.0"
 
-"@strapi/icons@0.0.1-alpha.26":
-  version "0.0.1-alpha.26"
-  resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-0.0.1-alpha.26.tgz#652833c431b0eaf019d631e32f4dccc68ab87afb"
-  integrity sha512-wveXSxcgoPuQNMaiTeOYeLvSoirq/7MwV6v+Xwod7WPvzvjK82H/O8kg2sTPGhTCtya952krAm/9DcEs3LfFUQ==
+"@strapi/icons@0.0.1-alpha.27":
+  version "0.0.1-alpha.27"
+  resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-0.0.1-alpha.27.tgz#1ebfb63ac159053fd699e395baf0fbbecce00601"
+  integrity sha512-CICUMgGseazuKxbu7OBuLvxuFk0dKno3BFpu0og1mx+MMX354L8UnsVMHubk8t+us8eU2R9zAU0YKj3hjV/hqA==
 
-"@strapi/parts@0.0.1-alpha.26":
-  version "0.0.1-alpha.26"
-  resolved "https://registry.yarnpkg.com/@strapi/parts/-/parts-0.0.1-alpha.26.tgz#44732b90026c56e48fb53c5768ad0aac7932caa0"
-  integrity sha512-36IgzV/jTygrTVjlkHkcMIQCmZUtyY2D3EuK+XlApQEjJIfj0XwB0Q1Of6OMbTnUVVwKrWwpB/9Qzqv4yiw9AQ==
+"@strapi/parts@0.0.1-alpha.27":
+  version "0.0.1-alpha.27"
+  resolved "https://registry.yarnpkg.com/@strapi/parts/-/parts-0.0.1-alpha.27.tgz#ff8602cdc30b0db7033003cdcacbe3fb14bba3d2"
+  integrity sha512-1dk2sEhYyZaKeYCH1nUK810mHOibI41+MXmN7fxyu+jklU7OYXtMAWqjKXGiJ4QDCIgA3gZ+Xgqnt+UjwN/M8g==
   dependencies:
     "@internationalized/number" "^3.0.2"
     compute-scroll-into-view "^1.0.17"