Skip to content

✨(frontend) improve accessibility of cdoc content with correct aria tags #1271

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+91 −150
Open

✨(frontend) improve accessibility of cdoc content with correct aria tags #1271

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
559b869
✨(frontend) improve accessibility of cdoc content with correct aria tags
Ovgodd Aug 7, 2025
e92fa58
fixup! ✨(frontend) improve accessibility of cdoc content with correct…
Ovgodd Aug 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ and this project adheres to
- #1255
- #1262
- #1270
- #1271

## [3.5.0] - 2025-07-31

Expand Down
14 changes: 12 additions & 2 deletions src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,12 @@ test.describe('Doc Create', () => {
})
.click();

const input = page.getByRole('textbox', { name: 'doc title input' });
await page.waitForURL('**/docs/**', {
timeout: 10000,
waitUntil: 'domcontentloaded',
});
Comment on lines +48 to +51
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It will increase test execution, if you need to increase time, better it increases the timeout, here you could do:
https://github.com/suitenumerique/docs/pull/1271/files#diff-1edbd2d2d1f16be04e52adef35ce6a7468b17d323b87999f0b636b99072404b4R54

    await expect(input).toHaveText('', { timeout: 10000 });µ


const input = page.getByRole('textbox', { name: 'Document title' });
await expect(input).toHaveText('');
await expect(
page.locator('.c__tree-view--row-content').getByText('Untitled document'),
Expand All @@ -67,7 +72,12 @@ test.describe('Doc Create', () => {
.getByText('New sub-doc')
.click();

const input = page.getByRole('textbox', { name: 'doc title input' });
await page.waitForURL('**/docs/**', {
timeout: 10000,
waitUntil: 'domcontentloaded',
});
Comment on lines +75 to +78
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above.


const input = page.getByRole('textbox', { name: 'Document title' });
await expect(input).toHaveText('');
await expect(
page.locator('.c__tree-view--row-content').getByText('Untitled document'),
Expand Down
156 changes: 30 additions & 126 deletions src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,7 @@ test.describe('Doc Export', () => {
browserName,
}) => {
await createDoc(page, 'doc-editor', browserName, 1);
await page
.getByRole('button', {
name: 'download',
})
.click();
await page.getByTestId('doc-open-modal-download-button').click();

await expect(
page
Expand All @@ -45,7 +41,7 @@ test.describe('Doc Export', () => {
await expect(
page.getByRole('button', { name: 'Close the modal' }),
).toBeVisible();
await expect(page.getByRole('button', { name: 'Download' })).toBeVisible();
await expect(page.getByTestId('doc-export-download-button')).toBeVisible();
});

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

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

await page
.getByRole('button', {
name: 'download',
exact: true,
})
.click();
await page.getByTestId('doc-open-modal-download-button').click();

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

void page
.getByRole('button', {
name: 'Download',
exact: true,
})
.click();
void page.getByTestId('doc-export-download-button').click();

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

await expect(image).toBeVisible();

await page
.getByRole('button', {
name: 'download',
exact: true,
})
.click();
await page.getByTestId('doc-open-modal-download-button').click();

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

await expect(
page.getByRole('button', {
name: 'Download',
exact: true,
}),
).toBeVisible();
await expect(page.getByTestId('doc-export-download-button')).toBeVisible();

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

void page
.getByRole('button', {
name: 'Download',
exact: true,
})
.click();
void page.getByTestId('doc-export-download-button').click();

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

await page
.getByRole('button', {
name: 'download',
})
.click();
await page.getByTestId('doc-open-modal-download-button').click();

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

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

await expect(
page.getByRole('button', {
name: 'Download',
}),
).toBeVisible();
await expect(page.getByTestId('doc-export-download-button')).toBeVisible();

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

void page
.getByRole('button', {
name: 'Download',
})
.click();
void page.getByTestId('doc-export-download-button').click();

const responseCors = await responseCorsPromise;
expect(responseCors.ok()).toBe(true);
Expand Down Expand Up @@ -271,27 +230,15 @@ test.describe('Doc Export', () => {
'italic',
);

await page
.getByRole('button', {
name: 'download',
})
.click();
await page.getByTestId('doc-open-modal-download-button').click();

await expect(
page.getByRole('button', {
name: 'Download',
}),
).toBeVisible();
await expect(page.getByTestId('doc-export-download-button')).toBeVisible();

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

void page
.getByRole('button', {
name: 'Download',
})
.click();
void page.getByTestId('doc-export-download-button').click();

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

await page
.getByRole('button', {
name: 'download',
exact: true,
})
.click();
await page.getByTestId('doc-open-modal-download-button').click();

await expect(
page.getByRole('button', {
name: 'Download',
exact: true,
}),
page.getByTestId('doc-open-modal-download-button'),
).toBeVisible();

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

void page
.getByRole('button', {
name: 'Download',
exact: true,
})
.click();
void page.getByTestId('doc-export-download-button').click();

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

await page
.getByRole('button', {
name: 'download',
exact: true,
})
.click();
await page.getByTestId('doc-open-modal-download-button').click();

await expect(
page.getByRole('button', {
name: 'Download',
exact: true,
}),
page.getByTestId('doc-open-modal-download-button'),
).toBeVisible();

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

void page
.getByRole('button', {
name: 'Download',
exact: true,
})
.click();
void page.getByTestId('doc-export-download-button').click();

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

const input = page.getByLabel('doc title input');
await expect(input).toBeVisible();
await expect(input).toHaveText('');
const input = page.locator('.--docs--doc-title-input[role="textbox"]');
await expect(input).toBeVisible({ timeout: 20000 });
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same it is not optimal, if it is a new doc the input should be empty, so assert with a bigger timeout on await expect(input).toHaveText(''); should make the job.
You could have the input visible, but still from a parent as it is now.

await input.click();
await input.fill(randomDocFrench);
await input.blur();
Expand All @@ -459,23 +379,13 @@ test.describe('Doc Export', () => {
await editor.click();
await editor.fill('Contenu de test pour export en français');

await page
.getByRole('button', {
name: 'download',
exact: true,
})
.click();
await page.getByTestId('doc-open-modal-download-button').click();

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

void page
.getByRole('button', {
name: 'Télécharger',
exact: true,
})
.click();
void page.getByTestId('doc-export-download-button').click();

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

await expect(interlink).toBeVisible();

// Open export modal before triggering the download
await page.getByTestId('doc-open-modal-download-button').click();
await expect(
page.getByTestId('doc-open-modal-download-button'),
).toBeVisible();
Comment on lines +442 to +444
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not needed, the click would not be possible if that was not already visible.

Suggested change
await expect(
page.getByTestId('doc-open-modal-download-button'),
).toBeVisible();


const downloadPromise = page.waitForEvent('download', (download) => {
return download.suggestedFilename().includes(`${docChild}.pdf`);
});

await page
.getByRole('button', {
name: 'download',
exact: true,
})
.click();

void page
.getByRole('button', {
name: 'Download',
exact: true,
})
.click();
await page.getByTestId('doc-export-download-button').click();

const download = await downloadPromise;
expect(download.suggestedFilename()).toBe(`${docChild}.pdf`);
Expand Down
Loading
Loading