chore: Remove invalid `aria-hidden` prop from layout wrapper (#35429)

apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx

@@ -41,6 +41,7 @@ type CreateDiscussionProps = {
 	nameSuggestion?: string;
 };
 
+// TODO: Replace `Modal` in favor of `GenericModal`
 const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSuggestion }: CreateDiscussionProps): ReactElement => {
 	const t = useTranslation();
 
@@ -90,14 +91,15 @@ const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSug
 	const membersId = useId();
 	const firstMessageId = useId();
 	const topicId = useId();
+	const modalId = useId();
 
 	return (
 		<Modal
-			data-qa='create-discussion-modal'
+			aria-labelledby={`${modalId}-title`}
 			wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleCreate)} {...props} />}
 		>
 			<Modal.Header>
-				<Modal.Title>{t('Discussion_title')}</Modal.Title>
+				<Modal.Title id={`${modalId}-title`}>{t('Discussion_title')}</Modal.Title>
 				<Modal.Close tabIndex={-1} onClick={onClose} />
 			</Modal.Header>
 			<Modal.Content>

apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx

 import { Box } from '@rocket.chat/fuselage';
-import { useLayout, useSetting, useCurrentModal, useRoute, useCurrentRoutePath } from '@rocket.chat/ui-contexts';
+import { useLayout, useSetting, useRoute, useCurrentRoutePath } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ReactNode } from 'react';
 import { useEffect, useRef } from 'react';
 
@@ -10,7 +10,6 @@ import Sidebar from '../../../sidebar';
 const LayoutWithSidebar = ({ children }: { children: ReactNode }): ReactElement => {
 	const { isEmbedded: embeddedLayout } = useLayout();
 
-	const modal = useCurrentModal();
 	const currentRoutePath = useCurrentRoutePath();
 	const channelRoute = useRoute('channel');
 	const removeSidenav = embeddedLayout && !currentRoutePath?.startsWith('/admin');
@@ -44,7 +43,6 @@ const LayoutWithSidebar = ({ children }: { children: ReactNode }): ReactElement
 			bg='surface-light'
 			id='rocket-chat'
 			className={[embeddedLayout ? 'embedded-view' : undefined, 'menu-nav'].filter(Boolean).join(' ')}
-			aria-hidden={Boolean(modal)}
 		>
 			<AccessibilityShortcut />
 			<MainLayoutStyleTags />

apps/meteor/client/views/root/MainLayout/LayoutWithSidebarV2.tsx

 import { Box } from '@rocket.chat/fuselage';
 import type { IRouterPaths } from '@rocket.chat/ui-contexts';
-import { useLayout, useSetting, useCurrentModal, useCurrentRoutePath, useRouter } from '@rocket.chat/ui-contexts';
+import { useLayout, useSetting, useCurrentRoutePath, useRouter } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ReactNode } from 'react';
 import { useEffect, useRef } from 'react';
 
