Skip to content

Commit ecd5fa0

Browse files
vitormattosvitormattos
authored
Merge pull request #7057 from LibreSign/backport/7056/stable33
[stable33] fix: files list sort accessibility
2 parents dd2ba82 + 8ebda8c commit ecd5fa0

6 files changed

Lines changed: 527 additions & 20 deletions

‎playwright/e2e/delete-pending-request.spec.ts‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/**
2+
* SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
3+
* SPDX-License-Identifier: AGPL-3.0-or-later
4+
*/
5+
6+
import { expect, test } from '@playwright/test'
7+
import { login } from '../support/nc-login'
8+
import { configureOpenSsl, setAppConfig } from '../support/nc-provisioning'
9+
10+
test('delete pending signature request', async ({ page }) => {
11+
await login(
12+
page.request,
13+
process.env.NEXTCLOUD_ADMIN_USER ?? 'admin',
14+
process.env.NEXTCLOUD_ADMIN_PASSWORD ?? 'admin',
15+
)
16+
17+
await configureOpenSsl(page.request, 'LibreSign Test', {
18+
C: 'BR',
19+
OU: ['Organization Unit'],
20+
ST: 'Rio de Janeiro',
21+
O: 'LibreSign',
22+
L: 'Rio de Janeiro',
23+
})
24+
25+
await setAppConfig(
26+
page.request,
27+
'libresign',
28+
'identify_methods',
29+
JSON.stringify([
30+
{ name: 'account', enabled: true, mandatory: true, signatureMethods: { clickToSign: { enabled: true } } },
31+
{ name: 'email', enabled: false, mandatory: false },
32+
]),
33+
)
34+
35+
await page.goto('./apps/libresign')
36+
await page.getByRole('button', { name: 'Upload from URL' }).click()
37+
await page.getByRole('textbox', { name: 'URL of a PDF file' }).fill('https://raw.githubusercontent.com/LibreSign/libresign/main/tests/php/fixtures/pdfs/small_valid.pdf')
38+
await page.getByRole('button', { name: 'Send' }).click()
39+
await page.getByRole('button', { name: 'Add signer' }).click()
40+
await page.getByPlaceholder('Account').fill('a')
41+
await page.getByRole('option', { name: 'admin@email.tld' }).click()
42+
await page.getByRole('button', { name: 'Save' }).click()
43+
await page.getByRole('button', { name: 'Request signatures' }).click()
44+
await page.getByRole('button', { name: 'Send' }).click()
45+
46+
// Navigate to the Files list and ensure it is sorted by Created at, newest first
47+
await page.locator('#fileslist').getByRole('link', { name: 'Files' }).click()
48+
const createdAtTh = page.getByRole('columnheader', { name: 'Created at' })
49+
const sortDirection = await createdAtTh.evaluate((el: HTMLElement) => el.ariaSort)
50+
if (sortDirection !== 'descending') {
51+
await page.getByRole('button', { name: 'Created at' }).click()
52+
if (sortDirection === 'none') {
53+
// Column was sortable but not active: first click set it to ascending, one more for descending
54+
await page.getByRole('button', { name: 'Created at' }).click()
55+
}
56+
}
57+
58+
// The most recently uploaded document is first — rename it to a unique name
59+
// so it can be unambiguously identified regardless of other documents in the list.
60+
// NcActionButton inside NcActions renders as role="menuitem", not role="button".
61+
const uniqueName = `delete-pending-test-${Date.now()}`
62+
const firstRow = page.locator('[data-cy-files-list-tbody] tr.files-list__row')
63+
.filter({ hasText: 'small_valid' })
64+
.first()
65+
await firstRow.getByRole('button', { name: 'Actions' }).click()
66+
await page.getByRole('menuitem', { name: 'Rename' }).click()
67+
await page.getByLabel('File name').fill(uniqueName)
68+
await page.getByLabel('File name').press('Enter')
69+
70+
// Find the row by its unique name and assert the status
71+
const targetRow = page.locator('[data-cy-files-list-tbody] tr.files-list__row')
72+
.filter({ hasText: uniqueName })
73+
await expect(targetRow.locator('.status-chip__text')).toHaveText('Ready to sign')
74+
75+
// Delete it
76+
await targetRow.getByRole('button', { name: 'Actions' }).click()
77+
await page.getByRole('menuitem', { name: 'Delete' }).click()
78+
79+
// Confirm the deletion in the dialog
80+
await expect(page.getByRole('dialog', { name: 'Confirm' })).toBeVisible()
81+
await expect(page.getByText('The signature request will be deleted. Do you confirm this action?')).toBeVisible()
82+
await page.getByRole('button', { name: 'Ok' }).click()
83+
84+
// The specific row we deleted must disappear from the list
85+
await expect(targetRow).toBeHidden()
86+
})
87+

