diff options
| author | Ferdinand Thiessen <opensource@fthiessen.de> | 2023-12-01 02:33:52 +0100 |
|---|---|---|
| committer | Ferdinand Thiessen <opensource@fthiessen.de> | 2023-12-05 10:56:28 +0100 |
| commit | 9d6c2ae2647392f39a6ac4ef067b0d985139a7e1 (patch) | |
| tree | 28c44e67b547ed428c8e8c50f6b104afb3c6e023 /apps/files/src/components/FilesListTableHeaderButton.vue | |
| parent | 782160af76c759a8be0fd08497ea45d93c9eec5f (diff) | |
| download | nextcloud-server-9d6c2ae2647392f39a6ac4ef067b0d985139a7e1.tar.gz nextcloud-server-9d6c2ae2647392f39a6ac4ef067b0d985139a7e1.zip | |
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>
Diffstat (limited to 'apps/files/src/components/FilesListTableHeaderButton.vue')
| -rw-r--r-- | apps/files/src/components/FilesListTableHeaderButton.vue | 22 |
1 files changed, 9 insertions, 13 deletions
diff --git a/apps/files/src/components/FilesListTableHeaderButton.vue b/apps/files/src/components/FilesListTableHeaderButton.vue index 659aee8e456..80f64e3bd3a 100644 --- a/apps/files/src/components/FilesListTableHeaderButton.vue +++ b/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, }, }) |