test: create non private team and readonly team (#30371)

apps/meteor/client/sidebar/header/CreateTeam/CreateTeamModal.tsx

-import { Box, Modal, Button, TextInput, Field, ToggleSwitch, FieldGroup, Icon } from '@rocket.chat/fuselage';
+import { Box, Button, Field, FieldGroup, Icon, Modal, TextInput, ToggleSwitch } from '@rocket.chat/fuselage';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 import {
-	useTranslation,
-	useSetting,
-	usePermission,
 	useEndpoint,
-	useToastMessageDispatch,
+	usePermission,
 	usePermissionWithScopedRoles,
+	useSetting,
+	useToastMessageDispatch,
+	useTranslation,
 } from '@rocket.chat/ui-contexts';
 import type { ComponentProps, ReactElement } from 'react';
-import React, { memo, useMemo, useEffect } from 'react';
-import { useForm, Controller } from 'react-hook-form';
+import React, { memo, useEffect, useMemo } from 'react';
+import { Controller, useForm } from 'react-hook-form';
 
 import UserAutoCompleteMultiple from '../../../components/UserAutoCompleteMultiple';
 import { goToRoomById } from '../../../lib/utils/goToRoomById';
@@ -129,18 +130,35 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement =>
 		}
 	};
 
+	const createTeamFormId = useUniqueId();
+	const nameId = useUniqueId();
+	const topicId = useUniqueId();
+	const privateId = useUniqueId();
+	const readOnlyId = useUniqueId();
+	const encryptedId = useUniqueId();
+	const broadcastId = useUniqueId();
+	const addMembersId = useUniqueId();
+
 	return (
-		<Modal wrapperFunction={(props: ComponentProps<typeof Box>) => <Box is='form' onSubmit={handleSubmit(handleCreateTeam)} {...props} />}>
+		<Modal
+			aria-labelledby={`${createTeamFormId}-title`}
+			wrapperFunction={(props: ComponentProps<typeof Box>) => (
+				<Box is='form' id={createTeamFormId} onSubmit={handleSubmit(handleCreateTeam)} {...props} />
+			)}
+		>
 			<Modal.Header>
-				<Modal.Title>{t('Teams_New_Title')}</Modal.Title>
+				<Modal.Title id={`${createTeamFormId}-title`}>{t('Teams_New_Title')}</Modal.Title>
 				<Modal.Close title={t('Close')} onClick={onClose} tabIndex={-1} />
 			</Modal.Header>
 			<Modal.Content mbe={2}>
 				<FieldGroup>
 					<Field>
-						<Field.Label>{t('Teams_New_Name_Label')}</Field.Label>
+						<Field.Label required htmlFor={nameId}>
+							{t('Teams_New_Name_Label')}
+						</Field.Label>
 						<Field.Row>
 							<TextInput
+								id={nameId}
 								aria-invalid={errors.name ? 'true' : 'false'}
 								{...register('name', {
 									required: t('error-the-field-is-required', { field: t('Name') }),
@@ -149,26 +167,37 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement =>
 								placeholder={t('Team_Name')}
 								addon={<Icon size='x20' name={isPrivate ? 'team-lock' : 'team'} />}
 								error={errors.name?.message}
+								aria-describedby={`${nameId}-error`}
+								aria-required='true'
 							/>
 						</Field.Row>
-						{errors?.name && <Field.Error>{errors.name.message}</Field.Error>}
+						{errors?.name && (
+							<Field.Error aria-live='assertive' id={`${nameId}-error`}>
+								{errors.name.message}
+							</Field.Error>
+						)}
 					</Field>
 					<Field>
-						<Field.Label>
+						<Field.Label htmlFor={topicId}>
 							{t('Teams_New_Description_Label')}{' '}
 							<Box is='span' color='annotation'>
 								({t('optional')})
 							</Box>
 						</Field.Label>
 						<Field.Row>
-							<TextInput {...register('topic')} placeholder={t('Teams_New_Description_Placeholder')} />
+							<TextInput
+								id={topicId}
+								aria-describedby={`${topicId}-hint`}
+								{...register('topic')}
+								placeholder={t('Teams_New_Description_Placeholder')}
+							/>
 						</Field.Row>
 					</Field>
 					<Field>
 						<Box display='flex' justifyContent='space-between' alignItems='start'>
 							<Box display='flex' flexDirection='column' width='full'>
-								<Field.Label>{t('Teams_New_Private_Label')}</Field.Label>
-								<Field.Description>
+								<Field.Label htmlFor={privateId}>{t('Teams_New_Private_Label')}</Field.Label>
+								<Field.Description id={`${privateId}-hint`}>
 									{isPrivate ? t('Teams_New_Private_Description_Enabled') : t('Teams_New_Private_Description_Disabled')}
 								</Field.Description>
 							</Box>
@@ -176,7 +205,7 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement =>
 								control={control}
 								name='isPrivate'
 								render={({ field: { onChange, value, ref } }): ReactElement => (
-									<ToggleSwitch onChange={onChange} checked={value} ref={ref} />
+									<ToggleSwitch id={privateId} aria-describedby={`${privateId}-hint`} onChange={onChange} checked={value} ref={ref} />
 								)}
 							/>
 						</Box>
@@ -184,8 +213,8 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement =>
 					<Field>
 						<Box display='flex' justifyContent='space-between' alignItems='start'>
 							<Box display='flex' flexDirection='column' width='full'>
-								<Field.Label>{t('Teams_New_Read_only_Label')}</Field.Label>
-								<Field.Description>
+								<Field.Label htmlFor={readOnlyId}>{t('Teams_New_Read_only_Label')}</Field.Label>
+								<Field.Description id={`${readOnlyId}-hint`}>
 									{readOnly ? t('Only_authorized_users_can_write_new_messages') : t('Teams_New_Read_only_Description')}
 								</Field.Description>
 							</Box>
@@ -193,7 +222,14 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement =>
 								control={control}
 								name='readOnly'
 								render={({ field: { onChange, value, ref } }): ReactElement => (
-									<ToggleSwitch disabled={!canChangeReadOnly} onChange={onChange} checked={value} ref={ref} />
+									<ToggleSwitch
+										id={readOnlyId}
+										aria-describedby={`${readOnlyId}-hint`}
+										disabled={!canChangeReadOnly}
+										onChange={onChange}
+										checked={value}
+										ref={ref}
+									/>
 								)}
 							/>
 						</Box>
@@ -201,8 +237,8 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement =>
 					<Field>
 						<Box display='flex' justifyContent='space-between' alignItems='start'>
 							<Box display='flex' flexDirection='column' width='full'>
-								<Field.Label>{t('Teams_New_Encrypted_Label')}</Field.Label>
-								<Field.Description>
+								<Field.Label htmlFor={encryptedId}>{t('Teams_New_Encrypted_Label')}</Field.Label>
+								<Field.Description id={`${encryptedId}-hint`}>
 									{isPrivate ? t('Teams_New_Encrypted_Description_Enabled') : t('Teams_New_Encrypted_Description_Disabled')}
 								</Field.Description>
 							</Box>
@@ -210,7 +246,14 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement =>
 								control={control}
 								name='encrypted'
 								render={({ field: { onChange, value, ref } }): ReactElement => (
-									<ToggleSwitch disabled={!canSetReadOnly || !canChangeEncrypted} onChange={onChange} checked={value} ref={ref} />
+									<ToggleSwitch
+										id={encryptedId}
+										disabled={!canSetReadOnly || !canChangeEncrypted}
+										onChange={onChange}
+										aria-describedby={`${encryptedId}-hint`}
+										checked={value}
+										ref={ref}
+									/>
 								)}
 							/>
 						</Box>
@@ -218,20 +261,20 @@ const CreateTeamModal = ({ onClose }: { onClose: () => void }): ReactElement =>
 					<Field>
 						<Box display='flex' justifyContent='space-between' alignItems='start'>
 							<Box display='flex' flexDirection='column' width='full'>
-								<Field.Label>{t('Teams_New_Broadcast_Label')}</Field.Label>
-								<Field.Description>{t('Teams_New_Broadcast_Description')}</Field.Description>
+								<Field.Label htmlFor={broadcastId}>{t('Teams_New_Broadcast_Label')}</Field.Label>
+								<Field.Description d={`${broadcastId}-hint`}>{t('Teams_New_Broadcast_Description')}</Field.Description>
 							</Box>
 							<Controller
 								control={control}
 								name='broadcast'
 								render={({ field: { onChange, value, ref } }): ReactElement => (
-									<ToggleSwitch onChange={onChange} checked={value} ref={ref} />
+									<ToggleSwitch aria-describedby={`${broadcastId}-hint`} id={broadcastId} onChange={onChange} checked={value} ref={ref} />
 								)}
 							/>
 						</Box>
 					</Field>
 					<Field>
-						<Field.Label>
+						<Field.Label htmlFor={addMembersId}>
 							{t('Teams_New_Add_members_Label')}{' '}
 							<Box is='span' color='annotation'>
 								({t('optional')})

apps/meteor/tests/e2e/page-objects/home-team.ts

 import type { Locator, Page } from '@playwright/test';
 
-import { HomeContent, HomeSidenav, HomeFlextab } from './fragments';
+import { HomeContent, HomeFlextab, HomeSidenav } from './fragments';
 
 export class HomeTeam {
 	private readonly page: Page;
@@ -30,4 +30,12 @@ export class HomeTeam {
 	get btnTeamCreate(): Locator {
 		return this.page.locator('role=dialog >> role=group >> role=button[name=Create]');
 	}
+
+	get textPrivate(): Locator {
+		return this.page.locator('role=dialog[name="Create Team"] >> label >> text="Private"');
+	}
+
+	get textReadOnly(): Locator {
+		return this.page.locator('role=dialog[name="Create Team"] >> label >> text="Read Only"');
+	}
 }

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

@@ -3,7 +3,7 @@ import { faker } from '@faker-js/faker';
 import { Users } from './fixtures/userStates';
 import { HomeTeam } from './page-objects';
 import { createTargetChannel } from './utils';
-import { test, expect } from './utils/test';
+import { expect, test } from './utils/test';
 
 test.use({ storageState: Users.admin.state });
 
@@ -11,6 +11,8 @@ test.describe.serial('teams-management', () => {
 	let poHomeTeam: HomeTeam;
 	let targetChannel: string;
 	const targetTeam = faker.string.uuid();
+	const targetTeamNonPrivate = faker.string.uuid();
+	const targetTeamReadOnly = faker.string.uuid();
 
 	test.beforeAll(async ({ api }) => {
 		targetChannel = await createTargetChannel(api);
@@ -22,7 +24,7 @@ test.describe.serial('teams-management', () => {
 		await page.goto('/home');
 	});
 
-	test('expect create "targetTeam"', async ({ page }) => {
+	test('expect create "targetTeam" private', async ({ page }) => {
 		await poHomeTeam.sidenav.openNewByLabel('Team');
 		await poHomeTeam.inputTeamName.type(targetTeam);
 		await poHomeTeam.addMember('user1');
@@ -31,6 +33,26 @@ test.describe.serial('teams-management', () => {
 		await expect(page).toHaveURL(`/group/${targetTeam}`);
 	});
 
+	test('expect create "targetTeamNonPrivate" non private', async ({ page }) => {
+		await poHomeTeam.sidenav.openNewByLabel('Team');
+		await poHomeTeam.inputTeamName.type(targetTeamNonPrivate);
+		await poHomeTeam.textPrivate.click();
+		await poHomeTeam.addMember('user1');
+		await poHomeTeam.btnTeamCreate.click();
+
+		await expect(page).toHaveURL(`/channel/${targetTeamNonPrivate}`);
+	});
+
+	test('expect create "targetTeamReadOnly" readonly', async ({ page }) => {
+		await poHomeTeam.sidenav.openNewByLabel('Team');
+		await poHomeTeam.inputTeamName.type(targetTeamReadOnly);
+		await poHomeTeam.textReadOnly.click();
+		await poHomeTeam.addMember('user1');
+		await poHomeTeam.btnTeamCreate.click();
+
+		await expect(page).toHaveURL(`/group/${targetTeamReadOnly}`);
+	});
+
 	test('expect throw validation error if team name already exists', async () => {
 		await poHomeTeam.sidenav.openNewByLabel('Team');
 		await poHomeTeam.inputTeamName.type(targetTeam);