studio/docs
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨(frontend) remove redundant aria-label to avoid over-accessibility

Browse Source 
aria-label was removed because the visible span already provides the text

Signed-off-by: Cyril <c.gromoff@gmail.com>
This commit is contained in:
Cyril
2025-09-22 14:21:59 +02:00
parent 0ea7dd727f
commit 3607faa475
13 changed files with 58 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -17,6 +17,7 @@ and this project adheres to
- ♿ add document visible in list and openable via enter key #1365 - ♿ add document visible in list and openable via enter key #1365
- ♿ add pdf outline property to enable bookmarks display #1368 - ♿ add pdf outline property to enable bookmarks display #1368
- ♿ hide decorative icons from assistive tech with aria-hidden #1404 - ♿ hide decorative icons from assistive tech with aria-hidden #1404
- ♿ remove redundant aria-label to avoid over-accessibility #1420
### Fixed ### Fixed

2
src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts
View File

@@ -100,7 +100,7 @@ test.describe('Doc Editor', () => {
const wsClosePromise = webSocket.waitForEvent('close'); const wsClosePromise = webSocket.waitForEvent('close');
await selectVisibility.click(); await selectVisibility.click();
await page.getByLabel('Connected').click(); await page.getByRole('menuitem', { name: 'Connected' }).click();
// Assert that the doc reconnects to the ws // Assert that the doc reconnects to the ws
const wsClose = await wsClosePromise; const wsClose = await wsClosePromise;

6
src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts
View File

@@ -394,7 +394,7 @@ test.describe('Doc Export', () => {
}) })
.click(); .click();
const input = page.locator('.--docs--doc-title-input[role="textbox"]'); const input = page.getByRole('textbox', { name: 'Titre du document' });
await expect(input).toBeVisible(); await expect(input).toBeVisible();
await expect(input).toHaveText('', { timeout: 10000 }); await expect(input).toHaveText('', { timeout: 10000 });
await input.click(); await input.click();
@@ -411,6 +411,10 @@ test.describe('Doc Export', () => {
}) })
.click(); .click();
await expect(
page.getByTestId('doc-open-modal-download-button'),
).toBeVisible();
const downloadPromise = page.waitForEvent('download', (download) => { const downloadPromise = page.waitForEvent('download', (download) => {
return download.suggestedFilename().includes(`${randomDocFrench}.pdf`); return download.suggestedFilename().includes(`${randomDocFrench}.pdf`);
}); });

22
src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts
View File

