diff options
| author | Christopher Ng <chrng8@gmail.com> | 2023-10-12 14:46:51 -0700 |
|---|---|---|
| committer | Ferdinand Thiessen <opensource@fthiessen.de> | 2023-10-14 21:29:48 +0200 |
| commit | cbb7085cfe4ccee1cf3ee0d35fc55f96d2b0bb81 (patch) | |
| tree | b6b758a166b0b097270f63ff936853226fe3d656 /apps/files/src/components/FilesListTableHeader.vue | |
| parent | 6f18732c35cffdd6b629c5594351971882a578e0 (diff) | |
| download | nextcloud-server-cbb7085cfe4ccee1cf3ee0d35fc55f96d2b0bb81.tar.gz nextcloud-server-cbb7085cfe4ccee1cf3ee0d35fc55f96d2b0bb81.zip | |
enh(files): Add accessible sort direction
Signed-off-by: Christopher Ng <chrng8@gmail.com>
Diffstat (limited to 'apps/files/src/components/FilesListTableHeader.vue')
| -rw-r--r-- | apps/files/src/components/FilesListTableHeader.vue | 17 |
1 files changed, 14 insertions, 3 deletions
diff --git a/apps/files/src/components/FilesListTableHeader.vue b/apps/files/src/components/FilesListTableHeader.vue index 52060d2589e..e619acf0623 100644 --- a/apps/files/src/components/FilesListTableHeader.vue +++ b/apps/files/src/components/FilesListTableHeader.vue @@ -34,6 +34,7 @@ <template v-else> <!-- Link to file --> <th class="files-list__column files-list__row-name files-list__column--sortable" + :aria-sort="ariaSortForMode('basename')" @click.stop.prevent="toggleSortBy('basename')"> <!-- Icon or preview --> <span class="files-list__row-icon" /> @@ -48,21 +49,24 @@ <!-- Size --> <th v-if="isSizeAvailable" :class="{'files-list__column--sortable': isSizeAvailable}" - class="files-list__column files-list__row-size"> + class="files-list__column files-list__row-size" + :aria-sort="ariaSortForMode('size')"> <FilesListTableHeaderButton :name="t('files', 'Size')" mode="size" /> </th> <!-- Mtime --> <th v-if="isMtimeAvailable" :class="{'files-list__column--sortable': isMtimeAvailable}" - class="files-list__column files-list__row-mtime"> + class="files-list__column files-list__row-mtime" + :aria-sort="ariaSortForMode('mtime')"> <FilesListTableHeaderButton :name="t('files', 'Modified')" mode="mtime" /> </th> <!-- Custom views columns --> <th v-for="column in columns" :key="column.id" - :class="classForColumn(column)"> + :class="classForColumn(column)" + :aria-sort="ariaSortForMode(column.id)"> <FilesListTableHeaderButton v-if="!!column.sort" :name="column.title" :mode="column.id" /> <span v-else> {{ column.title }} @@ -173,6 +177,13 @@ export default Vue.extend({ }, methods: { + ariaSortForMode(mode: string): ARIAMixin['ariaSort'] { + if (this.sortingMode === mode) { + return this.isAscSorting ? 'ascending' : 'descending' + } + return null + }, + classForColumn(column) { return { 'files-list__column': true, |