From 13ef61142920d79871ddb2e582b9f0b211243e38 Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Tue, 8 Mar 2022 10:51:25 +0100
Subject: [PATCH] Bump ods

Update snapshots

Add ODS bump changelog item

Fix sidebarnav acceptance test selectors

Lint fix

Rebase, fix snapshots && test warnings

Fix snapshots after rebase
---
 changelog/unreleased/enhancement-update-ods   | 11 +++++
 .../SharesNavigation.spec.js.snap             | 14 +++---
 .../RecipientContainer.spec.js.snap           | 12 ++---
 .../__snapshots__/FileShares.spec.js.snap     |  2 +-
 .../__snapshots__/RoleDropdown.spec.js.snap   | 48 +++++++++----------
 .../__snapshots__/PublicLink.spec.js.snap     |  4 +-
 .../views/__snapshots__/Trashbin.spec.js.snap | 29 +++++------
 .../SharedWithOthers.spec.js.snap             | 12 ++---
 .../tests/unit/views/spaces/Project.spec.js   |  8 +++-
 .../tests/unit/views/spaces/Projects.spec.js  |  3 ++
 .../spaces/__snapshots__/Project.spec.js.snap | 12 ++---
 .../__snapshots__/Projects.spec.js.snap       |  8 ++--
 packages/web-runtime/package.json             |  2 +-
 .../__snapshots__/SidebarNav.spec.js.snap     |  6 +--
 .../__snapshots__/SidebarNavItem.spec.js.snap |  6 ++-
 .../__snapshots__/ThemeSwitcher.spec.js.snap  | 12 ++---
 .../__snapshots__/UserMenu.spec.js.snap       | 48 +++++++++----------
 tests/acceptance/pageObjects/webPage.js       |  3 +-
 yarn.lock                                     | 10 ++--
 19 files changed, 135 insertions(+), 115 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-update-ods

