upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-06-07 15:53:04 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

fix(files): Remove confusing table header labels

Browse source 
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>
This commit is contained in:
Ferdinand Thiessen 2023-12-01 02:33:52 +01:00
parent 782160af76
commit 9d6c2ae264
No known key found for this signature in database
GPG key ID: 45FAE7268762B400
2 changed files with 11 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
apps/files/src/components/FilesListTableHeaderButton.vue
View file

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

3
apps/files/src/components/FilesListVirtual.vue
View file

@ -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}`
},
},