fix(files): make caption a direct child of the files table

Otherwise it is not valid and does not ception the table.

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

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: {

apps/files/src/components/VirtualList.vue

@@ -5,6 +5,11 @@
 			<slot name="before" />
 		</div>
 
+		<!-- 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" />
@@ -75,6 +80,13 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Visually hidden caption for the table accesibility
+		 */
+		caption: {
+			type: String,
+			default: '',
+		},
 	},
 
 	data() {