diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index e64d4e59890..86b7d020406 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -1,9 +1,7 @@
 <template>
   <main id="files" class="oc-flex oc-height-1-1">
     <div v-if="dragareaEnabled" class="dragarea" />
-    <div ref="filesListWrapper" tabindex="-1" class="files-list-wrapper oc-width-expand">
-      <router-view id="files-view" tabindex="0" />
-    </div>
+    <router-view tabindex="0" class="oc-width-expand" />
   </main>
 </template>
 <script lang="ts">
@@ -15,10 +13,6 @@ export default defineComponent({
     dragareaEnabled: false
   }),
   created() {
-    this.$root.$on('upload-end', () => {
-      // delay for screen reader virtual buffer
-      setTimeout(() => this.$refs.filesListWrapper.focus(), 500)
-    })
     const dragOver = bus.subscribe('drag-over', this.onDragOver)
     const dragOut = bus.subscribe('drag-out', this.hideDropzone)
     const drop = bus.subscribe('drop', this.hideDropzone)
@@ -58,30 +52,8 @@ main {
   border-radius: 14px;
   border: 2px dashed var(--oc-color-swatch-primary-muted);
 }
-.files-list-wrapper {
-  position: relative;
-  overflow-y: auto;
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: max-content max-content 1fr;
-  gap: 0 0;
-  grid-template-areas:
-    'header'
-    'upload'
-    'main';
-
-  &:focus {
-    outline: none;
-  }
-}
 
 #files {
   position: relative;
 }
-
-#files-view {
-  grid-area: main;
-  z-index: 0;
-  outline: none;
-}
 </style>
diff --git a/packages/web-app-files/src/components/FilesList/Pagination.vue b/packages/web-app-files/src/components/FilesList/Pagination.vue
index aa92bab8804..087c53c51f4 100644
--- a/packages/web-app-files/src/components/FilesList/Pagination.vue
+++ b/packages/web-app-files/src/components/FilesList/Pagination.vue
@@ -24,7 +24,7 @@ export default {
   watch: {
     currentPage: {
       handler: function () {
-        document.getElementsByClassName('files-list-wrapper')[0]?.scrollTo(0, 0)
+        document.getElementsByClassName('files-view-wrapper')[0]?.scrollTo(0, 0)
       }
     }
   }
diff --git a/packages/web-app-files/src/components/FilesViewWrapper.vue b/packages/web-app-files/src/components/FilesViewWrapper.vue
new file mode 100644
index 00000000000..2bfa3218dc8
--- /dev/null
+++ b/packages/web-app-files/src/components/FilesViewWrapper.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="files-view-wrapper oc-width-expand">
+    <div id="files-view" v-bind="$attrs">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+
+export default defineComponent({
+  inheritAttrs: false
+})
+</script>
+
+<style lang="scss" scoped>
+.files-view-wrapper {
+  position: relative;
+  overflow-y: auto;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: max-content max-content 1fr;
+  gap: 0 0;
+  grid-template-areas:
+    'header'
+    'upload'
+    'main';
+
+  &:focus {
+    outline: none;
+  }
+}
+
+#files-view {
+  grid-area: main;
+  z-index: 0;
+  outline: none;
+}
+</style>
diff --git a/packages/web-app-files/src/components/TrashBin.vue b/packages/web-app-files/src/components/TrashBin.vue
index 04c16d1d768..b7cf5c64278 100644
--- a/packages/web-app-files/src/components/TrashBin.vue
+++ b/packages/web-app-files/src/components/TrashBin.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-flex">
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar :breadcrumbs="breadcrumbs" :has-bulk-actions="true" />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
@@ -45,7 +45,7 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -68,11 +68,13 @@ import { bus } from 'web-pkg/src/instance'
 import { defineComponent } from '@vue/composition-api'
 import { Resource } from 'web-client'
 import SideBar from '../components/SideBar/SideBar.vue'