‎playwright/e2e/visible-element-persistence.spec.ts‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
/**
2+
* SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
3+
* SPDX-License-Identifier: AGPL-3.0-or-later
4+
*/
5+
6+
import { expect, test } from '@playwright/test'
7+
import { login } from '../support/nc-login'
8+
import { configureOpenSsl, setAppConfig } from '../support/nc-provisioning'
9+
10+
test('visible signature element persists and can be deleted', async ({ page }) => {
11+
await login(
12+
page.request,
13+
process.env.NEXTCLOUD_ADMIN_USER ?? 'admin',
14+
process.env.NEXTCLOUD_ADMIN_PASSWORD ?? 'admin',
15+
)
16+
17+
await configureOpenSsl(page.request, 'LibreSign Test', {
18+
C: 'BR',
19+
OU: ['Organization Unit'],
20+
ST: 'Rio de Janeiro',
21+
O: 'LibreSign',
22+
L: 'Rio de Janeiro',
23+
})
24+
25+
await setAppConfig(
26+
page.request,
27+
'libresign',
28+
'identify_methods',
29+
JSON.stringify([
30+
{ name: 'account', enabled: true, mandatory: true, signatureMethods: { clickToSign: { enabled: true } } },
31+
{ name: 'email', enabled: false, mandatory: false },
32+
]),
33+
)
34+
35+
await page.goto('./apps/libresign')
36+
await page.getByRole('button', { name: 'Upload from URL' }).click()
37+
await page.getByRole('textbox', { name: 'URL of a PDF file' }).fill('https://raw.githubusercontent.com/LibreSign/libresign/main/tests/php/fixtures/pdfs/small_valid.pdf')
38+
await page.getByRole('button', { name: 'Send' }).click()
39+
await page.getByRole('button', { name: 'Add signer' }).click()
40+
await page.getByPlaceholder('Account').fill('a')
41+
await page.getByRole('option', { name: 'admin@email.tld' }).click()
42+
await page.getByRole('textbox', { name: 'Signer name' }).click()
43+
await page.getByRole('textbox', { name: 'Signer name' }).press('ControlOrMeta+a')
44+
await page.getByRole('textbox', { name: 'Signer name' }).fill('Admin Name')
45+
46+
// Save the signer first, then open the signature positions modal
47+
await page.getByRole('button', { name: 'Save' }).click()
48+
await page.getByRole('button', { name: 'Setup signature positions' }).click()
49+
await expect(page.getByLabel('Page 1 of 1.')).toBeVisible()
50+
51+
// Select the signer to enter element-placement mode
52+
await page.getByLabel('Signature positions').getByRole('link', { name: 'Edit signer Admin Name' }).click()
53+
await expect(page.getByText('Click on the place you want to add.')).toBeVisible()
54+
55+
// Placing a signature element requires three steps:
56+
// 1. hover() triggers handleMouseMove, setting previewVisible=true inside a rAF callback.
57+
// 2. Waiting for .preview-element confirms the rAF ran.
58+
// 3. click() fires mouseup, which calls finishAdding() and places the element.
59+
const overlay = page.getByLabel('Page 1 of 1. Press Enter or Space to place the signature here.')
60+
await overlay.hover()
61+
await page.getByLabel('Signature positions').locator('.preview-element').first().waitFor({ state: 'visible' })
62+
await overlay.click()
63+
64+
await expect(
65+
page.getByLabel('Signature positions').getByRole('img', { name: 'Signature position for Admin Name' }),
66+
).toBeVisible()
67+
68+
// Save closes the modal and persists the element via API
69+
await page.getByLabel('Signature positions').getByRole('button', { name: 'Save' }).click()
70+
71+
// Navigate to the Files list and ensure it is sorted by Created at, newest first (descending)
72+
await page.locator('#fileslist').getByRole('link', { name: 'Files' }).click()
73+
const createdAtTh = page.locator('th.files-list__row-created_at')
74+
const sortDirection = await createdAtTh.getAttribute('aria-sort')
75+
if (sortDirection !== 'descending') {
76+
await page.getByRole('button', { name: 'Created at' }).click()
77+
if (sortDirection === 'none') {
78+
// Column was sortable but not active: first click set it to ascending, one more for descending
79+
await page.getByRole('button', { name: 'Created at' }).click()
80+
}
81+
}
82+
const firstRow = page.locator('[data-cy-files-list-tbody] tr.files-list__row').first()
83+
await expect(firstRow.getByRole('button', { name: 'small_valid' })).toBeVisible()
84+
85+
// Re-open the document by clicking the file name — the sidebar opens automatically
86+
await firstRow.getByRole('button', { name: 'small_valid' }).click()
87+
await page.getByRole('button', { name: 'Setup signature positions' }).click()
88+
89+
// Verify the element survived the round-trip to the server
90+
await expect(
91+
page.getByLabel('Signature positions').getByRole('img', { name: 'Signature position for Admin Name' }),
92+
).toBeVisible()
93+
94+
// Select the element so the toolbar (Duplicate / Delete) appears, then delete it
95+
await page.getByLabel('Signature positions').getByRole('img', { name: 'Signature position for Admin Name' }).click()
96+
await page.getByLabel('Signature positions').getByRole('button', { name: 'Delete' }).click()
97+
98+
await expect(
99+
page.getByLabel('Signature positions').getByRole('img', { name: 'Signature position for Admin Name' }),
100+
).toBeHidden()
101+
102+
// Save the now-empty element list
103+
await page.getByLabel('Signature positions').getByRole('button', { name: 'Save' }).click()
104+
105+
// Navigate away and back to force a fresh load from the server
106+
await page.getByRole('link', { name: 'Request' }).click()
107+
await page.locator('#fileslist').getByRole('link', { name: 'Files' }).click()
108+
const createdAtTh2 = page.getByRole('columnheader', { name: 'Created at' })
109+
const sortDirection2 = await createdAtTh2.evaluate((el: HTMLElement) => el.ariaSort)
110+
if (sortDirection2 !== 'descending') {
111+
await page.getByRole('button', { name: 'Created at' }).click()
112+
if (sortDirection2 === 'none') {
113+
// Column was sortable but not active: first click set it to ascending, one more for descending
114+
await page.getByRole('button', { name: 'Created at' }).click()
115+
}
116+
}
117+
const lastRow = page.locator('[data-cy-files-list-tbody] tr.files-list__row').first()
118+
await expect(lastRow.getByRole('button', { name: 'small_valid' })).toBeVisible()
119+
120+
// Re-open the document one last time and confirm the element is gone
121+
await lastRow.getByRole('button', { name: 'small_valid' }).click()
122+
await page.getByRole('button', { name: 'Setup signature positions' }).click()
123+
await expect(page.getByLabel('Page 1 of 1.')).toBeVisible()
124+
125+
await expect(
126+
page.getByLabel('Signature positions').getByRole('img', { name: 'Signature position for Admin Name' }),
127+
).toBeHidden()
128+
})

