From 3e7d7200463708f678dc9f2c4b653c318edbb9ce Mon Sep 17 00:00:00 2001
From: Simone Taeggi <startae14@gmail.com>
Date: Mon, 28 Nov 2022 18:02:23 +0100
Subject: [PATCH 1/2] upgrade ds version and tests

---
 .../tests/__snapshots__/index.test.js.snap    |  31 +--
 .../components/Wysiwyg/tests/index.test.js    |   1 +
 .../pages/App/tests/index.test.js             |  67 ++++---
 .../tests/__snapshots__/index.test.js.snap    |   2 +
 .../DraftAndPublishBadge/tests/index.test.js  |   4 +-
 .../tests/__snapshots__/index.test.js.snap    |   6 +
 .../tests/__snapshots__/index.test.js.snap    |   1 +
 .../tests/__snapshots__/plugins.test.js.snap  |   1 +
 .../__snapshots__/providers.test.js.snap      |   1 +
 .../tests/__snapshots__/index.test.js.snap    |   3 +
 .../SettingsNav/tests/index.test.js           |   2 +-
 .../tests/__snapshots__/index.test.js.snap    |  20 +-
 .../ApiTokens/ListView/tests/index.test.js    |  11 ++
 .../pages/Roles/ListPage/tests/index.test.js  |   5 +
 .../tests/__snapshots__/index.test.js.snap    |   3 +-
 .../pages/Users/ListPage/tests/index.test.js  |  11 ++
 .../Webhooks/ListView/tests/index.test.js     |  14 ++
 .../src/pages/UseCasePage/tests/index.test.js |   1 +
 .../tests/__snapshots__/index.test.js.snap    |   3 +-
 packages/core/admin/package.json              |   4 +-
 .../tests/__snapshots__/index.test.js.snap    | 179 +++++++++---------
 .../src/pages/Settings/tests/index.test.js    |   1 +
 .../tests/__snapshots__/index.test.js.snap    |   1 +
 .../PageSizeURLQuery/tests/index.test.js      |   1 +
 .../tests/__snapshots__/index.test.js.snap    |   4 +-
 .../PaginationURLQuery/tests/index.test.js    |   2 +-
 packages/core/helper-plugin/package.json      |   4 +-
 .../AssetCard/tests/DocAssetCard.test.js      |  23 ++-
 .../AssetCard/tests/ImageAssetCard.test.js    |  23 ++-
 .../tests/__snapshots__/index.test.js.snap    |   3 +-
 .../__snapshots__/AssetList.test.js.snap      |  63 +++---
 .../__snapshots__/SelectTree.test.js.snap     |   4 +-
 .../PendingAssetStep.test.js.snap             | 101 +++++-----
 .../AdvancedSettings/tests/index.test.js      |   1 +
 .../pages/EmailTemplates/tests/index.test.js  |   8 +
 .../Roles/CreatePage/tests/index.test.js      |   4 +-
 .../pages/Roles/EditPage/tests/index.test.js  |   4 +-
 yarn.lock                                     |  36 +++-
 38 files changed, 392 insertions(+), 261 deletions(-)

diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/tests/__snapshots__/index.test.js.snap
index ec6536a4c6..ff05d7fdec 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/tests/__snapshots__/index.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the snapshot 1`] = `
-.c12 {
+.c13 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -14,13 +14,13 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
 }
 
 .c7 {
-  background: #f6f6f9;
-  padding: 4px;
-  border-radius: 4px;
+  background: #eaeaef;
+  padding-right: 8px;
+  padding-left: 8px;
   min-width: 20px;
 }
 
-.c10 {
+.c11 {
   padding-left: 8px;
 }
 
@@ -68,7 +68,7 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
   color: #32324d;
 }
 