+import FilesViewWrapper from './FilesViewWrapper.vue'
 
 export default defineComponent({
   name: 'TrashBin',
 
   components: {
+    FilesViewWrapper,
     AppBar,
     ResourceTable,
     AppLoadingSpinner,
diff --git a/packages/web-app-files/src/mixins/filesListScrolling.js b/packages/web-app-files/src/mixins/filesListScrolling.js
index 34b442c745c..d22c1d9dc6c 100644
--- a/packages/web-app-files/src/mixins/filesListScrolling.js
+++ b/packages/web-app-files/src/mixins/filesListScrolling.js
@@ -15,7 +15,7 @@ export default {
 
       // top reached
       if (resourceElement.getBoundingClientRect().top < topOffset) {
-        const fileListWrapperElement = document.getElementsByClassName('files-list-wrapper')[0]
+        const fileListWrapperElement = document.getElementsByClassName('files-view-wrapper')[0]
         fileListWrapperElement.scrollBy(0, -resourceElement.offsetHeight)
       }
     }
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index f12a9f6775f..67c83f71ebd 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-flex">
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
@@ -53,7 +53,7 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -82,11 +82,13 @@ import { defineComponent } from '@vue/composition-api'
 import { Resource } from 'web-client'
 import { useStore } from 'web-pkg/src/composables'
 import SideBar from '../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../components/FilesViewWrapper.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     AppBar,
     ResourceTable,
     QuickActions,
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index c8438b82ba0..b4ee0dfa23d 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="oc-flex">
     <keyboard-actions :paginated-resources="paginatedResources" />
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar
         :has-bulk-actions="true"
         :breadcrumbs="breadcrumbs"
@@ -71,7 +71,7 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -110,11 +110,13 @@ import { useGraphClient } from 'web-client/src/composables'
 import { useCapabilityShareJailEnabled, useRouteParam } from 'web-pkg/src/composables'
 import KeyboardActions from '../components/FilesList/KeyboardActions.vue'
 import SideBar from '../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../components/FilesViewWrapper.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     AppBar,
     CreateAndUpload,
     ResourceTable,
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index 2145fe520ed..68675d3ba5d 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="oc-flex">
     <keyboard-actions :paginated-resources="paginatedResources" />
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar
         :has-bulk-actions="true"
         :breadcrumbs="breadcrumbs"
@@ -64,7 +64,7 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -98,11 +98,13 @@ import { Resource } from 'web-client'
 import { usePublicLinkPassword, useStore } from 'web-pkg/src/composables'
 import KeyboardActions from '../components/FilesList/KeyboardActions.vue'
 import SideBar from '../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../components/FilesViewWrapper.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     AppBar,
     CreateAndUpload,
     ResourceTable,
diff --git a/packages/web-app-files/src/views/shares/SharedResource.vue b/packages/web-app-files/src/views/shares/SharedResource.vue
index 2df582293ba..854774956eb 100644
--- a/packages/web-app-files/src/views/shares/SharedResource.vue
+++ b/packages/web-app-files/src/views/shares/SharedResource.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="oc-flex">
     <keyboard-actions :paginated-resources="paginatedResources" />
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar
         :has-bulk-actions="true"
         :breadcrumbs="breadcrumbs"
@@ -71,7 +71,7 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -98,6 +98,9 @@ import NotFoundMessage from '../../components/FilesList/NotFoundMessage.vue'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import Pagination from '../../components/FilesList/Pagination.vue'
 import ContextActions from '../../components/FilesList/ContextActions.vue'
+import KeyboardActions from '../../components/FilesList/KeyboardActions.vue'
+import SideBar from '../../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 
 // misc
 import { VisibilityObserver } from 'web-pkg/src/observer'
@@ -111,8 +114,6 @@ import { move } from '../../helpers/resource'
 import { Resource } from 'web-client'
 import { breadcrumbsFromPath, concatBreadcrumbs } from '../../helpers/breadcrumbs'
 import { useRouteParam, useRouteQuery } from 'web-pkg/src/composables'
-import KeyboardActions from '../../components/FilesList/KeyboardActions.vue'
-import SideBar from '../../components/SideBar/SideBar.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -129,7 +130,8 @@ export default defineComponent({
     Pagination,
     ContextActions,
     KeyboardActions,
-    SideBar
+    SideBar,
+    FilesViewWrapper
   },
 
   mixins: [
diff --git a/packages/web-app-files/src/views/shares/SharedViaLink.vue b/packages/web-app-files/src/views/shares/SharedViaLink.vue
index 6556c3b0f2e..58367277095 100644
--- a/packages/web-app-files/src/views/shares/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/shares/SharedViaLink.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-flex">
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar :has-shares-navigation="true" />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
@@ -46,14 +46,13 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
 
 <script lang="ts">
 import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
-import ResourceTable from '../../components/FilesList/ResourceTable.vue'
 
 import FileActions from '../../mixins/fileActions'
 import MixinFilesListFilter from '../../mixins/filesListFilter'
@@ -68,17 +67,21 @@ import AppBar from '../../components/AppBar/AppBar.vue'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import Pagination from '../../components/FilesList/Pagination.vue'
 import ContextActions from '../../components/FilesList/ContextActions.vue'
+import SideBar from '../../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
+import ResourceTable from '../../components/FilesList/ResourceTable.vue'
+
 import { createLocationSpaces } from '../../router'
 import { useResourcesViewDefaults } from '../../composables'
 import { defineComponent } from '@vue/composition-api'
 import { Resource } from 'web-client'
 import { useStore } from 'web-pkg/src/composables'
-import SideBar from '../../components/SideBar/SideBar.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     AppBar,
     ResourceTable,
     AppLoadingSpinner,
diff --git a/packages/web-app-files/src/views/shares/SharedWithMe.vue b/packages/web-app-files/src/views/shares/SharedWithMe.vue
index 844a1e06df8..8d14d712b8f 100644
--- a/packages/web-app-files/src/views/shares/SharedWithMe.vue
+++ b/packages/web-app-files/src/views/shares/SharedWithMe.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-flex">
-    <div class="oc-width-expand oc-flex-column">
+    <files-view-wrapper class="oc-flex-column">
       <app-bar :has-shares-navigation="true" :has-bulk-actions="true" />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
@@ -45,7 +45,7 @@
           :resource-clickable="false"
         />
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -61,9 +61,11 @@ import { ShareStatus } from 'web-client/src/helpers/share'
 import { computed, defineComponent, unref } from '@vue/composition-api'
 import { Resource } from 'web-client'
 import SideBar from '../../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     AppBar,
     AppLoadingSpinner,
     SharedWithMeSection,
diff --git a/packages/web-app-files/src/views/shares/SharedWithOthers.vue b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
index 8a4af73b69e..5939e2fede1 100644
--- a/packages/web-app-files/src/views/shares/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-flex">
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar :has-shares-navigation="true" />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
@@ -48,14 +48,13 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
 
 <script lang="ts">
 import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
-import ResourceTable from '../../components/FilesList/ResourceTable.vue'
 
 import FileActions from '../../mixins/fileActions'
 import MixinFilesListFilter from '../../mixins/filesListFilter'
@@ -64,23 +63,27 @@ import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from '../../constants'
 import debounce from 'lodash-es/debounce'
 
+import ResourceTable from '../../components/FilesList/ResourceTable.vue'
 import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import AppBar from '../../components/AppBar/AppBar.vue'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import Pagination from '../../components/FilesList/Pagination.vue'
 import ContextActions from '../../components/FilesList/ContextActions.vue'
+import SideBar from '../../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
+
 import { createLocationSpaces } from '../../router'
 import { useResourcesViewDefaults } from '../../composables'
 import { defineComponent } from '@vue/composition-api'
 import { Resource } from 'web-client'
 import { useStore } from 'web-pkg/src/composables'
-import SideBar from '../../components/SideBar/SideBar.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     AppBar,
     ResourceTable,
     AppLoadingSpinner,
diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue
index 9074fa67501..b789c4bab42 100644
--- a/packages/web-app-files/src/views/spaces/Project.vue
+++ b/packages/web-app-files/src/views/spaces/Project.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="space-overview oc-flex">
     <keyboard-actions :paginated-resources="paginatedResources" />
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar
         :has-bulk-actions="true"
         :breadcrumbs="breadcrumbs"
@@ -127,7 +127,7 @@
           </template>
         </resource-table>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -165,11 +165,13 @@ import QuickActions from '../../components/FilesList/QuickActions.vue'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { buildWebDavSpacesPath } from 'web-client/src/helpers'
 import SideBar from '../../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     SideBar,
     AppBar,
     CreateAndUpload,
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 677630e06a0..a73f24dabb0 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-flex">
-    <div class="oc-width-expand">
+    <files-view-wrapper>
       <app-bar
         class="oc-border-b"
         :breadcrumbs="breadcrumbs"
@@ -132,7 +132,7 @@
           </ul>
         </div>
       </template>
-    </div>
+    </files-view-wrapper>
     <side-bar />
   </div>
 </template>
@@ -155,9 +155,11 @@ import { useGraphClient } from 'web-client/src/composables'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { buildSpace, buildWebDavSpacesPath } from 'web-client/src/helpers'
 import SideBar from '../../components/SideBar/SideBar.vue'
+import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 
 export default defineComponent({
   components: {
+    FilesViewWrapper,
     SideBar,
     AppBar,
     AppLoadingSpinner,
diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index b20ebf7e00d..7f9a3c3ad2c 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -550,7 +550,6 @@ export default {
 #upload-info {
   background-color: var(--oc-color-background-secondary);
   width: 400px;
-  z-index: 4;
 
   @media (max-width: 640px) {
     margin: 0 auto;
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index eb377cce9d8..bfae5922609 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -203,6 +203,7 @@ export default defineComponent({
     position: absolute;
     right: 20px;
     bottom: 20px;
+    z-index: 1040;
 
     @media (max-width: 640px) {
       left: 0;
diff --git a/tests/acceptance/pageObjects/FilesPageElement/filesList.js b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
index 0a8ea383121..1084e9382da 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/filesList.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
@@ -678,7 +678,7 @@ module.exports = {
   },
   elements: {
     filesContainer: {
-      selector: '.files-list-wrapper'
+      selector: '.files-view-wrapper'
     },
     filesAppBar: {
       selector: '#files-app-bar'