Skip to content

Commit 1b47290

Browse files
fix(files-list): connect aria-sort to filesSortingStore and fix column accessibility
- Import and expose filesSortingStore via setup() replacing dead local data() properties - Fix ariaSortForMode('basename') -> ariaSortForMode('name') mismatch with button mode prop - Return 'none' instead of null for sortable-but-inactive columns (required by ARIA spec) - Add scope="col" to all <th> elements so screen readers associate headers with columns Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
1 parent 41802f0 commit 1b47290

1 file changed

Lines changed: 20 additions & 9 deletions

File tree

src/views/FilesList/FilesListTableHeader.vue

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<tr v-if="filesStore.ordered.length > 0"
77
class="files-list__row-head">
88
<th class="files-list__column files-list__row-checkbox"
9+
scope="col"
910
@keyup.esc.exact="resetSelection">
1011
<NcCheckboxRadioSwitch v-bind="selectAllBind" @update:modelValue="onToggleAll" />
1112
</th>
@@ -14,7 +15,8 @@
1415

1516
<!-- Link to file -->
1617
<th class="files-list__column files-list__row-name files-list__column--sortable"
17-
:aria-sort="ariaSortForMode('basename')">
18+
scope="col"
19+
:aria-sort="ariaSortForMode('name')">
1820
<!-- Icon or preview -->
1921
<span class="files-list__row-icon" />
2022

@@ -23,13 +25,14 @@
2325
</th>
2426

2527
<!-- Actions -->
26-
<th class="files-list__row-actions" />
28+
<th class="files-list__row-actions" scope="col" />
2729

2830
<!-- Custom views columns -->
2931
<th v-for="column in columns"
3032
:key="column.id"
33+
scope="col"
3134
:class="classForColumn(column)"
32-
:aria-sort="ariaSortForMode(column.id)">
35+
:aria-sort="ariaSortForMode(column.id, !!column.sort)">
3336
<FilesListTableHeaderButton v-if="!!column.sort" :name="column.title" :mode="column.id" />
3437
<span v-else>
3538
{{ column.title }}
@@ -47,6 +50,7 @@ import FilesListTableHeaderButton from './FilesListTableHeaderButton.vue'
4750
4851
import logger from '../../logger.js'
4952
import { useFilesStore } from '../../store/files.js'
53+
import { useFilesSortingStore } from '../../store/filesSorting.js'
5054
import { useSelectionStore } from '../../store/selection.js'
5155
5256
export default {
@@ -65,17 +69,17 @@ export default {
6569
},
6670
setup() {
6771
const filesStore = useFilesStore()
72+
const filesSortingStore = useFilesSortingStore()
6873
const selectionStore = useSelectionStore()
6974
return {
7075
t,
7176
filesStore,
77+
filesSortingStore,
7278
selectionStore,
7379
}
7480
},
7581
data() {
7682
return {
77-
isAscSorting: false,
78-
sortingMode: 'name',
7983
columns: [
8084
{
8185
title: t('libresign', 'Status'),
@@ -120,11 +124,18 @@ export default {
120124
},
121125
},
122126
methods: {
123-
ariaSortForMode(mode) {
124-
if (this.sortingMode === mode) {
125-
return this.isAscSorting ? 'ascending' : 'descending'
127+
// Returns the aria-sort value for a given column mode.
128+
// Sortable columns that are not currently active must declare aria-sort="none"
129+
// so screen readers announce that the column can be sorted.
130+
// Non-sortable columns should have no aria-sort attribute at all (return null).
131+
ariaSortForMode(mode, isSortable = true) {
132+
if (!isSortable) {
133+
return null
126134
}
127-
return null
135+
if (this.filesSortingStore.sortingMode === mode) {
136+
return this.filesSortingStore.sortingDirection === 'asc' ? 'ascending' : 'descending'
137+
}
138+
return 'none'
128139
},
129140
classForColumn(column) {
130141
return {

0 commit comments

Comments
 (0)