-.c9 {
+.c10 {
   font-weight: 600;
   font-size: 0.6875rem;
   line-height: 1.45;
@@ -209,7 +209,7 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
   fill: #8e8ea9;
 }
 
-.c11 {
+.c12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -220,7 +220,7 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
   align-items: center;
 }
 
-.c11 svg {
+.c12 svg {
   height: 4px;
   width: 6px;
 }
@@ -229,6 +229,11 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
   padding: 4px 12px;
 }
 
+.c9 {
+  border-radius: 4px;
+  height: 1.5rem;
+}
+
 <div>
   <div
     aria-hidden="true"
@@ -252,10 +257,10 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
             wrap="nowrap"
           >
             <div
-              class="c0 c7 c8"
+              class="c0 c7 c8 c9"
             >
               <span
-                class="c4 c9"
+                class="c4 c10"
               >
                 1
               </span>
@@ -265,10 +270,10 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
         </span>
         <div
           aria-hidden="true"
-          class="c0 c10"
+          class="c0 c11"
         >
           <span
-            class="c11"
+            class="c12"
           >
             <svg
               aria-hidden="true"
@@ -291,7 +296,7 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
     </div>
   </div>
   <div
-    class="c12"
+    class="c13"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/index.test.js b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/index.test.js
index e40ef64446..2610f8fb0c 100644
--- a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/index.test.js
@@ -929,6 +929,7 @@ describe('Wysiwyg render and actions buttons', () => {
                             aria-hidden="true"
                             class="c0 c16 c17 c18"
                             tabindex="-1"
+                            title="Carret Down Button"
                             type="button"
                           >
                             <svg
diff --git a/packages/core/admin/admin/src/content-manager/pages/App/tests/index.test.js b/packages/core/admin/admin/src/content-manager/pages/App/tests/index.test.js
index f4e386b2d2..8506482c7c 100644
--- a/packages/core/admin/admin/src/content-manager/pages/App/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/pages/App/tests/index.test.js
@@ -130,7 +130,7 @@ describe('Content manager | App | main', () => {
         width: 1px;
       }
 
-      .c35 {
+      .c36 {
         -webkit-animation: gzYjWD 1s infinite linear;
         animation: gzYjWD 1s infinite linear;
         will-change: transform;
@@ -174,8 +174,8 @@ describe('Content manager | App | main', () => {
 
       .c24 {
         background: #eaeaef;
-        padding: 4px;
-        border-radius: 4px;
+        padding-right: 8px;
+        padding-left: 8px;
         position: absolute;
         right: 0px;
         top: 50%;
@@ -185,18 +185,18 @@ describe('Content manager | App | main', () => {
         transform: translateY(-50%);
       }
 
-      .c26 {
+      .c27 {
         background: #f6f6f9;
         padding-top: 8px;
         padding-bottom: 8px;
         padding-left: 32px;
       }
 
-      .c29 {
+      .c30 {
         padding-left: 8px;
       }
 
-      .c31 {
+      .c32 {
         padding-bottom: 56px;
       }
 
@@ -264,7 +264,7 @@ describe('Content manager | App | main', () => {
         justify-content: center;
       }
 
-      .c33 {
+      .c34 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -297,7 +297,7 @@ describe('Content manager | App | main', () => {
         color: #666687;
       }
 
-      .c30 {
+      .c31 {
         font-size: 0.875rem;
         line-height: 1.43;
         color: #32324d;
@@ -425,7 +425,7 @@ describe('Content manager | App | main', () => {
         fill: #666687;
       }
 
-      .c34 {
+      .c35 {
         height: 100vh;
       }
 
@@ -434,10 +434,15 @@ describe('Content manager | App | main', () => {
         grid-template-columns: auto 1fr;
       }
 
-      .c32 {
+      .c33 {
         overflow-x: hidden;
       }
 
+      .c26 {
+        border-radius: 4px;
+        height: 1.5rem;
+      }
+
       .c1 {
         width: 14.5rem;
         background: #f6f6f9;
@@ -455,7 +460,7 @@ describe('Content manager | App | main', () => {
         background-color: #dcdce4;
       }
 
-      .c27 {
+      .c28 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -473,34 +478,34 @@ describe('Content manager | App | main', () => {
         color: #32324d;
       }
 
-      .c27 svg > * {
+      .c28 svg > * {
         fill: #666687;
       }
 
-      .c27.active {
+      .c28.active {
         background-color: #f0f0ff;
         border-right: 2px solid #4945ff;
       }
 
-      .c27.active svg > * {
+      .c28.active svg > * {
         fill: #271fe0;
       }
 
-      .c27.active .c4 {
+      .c28.active .c4 {
         color: #271fe0;
         font-weight: 500;
       }
 
-      .c27:focus-visible {
+      .c28:focus-visible {
         outline-offset: -2px;
       }
 
-      .c28 {
+      .c29 {
         width: 0.75rem;
         height: 0.25rem;
       }
 
-      .c28 * {
+      .c29 * {
         fill: #666687;
       }
 
@@ -608,7 +613,7 @@ describe('Content manager | App | main', () => {
                         </div>
                       </div>
                       <div
-                        class="c24 c25"
+                        class="c24 c25 c26"
                         transform="translateY(-50%)"
                       >
                         <span
@@ -625,14 +630,14 @@ describe('Content manager | App | main', () => {
                     <li>
                       <a
                         aria-current="page"
-                        class="c26 c27 active"
+                        class="c27 c28 active"
                         href="/content-manager/collectionType/category"
                       >
                         <div
                           class="c20"
                         >
                           <svg
-                            class="c28"
+                            class="c29"
                             fill="none"
                             height="1em"
                             viewBox="0 0 4 4"
@@ -647,10 +652,10 @@ describe('Content manager | App | main', () => {
                             />
                           </svg>
                           <div
-                            class="c29"
+                            class="c30"
                           >
                             <span
-                              class="c4 c30"
+                              class="c4 c31"
                             >
                               Categories
                             </span>
@@ -686,7 +691,7 @@ describe('Content manager | App | main', () => {
                         </div>
                       </div>
                       <div
-                        class="c24 c25"
+                        class="c24 c25 c26"
                         transform="translateY(-50%)"
                       >
                         <span
@@ -702,14 +707,14 @@ describe('Content manager | App | main', () => {
                   >
                     <li>
                       <a
-                        class="c26 c27"
+                        class="c27 c28"
                         href="/homepage"
                       >
                         <div
                           class="c20"
                         >
                           <svg
-                            class="c28"
+                            class="c29"
                             fill="none"
                             height="1em"
                             viewBox="0 0 4 4"
@@ -724,10 +729,10 @@ describe('Content manager | App | main', () => {
                             />
                           </svg>
                           <div
-                            class="c29"
+                            class="c30"
                           >
                             <span
-                              class="c4 c30"
+                              class="c4 c31"
                             >
                               Home page
                             </span>
@@ -742,10 +747,10 @@ describe('Content manager | App | main', () => {
           </div>
         </nav>
         <div
-          class="c31 c32"
+          class="c32 c33"
         >
           <div
-            class="c33 c34"
+            class="c34 c35"
             data-testid="loader"
           >
             <div
@@ -759,7 +764,7 @@ describe('Content manager | App | main', () => {
               </div>
               <img
                 aria-hidden="true"
-                class="c35"
+                class="c36"
                 src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNjMiIHZpZXdCb3g9IjAgMCA2MyA2MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQyLjU1NjMgMTEuOTgxNkMzOS40ODQgMTAuMzA3MSAzNS44NTc1IDkuMjkwOTcgMzIuMzM1NCA5LjEzNTIxQzI4LjY0NDMgOC45Mjg4OCAyNC44Mjk1IDkuNzIzMTggMjEuMzMzNiAxMS40MTI5QzIwLjkxMjMgMTEuNTkwMSAyMC41Mzc2IDExLjgxMDEgMjAuMTcyMiAxMi4wMjQ5TDIwLjAxMDggMTIuMTE3OUMxOS44Nzc0IDEyLjE5NTEgMTkuNzQ0MSAxMi4yNzI0IDE5LjYwOCAxMi4zNTM2QzE5LjMyNTMgMTIuNTE0NiAxOS4wNDkyIDEyLjY3NDQgMTguNzU0NCAxMi44NzkyQzE4LjU0NjMgMTMuMDMyOSAxOC4zMzk1IDEzLjE3NTkgMTguMTMwMSAxMy4zMjNDMTcuNTY1OCAxMy43MjA4IDE2Ljk4NjggMTQuMTMxNyAxNi40OTgzIDE0LjU5NzlDMTQuODQ3NiAxNS45NTI0IDEzLjU1NzEgMTcuNjA3NSAxMi42MDcxIDE4LjkyMTRDMTAuNDM2NSAyMi4xNTY2IDkuMDg2MjIgMjUuOTU2NyA4LjgwNzAyIDI5LjYxNDNMOC43NzY0IDMwLjE1ODhDOC43MzMyOCAzMC45MTk2IDguNjg0NzYgMzEuNzA1NyA4Ljc1MzUzIDMyLjQ1NTVDOC43NjY0OCAzMi42MDg0IDguNzY2MSAzMi43NjM4IDguNzc1MDYgMzIuOTE0QzguNzg4OTUgMzMuMjI5IDguODAxNTIgMzMuNTM3MyA4Ljg0NiAzMy44NjcyTDkuMDczOTYgMzUuNDIyMUM5LjA5NzU2IDM1LjU3NjQgOS4xMTk4IDM1Ljc0MTMgOS4xNjMzIDM1LjkyNjNMOS42NTkxOSAzNy45MjcyTDEwLjEzOCAzOS4yODIzQzEwLjI3MjkgMzkuNjY3MyAxMC40MTU4IDQwLjA3NTEgMTAuNiA0MC40M0MxMi4wMjkyIDQzLjYzNyAxNC4xNDI1IDQ2LjQ1NzggMTYuNzA2MyA0OC41ODVDMTkuMDUwOCA1MC41Mjk2IDIxLjgyNCA1Mi4wMDIzIDI0Ljc0OTEgNTIuODQ1MkwyNi4yMzcxIDUzLjIzNzZDMjYuMzc4MSA1My4yNjkzIDI2LjQ5MjYgNTMuMjg4OSAyNi42MDMxIDUzLjMwNThMMjYuNzc3NSA1My4zMzExQzI3LjAwNTIgNTMuMzYzNiAyNy4yMTk1IDUzLjM5ODYgMjcuNDQ0NSA1My40MzVDMjcuODU5OCA1My41MDc2IDI4LjI2NzIgNTMuNTc0OCAyOC43MDc5IDUzLjYxODNMMzAuNTY0MSA1My43MjI5QzMwLjk1MTYgNTMuNzI0OSAzMS4zMzUyIDUzLjcwNjggMzEuNzA4MSA1My42ODc0QzMxLjkwMzkgNTMuNjgxIDMyLjA5ODQgNTMuNjY4MSAzMi4zMjg4IDUzLjY2MkMzNC41MjUzIDUzLjQ3NzIgMzYuNTEwNiA1My4wNjM0IDM4LjA1MTYgNTIuNDY1MkMzOC4xNzY5IDUyLjQxNzEgMzguMzAwOCA1Mi4zNzk2IDM4LjQyMzQgNTIuMzM1NUMzOC42NzI3IDUyLjI0OTkgMzguOTI1OSA1Mi4xNjcgMzkuMTQzMiA1Mi4wNTk5TDQwLjg1OTEgNTEuMjYyNkw0Mi41NzAyIDUwLjI2NkM0Mi45MDA5IDUwLjA2ODIgNDMuMDIwNSA0OS42NDE0IDQyLjgyODIgNDkuMjk4NEM0Mi42MzIgNDguOTUyNiA0Mi4yMDM0IDQ4LjgzMDggNDEuODYzNCA0OS4wMTY2TDQwLjE3OTIgNDkuOTIxOEwzOC40OTk1IDUwLjYyMjRDMzguMzE2OSA1MC42OTUzIDM4LjEyMSA1MC43NTM0IDM3LjkyMjQgNTAuODE1NUMzNy43ODM4IDUwLjg0ODkgMzcuNjUxOCA1MC44OTgzIDM3LjUwMTIgNTAuOTQwOEMzNi4wNzExIDUxLjQzNSAzNC4yNDQ1IDUxLjc0MjUgMzIuMjQ0IDUxLjgzNDZDMzIuMDQ0MiA1MS44MzgzIDMxLjg0NzEgNTEuODM3OSAzMS42NTQgNTEuODQwM0MzMS4zMDUxIDUxLjg0MTQgMzAuOTYwMiA1MS44NDUxIDMwLjYzOTIgNTEuODMwNUwyOC45MTc3IDUxLjY3MjVDMjguNTQ3NiA1MS42MTkgMjguMTY5NSA1MS41NDI3IDI3Ljc4NDggNTEuNDY3OEMyNy41NjM5IDUxLjQxNjcgMjcuMzM3NiA1MS4zNzM3IDI3LjEyOTkgNTEuMzM3NEwyNi45NTI5IDUxLjI5ODdDMjYuODcwNCA1MS4yODM0IDI2Ljc3NzIgNTEuMjY2NyAyNi43MzMzIDUxLjI1NDNMMjUuMzQ2NiA1MC44MzIyQzIyLjc2NTEgNDkuOTc4OSAyMC4zMyA0OC41NzI5IDE4LjI5NDIgNDYuNzU1N0MxNi4xMDU2IDQ0Ljc5NTEgMTQuMzMzOSA0Mi4yMzM1IDEzLjE3NDIgMzkuMzU4MkMxMi4wMjc2IDM2LjYwMTMgMTEuNTk4OCAzMy4yNzkyIDExLjk3MTYgMzAuMDA3NkMxMi4zMTQ1IDI3LjAyMTMgMTMuMzk0OCAyNC4xNjM1IDE1LjE4NTggMjEuNTA4M0MxNS4zMDM0IDIxLjMzMzkgMTUuNDIxIDIxLjE1OTYgMTUuNTIxMiAyMS4wMTk2QzE2LjQzMDkgMTkuODY4OCAxNy41NDA4IDE4LjU1ODkgMTguOTQ4MyAxNy40OTZDMTkuMzM2NyAxNy4xNTI1IDE5Ljc4NjIgMTYuODU2IDIwLjI2MTEgMTYuNTQ3OEMyMC40ODc4IDE2LjQwMDkgMjAuNzA3OSAxNi4yNTUzIDIwLjg5MDcgMTYuMTMwNkMyMS4wOTc0IDE2LjAwNDggMjEuMzE4OCAxNS44ODMxIDIxLjUzNDggMTUuNzY5NEMyMS42NzYxIDE1LjY5NzUgMjEuODE2MiAxNS42MTkgMjEuOTM4OCAxNS41NTc2TDIyLjEwMDIgMTUuNDY0NkMyMi40MDAyIDE1LjMwMzcgMjIuNjc0OSAxNS4xNTQ2IDIyLjk5MDggMTUuMDM5TDI0LjExODYgMTQuNTcxNUMyNC4zMzk5IDE0LjQ4NDQgMjQuNTcxOCAxNC40MTU5IDI0Ljc5OTcgMTQuMzQ0N0MyNC45NTMgMTQuMjk4MiAyNS4wOTgyIDE0LjI2MzUgMjUuMjYzNSAxNC4yMDc4QzI1Ljc4NiAxNC4wMTgyIDI2LjMyODMgMTMuOTExMiAyNi45MTA1IDEzLjc5NjVDMjcuMTE3IDEzLjc1NzEgMjcuMzMwMiAxMy43MTYzIDI3LjU2MDggMTMuNjU4NUMyNy43NTUzIDEzLjYxMSAyNy45NzM3IDEzLjU5NjkgMjguMjA4MiAxMy41NzYyQzI4LjM2NCAxMy41NjAzIDI4LjUxNzIgMTMuNTQ4MyAyOC42MzE4IDEzLjUzMzNDMjguNzg3NiAxMy41MTczIDI4LjkzNDIgMTMuNTA2NiAyOS4wOTI3IDEzLjQ4NjdDMjkuMzI4NSAxMy40NTU1IDI5LjU0NTYgMTMuNDM0NyAyOS43NDk0IDEzLjQzMzdDMzAuMDIzNyAxMy40NCAzMC4yOTk0IDEzLjQzNTcgMzAuNTc3NyAxMy40Mjc0QzMxLjA4MTEgMTMuNDIxIDMxLjU1NzkgMTMuNDE5NyAzMi4wMzE4IDEzLjQ5MTRDMzQuOTY2NCAxMy43MzUyIDM3LjcxNDQgMTQuNjA4NSA0MC4yMDUyIDE2LjA4NjhDNDIuMzQ4OSAxNy4zNjU1IDQ0LjI3MTYgMTkuMTUyNSA0NS43NjA3IDIxLjI2NEM0Ny4wMjU1IDIzLjA2MjggNDcuOTc1NiAyNS4wNTI4IDQ4LjQ5MjggMjcuMDM5M0M0OC41NzIgMjcuMzE3NiA0OC42Mjk5IDI3LjU5MzEgNDguNjgzOSAyNy44NjU5QzQ4LjcxNTQgMjguMDQyOCA0OC43NTYzIDI4LjIxNDUgNDguNzg5MiAyOC4zNjM2QzQ4LjgwMzcgMjguNDU0MSA0OC44MjA4IDI4LjU0MDYgNDguODQ0NSAyOC42MjU4QzQ4Ljg3NDkgMjguNzQ0MyA0OC44OTg2IDI4Ljg2NCA0OC45MTE2IDI4Ljk2NTFMNDguOTc5MyAyOS42MDQ3QzQ4Ljk5MjIgMjkuNzc0OCA0OS4wMTMyIDI5LjkzMzEgNDkuMDMwMSAzMC4wODg3QzQ5LjA2NjggMzAuMzI2OCA0OS4wODg5IDMwLjU2MDggNDkuMDk2NCAzMC43NTYxTDQ5LjEwODMgMzEuOTAwMUM0OS4xMzEyIDMyLjMzMDcgNDkuMDg5IDMyLjcxMTYgNDkuMDUyMiAzMy4wNjczQzQ5LjAzODQgMzMuMjU5OCA0OS4wMTI2IDMzLjQ0NDMgNDkuMDEyMyAzMy41ODI0QzQ4Ljk5NjEgMzMuNjkyNiA0OC45OTE4IDMzLjc5MzUgNDguOTgzNiAzMy44OTE3QzQ4Ljk3NTMgMzQuMDA3MiA0OC45NzI0IDM0LjExNDggNDguOTQxNCAzNC4yNTU0TDQ4LjU0NDkgMzYuMzA1OUM0OC4zMTM0IDM3Ljg2MjMgNDkuMzc5MyAzOS4zMzY1IDUwLjk0ODggMzkuNTgyMkM1Mi4wNDE3IDM5Ljc2MDEgNTMuMTUzNiAzOS4yODE5IDUzLjc3MTEgMzguMzY2NEM1NC4wMDYzIDM4LjAxNzYgNTQuMTYwNCAzNy42MjU3IDU0LjIyMjcgMzcuMjA2NEw1NC41MjE3IDM1LjI1NzRDNTQuNTUxNCAzNS4wNzU2IDU0LjU3MiAzNC44MyA1NC41ODQ2IDM0LjU3OTFMNTQuNjAyOCAzNC4yMzM4QzU0LjYwOTggMzQuMDU5OCA1NC42MjIzIDMzLjg3NzkgNTQuNjM0NyAzMy42Nzg4QzU0LjY3MzQgMzMuMTA1MiA1NC43MTYzIDMyLjQ0NzkgNTQuNjYxOSAzMS44MDU4TDU0LjU4NjcgMzAuNDI4OUM1NC41NjIyIDMwLjA5NTIgNTQuNTA5NyAyOS43NiA1NC40NTU5IDI5LjQxODFDNTQuNDMxIDI5LjI1NzIgNTQuNDA0OCAyOS4wODk2IDU0LjM4MjYgMjguOTA3NEw1NC4yNjg3IDI4LjEwNEM1NC4yMzMyIDI3LjkyNDQgNTQuMTgwNCAyNy43MjczIDU0LjEzMjkgMjcuNTM5Nkw1NC4wNjQzIDI3LjI0NTRDNTQuMDE5NSAyNy4wNzEgNTMuOTc3MyAyNi44OTI3IDUzLjkzMzggMjYuNzA3NkM1My44NDU1IDI2LjMzMDkgNTMuNzQ3OSAyNS45NDIyIDUzLjYxMyAyNS41NTcxQzUyLjg0IDIzLjAyOTIgNTEuNTM4MyAyMC41MTk0IDQ5LjgzMzggMTguMjc5OUM0Ny44NTQ0IDE1LjY4MiA0NS4zMzMzIDEzLjUwODcgNDIuNTU2MyAxMS45ODE2WiIgZmlsbD0iIzQ5NDVGRiIvPgo8L3N2Zz4K"
               />
             </div>
diff --git a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap
index 4bc3655073..45b5d27d19 100644
--- a/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/content-manager/pages/EditSettingsView/tests/__snapshots__/index.test.js.snap
@@ -998,6 +998,7 @@ exports[`EditSettingsView renders and matches the snapshot 1`] = `
                               aria-hidden="true"
                               class="c1 c31 c32 c33"
                               tabindex="-1"
+                              title="Carret Down Button"
                               type="button"
                             >
                               <svg
@@ -2462,6 +2463,7 @@ exports[`EditSettingsView should add field 1`] = `
                               aria-hidden="true"
                               class="c1 c31 c32 c33"
                               tabindex="-1"
+                              title="Carret Down Button"
                               type="button"
                             >
                               <svg
diff --git a/packages/core/admin/admin/src/content-manager/pages/EditView/DraftAndPublishBadge/tests/index.test.js b/packages/core/admin/admin/src/content-manager/pages/EditView/DraftAndPublishBadge/tests/index.test.js
index 4b30262685..07c90e3d77 100644
--- a/packages/core/admin/admin/src/content-manager/pages/EditView/DraftAndPublishBadge/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/pages/EditView/DraftAndPublishBadge/tests/index.test.js
@@ -84,7 +84,7 @@ describe('<DraftAndPublishBadge />', () => {
         class="c0"
       >
         <div
-          class="c1 sc-eBTqsU gpeUmA"
+          class="c1 sc-dcgwPl cizjuL"
         >
           <svg
             class="c2"
@@ -184,7 +184,7 @@ describe('<DraftAndPublishBadge />', () => {
         class="c0"
       >
         <div
-          class="c1 sc-eBTqsU gpeUmA"
+          class="c1 sc-dcgwPl cizjuL"
         >
           <svg
             class="c2"
diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap
index 4cce2a19f0..3521ad1b30 100644
--- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap
@@ -1223,6 +1223,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                                   aria-hidden="true"
                                   class="c0 c49 c50 c51"
                                   tabindex="-1"
+                                  title="Carret Down Button"
                                   type="button"
                                 >
                                   <svg
@@ -1312,6 +1313,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                                   aria-hidden="true"
                                   class="c0 c49 c50 c51"
                                   tabindex="-1"
+                                  title="Carret Down Button"
                                   type="button"
                                 >
                                   <svg
@@ -1395,6 +1397,7 @@ exports[`ADMIN | CM | LV | Configure the view renders and matches the snapshot 1
                                   aria-hidden="true"
                                   class="c0 c49 c50 c51"
                                   tabindex="-1"
+                                  title="Carret Down Button"
                                   type="button"
                                 >
                                   <svg
@@ -2951,6 +2954,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                                   aria-hidden="true"
                                   class="c0 c49 c50 c51"
                                   tabindex="-1"
+                                  title="Carret Down Button"
                                   type="button"
                                 >
                                   <svg
@@ -3040,6 +3044,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                                   aria-hidden="true"
                                   class="c0 c49 c50 c51"
                                   tabindex="-1"
+                                  title="Carret Down Button"
                                   type="button"
                                 >
                                   <svg
@@ -3123,6 +3128,7 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
                                   aria-hidden="true"
                                   class="c0 c49 c50 c51"
                                   tabindex="-1"
+                                  title="Carret Down Button"
                                   type="button"
                                 >
                                   <svg
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap
index f27c29e8e7..04ee82ccbc 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap
@@ -1170,6 +1170,7 @@ exports[`Marketplace page - layout renders the online layout 1`] = `
                           aria-hidden="true"
                           class="c0 c42 c43 c44"
                           tabindex="-1"
+                          title="Carret Down Button"
                           type="button"
                         >
                           <svg
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/plugins.test.js.snap b/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/plugins.test.js.snap
index 623fae9fbc..0c7413a44b 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/plugins.test.js.snap
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/plugins.test.js.snap
@@ -1170,6 +1170,7 @@ exports[`Marketplace page - plugins tab renders and matches the plugin tab snaps
                           aria-hidden="true"
                           class="c0 c42 c43 c44"
                           tabindex="-1"
+                          title="Carret Down Button"
                           type="button"
                         >
                           <svg
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/providers.test.js.snap b/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/providers.test.js.snap
index 13a0e9b0e0..ae56f89d32 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/providers.test.js.snap
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/providers.test.js.snap
@@ -1165,6 +1165,7 @@ exports[`Marketplace page - providers tab renders and matches the providers tab
                           aria-hidden="true"
                           class="c0 c42 c43 c44"
                           tabindex="-1"
+                          title="Carret Down Button"
                           type="button"
                         >
                           <svg
diff --git a/packages/core/admin/admin/src/pages/ProfilePage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/ProfilePage/tests/__snapshots__/index.test.js.snap
index b88a6eda8a..1d0e5ba62c 100644
--- a/packages/core/admin/admin/src/pages/ProfilePage/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/ProfilePage/tests/__snapshots__/index.test.js.snap
@@ -1118,6 +1118,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                                 aria-disabled="false"
                                 aria-label="Clear the interface language selected"
                                 class="c1 c39"
+                                title="Clear the interface language selected"
                                 type="button"
                               >
                                 <svg
@@ -1137,6 +1138,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                                 aria-hidden="true"
                                 class="c1 c40 c39 c41"
                                 tabindex="-1"
+                                title="Carret Down Button"
                                 type="button"
                               >
                                 <svg
@@ -1226,6 +1228,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                                 aria-hidden="true"
                                 class="c1 c40 c39 c41"
                                 tabindex="-1"
+                                title="Carret Down Button"
                                 type="button"
                               >
                                 <svg
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/components/SettingsNav/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/components/SettingsNav/tests/index.test.js
index 4ea969811c..840bbbfc6c 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/components/SettingsNav/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/components/SettingsNav/tests/index.test.js
@@ -417,7 +417,7 @@ describe('SettingsPage || components || SettingsNav', () => {
                         </div>
                       </div>
                       <div
-                        class="c16 sc-eBTqsU c25"
+                        class="c16 sc-dcgwPl c25"
                       >
                         <svg
                           class="c26"
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap
index bf03be96ce..97617e65dc 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap
@@ -854,7 +854,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 1px solid #4945ff;
 }
 
-.c52:hover:not([aria-disabled='true']) .sc-gwNDlS {
+.c52:hover:not([aria-disabled='true']) .sc-bhnkmi {
   color: #271fe0;
 }
 
@@ -878,7 +878,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 1px solid #4945ff;
 }
 
-.c66:hover:not([aria-disabled='true']) .sc-gwNDlS {
+.c66:hover:not([aria-disabled='true']) .sc-bhnkmi {
   color: #271fe0;
 }
 
@@ -1229,6 +1229,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                                 aria-hidden="true"
                                 class="c1 c40 c41 c42"
                                 tabindex="-1"
+                                title="Carret Down Button"
                                 type="button"
                               >
                                 <svg
@@ -1321,6 +1322,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                                 aria-hidden="true"
                                 class="c1 c40 c41 c42"
                                 tabindex="-1"
+                                title="Carret Down Button"
                                 type="button"
                               >
                                 <svg
@@ -1401,7 +1403,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                             class="c7 c60"
                           >
                             <span
-                              class="c7 sc-gwNDlS c61"
+                              class="c7 sc-bhnkmi c61"
                               id="accordion-label-accordion-13"
                             >
                               Address
@@ -1466,7 +1468,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                             class="c7 c60"
                           >
                             <span
-                              class="c7 sc-gwNDlS c61"
+                              class="c7 sc-bhnkmi c61"
                               id="accordion-label-accordion-14"
                             >
                               Category
@@ -2593,7 +2595,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 1px solid #4945ff;
 }
 
-.c61:hover:not([aria-disabled='true']) .sc-gwNDlS {
+.c61:hover:not([aria-disabled='true']) .sc-bhnkmi {
   color: #271fe0;
 }
 
@@ -2617,7 +2619,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   border: 1px solid #4945ff;
 }
 
-.c75:hover:not([aria-disabled='true']) .sc-gwNDlS {
+.c75:hover:not([aria-disabled='true']) .sc-bhnkmi {
   color: #271fe0;
 }
 
@@ -3042,6 +3044,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                                 class="c1 c47 c48 c49"
                                 disabled=""
                                 tabindex="-1"
+                                title="Carret Down Button"
                                 type="button"
                               >
                                 <svg
@@ -3136,6 +3139,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                                 aria-hidden="true"
                                 class="c1 c47 c48 c53"
                                 tabindex="-1"
+                                title="Carret Down Button"
                                 type="button"
                               >
                                 <svg
@@ -3216,7 +3220,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                             class="c7 c69"
                           >
                             <span
-                              class="c7 sc-gwNDlS c70"
+                              class="c7 sc-bhnkmi c70"
                               id="accordion-label-accordion-42"
                             >
                               Address
@@ -3281,7 +3285,7 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
                             class="c7 c69"
                           >
                             <span
-                              class="c7 sc-gwNDlS c70"
+                              class="c7 sc-bhnkmi c70"
                               id="accordion-label-accordion-43"
                             >
                               Category
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js
index ee269bce86..62e0abcd31 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js
@@ -682,6 +682,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                   aria-colcount="5"
                   aria-rowcount="2"
                   class="c18"
+                  role="grid"
                 >
                   <thead
                     class="c19"
@@ -693,6 +694,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                       <th
                         aria-colindex="1"
                         class="c1 c21"
+                        role="gridcell"
                         tabindex="0"
                       >
                         <div
@@ -749,6 +751,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                       <th
                         aria-colindex="2"
                         class="c1 c21"
+                        role="gridcell"
                       >
                         <div
                           class="c1 c4"
@@ -771,6 +774,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                       <th
                         aria-colindex="3"
                         class="c1 c21"
+                        role="gridcell"
                       >
                         <div
                           class="c1 c4"
@@ -793,6 +797,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                       <th
                         aria-colindex="4"
                         class="c1 c21"
+                        role="gridcell"
                       >
                         <div
                           class="c1 c4"
@@ -815,6 +820,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                       <th
                         aria-colindex="5"
                         class="c1 c21"
+                        role="gridcell"
                         tabindex="-1"
                       >
                         <div
@@ -843,6 +849,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                       <td
                         aria-colindex="1"
                         class="c1 c21"
+                        role="gridcell"
                         tabindex="-1"
                       >
                         <span
@@ -854,6 +861,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                       <td
                         aria-colindex="2"
                         class="c1 c29 c21"
+                        role="gridcell"
                         tabindex="-1"
                       >
                         <span
@@ -865,6 +873,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                       <td
                         aria-colindex="3"
                         class="c1 c21"
+                        role="gridcell"
                         tabindex="-1"
                       >
                         <span
@@ -881,11 +890,13 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                       <td
                         aria-colindex="4"
                         class="c1 c21"
+                        role="gridcell"
                         tabindex="-1"
                       />
                       <td
                         aria-colindex="5"
                         class="c1 c21"
+                        role="gridcell"
                         tabindex="-1"
                       >
                         <div
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 2341cf2c8a..71396175a9 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
@@ -521,6 +521,7 @@ describe('<ListPage />', () => {
                   aria-colcount="5"
                   aria-rowcount="1"
                   class="c19"
+                  role="grid"
                 >
                   <thead
                     class="c20"
@@ -532,6 +533,7 @@ describe('<ListPage />', () => {
                       <th
                         aria-colindex="1"
                         class="c1 c22"
+                        role="gridcell"
                         tabindex="0"
                       >
                         <div
@@ -550,6 +552,7 @@ describe('<ListPage />', () => {
                       <th
                         aria-colindex="2"
                         class="c1 c22"
+                        role="gridcell"
                         tabindex="-1"
                       >
                         <div
@@ -568,6 +571,7 @@ describe('<ListPage />', () => {
                       <th
                         aria-colindex="3"
                         class="c1 c22"
+                        role="gridcell"
                         tabindex="-1"
                       >
                         <div
@@ -586,6 +590,7 @@ describe('<ListPage />', () => {
                       <th
                         aria-colindex="4"
                         class="c1 c22"
+                        role="gridcell"
                         tabindex="-1"
                       >
                         <div
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/__snapshots__/index.test.js.snap
index 9b2e402430..9ed0e64109 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/__snapshots__/index.test.js.snap
@@ -391,6 +391,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
                     aria-hidden="true"
                     class="c11 c12 c13"
                     tabindex="-1"
+                    title="Carret Down Button"
                     type="button"
                   >
                     <svg
@@ -426,7 +427,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
       </div>
       <nav
         aria-label="pagination"
-        class="sc-eoHXOn"
+        class="sc-gLDmcm"
       >
         <ul
           class="c2 c16"
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 e22c57486f..96476f7013 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
@@ -1090,6 +1090,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                   aria-colcount="8"
                   aria-rowcount="1"
                   class="c29"
+                  role="grid"
                 >
                   <thead
                     class="c30"
@@ -1101,6 +1102,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                       <th
                         aria-colindex="1"
                         class="c1 c32"
+                        role="gridcell"
                       >
                         <div
                           class="c1 c4"
@@ -1123,6 +1125,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                       <th
                         aria-colindex="2"
                         class="c1 c32"
+                        role="gridcell"
                         tabindex="-1"
                       >
                         <div
@@ -1179,6 +1182,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                       <th
                         aria-colindex="3"
                         class="c1 c32"
+                        role="gridcell"
                       >
                         <div
                           class="c1 c4"
@@ -1201,6 +1205,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                       <th
                         aria-colindex="4"
                         class="c1 c32"
+                        role="gridcell"
                       >
                         <div
                           class="c1 c4"
@@ -1223,6 +1228,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                       <th
                         aria-colindex="5"
                         class="c1 c32"
+                        role="gridcell"
                       >
                         <div
                           class="c1 c4"
@@ -1245,6 +1251,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                       <th
                         aria-colindex="6"
                         class="c1 c32"
+                        role="gridcell"
                       >
                         <div
                           class="c1 c4"
@@ -1267,6 +1274,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                       <th
                         aria-colindex="7"
                         class="c1 c32"
+                        role="gridcell"
                       >
                         <div
                           class="c1 c4"
@@ -1289,6 +1297,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                       <th
                         aria-colindex="8"
                         class="c1 c32"
+                        role="gridcell"
                         tabindex="-1"
                       >
                         <div
@@ -1317,6 +1326,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                         aria-colindex="1"
                         class="c1 c32"
                         colspan="8"
+                        role="gridcell"
                         tabindex="-1"
                       >
                         <div
@@ -1399,6 +1409,7 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
                             aria-hidden="true"
                             class="c1 c51 c52 c53"
                             tabindex="-1"
+                            title="Carret Down Button"
                             type="button"
                           >
                             <svg
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 6588dc60df..a7346bc57f 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
@@ -728,6 +728,7 @@ describe('Admin | containers | ListView', () => {
                       aria-colcount="5"
                       aria-rowcount="3"
                       class="c21"
+                      role="grid"
                     >
                       <thead
                         class="c22"
@@ -739,6 +740,7 @@ describe('Admin | containers | ListView', () => {
                           <th
                             aria-colindex="1"
                             class="c0 c24"
+                            role="gridcell"
                           >
                             <div
                               class="c0 c7"
@@ -761,6 +763,7 @@ describe('Admin | containers | ListView', () => {
                           <th
                             aria-colindex="2"
                             class="c0 c27 c24"
+                            role="gridcell"
                             tabindex="-1"
                             width="20%"
                           >
@@ -780,6 +783,7 @@ describe('Admin | containers | ListView', () => {
                           <th
                             aria-colindex="3"
                             class="c0 c29 c24"
+                            role="gridcell"
                             tabindex="-1"
                             width="60%"
                           >
@@ -799,6 +803,7 @@ describe('Admin | containers | ListView', () => {
                           <th
                             aria-colindex="4"
                             class="c0 c27 c24"
+                            role="gridcell"
                             tabindex="-1"
                             width="20%"
                           >
@@ -818,6 +823,7 @@ describe('Admin | containers | ListView', () => {
                           <th
                             aria-colindex="5"
                             class="c0 c24"
+                            role="gridcell"
                             tabindex="-1"
                           >
                             <div
@@ -865,6 +871,7 @@ describe('Admin | containers | ListView', () => {
                           <td
                             aria-colindex="2"
                             class="c0 c24"
+                            role="gridcell"
                             tabindex="-1"
                           >
                             <span
@@ -876,6 +883,7 @@ describe('Admin | containers | ListView', () => {
                           <td
                             aria-colindex="3"
                             class="c0 c24"
+                            role="gridcell"
                             tabindex="-1"
                           >
                             <span
@@ -887,6 +895,7 @@ describe('Admin | containers | ListView', () => {
                           <td
                             aria-colindex="4"
                             class="c0 c24"
+                            role="gridcell"
                           >
                             <div
                               aria-hidden="true"
@@ -927,6 +936,7 @@ describe('Admin | containers | ListView', () => {
                           <td
                             aria-colindex="5"
                             class="c0 c24"
+                            role="gridcell"
                           >
                             <div
                               aria-hidden="true"
@@ -1025,6 +1035,7 @@ describe('Admin | containers | ListView', () => {
                           <td
                             aria-colindex="2"
                             class="c0 c24"
+                            role="gridcell"
                             tabindex="-1"
                           >
                             <span
@@ -1036,6 +1047,7 @@ describe('Admin | containers | ListView', () => {
                           <td
                             aria-colindex="3"
                             class="c0 c24"
+                            role="gridcell"
                             tabindex="-1"
                           >
                             <span
@@ -1047,6 +1059,7 @@ describe('Admin | containers | ListView', () => {
                           <td
                             aria-colindex="4"
                             class="c0 c24"
+                            role="gridcell"
                           >
                             <div
                               aria-hidden="true"
@@ -1087,6 +1100,7 @@ describe('Admin | containers | ListView', () => {
                           <td
                             aria-colindex="5"
                             class="c0 c24"
+                            role="gridcell"
                           >
                             <div
                               aria-hidden="true"
diff --git a/packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js b/packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js
index 7fb40ea0b3..f84d0dc109 100644
--- a/packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js
@@ -781,6 +781,7 @@ describe('Admin | UseCasePage', () => {
                                 aria-hidden="true"
                                 class="c0 c30 c31 c32"
                                 tabindex="-1"
+                                title="Carret Down Button"
                                 type="button"
                               >
                                 <svg
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/__snapshots__/index.test.js.snap b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/__snapshots__/index.test.js.snap
index f0b89a81b1..b9ae291c14 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/SingleSignOn/tests/__snapshots__/index.test.js.snap
@@ -722,7 +722,7 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
                         class="c0 c7 c38"
                       >
                         <button
-                          aria-describedby="select-2-hint"
+                          aria-describedby="select-2-error"
                           aria-disabled="false"
                           aria-expanded="false"
                           aria-haspopup="listbox"
@@ -756,6 +756,7 @@ exports[`Admin | ee | SettingsPage | SSO renders and matches the snapshot 1`] =
                               aria-hidden="true"
                               class="c0 c43 c44 c45"
                               tabindex="-1"
+                              title="Carret Down Button"
                               type="button"
                             >
                               <svg
diff --git a/packages/core/admin/package.json b/packages/core/admin/package.json
index c7bd3cf721..6122d314bb 100644
--- a/packages/core/admin/package.json
+++ b/packages/core/admin/package.json
@@ -52,9 +52,9 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.7",
     "@strapi/babel-plugin-switch-ee-ce": "4.5.2",
-    "@strapi/design-system": "1.3.1",
+    "@strapi/design-system": "1.4.0",
     "@strapi/helper-plugin": "4.5.2",
-    "@strapi/icons": "1.3.1",
+    "@strapi/icons": "1.4.0",
     "@strapi/permissions": "4.5.2",
     "@strapi/typescript-utils": "4.5.2",
     "@strapi/utils": "4.5.2",
diff --git a/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/__snapshots__/index.test.js.snap b/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/__snapshots__/index.test.js.snap
index 5b4e0f9cdf..5e0691c424 100644
--- a/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/__snapshots__/index.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
-.c45 {
+.c46 {
   padding-bottom: 56px;
 }
 
@@ -10,7 +10,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   grid-template-columns: auto 1fr;
 }
 
-.c46 {
+.c47 {
   overflow-x: hidden;
 }
 
@@ -68,8 +68,8 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
 
 .c26 {
   background: #eaeaef;
-  padding: 4px;
-  border-radius: 4px;
+  padding-right: 8px;
+  padding-left: 8px;
   position: absolute;
   right: 0px;
   top: 50%;
@@ -79,37 +79,37 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   transform: translateY(-50%);
 }
 
-.c28 {
+.c29 {
   background: #f6f6f9;
   padding-top: 8px;
   padding-bottom: 8px;
   padding-left: 32px;
 }
 
-.c31 {
+.c32 {
   padding-left: 8px;
 }
 
-.c33 {
+.c34 {
   padding-left: 32px;
 }
 
-.c34 {
+.c35 {
   margin-top: 8px;
 }
 
-.c36 {
+.c37 {
   padding-right: 8px;
 }
 
-.c38 {
+.c39 {
   padding-top: 8px;
   padding-right: 16px;
   padding-bottom: 8px;
   padding-left: 32px;
 }
 
-.c44 {
+.c45 {
   background: #f6f6f9;
   padding-top: 8px;
   padding-bottom: 8px;
@@ -180,7 +180,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   justify-content: center;
 }
 
-.c40 {
+.c41 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -213,19 +213,19 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   color: #666687;
 }
 
-.c32 {
+.c33 {
   font-size: 0.875rem;
   line-height: 1.43;
   color: #32324d;
 }
 
-.c37 {
+.c38 {
   font-size: 0.75rem;
   line-height: 1.33;
   color: #4945ff;
 }
 
-.c43 {
+.c44 {
   font-size: 0.875rem;
   line-height: 1.43;
   font-weight: 500;
@@ -354,22 +354,22 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   fill: #666687;
 }
 
-.c35 {
+.c36 {
   background: transparent;
   border: none;
   position: relative;
   outline: none;
 }
 
-.c35[aria-disabled='true'] {
+.c36[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c35[aria-disabled='true'] svg path {
+.c36[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c35 svg {
+.c36 svg {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -377,11 +377,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   font-size: 0.625rem;
 }
 
-.c35 svg path {
+.c36 svg path {
   fill: #4945ff;
 }
 
-.c35:after {
+.c36:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -396,11 +396,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c35:focus-visible {
+.c36:focus-visible {
   outline: none;
 }
 
-.c35:focus-visible:after {
+.c36:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -428,7 +428,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   background-color: #dcdce4;
 }
 
-.c29 {
+.c30 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -446,46 +446,46 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   color: #32324d;
 }
 
-.c29 svg > * {
+.c30 svg > * {
   fill: #666687;
 }
 
-.c29.active {
+.c30.active {
   background-color: #f0f0ff;
   border-right: 2px solid #4945ff;
 }
 
-.c29.active svg > * {
+.c30.active svg > * {
   fill: #271fe0;
 }
 
-.c29.active .c4 {
+.c30.active .c4 {
   color: #271fe0;
   font-weight: 500;
 }
 
-.c29:focus-visible {
+.c30:focus-visible {
   outline-offset: -2px;
 }
 
-.c30 {
+.c31 {
   width: 0.75rem;
   height: 0.25rem;
 }
 
-.c30 * {
+.c31 * {
   fill: #666687;
 }
 
-.c39 svg {
+.c40 svg {
   height: 0.25rem;
 }
 
-.c39 svg path {
+.c40 svg path {
   fill: #4a4a6a;
 }
 
-.c41 {
+.c42 {
   border: none;
   padding: 0;
   background: transparent;
@@ -499,7 +499,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c42 {
+.c43 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -514,6 +514,11 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
   transform: rotateX(0deg);
 }
 
+.c28 {
+  border-radius: 4px;
+  height: 1.5rem;
+}
+
 .c22 {
   border: none;
   padding: 0;
@@ -654,7 +659,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     </div>
                   </button>
                   <div
-                    class="c26 c27"
+                    class="c26 c27 c28"
                     transform="translateY(-50%)"
                   >
                     <span
@@ -670,14 +675,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               >
                 <li>
                   <a
-                    class="c28 c29"
+                    class="c29 c30"
                     href="/plugins/content-type-builder/content-types/application::address.address"
                   >
                     <div
                       class="c21"
                     >
                       <svg
-                        class="c30"
+                        class="c31"
                         fill="none"
                         height="1em"
                         viewBox="0 0 4 4"
@@ -692,10 +697,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <div
-                        class="c31"
+                        class="c32"
                       >
                         <span
-                          class="c4 c32"
+                          class="c4 c33"
                         >
                           Address
                         </span>
@@ -705,14 +710,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                 </li>
                 <li>
                   <a
-                    class="c28 c29"
+                    class="c29 c30"
                     href="/plugins/content-type-builder/content-types/application::category.category"
                   >
                     <div
                       class="c21"
                     >
                       <svg
-                        class="c30"
+                        class="c31"
                         fill="none"
                         height="1em"
                         viewBox="0 0 4 4"
@@ -727,10 +732,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <div
-                        class="c31"
+                        class="c32"
                       >
                         <span
-                          class="c4 c32"
+                          class="c4 c33"
                         >
                           Category
                         </span>
@@ -741,16 +746,16 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               </ol>
             </div>
             <div
-              class="c33"
+              class="c34"
             >
               <button
                 aria-disabled="false"
-                class="c34 c21 c35"
+                class="c35 c21 c36"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="c36"
+                  class="c37"
                 >
                   <svg
                     fill="none"
@@ -766,7 +771,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                   </svg>
                 </span>
                 <span
-                  class="c4 c37"
+                  class="c4 c38"
                 >
                   Create new collection type
                 </span>
@@ -819,7 +824,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     </div>
                   </button>
                   <div
-                    class="c26 c27"
+                    class="c26 c27 c28"
                     transform="translateY(-50%)"
                   >
                     <span
@@ -835,14 +840,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               >
                 <li>
                   <a
-                    class="c28 c29"
+                    class="c29 c30"
                     href="/plugins/content-type-builder/content-types/application::homepage.homepage"
                   >
                     <div
                       class="c21"
                     >
                       <svg
-                        class="c30"
+                        class="c31"
                         fill="none"
                         height="1em"
                         viewBox="0 0 4 4"
@@ -857,10 +862,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                         />
                       </svg>
                       <div
-                        class="c31"
+                        class="c32"
                       >
                         <span
-                          class="c4 c32"
+                          class="c4 c33"
                         >
                           Homepage
                         </span>
@@ -871,16 +876,16 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               </ol>
             </div>
             <div
-              class="c33"
+              class="c34"
             >
               <button
                 aria-disabled="false"
-                class="c34 c21 c35"
+                class="c35 c21 c36"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="c36"
+                  class="c37"
                 >
                   <svg
                     fill="none"
@@ -896,7 +901,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                   </svg>
                 </span>
                 <span
-                  class="c4 c37"
+                  class="c4 c38"
                 >
                   Create new single type
                 </span>
@@ -949,7 +954,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     </div>
                   </button>
                   <div
-                    class="c26 c27"
+                    class="c26 c27 c28"
                     transform="translateY(-50%)"
                   >
                     <span
@@ -968,18 +973,18 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     class=""
                   >
                     <div
-                      class="c38 c39"
+                      class="c39 c40"
                     >
                       <div
-                        class="c40"
+                        class="c41"
                       >
                         <button
                           aria-controls="subnav-list-7"
                           aria-expanded="true"
-                          class="c41"
+                          class="c42"
                         >
                           <div
-                            class="c42"
+                            class="c43"
                           >
                             <svg
                               aria-hidden="true"
@@ -998,10 +1003,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c31"
+                            class="c32"
                           >
                             <span
-                              class="c4 c43"
+                              class="c4 c44"
                             >
                               Basic
                             </span>
@@ -1014,14 +1019,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     >
                       <li>
                         <a
-                          class="c44 c29"
+                          class="c45 c30"
                           href="/plugins/content-type-builder/component-categories/basic/basic.simple"
                         >
                           <div
                             class="c21"
                           >
                             <svg
-                              class="c30"
+                              class="c31"
                               fill="none"
                               height="1em"
                               viewBox="0 0 4 4"
@@ -1036,10 +1041,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                               />
                             </svg>
                             <div
-                              class="c31"
+                              class="c32"
                             >
                               <span
-                                class="c4 c32"
+                                class="c4 c33"
                               >
                                 Simple
                               </span>
@@ -1055,18 +1060,18 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     class=""
                   >
                     <div
-                      class="c38 c39"
+                      class="c39 c40"
                     >
                       <div
-                        class="c40"
+                        class="c41"
                       >
                         <button
                           aria-controls="subnav-list-8"
                           aria-expanded="true"
-                          class="c41"
+                          class="c42"
                         >
                           <div
-                            class="c42"
+                            class="c43"
                           >
                             <svg
                               aria-hidden="true"
@@ -1085,10 +1090,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                             </svg>
                           </div>
                           <div
-                            class="c31"
+                            class="c32"
                           >
                             <span
-                              class="c4 c43"
+                              class="c4 c44"
                             >
                               Default
                             </span>
@@ -1101,14 +1106,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                     >
                       <li>
                         <a
-                          class="c44 c29"
+                          class="c45 c30"
                           href="/plugins/content-type-builder/component-categories/default/default.closingperiod"
                         >
                           <div
                             class="c21"
                           >
                             <svg
-                              class="c30"
+                              class="c31"
                               fill="none"
                               height="1em"
                               viewBox="0 0 4 4"
@@ -1123,10 +1128,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                               />
                             </svg>
                             <div
-                              class="c31"
+                              class="c32"
                             >
                               <span
-                                class="c4 c32"
+                                class="c4 c33"
                               >
                                 Closingperiod
                               </span>
@@ -1136,14 +1141,14 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                       </li>
                       <li>
                         <a
-                          class="c44 c29"
+                          class="c45 c30"
                           href="/plugins/content-type-builder/component-categories/default/default.dish"
                         >
                           <div
                             class="c21"
                           >
                             <svg
-                              class="c30"
+                              class="c31"
                               fill="none"
                               height="1em"
                               viewBox="0 0 4 4"
@@ -1158,10 +1163,10 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                               />
                             </svg>
                             <div
-                              class="c31"
+                              class="c32"
                             >
                               <span
-                                class="c4 c32"
+                                class="c4 c33"
                               >
                                 Dish
                               </span>
@@ -1175,16 +1180,16 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
               </ol>
             </div>
             <div
-              class="c33"
+              class="c34"
             >
               <button
                 aria-disabled="false"
-                class="c34 c21 c35"
+                class="c35 c21 c36"
                 type="button"
               >
                 <span
                   aria-hidden="true"
-                  class="c36"
+                  class="c37"
                 >
                   <svg
                     fill="none"
@@ -1200,7 +1205,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
                   </svg>
                 </span>
                 <span
-                  class="c4 c37"
+                  class="c4 c38"
                 >
                   Create a new component
                 </span>
@@ -1211,7 +1216,7 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
       </div>
     </nav>
     <div
-      class="c45 c46"
+      class="c46 c47"
     >
       <div />
     </div>
diff --git a/packages/core/email/admin/src/pages/Settings/tests/index.test.js b/packages/core/email/admin/src/pages/Settings/tests/index.test.js
index 4a32cd886d..29c81f696f 100644
--- a/packages/core/email/admin/src/pages/Settings/tests/index.test.js
+++ b/packages/core/email/admin/src/pages/Settings/tests/index.test.js
@@ -808,6 +808,7 @@ describe('Email | Pages | Settings', () => {
                                     class="c1 c27 c28 c29"
                                     disabled=""
                                     tabindex="-1"
+                                    title="Carret Down Button"
                                     type="button"
                                   >
                                     <svg
diff --git a/packages/core/helper-plugin/lib/src/components/DateTimePicker/tests/__snapshots__/index.test.js.snap b/packages/core/helper-plugin/lib/src/components/DateTimePicker/tests/__snapshots__/index.test.js.snap
index 18d3895506..2bc4dabe6b 100644
--- a/packages/core/helper-plugin/lib/src/components/DateTimePicker/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/helper-plugin/lib/src/components/DateTimePicker/tests/__snapshots__/index.test.js.snap
@@ -422,6 +422,7 @@ exports[`DateTimePicker snapshots the component 1`] = `
                   aria-hidden="true"
                   class="c15 c19 c20"
                   tabindex="-1"
+                  title="Carret Down Button"
                   type="button"
                 >
                   <svg
diff --git a/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/tests/index.test.js b/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/tests/index.test.js
index a3d0f68443..18decd6adf 100644
--- a/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/tests/index.test.js
+++ b/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/tests/index.test.js
@@ -236,6 +236,7 @@ describe('<PageSizeURLQuery />', () => {
                     aria-hidden="true"
                     class="c9 c10 c11"
                     tabindex="-1"
+                    title="Carret Down Button"
                     type="button"
                   >
                     <svg
diff --git a/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/__snapshots__/index.test.js.snap b/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/__snapshots__/index.test.js.snap
index 0603d481af..2f2db19f6e 100644
--- a/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/__snapshots__/index.test.js.snap
@@ -171,7 +171,7 @@ exports[`<PaginationURLQuery /> should display the dots correctly 1`] = `
 
 <nav
   aria-label="pagination"
-  class="sc-ezHhwS"
+  class="sc-hGnimi"
 >
   <ul
     class="c0 c1"
@@ -544,7 +544,7 @@ exports[`<PaginationURLQuery /> should work when the pageCount is inferior or eq
 
 <nav
   aria-label="pagination"
-  class="sc-ezHhwS"
+  class="sc-hGnimi"
 >
   <ul
     class="c0 c1"
diff --git a/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/index.test.js b/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/index.test.js
index 5387311774..742ae48d72 100644
--- a/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/index.test.js
+++ b/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/index.test.js
@@ -190,7 +190,7 @@ describe('<PaginationURLQuery />', () => {
 
       <nav
         aria-label="pagination"
-        class="sc-ezHhwS"
+        class="sc-hGnimi"
       >
         <ul
           class="c0 c1"
diff --git a/packages/core/helper-plugin/package.json b/packages/core/helper-plugin/package.json
index 6558731a9c..e87978a275 100644
--- a/packages/core/helper-plugin/package.json
+++ b/packages/core/helper-plugin/package.json
@@ -69,8 +69,8 @@
     "@storybook/builder-webpack5": "6.5.9",
     "@storybook/manager-webpack5": "6.4.10",
     "@storybook/react": "^6.5.10",
-    "@strapi/design-system": "1.3.1",
-    "@strapi/icons": "1.3.1",
+    "@strapi/design-system": "1.4.0",
+    "@strapi/icons": "1.4.0",
     "@testing-library/react": "12.1.4",
     "@testing-library/react-hooks": "8.0.1",
     "cross-env": "^7.0.3",
diff --git a/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js b/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js
index a1daa0d7de..c4b94209d8 100644
--- a/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js
+++ b/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js
@@ -29,7 +29,7 @@ describe('DocAssetCard', () => {
     );
 
     expect(container).toMatchInlineSnapshot(`
-      .c32 {
+      .c33 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -84,9 +84,9 @@ describe('DocAssetCard', () => {
       }
 
       .c28 {
-        background: #f6f6f9;
-        padding: 4px;
-        border-radius: 4px;
+        background: #eaeaef;
+        padding-right: 8px;
+        padding-left: 8px;
         min-width: 20px;
       }
 
@@ -179,7 +179,7 @@ describe('DocAssetCard', () => {
         color: #666687;
       }
 
-      .c31 {
+      .c32 {
         font-weight: 600;
         font-size: 0.6875rem;
         line-height: 1.45;
@@ -374,6 +374,11 @@ describe('DocAssetCard', () => {
         right: 12px;
       }
 
+      .c30 {
+        border-radius: 4px;
+        height: 1.5rem;
+      }
+
       .c27 {
         margin-left: auto;
         -webkit-flex-shrink: 0;
@@ -381,7 +386,7 @@ describe('DocAssetCard', () => {
         flex-shrink: 0;
       }
 
-      .c30 {
+      .c31 {
         margin-left: 4px;
       }
 
@@ -549,10 +554,10 @@ describe('DocAssetCard', () => {
                   class="c27"
                 >
                   <div
-                    class="c28 c29 c30"
+                    class="c28 c29 c30 c31"
                   >
                     <span
-                      class="c31"
+                      class="c32"
                     >
                       Doc
                     </span>
@@ -563,7 +568,7 @@ describe('DocAssetCard', () => {
           </div>
         </article>
         <div
-          class="c32"
+          class="c33"
         >
           <p
             aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js b/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js
index 9c016a164f..971bce9277 100644
--- a/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js
+++ b/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js
@@ -32,7 +32,7 @@ describe('ImageAssetCard', () => {
     );
 
     expect(container).toMatchInlineSnapshot(`
-      .c31 {
+      .c32 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -82,9 +82,9 @@ describe('ImageAssetCard', () => {
       }
 
       .c27 {
-        background: #f6f6f9;
-        padding: 4px;
-        border-radius: 4px;
+        background: #eaeaef;
+        padding-right: 8px;
+        padding-left: 8px;
         min-width: 20px;
       }
 
@@ -210,7 +210,7 @@ describe('ImageAssetCard', () => {
         color: #666687;
       }
 
-      .c30 {
+      .c31 {
         font-weight: 600;
         font-size: 0.6875rem;
         line-height: 1.45;
@@ -218,6 +218,11 @@ describe('ImageAssetCard', () => {
         color: #666687;
       }
 
+      .c29 {
+        border-radius: 4px;
+        height: 1.5rem;
+      }
+
       .c26 {
         margin-left: auto;
         -webkit-flex-shrink: 0;
@@ -225,7 +230,7 @@ describe('ImageAssetCard', () => {
         flex-shrink: 0;
       }
 
-      .c29 {
+      .c30 {
         margin-left: 4px;
       }
 
@@ -547,10 +552,10 @@ describe('ImageAssetCard', () => {
                   class="c26"
                 >
                   <div
-                    class="c27 c28 c29"
+                    class="c27 c28 c29 c30"
                   >
                     <span
-                      class="c30"
+                      class="c31"
                     >
                       Image
                     </span>
@@ -561,7 +566,7 @@ describe('ImageAssetCard', () => {
           </div>
         </article>
         <div
-          class="c31"
+          class="c32"
         >
           <p
             aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap
index af2e51bab3..3da2099cd9 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap
@@ -1144,6 +1144,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                     aria-hidden="true"
                     class="c0 c57 c58 c59"
                     tabindex="-1"
+                    title="Carret Down Button"
                     type="button"
                   >
                     <svg
@@ -1179,7 +1180,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
       </div>
       <nav
         aria-label="pagination"
-        class="sc-eMHfQD"
+        class="sc-jnSlpE"
       >
         <ul
           class="c0 c12 c61"
diff --git a/packages/core/upload/admin/src/components/AssetList/tests/__snapshots__/AssetList.test.js.snap b/packages/core/upload/admin/src/components/AssetList/tests/__snapshots__/AssetList.test.js.snap
index f3f368a88e..ba6cb31940 100644
--- a/packages/core/upload/admin/src/components/AssetList/tests/__snapshots__/AssetList.test.js.snap
+++ b/packages/core/upload/admin/src/components/AssetList/tests/__snapshots__/AssetList.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
-.c35 {
+.c36 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -51,20 +51,20 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
 }
 
 .c23 {
-  background: #f6f6f9;
-  padding: 4px;
-  border-radius: 4px;
+  background: #eaeaef;
+  padding-right: 8px;
+  padding-left: 8px;
   min-width: 20px;
 }
 
-.c29 {
+.c30 {
   background: #32324d;
   color: #ffffff;
   padding: 4px;
   border-radius: 4px;
 }
 
-.c32 {
+.c33 {
   width: 100%;
   height: 10.25rem;
 }
@@ -93,7 +93,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   color: #666687;
 }
 
-.c26 {
+.c27 {
   font-weight: 600;
   font-size: 0.6875rem;
   line-height: 1.45;
@@ -101,13 +101,13 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   color: #666687;
 }
 
-.c31 {
+.c32 {
   font-size: 0.75rem;
   line-height: 1.33;
   color: #ffffff;
 }
 
-.c28 {
+.c29 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -290,6 +290,11 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   border-top-right-radius: 4px;
 }
 
+.c25 {
+  border-radius: 4px;
+  height: 1.5rem;
+}
+
 .c22 {
   margin-left: auto;
   -webkit-flex-shrink: 0;
@@ -297,7 +302,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   flex-shrink: 0;
 }
 
-.c25 {
+.c26 {
   margin-left: 4px;
 }
 
@@ -310,7 +315,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c30 {
+.c31 {
   position: absolute;
   bottom: 4px;
   right: 4px;
@@ -324,22 +329,22 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   cursor: pointer;
 }
 
-.c4:hover .sc-cOLXoO {
+.c4:hover .sc-ywFzA {
   opacity: 1;
 }
 
-.c27 canvas,
-.c27 video {
+.c28 canvas,
+.c28 video {
   display: block;
   max-width: 100%;
   max-height: 10.25rem;
 }
 
-.c34 svg {
+.c35 svg {
   font-size: 3rem;
 }
 
-.c33 {
+.c34 {
   border-radius: 4px 4px 0 0;
   background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
 }
@@ -444,10 +449,10 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                     class="c22"
                   >
                     <div
-                      class="c23 c24 c25"
+                      class="c23 c24 c25 c26"
                     >
                       <span
-                        class="c26"
+                        class="c27"
                       >
                         Image
                       </span>
@@ -499,7 +504,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                   class="c8"
                 >
                   <div
-                    class="c27"
+                    class="c28"
                   >
                     <figure
                       class=""
@@ -513,7 +518,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                         />
                       </video>
                       <figcaption
-                        class="c28"
+                        class="c29"
                       >
                         mov_bbb.mp4
                       </figcaption>
@@ -522,10 +527,10 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                 </div>
               </div>
               <time
-                class="c29 c30"
+                class="c30 c31"
               >
                 <span
-                  class="c31"
+                  class="c32"
                 >
                   ...
                 </span>
@@ -568,10 +573,10 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                     class="c22"
                   >
                     <div
-                      class="c23 c24 c25"
+                      class="c23 c24 c25 c26"
                     >
                       <span
-                        class="c26"
+                        class="c27"
                       >
                         Video
                       </span>
@@ -617,12 +622,12 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                 </div>
               </div>
               <div
-                class="c32 c5 c33"
+                class="c33 c5 c34"
                 height="10.25rem"
                 width="100%"
               >
                 <span
-                  class="c34"
+                  class="c35"
                 >
                   <svg
                     aria-label="CARTE MARIAGE AVS - Printemps.pdf"
@@ -683,10 +688,10 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                     class="c22"
                   >
                     <div
-                      class="c23 c24 c25"
+                      class="c23 c24 c25 c26"
                     >
                       <span
-                        class="c26"
+                        class="c27"
                       >
                         Doc
                       </span>
@@ -701,7 +706,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
     </div>
   </div>
   <div
-    class="c35"
+    class="c36"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/SelectTree/tests/__snapshots__/SelectTree.test.js.snap b/packages/core/upload/admin/src/components/SelectTree/tests/__snapshots__/SelectTree.test.js.snap
index 2da6fb426a..12f46a2d9c 100644
--- a/packages/core/upload/admin/src/components/SelectTree/tests/__snapshots__/SelectTree.test.js.snap
+++ b/packages/core/upload/admin/src/components/SelectTree/tests/__snapshots__/SelectTree.test.js.snap
@@ -176,7 +176,7 @@ exports[`SelectTree renders 1`] = `
           class=" css-1hb7zxy-IndicatorsContainer"
         >
           <button
-            class="sc-ezHhwS sc-hrJsxi sc-bZSZLb dbMhVN hZwTtz eAfeLi"
+            class="sc-hGnimi sc-jwQYvw sc-gFSQbh iaYaJy egNiqd flXffg"
             type="button"
           >
             <svg
@@ -198,7 +198,7 @@ exports[`SelectTree renders 1`] = `
       </div>
     </div>
     <div
-      class="sc-llYSUQ PCyKi"
+      class="sc-iJKOTD hhbJqr"
     >
       <p
         aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap
index ff415d8c07..d4bb3cb561 100644
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
-.c53 {
+.c54 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -71,18 +71,18 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
 }
 
 .c39 {
-  background: #f6f6f9;
-  padding: 4px;
-  border-radius: 4px;
+  background: #eaeaef;
+  padding-right: 8px;
+  padding-left: 8px;
   min-width: 20px;
 }
 
-.c43 {
+.c44 {
   width: 100%;
   height: 5.5rem;
 }
 
-.c47 {
+.c48 {
   background: #32324d;
   color: #ffffff;
   padding: 4px;
@@ -213,7 +213,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   color: #32324d;
 }
 
-.c42 {
+.c43 {
   font-weight: 600;
   font-size: 0.6875rem;
   line-height: 1.45;
@@ -221,7 +221,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   color: #666687;
 }
 
-.c49 {
+.c50 {
   font-size: 0.75rem;
   line-height: 1.33;
   color: #ffffff;
@@ -378,7 +378,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   fill: #ffffff;
 }
 
-.c52 {
+.c53 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -392,7 +392,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   background: #ffffff;
 }
 
-.c52 .c0 {
+.c53 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -403,52 +403,52 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   align-items: center;
 }
 
-.c52 .c4 {
+.c53 .c4 {
   color: #ffffff;
 }
 
-.c52[aria-disabled='true'] {
+.c53[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c52[aria-disabled='true'] .c4 {
+.c53[aria-disabled='true'] .c4 {
   color: #666687;
 }
 
-.c52[aria-disabled='true'] svg > g,
-.c52[aria-disabled='true'] svg path {
+.c53[aria-disabled='true'] svg > g,
+.c53[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c52[aria-disabled='true']:active {
+.c53[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c52[aria-disabled='true']:active .c4 {
+.c53[aria-disabled='true']:active .c4 {
   color: #666687;
 }
 
-.c52[aria-disabled='true']:active svg > g,
-.c52[aria-disabled='true']:active svg path {
+.c53[aria-disabled='true']:active svg > g,
+.c53[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c52:hover {
+.c53:hover {
   background-color: #f6f6f9;
 }
 
-.c52:active {
+.c53:active {
   background-color: #eaeaef;
 }
 
-.c52 .c4 {
+.c53 .c4 {
   color: #32324d;
 }
 
-.c52 svg > g,
-.c52 svg path {
+.c53 svg > g,
+.c53 svg path {
   fill: #32324d;
 }
 
@@ -497,12 +497,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c50 {
+.c51 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c51 > * + * {
+.c52 > * + * {
   margin-left: 8px;
 }
 
@@ -552,6 +552,11 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border-top-right-radius: 4px;
 }
 
+.c41 {
+  border-radius: 4px;
+  height: 1.5rem;
+}
+
 .c38 {
   margin-left: auto;
   -webkit-flex-shrink: 0;
@@ -559,7 +564,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   flex-shrink: 0;
 }
 
-.c41 {
+.c42 {
   margin-left: 4px;
 }
 
@@ -572,7 +577,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c48 {
+.c49 {
   position: absolute;
   bottom: 4px;
   right: 4px;
@@ -598,18 +603,18 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   opacity: 1;
 }
 
-.c46 canvas,
-.c46 video {
+.c47 canvas,
+.c47 video {
   display: block;
   max-width: 100%;
   max-height: 5.5rem;
 }
 
-.c45 svg {
+.c46 svg {
   font-size: 3rem;
 }
 
-.c44 {
+.c45 {
   border-radius: 4px 4px 0 0;
   background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
 }
@@ -838,10 +843,10 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                           class="c38"
                         >
                           <div
-                            class="c0 c39 c40 c41"
+                            class="c0 c39 c40 c41 c42"
                           >
                             <span
-                              class="c4 c42"
+                              class="c4 c43"
                             >
                               Image
                             </span>
@@ -935,12 +940,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                       </span>
                     </div>
                     <div
-                      class="c0 c43 c22 c44"
+                      class="c0 c44 c22 c45"
                       height="5.5rem"
                       width="100%"
                     >
                       <span
-                        class="c45"
+                        class="c46"
                       >
                         <svg
                           aria-label="something.pdf"
@@ -1001,10 +1006,10 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                           class="c38"
                         >
                           <div
-                            class="c0 c39 c40 c41"
+                            class="c0 c39 c40 c41 c42"
                           >
                             <span
-                              class="c4 c42"
+                              class="c4 c43"
                             >
                               Doc
                             </span>
@@ -1104,7 +1109,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         class="c0 c25"
                       >
                         <div
-                          class="c0 c46"
+                          class="c0 c47"
                         >
                           <figure
                             class="c0 "
@@ -1127,10 +1132,10 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                       </div>
                     </div>
                     <time
-                      class="c0 c47 c48"
+                      class="c0 c48 c49"
                     >
                       <span
-                        class="c4 c49"
+                        class="c4 c50"
                       >
                         ...
                       </span>
@@ -1173,10 +1178,10 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                           class="c38"
                         >
                           <div
-                            class="c0 c39 c40 c41"
+                            class="c0 c39 c40 c41 c42"
                           >
                             <span
-                              class="c4 c42"
+                              class="c4 c43"
                             >
                               Video
                             </span>
@@ -1193,17 +1198,17 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
       </div>
     </div>
     <div
-      class="c0 c1 c50"
+      class="c0 c1 c51"
     >
       <div
         class="c0 c3"
       >
         <div
-          class="c0 c25 c51"
+          class="c0 c25 c52"
         >
           <button
             aria-disabled="false"
-            class="c6 c52"
+            class="c6 c53"
             type="button"
           >
             <span
@@ -1214,7 +1219,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
           </button>
         </div>
         <div
-          class="c0 c25 c51"
+          class="c0 c25 c52"
         >
           <button
             aria-disabled="false"
@@ -1232,7 +1237,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
     </div>
   </form>
   <div
-    class="c53"
+    class="c54"
   >
     <p
       aria-live="polite"
diff --git a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js
index b015b98082..908a32b91a 100644
--- a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js
@@ -872,6 +872,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                                   aria-hidden="true"
                                   class="c1 c26 c27 c28"
                                   tabindex="-1"
+                                  title="Carret Down Button"
                                   type="button"
                                 >
                                   <svg
diff --git a/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/index.test.js
index ecbce8aabe..858c7ffba9 100644
--- a/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/index.test.js
@@ -396,6 +396,7 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                   aria-colcount="3"
                   aria-rowcount="3"
                   class="c11"
+                  role="grid"
                 >
                   <thead
                     class="c12"
@@ -407,6 +408,7 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                       <th
                         aria-colindex="1"
                         class="c14 c15"
+                        role="gridcell"
                         tabindex="0"
                         width="1%"
                       >
@@ -426,6 +428,7 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                       <th
                         aria-colindex="2"
                         class="c15"
+                        role="gridcell"
                         tabindex="-1"
                       >
                         <div
@@ -444,6 +447,7 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                       <th
                         aria-colindex="3"
                         class="c14 c15"
+                        role="gridcell"
                         tabindex="-1"
                         width="1%"
                       >
@@ -473,6 +477,7 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                       <td
                         aria-colindex="1"
                         class="c15"
+                        role="gridcell"
                         tabindex="-1"
                       >
                         <div
@@ -498,6 +503,7 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                       <td
                         aria-colindex="2"
                         class="c15"
+                        role="gridcell"
                         tabindex="-1"
                       >
                         <span
@@ -553,6 +559,7 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                       <td
                         aria-colindex="1"
                         class="c15"
+                        role="gridcell"
                         tabindex="-1"
                       >
                         <div
@@ -576,6 +583,7 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                       <td
                         aria-colindex="2"
                         class="c15"
+                        role="gridcell"
                         tabindex="-1"
                       >
                         <span
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
index d170a8ca9a..8cd531111a 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
@@ -719,7 +719,7 @@ describe('Admin | containers | RoleCreatePage', () => {
         border: 1px solid #4945ff;
       }
 
-      .c37:hover:not([aria-disabled='true']) .sc-cOLXoO {
+      .c37:hover:not([aria-disabled='true']) .sc-eqUgKp {
         color: #271fe0;
       }
 
@@ -1027,7 +1027,7 @@ describe('Admin | containers | RoleCreatePage', () => {
                                   class="c6 c45"
                                 >
                                   <span
-                                    class="c6 sc-cOLXoO c46"
+                                    class="c6 sc-eqUgKp c46"
                                     id="accordion-label-accordion-7"
                                   >
                                     Address
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 3d4ea3f55c..2fdce617a3 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
@@ -783,7 +783,7 @@ describe('Admin | containers | RoleEditPage', () => {
         border: 1px solid #4945ff;
       }
 
-      .c41:hover:not([aria-disabled='true']) .sc-cOLXoO {
+      .c41:hover:not([aria-disabled='true']) .sc-eqUgKp {
         color: #271fe0;
       }
 
@@ -1125,7 +1125,7 @@ describe('Admin | containers | RoleEditPage', () => {
                                   class="c7 c49"
                                 >
                                   <span
-                                    class="c7 sc-cOLXoO c50"
+                                    class="c7 sc-eqUgKp c50"
                                     id="accordion-label-accordion-3"
                                   >
                                     Address
diff --git a/yarn.lock b/yarn.lock
index 245ef38a09..67d3758e72 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1628,6 +1628,13 @@
   dependencies:
     regenerator-runtime "^0.13.10"
 
+"@babel/runtime@^7.13.10":
+  version "7.20.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.6.tgz#facf4879bfed9b5326326273a64220f099b0fce3"
+  integrity sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/runtime@^7.14.8", "@babel/runtime@^7.17.8", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.7.6":
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
@@ -3923,6 +3930,13 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
+"@radix-ui/react-use-callback-ref@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90"
+  integrity sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@react-dnd/asap@^4.0.0":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-4.0.1.tgz#5291850a6b58ce6f2da25352a64f1b0674871aab"
@@ -5807,13 +5821,14 @@
     regenerator-runtime "^0.13.7"
     resolve-from "^5.0.0"
 
-"@strapi/design-system@1.3.1":
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@strapi/design-system/-/design-system-1.3.1.tgz#a0504ec9e65bdac08140bde85dc1e9fc01826903"
-  integrity sha512-cs8h1pofsi/fDk7c8oQN9X17g2mTMY5F8AHsklGDwU8bLgpEoC45e/rhQ3r8vE18ZFtOfLXXj9Qy+aQw+Gnfdw==
+"@strapi/design-system@1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@strapi/design-system/-/design-system-1.4.0.tgz#1e4932278cdd6b4e9fc0add25686abe9032e6e3a"
+  integrity sha512-K0qqnQL+Pu+Q059cVy2WYburTQeRimJfVDMNM1aPuSf9HeKcjDDYoeNxYSO5GZmucnAGkXUK1mYpaW0vzMkhmQ==
   dependencies:
     "@floating-ui/react-dom" "^1.0.0"
     "@internationalized/number" "^3.1.1"
+    "@radix-ui/react-use-callback-ref" "^1.0.0"
     compute-scroll-into-view "^1.0.17"
     prop-types "^15.7.2"
 
@@ -5839,10 +5854,10 @@
   optionalDependencies:
     typescript "^4.6.2"
 
-"@strapi/icons@1.3.1":
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-1.3.1.tgz#475a234a40df8b7711e4739379f2667375f05bdc"
-  integrity sha512-whR/Yr09PuxkmklU3YL1iNyBvuqCTerep1+bLEVEUVijwQJiigqIC07uv/zGGdZKpTelstDGNqFWTF5JcdbHbg==
+"@strapi/icons@1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-1.4.0.tgz#1dd5b639eac800fc7c7630d6870dfb20dfd0fa14"
+  integrity sha512-Ywzet8obDRAJuLKPw4mNcF4owZt7UeGu/+mGLQEmIUij03li8wTSHIZPa/Yd7/0SXI/cozqoFW2PwBQ8zdR1/w==
 
 "@stylelint/postcss-css-in-js@^0.37.2":
   version "0.37.3"
@@ -19717,6 +19732,11 @@ regenerator-runtime@^0.13.10:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz#ed07b19616bcbec5da6274ebc75ae95634bfc2ee"
   integrity sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"

From a8c7d46b30ea9c5851f35a68d5d6edcbd517c127 Mon Sep 17 00:00:00 2001
From: Ben Irvin <ben@innerdvations.com>
Date: Wed, 30 Nov 2022 11:58:40 +0100
Subject: [PATCH 2/2] use commander to 8.2.0

---
 packages/cli/create-strapi-app/package.json     |  2 +-
 packages/cli/create-strapi-starter/package.json |  2 +-
 packages/core/strapi/package.json               |  2 +-
 yarn.lock                                       | 13 +++++++++----
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/cli/create-strapi-app/package.json b/packages/cli/create-strapi-app/package.json
index 06817de25e..ecaacad79c 100644
--- a/packages/cli/create-strapi-app/package.json
+++ b/packages/cli/create-strapi-app/package.json
@@ -4,7 +4,7 @@
   "description": "Generate a new Strapi application.",
   "dependencies": {
     "@strapi/generate-new": "4.5.2",
-    "commander": "7.2.0",
+    "commander": "8.2.0",
     "inquirer": "8.2.4"
   },
   "keywords": [
diff --git a/packages/cli/create-strapi-starter/package.json b/packages/cli/create-strapi-starter/package.json
index ec6df25efb..7397c0a927 100644
--- a/packages/cli/create-strapi-starter/package.json
+++ b/packages/cli/create-strapi-starter/package.json
@@ -41,7 +41,7 @@
     "@strapi/generate-new": "4.5.2",
     "chalk": "4.1.1",
     "ci-info": "3.5.0",
-    "commander": "7.2.0",
+    "commander": "8.2.0",
     "execa": "5.1.1",
     "fs-extra": "10.0.0",
     "inquirer": "8.2.4",
diff --git a/packages/core/strapi/package.json b/packages/core/strapi/package.json
index 7ea56089a0..ff1f6e2530 100644
--- a/packages/core/strapi/package.json
+++ b/packages/core/strapi/package.json
@@ -98,7 +98,7 @@
     "chokidar": "3.5.2",
     "ci-info": "3.5.0",
     "cli-table3": "0.6.2",
-    "commander": "7.2.0",
+    "commander": "8.2.0",
     "configstore": "5.0.1",
     "debug": "4.3.2",
     "delegates": "1.0.0",
diff --git a/yarn.lock b/yarn.lock
index 67d3758e72..e48d51cc0c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9403,10 +9403,10 @@ comma-separated-tokens@^1.0.0:
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
   integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
 
-commander@7.2.0, commander@^7.0.0, commander@^7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
-  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+commander@8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-8.2.0.tgz#37fe2bde301d87d47a53adeff8b5915db1381ca8"
+  integrity sha512-LLKxDvHeL91/8MIyTAD5BFMNtoIwztGPMiM/7Bl8rIPmHCZXRxmSWr91h57dpOpnQ6jIUqEWdXE/uBYMfiVZDA==
 
 commander@^2.19.0, commander@^2.20.0, commander@^2.20.3:
   version "2.20.3"
@@ -9423,6 +9423,11 @@ commander@^6.2.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
   integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
 
+commander@^7.0.0, commander@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
 commander@^8.3.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"