@@ -12,7 +12,6 @@ import Sidebar from '../../../sidebarv2';
 const LayoutWithSidebarV2 = ({ children }: { children: ReactNode }): ReactElement => {
 	const { isEmbedded: embeddedLayout } = useLayout();
 
-	const modal = useCurrentModal();
 	const currentRoutePath = useCurrentRoutePath();
 	const router = useRouter();
 	const removeSidenav = embeddedLayout && !currentRoutePath?.startsWith('/admin');
@@ -49,7 +48,6 @@ const LayoutWithSidebarV2 = ({ children }: { children: ReactNode }): ReactElemen
 				bg='surface-light'
 				id='rocket-chat'
 				className={[embeddedLayout ? 'embedded-view' : undefined, 'menu-nav'].filter(Boolean).join(' ')}
-				aria-hidden={Boolean(modal)}
 			>
 				<MainLayoutStyleTags />
 				{!removeSidenav && <Sidebar />}

apps/meteor/tests/e2e/account-profile.spec.ts

@@ -105,35 +105,35 @@ test.describe.serial('settings-account-profile', () => {
 		await page.goto('/account/tokens');
 		await response;
 
-		await test.step('expect show empty personal access tokens table', async () => {
+		await test.step('should show empty personal access tokens table', async () => {
 			await expect(poAccountProfile.tokensTableEmpty).toBeVisible();
 			await expect(poAccountProfile.inputToken).toBeVisible();
 		});
 
-		await test.step('expect show new personal token', async () => {
-			await poAccountProfile.inputToken.type(token);
+		await test.step('should show new personal token', async () => {
+			await poAccountProfile.inputToken.fill(token);
 			await poAccountProfile.btnTokensAdd.click();
 			await expect(poAccountProfile.tokenAddedModal).toBeVisible();
-			await page.locator('role=button[name=Ok]').click();
+			await poAccountProfile.btnTokenAddedOk.click();
 		});
 
-		await test.step('expect not allow add new personal token with same name', async () => {
-			await poAccountProfile.inputToken.type(token);
+		await test.step('should not allow add new personal token with same name', async () => {
+			await poAccountProfile.inputToken.fill(token);
 			await poAccountProfile.btnTokensAdd.click();
-			await expect(page.locator('.rcx-toastbar.rcx-toastbar--error')).toBeVisible();
+			await expect(poAccountProfile.tokensRows).toHaveCount(1);
 		});
 
-		await test.step('expect regenerate personal token', async () => {
+		await test.step('should regenerate personal token', async () => {
 			await poAccountProfile.tokenInTable(token).locator('button >> nth=0').click();
 			await poAccountProfile.btnRegenerateTokenModal.click();
 			await expect(poAccountProfile.tokenAddedModal).toBeVisible();
-			await page.locator('role=button[name=Ok]').click();
+			await poAccountProfile.btnTokenAddedOk.click();
 		});
 
-		await test.step('expect delete personal token', async () => {
+		await test.step('should delete personal token', async () => {
 			await poAccountProfile.tokenInTable(token).locator('button >> nth=1').click();
 			await poAccountProfile.btnRemoveTokenModal.click();
-			await expect(page.locator('.rcx-toastbar.rcx-toastbar--success')).toBeVisible();
+			await expect(poAccountProfile.tokensTableEmpty).toBeVisible();
 		});
 	});
 

apps/meteor/tests/e2e/channel-management.spec.ts

@@ -160,8 +160,8 @@ test.describe.serial('channel-management', () => {
 		await poHomeChannel.sidenav.openChat(targetChannel);
 		await poHomeChannel.content.btnMenuMoreActions.click();
 		await page.getByRole('menuitem', { name: 'Discussion' }).click();
-		await page.getByRole('textbox', { name: 'Name' }).fill(discussionName);
-		await page.getByRole('button', { name: 'Create' }).click();
+		await poHomeChannel.content.inputDiscussionName.fill(discussionName);
+		await poHomeChannel.content.btnCreateDiscussionModal.click();
 
 		await expect(page.getByRole('heading', { name: discussionName })).toBeVisible();
 	});

apps/meteor/tests/e2e/page-objects/account-profile.ts

@@ -73,6 +73,14 @@ export class AccountProfile {
 		return this.page.locator('role=dialog[name="Personal Access Token successfully generated"]');
 	}
 
+	get btnTokenAddedOk(): Locator {
+		return this.tokenAddedModal.locator('role=button[name="Ok"]');
+	}
+
+	get tokensRows(): Locator {
+		return this.page.locator('table tbody tr');
+	}
+
 	tokenInTable(name: string): Locator {
 		return this.page.locator(`tr[qa-token-name="${name}"]`);
 	}
@@ -81,8 +89,12 @@ export class AccountProfile {
 		return this.page.locator('role=button[name="Regenerate token"]');
 	}
 
+	get removeTokenModal(): Locator {
+		return this.page.locator('role=dialog', { hasText: 'personal access token' });
+	}
+
 	get btnRemoveTokenModal(): Locator {
-		return this.page.locator('role=button[name="Remove"]');
+		return this.removeTokenModal.getByRole('button', { name: 'Remove' });
 	}
 
 	get inputImageFile(): Locator {

apps/meteor/tests/e2e/page-objects/fragments/home-content.ts

@@ -116,6 +116,18 @@ export class HomeContent {
 		return this.page.getByRole('dialog', { name: 'File Upload' });
 	}
 
+	get createDiscussionModal(): Locator {
+		return this.page.getByRole('dialog', { name: 'Create discussion' });
+	}
+
+	get inputDiscussionName(): Locator {
+		return this.createDiscussionModal.getByRole('textbox', { name: 'Name' });
+	}
+
+	get btnCreateDiscussionModal(): Locator {
+		return this.createDiscussionModal.getByRole('button', { name: 'Create' });
+	}
+
 	get modalFilePreview(): Locator {
 		return this.page.locator(
 			'//div[@id="modal-root"]//header//following-sibling::div[1]//div//div//img | //div[@id="modal-root"]//header//following-sibling::div[1]//div//div//div//i',