fix(files): Remove confusing table header labels

For screen readers the table header was very verbose and confusing,
as the SR reads out e.g. "sort list by name button FILENAME" for every row / file.
Instead reduce it to "name button FILENAME" and add information about sorting to caption, as recommended by WCAG [1]

[1]: https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

diff --git a/apps/files/src/components/FilesListTableHeaderButton.vue b/apps/files/src/components/FilesListTableHeaderButton.vue
index a996f974532845516357c450b2f8e4b6e7b1a5ad..955f25016abdf0081783d4dcbbad4abb23d9b258 100644 (file)
--- a/apps/files/src/components/FilesListTableHeaderButton.vue
+++ b/apps/files/src/components/FilesListTableHeaderButton.vue
@@ -25,7 +25,6 @@
                        'files-list__column-sort-button--active': sortingMode === mode,
                        'files-list__column-sort-button--size': sortingMode === 'size',
                }]"
-               :aria-label="sortAriaLabel"
                :alignment="mode === 'size' ? 'end' : 'start-reverse'"
                type="tertiary"
                @click="toggleSortBy(mode)">
@@ -71,13 +70,6 @@ export default defineComponent({
                },
        },
 
-       computed: {
-               sortAriaLabel() {
-                       return this.t('files', 'Sort list by {column}', {
-                               column: this.name,
-                       })
-               },
-       },
        methods: {
                t: translate,
        },

diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index ef2af91f1abb860a8fa61835ec10165b6df5543c..e0f2c50b87f91fb5c67c67fa7676146687b3ca3b 100644 (file)
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -182,8 +182,9 @@ export default defineComponent({
                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}`
                },
        },