fix: improve a11y in CreateDiscussion and DefaultParentRoomField components

Co-authored-by: Copilot <copilot@github.com>

Author: juliajforesti

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

@@ -15,7 +15,7 @@ import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { GenericModal } from '@rocket.chat/ui-client';
 import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 
 import { useEncryptedRoomDescription } from '../../navbar/NavBarPagesGroup/actions/useEncryptedRoomDescription';
@@ -49,6 +49,7 @@ const CreateDiscussion = ({
 	encryptedParentRoom = false,
 }: CreateDiscussionProps) => {
 	const t = useTranslation();
+	const parentRoomId = useId();
 
 	const [encryptedDisabled, setEncryptedDisabled] = useState(encryptedParentRoom);
 
@@ -124,7 +125,7 @@ const CreateDiscussion = ({
 							<Controller
 								control={control}
 								name='parentRoom'
-								render={() => <DefaultParentRoomField defaultParentRoom={defaultParentRoom} aria-required='true' />}
+								render={({ field }) => <DefaultParentRoomField {...field} defaultParentRoom={defaultParentRoom} required={true} />}
 							/>
 						)}
 						{!defaultParentRoom && (
@@ -134,6 +135,7 @@ const CreateDiscussion = ({
 								rules={{ required: t('Required_field', { field: t('Discussion_target_channel') }) }}
 								render={({ field: { name, onBlur, onChange, value } }) => (
 									<RoomAutoComplete
+										aria-label={t('Discussion_target_channel')}
 										name={name}
 										onBlur={onBlur}
 										onChange={onChange}
@@ -142,14 +144,16 @@ const CreateDiscussion = ({
 										placeholder={t('Search_options')}
 										disabled={Boolean(defaultParentRoom)}
 										aria-required='true'
+										aria-invalid={Boolean(errors.parentRoom?.message)}
+										aria-describedby={errors.parentRoom ? `${parentRoomId}-error` : undefined}
 										setSelectedRoom={onParentRoomChange}
 										renderRoomIcon={({ encrypted }) => (encrypted ? <Icon name='key' /> : null)}
 									/>
 								)}
 							/>
 						)}
 					</FieldRow>
-					{errors.parentRoom && <FieldError>{errors.parentRoom.message}</FieldError>}
+					{errors.parentRoom && <FieldError id={`${parentRoomId}-error`}>{errors.parentRoom.message}</FieldError>}
 				</Field>
 				<Field>
 					<FieldLabel required>{t('Name')}</FieldLabel>

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

@@ -1,4 +1,5 @@
-import { Skeleton, TextInput, Callout } from '@rocket.chat/fuselage';
+import { Skeleton, Callout } from '@rocket.chat/fuselage';
+import { TextInput } from '@rocket.chat/fuselage-forms';
 import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { ComponentPropsWithoutRef } from 'react';

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

@@ -177,7 +177,12 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 									validate: (value) => validateTeamName(value),
 								}}
 								render={({ field }) => (
-									<TextInput {...field} addon={<Icon size='x20' name={isPrivate ? 'team-lock' : 'team'} />} error={errors.name?.message} />
+									<TextInput
+										{...field}
+										addon={<Icon size='x20' name={isPrivate ? 'team-lock' : 'team'} />}
+										error={errors.name?.message}
+										aria-required='true'
+									/>
 								)}
 							/>
 						</FieldRow>