Skip to content

Commit 36b367d

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 36b367d

File tree

12 files changed

+91
-157
lines changed

12 files changed

+91
-157
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: 28 additions & 130 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,15 @@ 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

331-
await expect(
332-
page.getByRole('button', {
333-
name: 'Download',
334-
exact: true,
335-
}),
336-
).toBeVisible();
273+
await expect(page.getByTestId('doc-export-download-button')).toBeVisible();
337274

338275
const downloadPromise = page.waitForEvent('download', (download) => {
339276
return download.suggestedFilename().includes(`${randomDoc}.pdf`);
340277
});
341278

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

349281
const download = await downloadPromise;
350282
expect(download.suggestedFilename()).toBe(`${randomDoc}.pdf`);
@@ -384,30 +316,15 @@ test.describe('Doc Export', () => {
384316
page.locator('.bn-block-column[data-node-type="column"]').last(),
385317
).toHaveText('Column 3');
386318

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

394-
await expect(
395-
page.getByRole('button', {
396-
name: 'Download',
397-
exact: true,
398-
}),
399-
).toBeVisible();
321+
await expect(page.getByTestId('doc-export-download-button')).toBeVisible();
400322

401323
const downloadPromise = page.waitForEvent('download', (download) => {
402324
return download.suggestedFilename().includes(`${randomDoc}.pdf`);
403325
});
404326

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

412329
const download = await downloadPromise;
413330
expect(download.suggestedFilename()).toBe(`${randomDoc}.pdf`);
@@ -448,9 +365,8 @@ test.describe('Doc Export', () => {
448365
waitUntil: 'domcontentloaded',
449366
});
450367

451-
const input = page.getByLabel('doc title input');
452-
await expect(input).toBeVisible();
453-
await expect(input).toHaveText('');
368+
const input = page.locator('.--docs--doc-title-input[role="textbox"]');
369+
await expect(input).toBeVisible({ timeout: 20000 });
454370
await input.click();
455371
await input.fill(randomDocFrench);
456372
await input.blur();
@@ -459,23 +375,13 @@ test.describe('Doc Export', () => {
459375
await editor.click();
460376
await editor.fill('Contenu de test pour export en français');
461377

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

469380
const downloadPromise = page.waitForEvent('download', (download) => {
470381
return download.suggestedFilename().includes(`${randomDocFrench}.pdf`);
471382
});
472383

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

480386
const download = await downloadPromise;
481387
expect(download.suggestedFilename()).toBe(`${randomDocFrench}.pdf`);
@@ -527,23 +433,15 @@ test.describe('Doc Export', () => {
527433

528434
await expect(interlink).toBeVisible();
529435

436+
// Open export modal before triggering the download
437+
await page.getByTestId('doc-open-modal-download-button').click();
438+
await expect(page.getByTestId('doc-export-download-button')).toBeVisible();
439+
530440
const downloadPromise = page.waitForEvent('download', (download) => {
531441
return download.suggestedFilename().includes(`${docChild}.pdf`);
532442
});
533443

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();
444+
await page.getByTestId('doc-export-download-button').click();
547445

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

0 commit comments

Comments
 (0)