From bb12b8e0427e9a3845d8d618727f5644930e4f0f Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Fri, 1 Dec 2023 02:33:52 +0100 Subject: [PATCH] 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 --- apps/files/src/components/FilesListTableHeaderButton.vue | 8 -------- apps/files/src/components/FilesListVirtual.vue | 3 ++- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/apps/files/src/components/FilesListTableHeaderButton.vue b/apps/files/src/components/FilesListTableHeaderButton.vue index a996f974532..955f25016ab 100644 --- 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 ef2af91f1ab..e0f2c50b87f 100644 --- 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}` }, }, -- 2.39.5