chore: adjust a11y for dm creation and update user role locator in tests

Author: juliajforesti

apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateDirectMessage.tsx

@@ -94,6 +94,7 @@ const CreateDirectMessage = ({ onClose }: CreateDirectMessageProps) => {
 										aria-describedby={`${membersFieldId}-hint ${membersFieldId}-error`}
 										aria-required='true'
 										aria-invalid={Boolean(errors.users)}
+										aria-label={t('Direct_message_creation_description')}
 									/>
 								)}
 							/>

apps/meteor/tests/e2e/administration.spec.ts

@@ -77,7 +77,7 @@ test.describe.parallel('administration', () => {
 			await poAdminUsers.editUser.inputSetManually.click();
 			await poAdminUsers.editUser.inputPassword.fill('P@ssw0rd1234.!');
 			await poAdminUsers.editUser.inputConfirmPassword.fill('P@ssw0rd1234.!');
-			await expect(poAdminUsers.editUser.userRole).toBeVisible();
+			await expect(poAdminUsers.editUser.chipUserRole).toBeVisible();
 			await poAdminUsers.editUser.btnAddUser.click();
 		});
 
@@ -97,7 +97,7 @@ test.describe.parallel('administration', () => {
 			await poAdminUsers.editUser.inputSetManually.click();
 			await poAdminUsers.editUser.inputPassword.fill('P@ssw0rd1234.!');
 			await poAdminUsers.editUser.inputConfirmPassword.fill('P@ssw0rd1234.!');
-			await expect(poAdminUsers.editUser.userRole).toBeVisible();
+			await expect(poAdminUsers.editUser.chipUserRole).toBeVisible();
 			await expect(poAdminUsers.editUser.joinDefaultChannels).toBeVisible();
 			await poAdminUsers.editUser.btnAddUser.click();
 

apps/meteor/tests/e2e/page-objects/fragments/edit-user-flextab.ts

@@ -39,8 +39,8 @@ export class EditUserFlexTab extends FlexTab {
 		return this.root.locator('//label[text()="Join default channels"]');
 	}
 
-	get userRole(): Locator {
-		return this.root.locator('button[role="option"]:has-text("user")');
+	get chipUserRole(): Locator {
+		return this.root.getByRole('button', { name: 'user', exact: true });
 	}
 
 	get setupSmtpLink(): Locator {

apps/meteor/tests/e2e/page-objects/fragments/modals/create-new-modal.ts

@@ -68,18 +68,15 @@ export class CreateNewDMModal extends CreateNewModal {
 		super(page.getByRole('dialog', { name: 'New direct message' }), page);
 	}
 
-	get dmListbox(): Locator {
-		return this.root.getByRole('listbox');
-	}
-
 	get autocompleteUser(): Locator {
-		return this.root.getByRole('listbox').getByRole('textbox');
+		return this.root.getByLabel('Select one or more people to', { exact: true }).getByRole('textbox');
 	}
 
 	async inviteUserToDM(username: string) {
 		await this.autocompleteUser.click();
 		await this.autocompleteUser.fill(username);
-		await this.dmListbox.selectOption(username);
+		await this.listbox.selectOption(username);
+		await this.page?.keyboard.press('Tab');
 	}
 }
 

apps/meteor/tests/e2e/page-objects/fragments/navbar.ts

@@ -215,11 +215,7 @@ export class Navbar {
 
 	async createNewDM(username: string): Promise<void> {
 		await this.openCreate('Direct message');
-		await this.modals['Direct message'].dmListbox.click();
-		await this.modals['Direct message'].dmListbox.pressSequentially(username);
-		await this.root.waitForTimeout(600);
-		await this.root.keyboard.press('Enter');
-
+		await this.modals['Direct message'].inviteUserToDM(username);
 		await this.modals['Direct message'].btnCreate.click();
 	}