diff --git a/changelog/unreleased/enhancement-update-ods b/changelog/unreleased/enhancement-update-ods
new file mode 100644
index 00000000000..6bece8ae209
--- /dev/null
+++ b/changelog/unreleased/enhancement-update-ods
@@ -0,0 +1,11 @@
+Enhancement: Update ODS to v13.0.0-rc.1
+
+We updated the ownCloud Design System to version 13.0.0-rc.1. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
+
+- Change - Default type of OcButton: https//github.com/owncloud/owncloud-design-system/pull/2009
+- Enhancement - Apply size property to oc-card: https//github.com/owncloud/owncloud-design-system/pull/2011
+- Bugfix - Disabled OcSelect background: https//github.com/owncloud/owncloud-design-system/pull/2008
+- Bugfix - Icons/Thumbnails were only visible for clickable resources: https//github.com/owncloud/owncloud-design-system/pull/2007
+
+https://github.com/owncloud/web/pull/6540
+https://github.com/owncloud/owncloud-design-system/releases/tag/v13.0.0-rc.1
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.js.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.js.snap
index 80286bdeda1..4b9f85aa818 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.js.snap
@@ -4,28 +4,28 @@ exports[`SharesNavigation component renders a shares navigation for both mobile
 <nav id="shares-navigation" aria-label="Shares pages navigation" class="oc-py-s">
   <ul class="oc-list oc-my-rm oc-mx-rm oc-flex oc-visible@s">
     <li>
-      <oc-button-stub type="router-link" size="medium" to="/files/shares/with-me/" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-mr-s"><span>Shared with me</span></oc-button-stub>
+      <oc-button-stub type="router-link" size="medium" to="/files/shares/with-me/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-mr-s"><span>Shared with me</span></oc-button-stub>
     </li>
     <li>
-      <oc-button-stub type="router-link" size="medium" to="/files/shares/with-others/" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-mr-s"><span>Shared with others</span></oc-button-stub>
+      <oc-button-stub type="router-link" size="medium" to="/files/shares/with-others/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-mr-s"><span>Shared with others</span></oc-button-stub>
     </li>
     <li>
-      <oc-button-stub type="router-link" size="medium" to="/files/shares/via-link/" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-mr-s"><span>Shared via link</span></oc-button-stub>
+      <oc-button-stub type="router-link" size="medium" to="/files/shares/via-link/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-mr-s"><span>Shared via link</span></oc-button-stub>
     </li>
   </ul>
   <div class="oc-hidden@s">
-    <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="shares_navigation_mobile">Shares pages</oc-button-stub>
+    <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="shares_navigation_mobile">Shares pages</oc-button-stub>
     <div id="oc-drop-3" class="oc-drop oc-box-shadow-medium oc-rounded">
       <div class="oc-card oc-card-body oc-rounded oc-background-secondary oc-p-s">
         <ul class="oc-list oc-my-rm oc-mx-rm">
           <li>
-            <oc-button-stub type="router-link" size="medium" to="/files/shares/with-me/" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Shared with me</span></oc-button-stub>
+            <oc-button-stub type="router-link" size="medium" to="/files/shares/with-me/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Shared with me</span></oc-button-stub>
           </li>
           <li>
-            <oc-button-stub type="router-link" size="medium" to="/files/shares/with-others/" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Shared with others</span></oc-button-stub>
+            <oc-button-stub type="router-link" size="medium" to="/files/shares/with-others/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Shared with others</span></oc-button-stub>
           </li>
           <li>
-            <oc-button-stub type="router-link" size="medium" to="/files/shares/via-link/" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Shared via link</span></oc-button-stub>
+            <oc-button-stub type="router-link" size="medium" to="/files/shares/via-link/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Shared via link</span></oc-button-stub>
           </li>
         </ul>
       </div>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/__snapshots__/RecipientContainer.spec.js.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/__snapshots__/RecipientContainer.spec.js.snap
index d84bb63e827..efc1218935b 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/__snapshots__/RecipientContainer.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/__snapshots__/RecipientContainer.spec.js.snap
@@ -2,17 +2,17 @@
 
 exports[`InviteCollaborator RecipientContainer displays an avatar image if capability is present 1`] = `
 <span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><span width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" class="vue-avatar--wrapper oc-avatar oc-recipient-avatar" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: rgb(194, 28, 83); font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" data-testid="recipient-avatar"><span class="avatarInitials">AE</span></span>
-<p data-testid="recipient-name" class="oc-recipient-name">Albert Einstein</p> <button aria-label="Deselect Albert Einstein" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw">
+<p data-testid="recipient-name" class="oc-recipient-name">Albert Einstein</p> <button aria-label="Deselect Albert Einstein" type="button" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw">
   <ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub>
 </button></span>
 `;
 
-exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 1`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">Albert Einstein</p> <button aria-label="Deselect Albert Einstein" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
+exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 1`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">Albert Einstein</p> <button aria-label="Deselect Albert Einstein" type="button" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
 
-exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 2`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-physics-lovers"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">physics-lovers</p> <button aria-label="Deselect physics-lovers" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
+exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 2`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-physics-lovers"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">physics-lovers</p> <button aria-label="Deselect physics-lovers" type="button" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
 
-exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 3`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-guest-user"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">guest-user</p> <button aria-label="Deselect guest-user" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
+exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 3`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-guest-user"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">guest-user</p> <button aria-label="Deselect guest-user" type="button" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
 
-exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 4`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-remote-user"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">remote-user</p> <button aria-label="Deselect remote-user" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
+exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 4`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-remote-user"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">remote-user</p> <button aria-label="Deselect remote-user" type="button" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
 
-exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 5`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">Albert Einstein</p> <button aria-label="Deselect Albert Einstein" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
+exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 5`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">Albert Einstein</p> <button aria-label="Deselect Albert Einstein" type="button" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.js.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.js.snap
index 20889013bfe..193484f1359 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.js.snap
@@ -21,7 +21,7 @@ exports[`FileShares if there are collaborators present renders sharedWithLabel a
   <invite-collaborator-form-stub class="oc-my-s"></invite-collaborator-form-stub>
   <div class="avatars-wrapper oc-flex oc-flex-middle oc-flex-between">
     <h4 class="oc-text-initial oc-text-bold oc-my-rm">Shared with</h4>
-    <oc-button-stub type="button" size="medium" arialabel="Collapse list of invited people" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" data-testid="collaborators-show-people">
+    <oc-button-stub type="button" size="medium" arialabel="Collapse list of invited people" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" data-testid="collaborators-show-people">
       <oc-icon-stub name="arrow-up-s" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
     </oc-button-stub>
   </div>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/RoleDropdown.spec.js.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/RoleDropdown.spec.js.snap
index 50aeda6ba5a..10d83c6e56e 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/RoleDropdown.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/RoleDropdown.spec.js.snap
@@ -1,25 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RoleDropdown for file shares when an existing role is present renders a button with existing role if given for resource type file 1`] = `
-<span class="oc-flex oc-flex-middle"><oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="none" id="files-collaborators-role-button-new" class="files-recipient-role-select-btn"><span>Viewer</span>
+<span class="oc-flex oc-flex-middle"><oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="none" id="files-collaborators-role-button-new" class="files-recipient-role-select-btn"><span>Viewer</span>
 <oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </oc-button-stub>
 <oc-drop-stub dropid="oc-drop-17" toggle="#files-collaborators-role-button-new" position="bottom-start" mode="click" closeonclick="true" paddingsize="remove">
   <oc-list-stub aria-label="Select role for the invitation" class="files-recipient-role-drop-list">
     <li>
-      <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-viewer" class="files-recipient-role-drop-btn oc-py-xs oc-px-s selected">
+      <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-viewer" class="files-recipient-role-drop-btn oc-py-xs oc-px-s selected">
         <role-item-stub role="[object Object]" allowsharepermission="true"></role-item-stub>
         <oc-icon-stub name="check" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
       </oc-button-stub>
     </li>
     <li>
-      <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-editor" class="files-recipient-role-drop-btn oc-py-xs oc-px-s">
+      <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-editor" class="files-recipient-role-drop-btn oc-py-xs oc-px-s">
         <role-item-stub role="[object Object]" allowsharepermission="true"></role-item-stub>
         <!---->
       </oc-button-stub>
     </li>
     <li>
-      <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-custom" class="files-recipient-role-drop-btn oc-py-xs oc-px-s">
+      <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-custom" class="files-recipient-role-drop-btn oc-py-xs oc-px-s">
         <role-item-stub role="[object Object]" allowsharepermission="true"></role-item-stub>
         <!---->
       </oc-button-stub>
@@ -46,33 +46,33 @@ exports[`RoleDropdown for file shares when an existing role is present renders a
     </li>
   </oc-list-stub>
   <div class="files-recipient-custom-permissions-drop-cancel-confirm-btns">
-    <oc-button-stub type="button" size="small" variation="passive" appearance="outline" justifycontent="center" gapsize="medium">Cancel</oc-button-stub>
-    <oc-button-stub type="button" size="small" variation="primary" appearance="filled" justifycontent="center" gapsize="medium">Apply</oc-button-stub>
+    <oc-button-stub type="button" size="small" submit="button" variation="passive" appearance="outline" justifycontent="center" gapsize="medium">Cancel</oc-button-stub>
+    <oc-button-stub type="button" size="small" submit="button" variation="primary" appearance="filled" justifycontent="center" gapsize="medium">Apply</oc-button-stub>
   </div>
 </oc-drop-stub>
 </span>
 `;
 
 exports[`RoleDropdown for file shares when an existing role is present renders a button with existing role if given for resource type folder 1`] = `
-<span class="oc-flex oc-flex-middle"><oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="none" id="files-collaborators-role-button-new" class="files-recipient-role-select-btn"><span>Viewer</span>
+<span class="oc-flex oc-flex-middle"><oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="none" id="files-collaborators-role-button-new" class="files-recipient-role-select-btn"><span>Viewer</span>
 <oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </oc-button-stub>
 <oc-drop-stub dropid="oc-drop-15" toggle="#files-collaborators-role-button-new" position="bottom-start" mode="click" closeonclick="true" paddingsize="remove">
   <oc-list-stub aria-label="Select role for the invitation" class="files-recipient-role-drop-list">
     <li>
-      <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-viewer" class="files-recipient-role-drop-btn oc-py-xs oc-px-s selected">
+      <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-viewer" class="files-recipient-role-drop-btn oc-py-xs oc-px-s selected">
         <role-item-stub role="[object Object]" allowsharepermission="true"></role-item-stub>
         <oc-icon-stub name="check" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
       </oc-button-stub>
     </li>
     <li>
-      <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-editor" class="files-recipient-role-drop-btn oc-py-xs oc-px-s">
+      <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-editor" class="files-recipient-role-drop-btn oc-py-xs oc-px-s">
         <role-item-stub role="[object Object]" allowsharepermission="true"></role-item-stub>
         <!---->
       </oc-button-stub>
     </li>
     <li>
-      <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-custom" class="files-recipient-role-drop-btn oc-py-xs oc-px-s">
+      <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-custom" class="files-recipient-role-drop-btn oc-py-xs oc-px-s">
         <role-item-stub role="[object Object]" allowsharepermission="true"></role-item-stub>
         <!---->
       </oc-button-stub>
@@ -99,33 +99,33 @@ exports[`RoleDropdown for file shares when an existing role is present renders a
     </li>
   </oc-list-stub>
   <div class="files-recipient-custom-permissions-drop-cancel-confirm-btns">
-    <oc-button-stub type="button" size="small" variation="passive" appearance="outline" justifycontent="center" gapsize="medium">Cancel</oc-button-stub>
-    <oc-button-stub type="button" size="small" variation="primary" appearance="filled" justifycontent="center" gapsize="medium">Apply</oc-button-stub>
+    <oc-button-stub type="button" size="small" submit="button" variation="passive" appearance="outline" justifycontent="center" gapsize="medium">Cancel</oc-button-stub>
+    <oc-button-stub type="button" size="small" submit="button" variation="primary" appearance="filled" justifycontent="center" gapsize="medium">Apply</oc-button-stub>
   </div>
 </oc-drop-stub>
 </span>
 `;
 
 exports[`RoleDropdown for file shares when no existing role is present renders a button with invite text if no existing role given for resource type file 1`] = `
-<span class="oc-flex oc-flex-middle"><oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="none" id="files-collaborators-role-button-new" class="files-recipient-role-select-btn"><span>Invite as viewer</span>
+<span class="oc-flex oc-flex-middle"><oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="none" id="files-collaborators-role-button-new" class="files-recipient-role-select-btn"><span>Invite as viewer</span>
 <oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </oc-button-stub>
 <oc-drop-stub dropid="oc-drop-5" toggle="#files-collaborators-role-button-new" position="bottom-start" mode="click" closeonclick="true" paddingsize="remove">
   <oc-list-stub aria-label="Select role for the invitation" class="files-recipient-role-drop-list">
     <li>
-      <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-viewer" class="files-recipient-role-drop-btn oc-py-xs oc-px-s selected">
+      <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-viewer" class="files-recipient-role-drop-btn oc-py-xs oc-px-s selected">
         <role-item-stub role="[object Object]" allowsharepermission="true"></role-item-stub>
         <oc-icon-stub name="check" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
       </oc-button-stub>
     </li>
     <li>
-      <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-editor" class="files-recipient-role-drop-btn oc-py-xs oc-px-s">
+      <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-editor" class="files-recipient-role-drop-btn oc-py-xs oc-px-s">
         <role-item-stub role="[object Object]" allowsharepermission="true"></role-item-stub>
         <!---->
       </oc-button-stub>
     </li>
     <li>
-      <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-custom" class="files-recipient-role-drop-btn oc-py-xs oc-px-s">
+      <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-custom" class="files-recipient-role-drop-btn oc-py-xs oc-px-s">
         <role-item-stub role="[object Object]" allowsharepermission="true"></role-item-stub>
         <!---->
       </oc-button-stub>
@@ -146,33 +146,33 @@ exports[`RoleDropdown for file shares when no existing role is present renders a
     </li>
   </oc-list-stub>
   <div class="files-recipient-custom-permissions-drop-cancel-confirm-btns">
-    <oc-button-stub type="button" size="small" variation="passive" appearance="outline" justifycontent="center" gapsize="medium">Cancel</oc-button-stub>
-    <oc-button-stub type="button" size="small" variation="primary" appearance="filled" justifycontent="center" gapsize="medium">Apply</oc-button-stub>
+    <oc-button-stub type="button" size="small" submit="button" variation="passive" appearance="outline" justifycontent="center" gapsize="medium">Cancel</oc-button-stub>
+    <oc-button-stub type="button" size="small" submit="button" variation="primary" appearance="filled" justifycontent="center" gapsize="medium">Apply</oc-button-stub>
   </div>
 </oc-drop-stub>
 </span>
 `;
 
 exports[`RoleDropdown for file shares when no existing role is present renders a button with invite text if no existing role given for resource type folder 1`] = `
-<span class="oc-flex oc-flex-middle"><oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="none" id="files-collaborators-role-button-new" class="files-recipient-role-select-btn"><span>Invite as viewer</span>
+<span class="oc-flex oc-flex-middle"><oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="none" id="files-collaborators-role-button-new" class="files-recipient-role-select-btn"><span>Invite as viewer</span>
 <oc-icon-stub name="arrow-down-s" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </oc-button-stub>
 <oc-drop-stub dropid="oc-drop-3" toggle="#files-collaborators-role-button-new" position="bottom-start" mode="click" closeonclick="true" paddingsize="remove">
   <oc-list-stub aria-label="Select role for the invitation" class="files-recipient-role-drop-list">
     <li>
-      <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-viewer" class="files-recipient-role-drop-btn oc-py-xs oc-px-s selected">
+      <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-viewer" class="files-recipient-role-drop-btn oc-py-xs oc-px-s selected">
         <role-item-stub role="[object Object]" allowsharepermission="true"></role-item-stub>
         <oc-icon-stub name="check" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
       </oc-button-stub>
     </li>
     <li>
-      <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-editor" class="files-recipient-role-drop-btn oc-py-xs oc-px-s">
+      <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-editor" class="files-recipient-role-drop-btn oc-py-xs oc-px-s">
         <role-item-stub role="[object Object]" allowsharepermission="true"></role-item-stub>
         <!---->
       </oc-button-stub>
     </li>
     <li>
-      <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-custom" class="files-recipient-role-drop-btn oc-py-xs oc-px-s">
+      <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="space-between" gapsize="medium" id="files-recipient-role-drop-btn-custom" class="files-recipient-role-drop-btn oc-py-xs oc-px-s">
         <role-item-stub role="[object Object]" allowsharepermission="true"></role-item-stub>
         <!---->
       </oc-button-stub>
@@ -199,8 +199,8 @@ exports[`RoleDropdown for file shares when no existing role is present renders a
     </li>
   </oc-list-stub>
   <div class="files-recipient-custom-permissions-drop-cancel-confirm-btns">
-    <oc-button-stub type="button" size="small" variation="passive" appearance="outline" justifycontent="center" gapsize="medium">Cancel</oc-button-stub>
-    <oc-button-stub type="button" size="small" variation="primary" appearance="filled" justifycontent="center" gapsize="medium">Apply</oc-button-stub>
+    <oc-button-stub type="button" size="small" submit="button" variation="passive" appearance="outline" justifycontent="center" gapsize="medium">Cancel</oc-button-stub>
+    <oc-button-stub type="button" size="small" submit="button" variation="primary" appearance="filled" justifycontent="center" gapsize="medium">Apply</oc-button-stub>
   </div>
 </oc-drop-stub>
 </span>
diff --git a/packages/web-app-files/tests/unit/views/__snapshots__/PublicLink.spec.js.snap b/packages/web-app-files/tests/unit/views/__snapshots__/PublicLink.spec.js.snap
index f8b6863f560..749399b2be4 100644
--- a/packages/web-app-files/tests/unit/views/__snapshots__/PublicLink.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/__snapshots__/PublicLink.spec.js.snap
@@ -27,7 +27,7 @@ exports[`PublicLink when the view is not loading anymore and when "passwordRequi
 exports[`PublicLink when the view is not loading anymore and when "passwordRequired" is set as true and the password input should have a computed label 1`] = `<oc-text-input-stub id="oc-textinput-3" type="password" clearbuttonaccessiblelabel="" label="Enter password for public link" class="oc-mb-s"></oc-text-input-stub>`;
 
 exports[`PublicLink when the view is not loading anymore and when "passwordRequired" is set as true and the submit button should be set as disabled if "password" is empty 1`] = `
-<oc-button-stub type="button" disabled="true" size="medium" variation="primary" appearance="filled" justifycontent="center" gapsize="medium" class="oc-login-authorize-button">
+<oc-button-stub type="button" disabled="true" size="medium" submit="button" variation="primary" appearance="filled" justifycontent="center" gapsize="medium" class="oc-login-authorize-button">
   <translate-stub tag="span">Continue</translate-stub>
 </oc-button-stub>
 `;
@@ -41,7 +41,7 @@ exports[`PublicLink when the view is not loading anymore and when "passwordRequi
   </div>
   <div class="oc-card-body">
     <oc-text-input-stub id="oc-textinput-3" type="password" clearbuttonaccessiblelabel="" label="Enter password for public link" class="oc-mb-s"></oc-text-input-stub>
-    <oc-button-stub type="button" disabled="true" size="medium" variation="primary" appearance="filled" justifycontent="center" gapsize="medium" class="oc-login-authorize-button">
+    <oc-button-stub type="button" disabled="true" size="medium" submit="button" variation="primary" appearance="filled" justifycontent="center" gapsize="medium" class="oc-login-authorize-button">
       <translate-stub tag="span">Continue</translate-stub>
     </oc-button-stub>
   </div>
diff --git a/packages/web-app-files/tests/unit/views/__snapshots__/Trashbin.spec.js.snap b/packages/web-app-files/tests/unit/views/__snapshots__/Trashbin.spec.js.snap
index 5a3329054ab..e94aabe9aa5 100644
--- a/packages/web-app-files/tests/unit/views/__snapshots__/Trashbin.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/__snapshots__/Trashbin.spec.js.snap
@@ -7,7 +7,7 @@ exports[`Trashbin View when the view is not loading anymore when length of the p
       <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-table-header-cell oc-table-header-cell-select oc-pl-m " style="top: 0px;"><span class="oc-table-thead-content"><div class="resource-table-select-all"><span><input id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" value=""> <label for="resource-table-select-all" class="oc-invisible-sr oc-cursor-pointer">Select all resources</label></span></div></span>
         <!---->
       </th>
-      <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-nowrap oc-table-header-cell oc-table-header-cell-name" aria-sort="none" style="top: 0px;"><span class="oc-table-thead-content header-text">Name</span> <button aria-label="Sort by name" class="oc-button-sort oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-invisible"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></button></th>
+      <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-nowrap oc-table-header-cell oc-table-header-cell-name" aria-sort="none" style="top: 0px;"><span class="oc-table-thead-content header-text">Name</span> <button aria-label="Sort by name" type="button" class="oc-button-sort oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-invisible"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></button></th>
       <th class="oc-th oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-status" style="top: 0px;"><span class="oc-table-thead-content header-text">Status</span>
         <!---->
       </th>
@@ -20,10 +20,9 @@ exports[`Trashbin View when the view is not loading anymore when length of the p
     <tr tabindex="-1" data-item-id="file-id-1234" draggable="false" class="oc-tbody-tr oc-tbody-tr-file-id-1234">
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-table-data-cell oc-table-data-cell-select oc-pl-m "><span><input id="resource-table-select-file-id-1234" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" value="[object Object]"> <label for="resource-table-select-file-id-1234" class="oc-invisible-sr oc-cursor-pointer">Select folder</label></span></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
-        <div class="oc-resource oc-text-overflow">
-          <!---->
-          <div class="oc-resource-details oc-text-overflow"><span data-test-resource-path="/file-path/1234" data-test-resource-name="file-path/file-name-1234" data-test-resource-type="folder" class="oc-resource-name"><span class="oc-text-truncate"><span class="oc-resource-basename">file-name-1234</span></span>
-            <!----></span>
+        <div class="oc-resource oc-text-overflow"><span><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-file"><!----></span></span>
+          <div class="oc-resource-details oc-text-overflow"><span class="oc-text-overflow"><!----> <span data-test-resource-path="/file-path/1234" data-test-resource-name="file-path/file-name-1234" data-test-resource-type="folder" class="oc-resource-name"><span class="oc-text-truncate"><span class="oc-resource-basename">file-name-1234</span></span>
+            <!----></span></span>
             <div class="oc-resource-indicators">
               <router-link-stub to="[object Object]" class="parent-folder" style="cursor: pointer;"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="text">file-path</span></router-link-stub>
               <!---->
@@ -33,7 +32,7 @@ exports[`Trashbin View when the view is not loading anymore when length of the p
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-status"></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
-        <div class="resource-table-actions"> <button aria-label="Show context menu" class="resource-table-btn-action-dropdown oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-1234"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
+        <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-1234"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
           <div id="context-menu-drop-file-id-1234" class="oc-drop oc-box-shadow-medium oc-rounded"></div>
         </div>
       </td>
@@ -41,10 +40,9 @@ exports[`Trashbin View when the view is not loading anymore when length of the p
     <tr tabindex="-1" data-item-id="file-id-5896" draggable="false" class="oc-tbody-tr oc-tbody-tr-file-id-5896">
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-table-data-cell oc-table-data-cell-select oc-pl-m "><span><input id="resource-table-select-file-id-5896" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" value="[object Object]"> <label for="resource-table-select-file-id-5896" class="oc-invisible-sr oc-cursor-pointer">Select folder</label></span></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
-        <div class="oc-resource oc-text-overflow">
-          <!---->
-          <div class="oc-resource-details oc-text-overflow"><span data-test-resource-path="/file-path/5896" data-test-resource-name="file-path/file-name-5896" data-test-resource-type="folder" class="oc-resource-name"><span class="oc-text-truncate"><span class="oc-resource-basename">file-name-5896</span></span>
-            <!----></span>
+        <div class="oc-resource oc-text-overflow"><span><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-file"><!----></span></span>
+          <div class="oc-resource-details oc-text-overflow"><span class="oc-text-overflow"><!----> <span data-test-resource-path="/file-path/5896" data-test-resource-name="file-path/file-name-5896" data-test-resource-type="folder" class="oc-resource-name"><span class="oc-text-truncate"><span class="oc-resource-basename">file-name-5896</span></span>
+            <!----></span></span>
             <div class="oc-resource-indicators">
               <router-link-stub to="[object Object]" class="parent-folder" style="cursor: pointer;"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="text">file-path</span></router-link-stub>
               <!---->
@@ -54,7 +52,7 @@ exports[`Trashbin View when the view is not loading anymore when length of the p
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-status"></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
-        <div class="resource-table-actions"> <button aria-label="Show context menu" class="resource-table-btn-action-dropdown oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-5896"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
+        <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-5896"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
           <div id="context-menu-drop-file-id-5896" class="oc-drop oc-box-shadow-medium oc-rounded"></div>
         </div>
       </td>
@@ -62,10 +60,9 @@ exports[`Trashbin View when the view is not loading anymore when length of the p
     <tr tabindex="-1" data-item-id="file-id-9856" draggable="false" class="oc-tbody-tr oc-tbody-tr-file-id-9856">
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-table-data-cell oc-table-data-cell-select oc-pl-m "><span><input id="resource-table-select-file-id-9856" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" value="[object Object]"> <label for="resource-table-select-file-id-9856" class="oc-invisible-sr oc-cursor-pointer">Select folder</label></span></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
-        <div class="oc-resource oc-text-overflow">
-          <!---->
-          <div class="oc-resource-details oc-text-overflow"><span data-test-resource-path="/file-path/9856" data-test-resource-name="file-path/file-name-9856" data-test-resource-type="folder" class="oc-resource-name"><span class="oc-text-truncate"><span class="oc-resource-basename">file-name-9856</span></span>
-            <!----></span>
+        <div class="oc-resource oc-text-overflow"><span><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-file"><!----></span></span>
+          <div class="oc-resource-details oc-text-overflow"><span class="oc-text-overflow"><!----> <span data-test-resource-path="/file-path/9856" data-test-resource-name="file-path/file-name-9856" data-test-resource-type="folder" class="oc-resource-name"><span class="oc-text-truncate"><span class="oc-resource-basename">file-name-9856</span></span>
+            <!----></span></span>
             <div class="oc-resource-indicators">
               <router-link-stub to="[object Object]" class="parent-folder" style="cursor: pointer;"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="text">file-path</span></router-link-stub>
               <!---->
@@ -75,7 +72,7 @@ exports[`Trashbin View when the view is not loading anymore when length of the p
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-status"></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
-        <div class="resource-table-actions"> <button aria-label="Show context menu" class="resource-table-btn-action-dropdown oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-9856"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
+        <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-9856"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
           <div id="context-menu-drop-file-id-9856" class="oc-drop oc-box-shadow-medium oc-rounded"></div>
         </div>
       </td>
diff --git a/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap b/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap
index b2d8bdeeef8..248c5880691 100644
--- a/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap
@@ -8,10 +8,10 @@ exports[`SharedWithOthers when the wrapper is not loading anymore when length of
         <!---->
       </th>
       <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-nowrap oc-table-header-cell oc-table-header-cell-name" aria-sort="none" style="top: 0px;"><span class="oc-table-thead-content header-text">Name</span>
-        <oc-button-stub type="button" size="medium" arialabel="Sort by name" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-button-sort oc-invisible"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></oc-button-stub>
+        <oc-button-stub type="button" size="medium" arialabel="Sort by name" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-button-sort oc-invisible"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></oc-button-stub>
       </th>
       <th class="oc-th oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-sharedWith" aria-sort="none" style="top: 0px;"><span class="oc-table-thead-content header-text">Shared with</span>
-        <oc-button-stub type="button" size="medium" arialabel="Sort by sharedWith" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-button-sort oc-invisible"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></oc-button-stub>
+        <oc-button-stub type="button" size="medium" arialabel="Sort by sharedWith" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-button-sort oc-invisible"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></oc-button-stub>
       </th>
       <th class="oc-th oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-actions oc-pr-m" style="top: 0px;"><span class="oc-table-thead-content header-text">Actions</span>
         <!---->
@@ -31,7 +31,7 @@ exports[`SharedWithOthers when the wrapper is not loading anymore when length of
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
         <div class="resource-table-actions">
-          <oc-button-stub type="button" size="medium" arialabel="Show context menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="context-menu-trigger-38" class="resource-table-btn-action-dropdown"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></oc-button-stub>
+          <oc-button-stub type="button" size="medium" arialabel="Show context menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="context-menu-trigger-38" class="resource-table-btn-action-dropdown"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></oc-button-stub>
           <oc-drop-stub dropid="context-menu-drop-38" popperoptions="[object Object]" toggle="#context-menu-trigger-38" position="bottom-start" mode="click" closeonclick="true" paddingsize="small"></oc-drop-stub>
         </div>
       </td>
@@ -48,7 +48,7 @@ exports[`SharedWithOthers when the wrapper is not loading anymore when length of
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
         <div class="resource-table-actions">
-          <oc-button-stub type="button" size="medium" arialabel="Show context menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="context-menu-trigger-64" class="resource-table-btn-action-dropdown"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></oc-button-stub>
+          <oc-button-stub type="button" size="medium" arialabel="Show context menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="context-menu-trigger-64" class="resource-table-btn-action-dropdown"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></oc-button-stub>
           <oc-drop-stub dropid="context-menu-drop-64" popperoptions="[object Object]" toggle="#context-menu-trigger-64" position="bottom-start" mode="click" closeonclick="true" paddingsize="small"></oc-drop-stub>
         </div>
       </td>
@@ -65,7 +65,7 @@ exports[`SharedWithOthers when the wrapper is not loading anymore when length of
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
         <div class="resource-table-actions">
-          <oc-button-stub type="button" size="medium" arialabel="Show context menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="context-menu-trigger-39" class="resource-table-btn-action-dropdown"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></oc-button-stub>
+          <oc-button-stub type="button" size="medium" arialabel="Show context menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="context-menu-trigger-39" class="resource-table-btn-action-dropdown"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></oc-button-stub>
           <oc-drop-stub dropid="context-menu-drop-39" popperoptions="[object Object]" toggle="#context-menu-trigger-39" position="bottom-start" mode="click" closeonclick="true" paddingsize="small"></oc-drop-stub>
         </div>
       </td>
@@ -82,7 +82,7 @@ exports[`SharedWithOthers when the wrapper is not loading anymore when length of
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
         <div class="resource-table-actions">
-          <oc-button-stub type="button" size="medium" arialabel="Show context menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="context-menu-trigger-30" class="resource-table-btn-action-dropdown"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></oc-button-stub>
+          <oc-button-stub type="button" size="medium" arialabel="Show context menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="context-menu-trigger-30" class="resource-table-btn-action-dropdown"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></oc-button-stub>
           <oc-drop-stub dropid="context-menu-drop-30" popperoptions="[object Object]" toggle="#context-menu-trigger-30" position="bottom-start" mode="click" closeonclick="true" paddingsize="small"></oc-drop-stub>
         </div>
       </td>
diff --git a/packages/web-app-files/tests/unit/views/spaces/Project.spec.js b/packages/web-app-files/tests/unit/views/spaces/Project.spec.js
index 6f7158d0eba..f8e41e0bffc 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Project.spec.js
+++ b/packages/web-app-files/tests/unit/views/spaces/Project.spec.js
@@ -231,6 +231,8 @@ function getMountedWrapper(spaceResources = [], spaceItem = null, imageContent =
       $client: {
         files: {
           getFileContents: jest.fn().mockImplementation(() => Promise.resolve('filecontent')),
+          // TODO: Add & reference space fixtures in line below
+          // fileInfo: jest.fn().mockImplementation(() => Promise.resolve(Files['/'][4])),
           list: jest.fn(() => spaceResources)
         }
       }
@@ -243,7 +245,11 @@ function getMountedWrapper(spaceResources = [], spaceItem = null, imageContent =
           options: {
             disablePreviews: true
           }
-        })
+        }),
+        user: () => ({
+          id: 'marie'
+        }),
+        getToken: jest.fn()
       },
       modules: {
         Files: {
diff --git a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.js b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.js
index ace04201a11..f22fce9f88e 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.js
+++ b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.js
@@ -102,6 +102,9 @@ function getMountedWrapper(activeFiles = []) {
       getters: {
         configuration: () => ({
           server: 'https://example.com/'
+        }),
+        user: () => ({
+          id: 'marie'
         })
       },
       actions: {
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap
index f3618150234..7aeeebf9d35 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap
@@ -11,13 +11,13 @@ exports[`Spaces project view space image should show if given 1`] = `
         <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
           <div class="oc-flex oc-flex-middle">
             <h1 class="space-overview-name oc-text-truncate">space</h1>
-            <oc-button-stub type="button" size="medium" arialabel="Show context menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="space-context-btn" class="oc-ml-s">
+            <oc-button-stub type="button" size="medium" arialabel="Show context menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="space-context-btn" class="oc-ml-s">
               <oc-icon-stub name="more-2" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
             </oc-button-stub>
             <oc-drop-stub dropid="space-context-drop" toggle="#space-context-btn" position="right-start" mode="click" closeonclick="true" paddingsize="small" options="[object Object]"><input id="space-image-upload-input" type="file" name="file" multiple="multiple" tabindex="-1" accept="image/png,image/jpg,image/jpeg,image/gif">
               <ul class="oc-list oc-files-context-actions">
                 <li class="oc-spaces-context-action oc-py-xs oc-px-s">
-                  <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
+                  <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
                     <oc-icon-stub name="information" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
                     Details
                   </oc-button-stub>
@@ -25,7 +25,7 @@ exports[`Spaces project view space image should show if given 1`] = `
               </ul>
             </oc-drop-stub>
           </div>
-          <oc-button-stub type="button" size="medium" arialabel="Open context menu and show members" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
+          <oc-button-stub type="button" size="medium" arialabel="Open context menu and show members" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
             <oc-icon-stub name="group" filltype="line" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub> <span class="space-overview-people-count oc-text-small">1 member</span>
           </oc-button-stub>
         </div>
@@ -54,13 +54,13 @@ exports[`Spaces project view space readme should show if given 1`] = `
         <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
           <div class="oc-flex oc-flex-middle">
             <h1 class="space-overview-name oc-text-truncate">space</h1>
-            <oc-button-stub type="button" size="medium" arialabel="Show context menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="space-context-btn" class="oc-ml-s">
+            <oc-button-stub type="button" size="medium" arialabel="Show context menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="space-context-btn" class="oc-ml-s">
               <oc-icon-stub name="more-2" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
             </oc-button-stub>
             <oc-drop-stub dropid="space-context-drop" toggle="#space-context-btn" position="right-start" mode="click" closeonclick="true" paddingsize="small" options="[object Object]"><input id="space-image-upload-input" type="file" name="file" multiple="multiple" tabindex="-1" accept="image/png,image/jpg,image/jpeg,image/gif">
               <ul class="oc-list oc-files-context-actions">
                 <li class="oc-spaces-context-action oc-py-xs oc-px-s">
-                  <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
+                  <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
                     <oc-icon-stub name="information" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
                     Details
                   </oc-button-stub>
@@ -68,7 +68,7 @@ exports[`Spaces project view space readme should show if given 1`] = `
               </ul>
             </oc-drop-stub>
           </div>
-          <oc-button-stub type="button" size="medium" arialabel="Open context menu and show members" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
+          <oc-button-stub type="button" size="medium" arialabel="Open context menu and show members" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
             <oc-icon-stub name="group" filltype="line" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub> <span class="space-overview-people-count oc-text-small">1 member</span>
           </oc-button-stub>
         </div>
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap
index ea8a993c3c3..0aff097cdd1 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Spaces component should list spaces 1`] = `
-<div class="oc-py-s oc-px-m"><button aria-label="Create a new space" class="oc-mb-l oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-primary" id="new-space-menu-btn" data-testid="spaces-list-create-space-btn"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span>
+<div class="oc-py-s oc-px-m"><button aria-label="Create a new space" type="button" class="oc-mb-l oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-primary" id="new-space-menu-btn" data-testid="spaces-list-create-space-btn"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span>
     <translate-stub tag="span">Create Space</translate-stub>
   </button>
   <div class="oc-pb-xl oc-border-b"><span>Store your project related files in Spaces for seamless collaboration.</span></div>
@@ -25,12 +25,12 @@ exports[`Spaces component should list spaces 1`] = `
             <div class="oc-flex oc-flex-between oc-flex-middle">
               <div class="oc-flex oc-flex-middle"><span class="oc-mr-s oc-icon oc-icon-m oc-icon-passive"><!----></span> <a href="#/" aria-current="page" class="space-name oc-text-left router-link-exact-active router-link-active"><span></span></a></div>
               <div class="oc-flex oc-flex-middle">
-                <div><button aria-label="Show members" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button></div>
-                <div><button aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="space-context-btn-1"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
+                <div><button aria-label="Show members" type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button></div>
+                <div><button aria-label="Show context menu" type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="space-context-btn-1"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
                   <div id="space-context-drop-1" class="oc-drop oc-box-shadow-medium oc-rounded" options="[object Object]">
                     <div class="oc-card oc-card-body oc-rounded oc-background-secondary oc-p-s">
                       <ul class="oc-list oc-files-context-actions">
-                        <li class="oc-files-context-action oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-flex oc-icon oc-icon-m oc-icon-passive"><!----></span>
+                        <li class="oc-files-context-action oc-px-s"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-flex oc-icon oc-icon-m oc-icon-passive"><!----></span>
                             Details
                           </button></li>
                       </ul>
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index b0a73db3392..7f68ffce7b9 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -18,7 +18,7 @@
     "luxon": "^2.3.0",
     "marked": "^4.0.12",
     "oidc-client": "1.11.5",
-    "owncloud-design-system": "^12.2.2",
+    "owncloud-design-system": "^13.0.0-rc.1",
     "owncloud-sdk": "~2.1.0-alpha.3",
     "p-queue": "^6.1.1",
     "popper-max-size-modifier": "^0.2.0",
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
index 5791d2b1dd2..06815ba152d 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`OcSidebarNav renders navItems into a list 1`] = `
-<div id="web-nav-sidebar" class="oc-app-navigation-expanded"><button aria-label="Toggle sidebar" class="toggle-sidebar-button oc-py-s oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw toggle-sidebar-button-expanded oc-pr-s">
+<div id="web-nav-sidebar" class="oc-app-navigation-expanded"><button aria-label="Toggle sidebar" type="button" class="toggle-sidebar-button oc-py-s oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw toggle-sidebar-button-expanded oc-pr-s">
     <oc-icon-stub name="arrow-drop-left" filltype="line" accessiblelabel="" type="span" size="large" variation="passive" color=""></oc-icon-stub>
   </button>
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
@@ -15,7 +15,7 @@ exports[`OcSidebarNav renders navItems into a list 1`] = `
 `;
 
 exports[`OcSidebarNav toggles back into open state upon button click 1`] = `
-<div id="web-nav-sidebar" class="oc-app-navigation-expanded"><button aria-label="Toggle sidebar" class="toggle-sidebar-button oc-py-s oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw toggle-sidebar-button-expanded oc-pr-s">
+<div id="web-nav-sidebar" class="oc-app-navigation-expanded"><button aria-label="Toggle sidebar" type="button" class="toggle-sidebar-button oc-py-s oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw toggle-sidebar-button-expanded oc-pr-s">
     <oc-icon-stub name="arrow-drop-left" filltype="line" accessiblelabel="" type="span" size="large" variation="passive" color=""></oc-icon-stub>
   </button>
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
@@ -29,7 +29,7 @@ exports[`OcSidebarNav toggles back into open state upon button click 1`] = `
 `;
 
 exports[`OcSidebarNav toggles into closed state upon button click 1`] = `
-<div id="web-nav-sidebar" class="oc-app-navigation-collapsed"><button aria-label="Toggle sidebar" class="toggle-sidebar-button oc-py-s oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw toggle-sidebar-button-collapsed">
+<div id="web-nav-sidebar" class="oc-app-navigation-collapsed"><button aria-label="Toggle sidebar" type="button" class="toggle-sidebar-button oc-py-s oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw toggle-sidebar-button-collapsed">
     <oc-icon-stub name="arrow-drop-right" filltype="line" accessiblelabel="" type="span" size="large" variation="passive" color=""></oc-icon-stub>
   </button>
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
index 9ac75da2f61..b7fea644d88 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
@@ -2,7 +2,8 @@
 
 exports[`OcSidebarNav renders navItem with toolTip if collapsed 1`] = `
 <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" id="123">
-  <router-link-stub to="/files/list/all" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text text-invisible">Personal</span>
+  <router-link-stub to="/files/list/all" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-flex"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text text-invisible">Personal</span></span>
+    <!---->
     <!---->
   </router-link-stub>
 </li>
@@ -10,7 +11,8 @@ exports[`OcSidebarNav renders navItem with toolTip if collapsed 1`] = `
 
 exports[`OcSidebarNav renders navItem without toolTip if expanded 1`] = `
 <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" id="123">
-  <router-link-stub to="/files/list/all" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text">Personal</span>
+  <router-link-stub to="/files/list/all" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-flex"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text">Personal</span></span>
+    <!---->
     <!---->
   </router-link-stub>
 </li>
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.js.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.js.snap
index 3a381a25a47..e9cd377b8f4 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.js.snap
@@ -1,37 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ThemeSwitcher component restores dark theme if dark theme is saved in localstorage 1`] = `
-<button aria-label="Click to switch theme" class="themeswitcher-btn oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Dark mode</span>
+<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Dark mode</span>
   <oc-icon-stub name="moon-clear" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </button>
 `;
 
 exports[`ThemeSwitcher component restores light theme if light theme is saved in localstorage 1`] = `
-<button aria-label="Click to switch theme" class="themeswitcher-btn oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Light mode</span>
+<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Light mode</span>
   <oc-icon-stub name="sun" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </button>
 `;
 
 exports[`ThemeSwitcher component visually renders a button, initially in dark mode if user prefers dark color scheme 1`] = `
-<button aria-label="Click to switch theme" class="themeswitcher-btn oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Dark mode</span>
+<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Dark mode</span>
   <oc-icon-stub name="moon-clear" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </button>
 `;
 
 exports[`ThemeSwitcher component visually renders a button, initially in light mode per default 1`] = `
-<button aria-label="Click to switch theme" class="themeswitcher-btn oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Light mode</span>
+<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Light mode</span>
   <oc-icon-stub name="sun" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </button>
 `;
 
 exports[`ThemeSwitcher component visually toggles between themes upon click 1`] = `
-<button aria-label="Click to switch theme" class="themeswitcher-btn oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Dark mode</span>
+<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Dark mode</span>
   <oc-icon-stub name="moon-clear" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </button>
 `;
 
 exports[`ThemeSwitcher component visually toggles between themes upon click 2`] = `
-<button aria-label="Click to switch theme" class="themeswitcher-btn oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Light mode</span>
+<button aria-label="Click to switch theme" type="button" class="themeswitcher-btn oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw"><span aria-label="Currently used theme" class="oc-visible@s">Light mode</span>
   <oc-icon-stub name="sun" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
 </button>
 `;
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.js.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.js.snap
index 88547f37df8..722d621b3ce 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.js.snap
@@ -2,26 +2,26 @@
 
 exports[`User Menu component when basic quota is set renders a danger quota progress bar 1`] = `
 <nav aria-label="Account menu">
-  <oc-button-stub type="button" size="medium" arialabel="User Menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="_userMenuButton" class="oc-topbar-personal">
+  <oc-button-stub type="button" size="medium" arialabel="User Menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="_userMenuButton" class="oc-topbar-personal">
     <avatar-image-stub width="32" userid="einstein" class="oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle"></avatar-image-stub>
   </oc-button-stub>
   <oc-drop-stub dropid="account-info-container" toggle="#_userMenuButton" position="bottom-start" mode="click" closeonclick="true" paddingsize="small">
     <oc-list-stub class="user-menu-list">
       <li>
-        <oc-button-stub type="router-link" size="medium" to="[object Object]" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-manage">
+        <oc-button-stub type="router-link" size="medium" to="[object Object]" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-manage">
           <avatar-image-stub width="32" userid="einstein"></avatar-image-stub> <span class="profile-info-wrapper oc-py-xs"><span></span>
           <!---->
           <!----></span>
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub type="router-link" size="medium" to="[object Object]" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
+        <oc-button-stub type="router-link" size="medium" to="[object Object]" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
           <oc-icon-stub name="application" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color="" class="oc-p-xs"></oc-icon-stub>
           <translate-stub tag="span">Settings</translate-stub>
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-logout">
+        <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-logout">
           <oc-icon-stub name="logout-box-r" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" class="oc-p-xs"></oc-icon-stub>
           <translate-stub tag="span">Log out</translate-stub>
         </oc-button-stub>
@@ -40,26 +40,26 @@ exports[`User Menu component when basic quota is set renders a danger quota prog
 
 exports[`User Menu component when no quota and email is set the user menu does not contain a quota 1`] = `
 <nav aria-label="Account menu">
-  <oc-button-stub type="button" size="medium" arialabel="User Menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="_userMenuButton" class="oc-topbar-personal">
+  <oc-button-stub type="button" size="medium" arialabel="User Menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="_userMenuButton" class="oc-topbar-personal">
     <avatar-image-stub width="32" userid="einstein" class="oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle"></avatar-image-stub>
   </oc-button-stub>
   <oc-drop-stub dropid="account-info-container" toggle="#_userMenuButton" position="bottom-start" mode="click" closeonclick="true" paddingsize="small">
     <oc-list-stub class="user-menu-list">
       <li>
-        <oc-button-stub type="router-link" size="medium" to="[object Object]" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-manage">
+        <oc-button-stub type="router-link" size="medium" to="[object Object]" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-manage">
           <avatar-image-stub width="32" userid="einstein"></avatar-image-stub> <span class="profile-info-wrapper oc-py-xs"><span></span>
           <!---->
           <!----></span>
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub type="router-link" size="medium" to="[object Object]" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
+        <oc-button-stub type="router-link" size="medium" to="[object Object]" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
           <oc-icon-stub name="application" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color="" class="oc-p-xs"></oc-icon-stub>
           <translate-stub tag="span">Settings</translate-stub>
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-logout">
+        <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-logout">
           <oc-icon-stub name="logout-box-r" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" class="oc-p-xs"></oc-icon-stub>
           <translate-stub tag="span">Log out</translate-stub>
         </oc-button-stub>
@@ -72,26 +72,26 @@ exports[`User Menu component when no quota and email is set the user menu does n
 
 exports[`User Menu component when no quota and no email is set the user menu does not contain a quota 1`] = `
 <nav aria-label="Account menu">
-  <oc-button-stub type="button" size="medium" arialabel="User Menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="_userMenuButton" class="oc-topbar-personal">
+  <oc-button-stub type="button" size="medium" arialabel="User Menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="_userMenuButton" class="oc-topbar-personal">
     <avatar-image-stub width="32" userid="einstein" class="oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle"></avatar-image-stub>
   </oc-button-stub>
   <oc-drop-stub dropid="account-info-container" toggle="#_userMenuButton" position="bottom-start" mode="click" closeonclick="true" paddingsize="small">
     <oc-list-stub class="user-menu-list">
       <li>
-        <oc-button-stub type="router-link" size="medium" to="[object Object]" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-manage">
+        <oc-button-stub type="router-link" size="medium" to="[object Object]" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-manage">
           <avatar-image-stub width="32" userid="einstein"></avatar-image-stub> <span class="profile-info-wrapper oc-py-xs"><span></span>
           <!---->
           <!----></span>
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub type="router-link" size="medium" to="[object Object]" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
+        <oc-button-stub type="router-link" size="medium" to="[object Object]" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
           <oc-icon-stub name="application" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color="" class="oc-p-xs"></oc-icon-stub>
           <translate-stub tag="span">Settings</translate-stub>
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-logout">
+        <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-logout">
           <oc-icon-stub name="logout-box-r" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" class="oc-p-xs"></oc-icon-stub>
           <translate-stub tag="span">Log out</translate-stub>
         </oc-button-stub>
@@ -104,26 +104,26 @@ exports[`User Menu component when no quota and no email is set the user menu doe
 
 exports[`User Menu component when quota and no email is set renders a navigation without email 1`] = `
 <nav aria-label="Account menu">
-  <oc-button-stub type="button" size="medium" arialabel="User Menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="_userMenuButton" class="oc-topbar-personal">
+  <oc-button-stub type="button" size="medium" arialabel="User Menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="_userMenuButton" class="oc-topbar-personal">
     <avatar-image-stub width="32" userid="einstein" class="oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle"></avatar-image-stub>
   </oc-button-stub>
   <oc-drop-stub dropid="account-info-container" toggle="#_userMenuButton" position="bottom-start" mode="click" closeonclick="true" paddingsize="small">
     <oc-list-stub class="user-menu-list">
       <li>
-        <oc-button-stub type="router-link" size="medium" to="[object Object]" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-manage">
+        <oc-button-stub type="router-link" size="medium" to="[object Object]" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-manage">
           <avatar-image-stub width="32" userid="einstein"></avatar-image-stub> <span class="profile-info-wrapper oc-py-xs"><span></span>
           <!---->
           <!----></span>
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub type="router-link" size="medium" to="[object Object]" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
+        <oc-button-stub type="router-link" size="medium" to="[object Object]" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
           <oc-icon-stub name="application" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color="" class="oc-p-xs"></oc-icon-stub>
           <translate-stub tag="span">Settings</translate-stub>
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-logout">
+        <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-logout">
           <oc-icon-stub name="logout-box-r" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" class="oc-p-xs"></oc-icon-stub>
           <translate-stub tag="span">Log out</translate-stub>
         </oc-button-stub>
@@ -142,26 +142,26 @@ exports[`User Menu component when quota and no email is set renders a navigation
 
 exports[`User Menu component when quota is above 80% and below 90% renders a warning quota progress bar 1`] = `
 <nav aria-label="Account menu">
-  <oc-button-stub type="button" size="medium" arialabel="User Menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="_userMenuButton" class="oc-topbar-personal">
+  <oc-button-stub type="button" size="medium" arialabel="User Menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="_userMenuButton" class="oc-topbar-personal">
     <avatar-image-stub width="32" userid="einstein" class="oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle"></avatar-image-stub>
   </oc-button-stub>
   <oc-drop-stub dropid="account-info-container" toggle="#_userMenuButton" position="bottom-start" mode="click" closeonclick="true" paddingsize="small">
     <oc-list-stub class="user-menu-list">
       <li>
-        <oc-button-stub type="router-link" size="medium" to="[object Object]" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-manage">
+        <oc-button-stub type="router-link" size="medium" to="[object Object]" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-manage">
           <avatar-image-stub width="32" userid="einstein"></avatar-image-stub> <span class="profile-info-wrapper oc-py-xs"><span></span>
           <!---->
           <!----></span>
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub type="router-link" size="medium" to="[object Object]" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
+        <oc-button-stub type="router-link" size="medium" to="[object Object]" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
           <oc-icon-stub name="application" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color="" class="oc-p-xs"></oc-icon-stub>
           <translate-stub tag="span">Settings</translate-stub>
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-logout">
+        <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-logout">
           <oc-icon-stub name="logout-box-r" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" class="oc-p-xs"></oc-icon-stub>
           <translate-stub tag="span">Log out</translate-stub>
         </oc-button-stub>
@@ -180,26 +180,26 @@ exports[`User Menu component when quota is above 80% and below 90% renders a war
 
 exports[`User Menu component when quota is below 80% renders a primary quota progress bar 1`] = `
 <nav aria-label="Account menu">
-  <oc-button-stub type="button" size="medium" arialabel="User Menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="_userMenuButton" class="oc-topbar-personal">
+  <oc-button-stub type="button" size="medium" arialabel="User Menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="_userMenuButton" class="oc-topbar-personal">
     <avatar-image-stub width="32" userid="einstein" class="oc-topbar-personal-avatar oc-flex-inline oc-flex-center oc-flex-middle"></avatar-image-stub>
   </oc-button-stub>
   <oc-drop-stub dropid="account-info-container" toggle="#_userMenuButton" position="bottom-start" mode="click" closeonclick="true" paddingsize="small">
     <oc-list-stub class="user-menu-list">
       <li>
-        <oc-button-stub type="router-link" size="medium" to="[object Object]" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-manage">
+        <oc-button-stub type="router-link" size="medium" to="[object Object]" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-manage">
           <avatar-image-stub width="32" userid="einstein"></avatar-image-stub> <span class="profile-info-wrapper oc-py-xs"><span></span>
           <!---->
           <!----></span>
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub type="router-link" size="medium" to="[object Object]" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
+        <oc-button-stub type="router-link" size="medium" to="[object Object]" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
           <oc-icon-stub name="application" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color="" class="oc-p-xs"></oc-icon-stub>
           <translate-stub tag="span">Settings</translate-stub>
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-logout">
+        <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="oc-topbar-account-logout">
           <oc-icon-stub name="logout-box-r" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color="" class="oc-p-xs"></oc-icon-stub>
           <translate-stub tag="span">Log out</translate-stub>
         </oc-button-stub>
diff --git a/tests/acceptance/pageObjects/webPage.js b/tests/acceptance/pageObjects/webPage.js
index 72259522f08..fe7abb66e7f 100644
--- a/tests/acceptance/pageObjects/webPage.js
+++ b/tests/acceptance/pageObjects/webPage.js
@@ -298,7 +298,8 @@ module.exports = {
       selector: '.oc-app-navigation-toggle'
     },
     menuItem: {
-      selector: '//nav[contains(@class, "oc-sidebar-nav")]/ul/li/a/span[contains(text(),"%s")]',
+      selector:
+        '//nav[contains(@class, "oc-sidebar-nav")]/ul/li/a/span/span[contains(text(),"%s")]',
       locateStrategy: 'xpath'
     },
     logoutMenuItem: {
diff --git a/yarn.lock b/yarn.lock
index 0144038b8e9..0366617feb3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9595,9 +9595,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"owncloud-design-system@npm:^12.2.2":
-  version: 12.2.2
-  resolution: "owncloud-design-system@npm:12.2.2"
+"owncloud-design-system@npm:^13.0.0-rc.1":
+  version: 13.0.0-rc.1
+  resolution: "owncloud-design-system@npm:13.0.0-rc.1"
   peerDependencies:
     "@popperjs/core": ^2.4.0
     "@vue/composition-api": ^1.4.3
@@ -9614,7 +9614,7 @@ __metadata:
     vue-inline-svg: ^2.0.0
     vue-select: ^3.12.0
     webfontloader: ^1.6.28
-  checksum: de7b59f9fb7626f5cd9a44380d766c368262922b15379e88479a5e4028b851e5cea6dc4f4b532a34eb799782534e442e81619b1f77596a71f2acb6216f3804a1
+  checksum: 366d0d4484533b4b84cbc1f51ac08e4f596f104ee09ef44a4d2b00c445c1343f9deeea3da2bff369097adfcfe6b3b9dfecc40db14c088948149b2da94ce6fcad
   languageName: node
   linkType: hard
 
@@ -13604,7 +13604,7 @@ __metadata:
     luxon: ^2.3.0
     marked: ^4.0.12
     oidc-client: 1.11.5
-    owncloud-design-system: ^12.2.2
+    owncloud-design-system: ^13.0.0-rc.1
     owncloud-sdk: ~2.1.0-alpha.3
     p-queue: ^6.1.1
     popper-max-size-modifier: ^0.2.0