✨(frontend) improve screen reader support in DocShare modal
adds relevant aria-labels to enhance accessibility for assistive technologies Signed-off-by: Cyril <c.gromoff@gmail.com>
This commit is contained in:
@@ -208,7 +208,7 @@ test.describe('Doc Header', () => {
|
||||
await expect(
|
||||
invitationCard.getByText('test.test@invitation.test').first(),
|
||||
).toBeVisible();
|
||||
const invitationRole = invitationCard.getByLabel('doc-role-dropdown');
|
||||
const invitationRole = invitationCard.getByTestId('doc-role-dropdown');
|
||||
await expect(invitationRole).toBeVisible();
|
||||
|
||||
await invitationRole.click();
|
||||
@@ -217,7 +217,7 @@ test.describe('Doc Header', () => {
|
||||
await expect(invitationCard).toBeHidden();
|
||||
|
||||
const memberCard = shareModal.getByLabel('List members card');
|
||||
const roles = memberCard.getByLabel('doc-role-dropdown');
|
||||
const roles = memberCard.getByTestId('doc-role-dropdown');
|
||||
await expect(memberCard).toBeVisible();
|
||||
await expect(
|
||||
memberCard.getByText('test.test@accesses.test').first(),
|
||||
|
||||
@@ -74,7 +74,7 @@ test.describe('Document create member', () => {
|
||||
await expect(list.getByText(email)).toBeVisible();
|
||||
|
||||
// Check roles are displayed
|
||||
await list.getByLabel('doc-role-dropdown').click();
|
||||
await list.getByTestId('doc-role-dropdown').click();
|
||||
await expect(page.getByRole('menuitem', { name: 'Reader' })).toBeVisible();
|
||||
await expect(page.getByRole('menuitem', { name: 'Editor' })).toBeVisible();
|
||||
await expect(page.getByRole('menuitem', { name: 'Owner' })).toBeVisible();
|
||||
@@ -128,7 +128,7 @@ test.describe('Document create member', () => {
|
||||
|
||||
// Choose a role
|
||||
const container = page.getByTestId('doc-share-add-member-list');
|
||||
await container.getByLabel('doc-role-dropdown').click();
|
||||
await container.getByTestId('doc-role-dropdown').click();
|
||||
await page.getByRole('menuitem', { name: 'Owner' }).click();
|
||||
|
||||
const responsePromiseCreateInvitation = page.waitForResponse(
|
||||
@@ -146,7 +146,7 @@ test.describe('Document create member', () => {
|
||||
await page.getByTestId(`search-user-row-${email}`).click();
|
||||
|
||||
// Choose a role
|
||||
await container.getByLabel('doc-role-dropdown').click();
|
||||
await container.getByTestId('doc-role-dropdown').click();
|
||||
await page.getByRole('menuitem', { name: 'Owner' }).click();
|
||||
|
||||
const responsePromiseCreateInvitationFail = page.waitForResponse(
|
||||
@@ -183,7 +183,7 @@ test.describe('Document create member', () => {
|
||||
|
||||
// Choose a role
|
||||
const container = page.getByTestId('doc-share-add-member-list');
|
||||
await container.getByLabel('doc-role-dropdown').click();
|
||||
await container.getByTestId('doc-role-dropdown').click();
|
||||
await page.getByRole('menuitem', { name: 'Administrator' }).click();
|
||||
|
||||
const responsePromiseCreateInvitation = page.waitForResponse(
|
||||
@@ -210,7 +210,7 @@ test.describe('Document create member', () => {
|
||||
response.request().method() === 'PATCH',
|
||||
);
|
||||
|
||||
await userInvitation.getByLabel('doc-role-dropdown').click();
|
||||
await userInvitation.getByTestId('doc-role-dropdown').click();
|
||||
await page.getByRole('menuitem', { name: 'Reader' }).click();
|
||||
|
||||
const responsePatchInvitation = await responsePromisePatchInvitation;
|
||||
@@ -272,7 +272,7 @@ test.describe('Document create member', () => {
|
||||
const container = page.getByTestId(
|
||||
`doc-share-access-request-row-${emailRequest}`,
|
||||
);
|
||||
await container.getByLabel('doc-role-dropdown').click();
|
||||
await container.getByTestId('doc-role-dropdown').click();
|
||||
await page.getByRole('menuitem', { name: 'Administrator' }).click();
|
||||
await container.getByRole('button', { name: 'Approve' }).click();
|
||||
|
||||
|
||||
@@ -152,7 +152,7 @@ test.describe('Document list members', () => {
|
||||
const currentUser = list.getByTestId(
|
||||
`doc-share-member-row-user.test@${browserName}.test`,
|
||||
);
|
||||
const currentUserRole = currentUser.getByLabel('doc-role-dropdown');
|
||||
const currentUserRole = currentUser.getByTestId('doc-role-dropdown');
|
||||
await expect(currentUser).toBeVisible();
|
||||
await expect(currentUserRole).toBeVisible();
|
||||
await currentUserRole.click();
|
||||
@@ -169,7 +169,7 @@ test.describe('Document list members', () => {
|
||||
});
|
||||
const newUserEmail = await addNewMember(page, 0, 'Owner');
|
||||
const newUser = list.getByTestId(`doc-share-member-row-${newUserEmail}`);
|
||||
const newUserRoles = newUser.getByLabel('doc-role-dropdown');
|
||||
const newUserRoles = newUser.getByTestId('doc-role-dropdown');
|
||||
|
||||
await expect(newUser).toBeVisible();
|
||||
|
||||
@@ -214,9 +214,7 @@ test.describe('Document list members', () => {
|
||||
|
||||
const emailMyself = `user.test@${browserName}.test`;
|
||||
const mySelf = list.getByTestId(`doc-share-member-row-${emailMyself}`);
|
||||
const mySelfRole = mySelf.getByRole('button', {
|
||||
name: 'doc-role-dropdown',
|
||||
});
|
||||
const mySelfRole = mySelf.getByTestId('doc-role-dropdown');
|
||||
|
||||
const userOwnerEmail = await addNewMember(page, 0, 'Owner');
|
||||
const userOwner = list.getByTestId(
|
||||
@@ -231,9 +229,7 @@ test.describe('Document list members', () => {
|
||||
const userReader = list.getByTestId(
|
||||
`doc-share-member-row-${userReaderEmail}`,
|
||||
);
|
||||
const userReaderRole = userReader.getByRole('button', {
|
||||
name: 'doc-role-dropdown',
|
||||
});
|
||||
const userReaderRole = userReader.getByTestId('doc-role-dropdown');
|
||||
|
||||
await expect(mySelf).toBeVisible();
|
||||
await expect(userOwner).toBeVisible();
|
||||
|
||||
@@ -226,7 +226,7 @@ test.describe('Doc Tree', () => {
|
||||
const currentUser = list.getByTestId(
|
||||
`doc-share-member-row-user.test@${browserName}.test`,
|
||||
);
|
||||
const currentUserRole = currentUser.getByLabel('doc-role-dropdown');
|
||||
const currentUserRole = currentUser.getByTestId('doc-role-dropdown');
|
||||
await currentUserRole.click();
|
||||
await page.getByRole('menuitem', { name: 'Administrator' }).click();
|
||||
await list.click();
|
||||
|
||||
@@ -38,9 +38,9 @@ export const addNewMember = async (
|
||||
await page.getByRole('option', { name: users[index].email }).click();
|
||||
|
||||
// Choose a role
|
||||
await page.getByLabel('doc-role-dropdown').click();
|
||||
await page.getByTestId('doc-role-dropdown').click();
|
||||
await page.getByRole('menuitem', { name: role }).click();
|
||||
await page.getByRole('button', { name: /^Invite / }).click();
|
||||
await page.getByTestId('doc-share-invite-button').click();
|
||||
|
||||
return users[index].email;
|
||||
};
|
||||
@@ -74,7 +74,7 @@ export const updateRoleUser = async (
|
||||
const list = page.getByTestId('doc-share-quick-search');
|
||||
|
||||
const currentUser = list.getByTestId(`doc-share-member-row-${email}`);
|
||||
const currentUserRole = currentUser.getByLabel('doc-role-dropdown');
|
||||
const currentUserRole = currentUser.getByTestId('doc-role-dropdown');
|
||||
await currentUserRole.click();
|
||||
await page.getByRole('menuitem', { name: role }).click();
|
||||
await list.click();
|
||||
|
||||
Reference in New Issue
Block a user