Skip to content

Commit 559b869

Browse files
OvgoddOvgodd
committed
✨(frontend) improve accessibility of cdoc content with correct aria tags
added appropriate aria attributes and semantic tags to enhance accessibility Signed-off-by: Cyril <[email protected]>
1 parent e07f709 commit 559b869

File tree

12 files changed

+93
-153
lines changed

12 files changed

+93
-153
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ and this project adheres to
1616
- #1255
1717
- #1262
1818
- #1270
19+
- #1271
1920

2021
## [3.5.0] - 2025-07-31
2122

‎src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,13 @@ test.describe('Doc Create', () => {
4545
})
4646
.click();
4747

48-
const input = page.getByRole('textbox', { name: 'doc title input' });
49-
await expect(input).toHaveText('');
48+
await page.waitForURL('**/docs/**', {
49+
timeout: 10000,
50+
waitUntil: 'domcontentloaded',
51+
});
52+
53+
const input = page.getByRole('textbox', { name: /^Document title/i });
54+
await expect(input).toHaveText(/^(?:Untitled document)?$/);
5055
await expect(
5156
page.locator('.c__tree-view--row-content').getByText('Untitled document'),
5257
).toBeVisible();
@@ -67,8 +72,13 @@ test.describe('Doc Create', () => {
6772
.getByText('New sub-doc')
6873
.click();
6974

70-
const input = page.getByRole('textbox', { name: 'doc title input' });
71-
await expect(input).toHaveText('');
75+
await page.waitForURL('**/docs/**', {
76+
timeout: 10000,
77+
waitUntil: 'domcontentloaded',
78+
});
79+
80+
const input = page.getByRole('textbox', { name: /^Document title/i });
81+
await expect(input).toHaveText(/^(?:Untitled document)?$/);
7282
await expect(
7383
page.locator('.c__tree-view--row-content').getByText('Untitled document'),
7484
).toBeVisible();

‎src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts

Lines changed: 30 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,7 @@ test.describe('Doc Export', () => {
2323
browserName,
2424
}) => {
2525
await createDoc(page, 'doc-editor', browserName, 1);
26-
await page
27-
.getByRole('button', {
28-
name: 'download',
29-
})
30-
.click();
26+
await page.getByTestId('doc-open-modal-download-button').click();
3127

3228
await expect(
3329
page
@@ -45,7 +41,7 @@ test.describe('Doc Export', () => {
4541
await expect(
4642
page.getByRole('button', { name: 'Close the modal' }),
4743
).toBeVisible();
48-
await expect(page.getByRole('button', { name: 'Download' })).toBeVisible();
44+
await expect(page.getByTestId('doc-export-download-button')).toBeVisible();
4945
});
5046

5147
test('it exports the doc with pdf line break', async ({
@@ -76,23 +72,13 @@ test.describe('Doc Export', () => {
7672

7773
await editor.locator('.bn-block-outer').last().fill('World');
7874

79-
await page
80-
.getByRole('button', {
81-
name: 'download',
82-
exact: true,
83-
})
84-
.click();
75+
await page.getByTestId('doc-open-modal-download-button').click();
8576

8677
const downloadPromise = page.waitForEvent('download', (download) => {
8778
return download.suggestedFilename().includes(`${randomDoc}.pdf`);
8879
});
8980

90-
void page
91-
.getByRole('button', {
92-
name: 'Download',
93-
exact: true,
94-
})
95-
.click();
81+
void page.getByTestId('doc-export-download-button').click();
9682

9783
const download = await downloadPromise;
9884
expect(download.suggestedFilename()).toBe(`${randomDoc}.pdf`);
@@ -126,33 +112,18 @@ test.describe('Doc Export', () => {
126112

127113
await expect(image).toBeVisible();
128114

129-
await page
130-
.getByRole('button', {
131-
name: 'download',
132-
exact: true,
133-
})
134-
.click();
115+
await page.getByTestId('doc-open-modal-download-button').click();
135116

136117
await page.getByRole('combobox', { name: 'Format' }).click();
137118
await page.getByRole('option', { name: 'Docx' }).click();
138119

139-
await expect(
140-
page.getByRole('button', {
141-
name: 'Download',
142-
exact: true,
143-
}),
144-
).toBeVisible();
120+
await expect(page.getByTestId('doc-export-download-button')).toBeVisible();
145121

146122
const downloadPromise = page.waitForEvent('download', (download) => {
147123
return download.suggestedFilename().includes(`${randomDoc}.docx`);
148124
});
149125

150-
void page
151-
.getByRole('button', {
152-
name: 'Download',
153-
exact: true,
154-
})
155-
.click();
126+
void page.getByTestId('doc-export-download-button').click();
156127

157128
const download = await downloadPromise;
158129
expect(download.suggestedFilename()).toBe(`${randomDoc}.docx`);
@@ -194,11 +165,7 @@ test.describe('Doc Export', () => {
194165
.fill('https://docs.numerique.gouv.fr/assets/logo-gouv.png');
195166
await page.getByText('Embed image').click();
196167

197-
await page
198-
.getByRole('button', {
199-
name: 'download',
200-
})
201-
.click();
168+
await page.getByTestId('doc-open-modal-download-button').click();
202169

203170
await page
204171
.getByRole('combobox', {
@@ -216,11 +183,7 @@ test.describe('Doc Export', () => {
216183

217184
await new Promise((resolve) => setTimeout(resolve, 1000));
218185

219-
await expect(
220-
page.getByRole('button', {
221-
name: 'Download',
222-
}),
223-
).toBeVisible();
186+
await expect(page.getByTestId('doc-export-download-button')).toBeVisible();
224187

225188
const responseCorsPromise = page.waitForResponse(
226189
(response) =>
@@ -231,11 +194,7 @@ test.describe('Doc Export', () => {
231194
return download.suggestedFilename().includes(`${randomDoc}.pdf`);
232195
});
233196

234-
void page
235-
.getByRole('button', {
236-
name: 'Download',
237-
})
238-
.click();
197+
void page.getByTestId('doc-export-download-button').click();
239198

240199
const responseCors = await responseCorsPromise;
241200
expect(responseCors.ok()).toBe(true);
@@ -271,27 +230,15 @@ test.describe('Doc Export', () => {
271230
'italic',
272231
);
273232

274-
await page
275-
.getByRole('button', {
276-
name: 'download',
277-
})
278-
.click();
233+
await page.getByTestId('doc-open-modal-download-button').click();
279234

280-
await expect(
281-
page.getByRole('button', {
282-
name: 'Download',
283-
}),
284-
).toBeVisible();
235+
await expect(page.getByTestId('doc-export-download-button')).toBeVisible();
285236

286237
const downloadPromise = page.waitForEvent('download', (download) => {
287238
return download.suggestedFilename().includes(`${randomDoc}.pdf`);
288239
});
289240

290-
void page
291-
.getByRole('button', {
292-
name: 'Download',
293-
})
294-
.click();
241+
void page.getByTestId('doc-export-download-button').click();
295242

296243
const download = await downloadPromise;
297244
expect(download.suggestedFilename()).toBe(`${randomDoc}.pdf`);
@@ -321,30 +268,17 @@ test.describe('Doc Export', () => {
321268
editor.locator('.bn-block-content[data-content-type="divider"]'),
322269
).toBeVisible();
323270

324-
await page
325-
.getByRole('button', {
326-
name: 'download',
327-
exact: true,
328-
})
329-
.click();
271+
await page.getByTestId('doc-open-modal-download-button').click();
330272

331273
await expect(
332-
page.getByRole('button', {
333-
name: 'Download',
334-
exact: true,
335-
}),
274+
page.getByTestId('doc-open-modal-download-button'),
336275
).toBeVisible();
337276

338277
const downloadPromise = page.waitForEvent('download', (download) => {
339278
return download.suggestedFilename().includes(`${randomDoc}.pdf`);
340279
});
341280

342-
void page
343-
.getByRole('button', {
344-
name: 'Download',
345-
exact: true,
346-
})
347-
.click();
281+
void page.getByTestId('doc-export-download-button').click();
348282

349283
const download = await downloadPromise;
350284
expect(download.suggestedFilename()).toBe(`${randomDoc}.pdf`);
@@ -384,30 +318,17 @@ test.describe('Doc Export', () => {
384318
page.locator('.bn-block-column[data-node-type="column"]').last(),
385319
).toHaveText('Column 3');
386320

387-
await page
388-
.getByRole('button', {
389-
name: 'download',
390-
exact: true,
391-
})
392-
.click();
321+
await page.getByTestId('doc-open-modal-download-button').click();
393322

394323
await expect(
395-
page.getByRole('button', {
396-
name: 'Download',
397-
exact: true,
398-
}),
324+
page.getByTestId('doc-open-modal-download-button'),
399325
).toBeVisible();
400326

401327
const downloadPromise = page.waitForEvent('download', (download) => {
402328
return download.suggestedFilename().includes(`${randomDoc}.pdf`);
403329
});
404330

405-
void page
406-
.getByRole('button', {
407-
name: 'Download',
408-
exact: true,
409-
})
410-
.click();
331+
void page.getByTestId('doc-export-download-button').click();
411332

412333
const download = await downloadPromise;
413334
expect(download.suggestedFilename()).toBe(`${randomDoc}.pdf`);
@@ -448,9 +369,8 @@ test.describe('Doc Export', () => {
448369
waitUntil: 'domcontentloaded',
449370
});
450371

451-
const input = page.getByLabel('doc title input');
452-
await expect(input).toBeVisible();
453-
await expect(input).toHaveText('');
372+
const input = page.locator('.--docs--doc-title-input[role="textbox"]');
373+
await expect(input).toBeVisible({ timeout: 20000 });
454374
await input.click();
455375
await input.fill(randomDocFrench);
456376
await input.blur();
@@ -459,23 +379,13 @@ test.describe('Doc Export', () => {
459379
await editor.click();
460380
await editor.fill('Contenu de test pour export en français');
461381

462-
await page
463-
.getByRole('button', {
464-
name: 'download',
465-
exact: true,
466-
})
467-
.click();
382+
await page.getByTestId('doc-open-modal-download-button').click();
468383

469384
const downloadPromise = page.waitForEvent('download', (download) => {
470385
return download.suggestedFilename().includes(`${randomDocFrench}.pdf`);
471386
});
472387

473-
void page
474-
.getByRole('button', {
475-
name: 'Télécharger',
476-
exact: true,
477-
})
478-
.click();
388+
void page.getByTestId('doc-export-download-button').click();
479389

480390
const download = await downloadPromise;
481391
expect(download.suggestedFilename()).toBe(`${randomDocFrench}.pdf`);
@@ -527,23 +437,17 @@ test.describe('Doc Export', () => {
527437

528438
await expect(interlink).toBeVisible();
529439

440+
// Open export modal before triggering the download
441+
await page.getByTestId('doc-open-modal-download-button').click();
442+
await expect(
443+
page.getByTestId('doc-open-modal-download-button'),
444+
).toBeVisible();
445+
530446
const downloadPromise = page.waitForEvent('download', (download) => {
531447
return download.suggestedFilename().includes(`${docChild}.pdf`);
532448
});
533449

534-
await page
535-
.getByRole('button', {
536-
name: 'download',
537-
exact: true,
538-
})
539-
.click();
540-
541-
void page
542-
.getByRole('button', {
543-
name: 'Download',
544-
exact: true,
545-
})
546-
.click();
450+
await page.getByTestId('doc-export-download-button').click();
547451

548452
const download = await downloadPromise;
549453
expect(download.suggestedFilename()).toBe(`${docChild}.pdf`);

0 commit comments

Comments
 (0)