Merge pull request #41577 from nextcloud/fix/41568/files-list--valid-table-layout

fix(files): make files list valid table layout

Author: ShGKme

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')
 		},
 	},
 

apps/files/src/components/FilesListVirtual.vue

@@ -39,15 +39,9 @@
 				filesListWidth,
 			}"
 			:scroll-to-index="scrollToIndex"
+			:caption="caption"
 			@scroll="onScroll">
-			<!-- Accessibility description and headers -->
 			<template #before>
-				<!-- Accessibility description -->
-				<caption class="hidden-visually">
-					{{ currentView.caption || t('files', 'List of files and folders.') }}
-					{{ t('files', 'This list is not fully rendered for performance reasons. The files will be rendered as you navigate through the list.') }}
-				</caption>
-
 				<!-- Headers -->
 				<FilesListHeader v-for="header in sortedHeaders"
 					:key="header.id"
@@ -200,6 +194,13 @@ export default Vue.extend({
 		canUpload() {
 			return this.currentFolder && (this.currentFolder.permissions & Permission.CREATE) !== 0
 		},
+
+		caption() {
+			const defaultCaption = t('files', 'List of files and folders.')
+			const viewCaption = this.currentView.caption || defaultCaption
+			const virtualListNote = t('files', 'This list is not fully rendered for performance reasons. The files will be rendered as you navigate through the list.')
+			return viewCaption + '\n' + virtualListNote
+		},
 	},
 
 	watch: {
@@ -304,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;
@@ -336,6 +336,10 @@ export default Vue.extend({
 			flex-direction: column;
 		}
 
+		.files-list__table {
+			display: block;
+		}
+
 		.files-list__thead,
 		.files-list__tfoot {
 			display: flex;

apps/files/src/components/VirtualList.vue

@@ -1,35 +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>
 
-		<!-- 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>
-
-		<!-- Footer -->
-		<tfoot v-show="isReady"
-			class="files-list__tfoot"
-			data-cy-files-list-tfoot>
-			<slot name="footer" />
-		</tfoot>
-	</table>
+		<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>
+
+			<!-- 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>
+	</div>
 </template>
 
 <script lang="ts">
@@ -75,6 +82,13 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Visually hidden caption for the table accesibility
+		 */
+		caption: {
+			type: String,
+			default: '',
+		},
 	},
 
 	data() {
@@ -232,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')
-			});
+			})
 		},
 	},
 })