‎src/views/FilesList/FilesListTableHeader.spec.ts‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { mount } from '@vue/test-utils'
1515
import { setActivePinia, createPinia } from 'pinia'
1616
import FilesListTableHeader from './FilesListTableHeader.vue'
1717
import { useFilesStore } from '../../store/files.js'
18+
import { useFilesSortingStore } from '../../store/filesSorting.js'
1819

1920
// ---------------------------------------------------------------------------
2021
// Mocks
@@ -219,4 +220,80 @@ describe('FilesListTableHeader', () => {
219220
expect(stub.props('modelValue')).toBe(false)
220221
})
221222
})
223+
224+
describe('RULE: ariaSortForMode reflects filesSortingStore state', () => {
225+
// loadState mock returns the default value, so the store initialises with
226+
// sortingMode = 'created_at' and sortingDirection = 'desc'.
227+
228+
it('returns "none" when the column is sortable but not the active sort mode', () => {
229+
const wrapper = createWrapper()
230+
const vm = wrapper.vm as InstanceType<typeof FilesListTableHeader> & { ariaSortForMode: (mode: string, isSortable?: boolean) => string | null }
231+
232+
expect(vm.ariaSortForMode('status')).toBe('none')
233+
expect(vm.ariaSortForMode('name')).toBe('none')
234+
})
235+
236+
it('returns null when the column is not sortable', () => {
237+
const wrapper = createWrapper()
238+
const vm = wrapper.vm as InstanceType<typeof FilesListTableHeader> & { ariaSortForMode: (mode: string, isSortable?: boolean) => string | null }
239+
240+
expect(vm.ariaSortForMode('actions', false)).toBeNull()
241+
})
242+
243+
it('returns "descending" when the column is active and direction is desc', async () => {
244+
const wrapper = createWrapper()
245+
const sortingStore = useFilesSortingStore()
246+
sortingStore.sortingMode = 'created_at'
247+
sortingStore.sortingDirection = 'desc'
248+
await wrapper.vm.$nextTick()
249+
250+
const vm = wrapper.vm as InstanceType<typeof FilesListTableHeader> & { ariaSortForMode: (mode: string) => string | null }
251+
expect(vm.ariaSortForMode('created_at')).toBe('descending')
252+
})
253+
254+
it('returns "ascending" when the column is active and direction is asc', async () => {
255+
const wrapper = createWrapper()
256+
const sortingStore = useFilesSortingStore()
257+
sortingStore.sortingMode = 'status'
258+
sortingStore.sortingDirection = 'asc'
259+
await wrapper.vm.$nextTick()
260+
261+
const vm = wrapper.vm as InstanceType<typeof FilesListTableHeader> & { ariaSortForMode: (mode: string) => string | null }
262+
expect(vm.ariaSortForMode('status')).toBe('ascending')
263+
})
264+
265+
it('sets aria-sort attribute on the active <th> element', async () => {
266+
const wrapper = createWrapper()
267+
const sortingStore = useFilesSortingStore()
268+
sortingStore.sortingMode = 'created_at'
269+
sortingStore.sortingDirection = 'desc'
270+
await wrapper.vm.$nextTick()
271+
272+
const th = wrapper.find('th.files-list__row-created_at')
273+
expect(th.attributes('aria-sort')).toBe('descending')
274+
})
275+
276+
it('does not set aria-sort on non-sortable columns', async () => {
277+
const wrapper = createWrapper()
278+
const sortingStore = useFilesSortingStore()
279+
sortingStore.sortingMode = 'created_at'
280+
sortingStore.sortingDirection = 'desc'
281+
await wrapper.vm.$nextTick()
282+
283+
// The actions column has no aria-sort (not sortable)
284+
const actionsTh = wrapper.find('th.files-list__row-actions')
285+
expect(actionsTh.attributes('aria-sort')).toBeUndefined()
286+
})
287+
288+
it('sets aria-sort="none" on sortable inactive columns', async () => {
289+
const wrapper = createWrapper()
290+
const sortingStore = useFilesSortingStore()
291+
sortingStore.sortingMode = 'created_at'
292+
sortingStore.sortingDirection = 'desc'
293+
await wrapper.vm.$nextTick()
294+
295+
expect(wrapper.find('th.files-list__row-status').attributes('aria-sort')).toBe('none')
296+
expect(wrapper.find('th.files-list__row-signers').attributes('aria-sort')).toBe('none')
297+
})
298+
})
222299
})

‎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)