fix(files): make table view a valid html table

<div> is not allowed as a <table> child

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

3 files changed, 38 insertions, 33 deletions

diff --git a/apps/files/src/components/FileEntry/FileEntryActions.vue b/apps/files/src/components/FileEntry/FileEntryActions.vue
index de790b0b78c..fa15a5f8d59 100644
--- a/apps/files/src/components/FileEntry/FileEntryActions.vue
+++ b/apps/files/src/components/FileEntry/FileEntryActions.vue
@@ -251,7 +251,7 @@ export default Vue.extend({
 		 * sure there is one at the time we call it.
 		 */
 		getBoundariesElement() {
-			return document.querySelector('.app-content > table.files-list')
+			return document.querySelector('.app-content > .files-list')
 		},
 	},
 
diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 697ecce641a..a196836f3f9 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -305,12 +305,11 @@ export default Vue.extend({
 	--clickable-area: 44px;
 	--icon-preview-size: 32px;
 
-	display: block;
 	overflow: auto;
 	height: 100%;
 	will-change: scroll-position;
 
-	&::v-deep {
+	& :deep() {
 		// Table head, body and footer
 		tbody {
 			will-change: padding;
@@ -337,6 +336,10 @@ export default Vue.extend({
 			flex-direction: column;
 		}
 
+		.files-list__table {
+			display: block;
+		}
+
 		.files-list__thead,
 		.files-list__tfoot {
 			display: flex;
diff --git a/apps/files/src/components/VirtualList.vue b/apps/files/src/components/VirtualList.vue
index 6db3dd9653e..2191d7904f5 100644
--- a/apps/files/src/components/VirtualList.vue
+++ b/apps/files/src/components/VirtualList.vue
@@ -1,40 +1,42 @@
 <template>
-	<table class="files-list" data-cy-files-list>
+	<div class="files-list" data-cy-files-list>
 		<!-- Header -->
 		<div ref="before" class="files-list__before">
 			<slot name="before" />
 		</div>
 
-		<!-- Accessibility table caption for screen readers -->
-		<caption v-if="caption" class="hidden-visually">
-			{{ caption }}
-		</caption>
+		<table class="files-list__table">
+			<!-- Accessibility table caption for screen readers -->
+			<caption v-if="caption" class="hidden-visually">
+				{{ caption }}
+			</caption>
 
-		<!-- Header -->
-		<thead ref="thead" class="files-list__thead" data-cy-files-list-thead>
-			<slot name="header" />
-		</thead>
+			<!-- Header -->
+			<thead ref="thead" class="files-list__thead" data-cy-files-list-thead>
+				<slot name="header" />
+			</thead>
 
-		<!-- Body -->
-		<tbody :style="tbodyStyle"
-			class="files-list__tbody"
-			:class="gridMode ? 'files-list__tbody--grid' : 'files-list__tbody--list'"
-			data-cy-files-list-tbody>
-			<component :is="dataComponent"
-				v-for="({key, item}, i) in renderedItems"
-				:key="key"
-				:source="item"
-				:index="i"
-				v-bind="extraProps" />
-		</tbody>
+			<!-- Body -->
+			<tbody :style="tbodyStyle"
+				class="files-list__tbody"
+				:class="gridMode ? 'files-list__tbody--grid' : 'files-list__tbody--list'"
+				data-cy-files-list-tbody>
+				<component :is="dataComponent"
+					v-for="({key, item}, i) in renderedItems"
+					:key="key"
+					:source="item"
+					:index="i"
+					v-bind="extraProps" />
+			</tbody>
 
-		<!-- Footer -->
-		<tfoot v-show="isReady"
-			class="files-list__tfoot"
-			data-cy-files-list-tfoot>
-			<slot name="footer" />
-		</tfoot>
-	</table>
+			<!-- Footer -->
+			<tfoot v-show="isReady"
+				class="files-list__tfoot"
+				data-cy-files-list-tfoot>
+				<slot name="footer" />
+			</tfoot>
+		</table>
+	</div>
 </template>
 
 <script lang="ts">
@@ -244,13 +246,13 @@ export default Vue.extend({
 
 		onScroll() {
 			this._onScrollHandle ??= requestAnimationFrame(() => {
-				this._onScrollHandle = null;
+				this._onScrollHandle = null
 				const topScroll = this.$el.scrollTop - this.beforeHeight
 				const index = Math.floor(topScroll / this.itemHeight) * this.columnCount
 				// Max 0 to prevent negative index
 				this.index = Math.max(0, index)
 				this.$emit('scroll')
-			});
+			})
 		},
 	},
 })