Merge pull request #41991 from nextcloud/fix/backport-table-labels

[stable28]  fix(files): Remove confusing table header labels

apps/files/src/components/FilesListTableHeaderButton.vue

@@ -20,10 +20,11 @@
   -
   -->
 <template>
-	<NcButton :aria-label="sortAriaLabel(name)"
-		:class="{'files-list__column-sort-button--active': sortingMode === mode}"
-		:alignment="mode !== 'size' ? 'start-reverse' : undefined"
-		class="files-list__column-sort-button"
+	<NcButton :class="['files-list__column-sort-button', {
+			'files-list__column-sort-button--active': sortingMode === mode,
+			'files-list__column-sort-button--size': sortingMode === 'size',
+		}]"
+		:alignment="mode === 'size' ? 'end' : 'start-reverse'"
 		type="tertiary"
 		@click.stop.prevent="toggleSortBy(mode)">
 		<!-- Sort icon before text as size is align right -->
@@ -35,14 +36,15 @@
 
 <script lang="ts">
 import { translate } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
+
 import MenuDown from 'vue-material-design-icons/MenuDown.vue'
 import MenuUp from 'vue-material-design-icons/MenuUp.vue'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import Vue from 'vue'
 
-import filesSortingMixin from '../mixins/filesSorting.ts'
+import filesSortingMixin from '../mixins/filesSorting.js'
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'FilesListTableHeaderButton',
 
 	components: {
@@ -67,12 +69,6 @@ export default Vue.extend({
 	},
 
 	methods: {
-		sortAriaLabel(column) {
-			return this.t('files', 'Sort list by {column}', {
-				column,
-			})
-		},
-
 		t: translate,
 	},
 })

apps/files/src/components/FilesListVirtual.vue

@@ -199,8 +199,9 @@ export default Vue.extend({
 		caption() {
 			const defaultCaption = t('files', 'List of files and folders.')
 			const viewCaption = this.currentView.caption || defaultCaption
+			const sortableCaption = t('files', 'Column headers with buttons are sortable.')
 			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
+			return `${viewCaption}\n${sortableCaption}\n${virtualListNote}`
 		},
 	},