@@ -90,7 +90,7 @@ test.describe('Doc Header', () => {
const [randomDoc] = await createDoc(page, 'doc-delete', browserName, 1); const [randomDoc] = await createDoc(page, 'doc-delete', browserName, 1);
await page.getByLabel('Open the document options').click(); await page.getByLabel('Open the document options').click();
await page.getByLabel('Delete document').click(); await page.getByRole('menuitem', { name: 'Delete document' }).click();
await expect( await expect(
page.getByRole('heading', { name: 'Delete a doc' }), page.getByRole('heading', { name: 'Delete a doc' }),
@@ -148,7 +148,9 @@ test.describe('Doc Header', () => {
await page.getByLabel('Open the document options').click(); await page.getByLabel('Open the document options').click();
await expect(page.getByLabel('Delete document')).toBeDisabled(); await expect(
page.getByRole('menuitem', { name: 'Delete document' }),
).toBeDisabled();
// Click somewhere else to close the options // Click somewhere else to close the options
await page.click('body', { position: { x: 0, y: 0 } }); await page.click('body', { position: { x: 0, y: 0 } });
@@ -221,7 +223,9 @@ test.describe('Doc Header', () => {
).toBeVisible(); ).toBeVisible();
await page.getByLabel('Open the document options').click(); await page.getByLabel('Open the document options').click();
await expect(page.getByLabel('Delete document')).toBeDisabled(); await expect(
page.getByRole('menuitem', { name: 'Delete document' }),
).toBeDisabled();
// Click somewhere else to close the options // Click somewhere else to close the options
await page.click('body', { position: { x: 0, y: 0 } }); await page.click('body', { position: { x: 0, y: 0 } });
@@ -287,7 +291,9 @@ test.describe('Doc Header', () => {
).toBeVisible(); ).toBeVisible();
await page.getByLabel('Open the document options').click(); await page.getByLabel('Open the document options').click();
await expect(page.getByLabel('Delete document')).toBeDisabled(); await expect(
page.getByRole('menuitem', { name: 'Delete document' }),
).toBeDisabled();
// Click somewhere else to close the options // Click somewhere else to close the options
await page.click('body', { position: { x: 0, y: 0 } }); await page.click('body', { position: { x: 0, y: 0 } });
@@ -343,7 +349,7 @@ test.describe('Doc Header', () => {
// Copy content to clipboard // Copy content to clipboard
await page.getByLabel('Open the document options').click(); await page.getByLabel('Open the document options').click();
await page.getByLabel('Copy as Markdown').click(); await page.getByRole('menuitem', { name: 'Copy as Markdown' }).click();
await expect(page.getByText('Copied to clipboard')).toBeVisible(); await expect(page.getByText('Copied to clipboard')).toBeVisible();
// Test that clipboard is in Markdown format // Test that clipboard is in Markdown format
@@ -377,7 +383,7 @@ test.describe('Doc Header', () => {
// Copy content to clipboard // Copy content to clipboard
await page.getByLabel('Open the document options').click(); await page.getByLabel('Open the document options').click();
await page.getByLabel('Copy as HTML').click(); await page.getByRole('menuitem', { name: 'Copy as HTML' }).click();
await expect(page.getByText('Copied to clipboard')).toBeVisible(); await expect(page.getByText('Copied to clipboard')).toBeVisible();
// Test that clipboard is in HTML format // Test that clipboard is in HTML format
@@ -568,7 +574,7 @@ test.describe('Documents Header mobile', () => {
await expect( await expect(
page.getByRole('menuitem', { name: 'Copy link' }), page.getByRole('menuitem', { name: 'Copy link' }),
).toBeVisible(); ).toBeVisible();
await page.getByLabel('Share').click(); await page.getByRole('menuitem', { name: 'Share' }).click();
await expect(page.getByRole('button', { name: 'Copy link' })).toBeVisible(); await expect(page.getByRole('button', { name: 'Copy link' })).toBeVisible();
}); });
@@ -591,7 +597,7 @@ test.describe('Documents Header mobile', () => {
await goToGridDoc(page); await goToGridDoc(page);
await page.getByLabel('Open the document options').click(); await page.getByLabel('Open the document options').click();
await page.getByLabel('Share').click(); await page.getByRole('menuitem', { name: 'Share' }).click();
const shareModal = page.getByRole('dialog', { const shareModal = page.getByRole('dialog', {
name: 'Share modal content', name: 'Share modal content',

24
src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts
View File

@@ -74,13 +74,15 @@ test.describe('Document create member', () => {
// Check roles are displayed // Check roles are displayed
await list.getByLabel('doc-role-dropdown').click(); await list.getByLabel('doc-role-dropdown').click();
await expect(page.getByLabel('Reader')).toBeVisible(); await expect(page.getByRole('menuitem', { name: 'Reader' })).toBeVisible();
await expect(page.getByLabel('Editor')).toBeVisible(); await expect(page.getByRole('menuitem', { name: 'Editor' })).toBeVisible();
await expect(page.getByLabel('Owner')).toBeVisible(); await expect(page.getByRole('menuitem', { name: 'Owner' })).toBeVisible();
await expect(page.getByLabel('Administrator')).toBeVisible(); await expect(
page.getByRole('menuitem', { name: 'Administrator' }),
).toBeVisible();
// Validate // Validate
await page.getByLabel('Administrator').click(); await page.getByRole('menuitem', { name: 'Administrator' }).click();
await page.getByRole('button', { name: 'Invite' }).click(); await page.getByRole('button', { name: 'Invite' }).click();
// Check invitation added // Check invitation added
@@ -126,7 +128,7 @@ test.describe('Document create member', () => {
// Choose a role // Choose a role
const container = page.getByTestId('doc-share-add-member-list'); const container = page.getByTestId('doc-share-add-member-list');
await container.getByLabel('doc-role-dropdown').click(); await container.getByLabel('doc-role-dropdown').click();
await page.getByLabel('Owner').click(); await page.getByRole('menuitem', { name: 'Owner' }).click();
const responsePromiseCreateInvitation = page.waitForResponse( const responsePromiseCreateInvitation = page.waitForResponse(
(response) => (response) =>
@@ -144,7 +146,7 @@ test.describe('Document create member', () => {
// Choose a role // Choose a role
await container.getByLabel('doc-role-dropdown').click(); await container.getByLabel('doc-role-dropdown').click();
await page.getByLabel('Owner').click(); await page.getByRole('menuitem', { name: 'Owner' }).click();
const responsePromiseCreateInvitationFail = page.waitForResponse( const responsePromiseCreateInvitationFail = page.waitForResponse(
(response) => (response) =>
@@ -174,7 +176,7 @@ test.describe('Document create member', () => {
// Choose a role // Choose a role
const container = page.getByTestId('doc-share-add-member-list'); const container = page.getByTestId('doc-share-add-member-list');
await container.getByLabel('doc-role-dropdown').click(); await container.getByLabel('doc-role-dropdown').click();
await page.getByLabel('Administrator').click(); await page.getByRole('menuitem', { name: 'Administrator' }).click();
const responsePromiseCreateInvitation = page.waitForResponse( const responsePromiseCreateInvitation = page.waitForResponse(
(response) => (response) =>
@@ -194,14 +196,14 @@ test.describe('Document create member', () => {
await expect(userInvitation).toBeVisible(); await expect(userInvitation).toBeVisible();
await userInvitation.getByLabel('doc-role-dropdown').click(); await userInvitation.getByLabel('doc-role-dropdown').click();
await page.getByLabel('Reader').click(); await page.getByRole('menuitem', { name: 'Reader' }).click();
const moreActions = userInvitation.getByRole('button', { const moreActions = userInvitation.getByRole('button', {
name: 'Open invitation actions menu', name: 'Open invitation actions menu',
}); });
await moreActions.click(); await moreActions.click();
await page.getByLabel('Delete').click(); await page.getByRole('menuitem', { name: 'Delete' }).click();
await expect(userInvitation).toBeHidden(); await expect(userInvitation).toBeHidden();
}); });
@@ -257,7 +259,7 @@ test.describe('Document create member', () => {
`doc-share-access-request-row-${emailRequest}`, `doc-share-access-request-row-${emailRequest}`,
); );
await container.getByLabel('doc-role-dropdown').click(); await container.getByLabel('doc-role-dropdown').click();
await page.getByLabel('Administrator').click(); await page.getByRole('menuitem', { name: 'Administrator' }).click();
await container.getByRole('button', { name: 'Approve' }).click(); await container.getByRole('button', { name: 'Approve' }).click();
await expect(page.getByText('Access Requests')).toBeHidden(); await expect(page.getByText('Access Requests')).toBeHidden();

4
src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts
View File

@@ -171,12 +171,12 @@ test.describe('Document list members', () => {
}); });
await currentUserRole.click(); await currentUserRole.click();
await page.getByLabel('Administrator').click(); await page.getByRole('menuitem', { name: 'Administrator' }).click();
await list.click(); await list.click();
await expect(currentUserRole).toBeVisible(); await expect(currentUserRole).toBeVisible();
await currentUserRole.click(); await currentUserRole.click();
await page.getByLabel('Reader').click(); await page.getByRole('menuitem', { name: 'Reader' }).click();
await list.click(); await list.click();
await expect(currentUserRole).toBeHidden(); await expect(currentUserRole).toBeHidden();
}); });

2
src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts
View File

@@ -224,7 +224,7 @@ test.describe('Doc Tree', () => {
); );
const currentUserRole = currentUser.getByLabel('doc-role-dropdown'); const currentUserRole = currentUser.getByLabel('doc-role-dropdown');
await currentUserRole.click(); await currentUserRole.click();
await page.getByLabel('Administrator').click(); await page.getByRole('menuitem', { name: 'Administrator' }).click();
await list.click(); await list.click();
await page.getByRole('button', { name: 'Ok' }).click(); await page.getByRole('button', { name: 'Ok' }).click();

10
src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts
View File

@@ -18,7 +18,7 @@ test.describe('Doc Version', () => {
await verifyDocName(page, randomDoc); await verifyDocName(page, randomDoc);
await page.getByLabel('Open the document options').click(); await page.getByLabel('Open the document options').click();
await page.getByLabel('Version history').click(); await page.getByRole('menuitem', { name: 'Version history' }).click();
await expect(page.getByText('History', { exact: true })).toBeVisible(); await expect(page.getByText('History', { exact: true })).toBeVisible();
const modal = page.getByLabel('version history modal'); const modal = page.getByLabel('version history modal');
@@ -54,7 +54,7 @@ test.describe('Doc Version', () => {
).toBeVisible(); ).toBeVisible();
await page.getByLabel('Open the document options').click(); await page.getByLabel('Open the document options').click();
await page.getByLabel('Version history').click(); await page.getByRole('menuitem', { name: 'Version history' }).click();
await expect(panel).toBeVisible(); await expect(panel).toBeVisible();
await expect(page.getByText('History', { exact: true })).toBeVisible(); await expect(page.getByText('History', { exact: true })).toBeVisible();
@@ -82,7 +82,9 @@ test.describe('Doc Version', () => {
await verifyDocName(page, 'Mocked document'); await verifyDocName(page, 'Mocked document');
await page.getByLabel('Open the document options').click(); await page.getByLabel('Open the document options').click();
await expect(page.getByLabel('Version history')).toBeDisabled(); await expect(
page.getByRole('menuitem', { name: 'Version history' }),
).toBeDisabled();
}); });
test('it restores the doc version', async ({ page, browserName }) => { test('it restores the doc version', async ({ page, browserName }) => {
@@ -109,7 +111,7 @@ test.describe('Doc Version', () => {
await expect(page.getByText('World')).toBeVisible(); await expect(page.getByText('World')).toBeVisible();
await page.getByLabel('Open the document options').click(); await page.getByLabel('Open the document options').click();
await page.getByLabel('Version history').click(); await page.getByRole('menuitem', { name: 'Version history' }).click();
const modal = page.getByLabel('version history modal'); const modal = page.getByLabel('version history modal');
const panel = modal.getByLabel('version list'); const panel = modal.getByLabel('version list');

16
src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts
View File

@@ -45,17 +45,21 @@ test.describe('Doc Visibility', () => {
await expect(selectVisibility.getByText('Private')).toBeVisible(); await expect(selectVisibility.getByText('Private')).toBeVisible();
await expect(page.getByLabel('Read only')).toBeHidden(); await expect(
await expect(page.getByLabel('Can read and edit')).toBeHidden(); page.getByRole('menuitem', { name: 'Read only' }),
).toBeHidden();
await expect(
page.getByRole('menuitem', { name: 'Can read and edit' }),
).toBeHidden();
await selectVisibility.click(); await selectVisibility.click();
await page.getByLabel('Connected').click(); await page.getByRole('menuitem', { name: 'Connected' }).click();
await expect(page.getByTestId('doc-access-mode')).toBeVisible(); await expect(page.getByTestId('doc-access-mode')).toBeVisible();
await selectVisibility.click(); await selectVisibility.click();
await page.getByLabel('Public', { exact: true }).click(); await page.getByRole('menuitem', { name: 'Public' }).click();
await expect(page.getByTestId('doc-access-mode')).toBeVisible(); await expect(page.getByTestId('doc-access-mode')).toBeVisible();
}); });
@@ -293,7 +297,7 @@ test.describe('Doc Visibility: Public', () => {
).toBeVisible(); ).toBeVisible();
await page.getByTestId('doc-access-mode').click(); await page.getByTestId('doc-access-mode').click();
await page.getByLabel('Editing').click(); await page.getByRole('menuitem', { name: 'Editing' }).click();
await expect( await expect(
page.getByText('The document visibility has been updated.').first(), page.getByText('The document visibility has been updated.').first(),
@@ -516,7 +520,7 @@ test.describe('Doc Visibility: Authenticated', () => {
const urlDoc = page.url(); const urlDoc = page.url();
await page.getByTestId('doc-access-mode').click(); await page.getByTestId('doc-access-mode').click();
await page.getByLabel('Editing').click(); await page.getByRole('menuitem', { name: 'Editing' }).click();
await expect( await expect(
page.getByText('The document visibility has been updated.').first(), page.getByText('The document visibility has been updated.').first(),

4
src/frontend/apps/e2e/__tests__/app-impress/footer.spec.ts
View File

@@ -47,7 +47,7 @@ test.describe('Footer', () => {
// Check the translation // Check the translation
const header = page.locator('header').first(); const header = page.locator('header').first();
await header.getByRole('button').getByText('English').click(); await header.getByRole('button').getByText('English').click();
await page.getByLabel('Français').click(); await page.getByRole('menuitem', { name: 'Français' }).click();
await expect( await expect(
page.locator('footer').getByText('Mentions légales'), page.locator('footer').getByText('Mentions légales'),
@@ -132,7 +132,7 @@ test.describe('Footer', () => {
// Check the translation // Check the translation
const header = page.locator('header').first(); const header = page.locator('header').first();
await header.getByRole('button').getByText('English').click(); await header.getByRole('button').getByText('English').click();
await page.getByLabel('Français').click(); await page.getByRole('menuitem', { name: 'Français' }).click();
await expect( await expect(
page page

2
src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts
View File

@@ -323,5 +323,5 @@ export async function waitForLanguageSwitch(
await languagePicker.click(); await languagePicker.click();
await page.getByLabel(lang.label).click(); await page.getByRole('menuitem', { name: lang.label }).click();
} }

4
src/frontend/apps/e2e/__tests__/app-impress/utils-share.ts
View File

@@ -39,7 +39,7 @@ export const addNewMember = async (
// Choose a role // Choose a role
await page.getByLabel('doc-role-dropdown').click(); await page.getByLabel('doc-role-dropdown').click();
await page.getByLabel(role).click(); await page.getByRole('menuitem', { name: role }).click();
await page.getByRole('button', { name: 'Invite' }).click(); await page.getByRole('button', { name: 'Invite' }).click();
return users[index].email; return users[index].email;
@@ -76,7 +76,7 @@ export const updateRoleUser = async (
const currentUser = list.getByTestId(`doc-share-member-row-${email}`); const currentUser = list.getByTestId(`doc-share-member-row-${email}`);
const currentUserRole = currentUser.getByLabel('doc-role-dropdown'); const currentUserRole = currentUser.getByLabel('doc-role-dropdown');
await currentUserRole.click(); await currentUserRole.click();
await page.getByLabel(role).click(); await page.getByRole('menuitem', { name: role }).click();
await list.click(); await list.click();
}; };

1
src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx
View File

@@ -162,7 +162,6 @@ export const DropdownMenu = ({
menuItemRefs.current[index] = el; menuItemRefs.current[index] = el;
}} }}
role="menuitem" role="menuitem"
aria-label={option.label}
data-testid={option.testId} data-testid={option.testId}
$direction="row" $direction="row"
disabled={isDisabled} disabled={isDisabled}