fix: a11y in TranscriptModal

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

Author: juliajforesti

apps/meteor/client/views/omnichannel/modals/TranscriptModal.spec.tsx

@@ -35,13 +35,13 @@ it('should show Undo request button when roomOpen is true and transcriptRequest
 it('should show Request button when roomOpen is true and transcriptRequest not exist', async () => {
 	render(<TranscriptModal {...{ ...defaultProps, room: { ...room, transcriptRequest: undefined } }} />);
 
-	const requestBtn = await screen.findByRole('button', { name: 'request-button' });
+	const requestBtn = await screen.findByRole('button', { name: 'Request' });
 	expect(requestBtn).toBeInTheDocument();
 });
 
 it('should show Send button when roomOpen is false', async () => {
 	render(<TranscriptModal {...{ ...defaultProps, room: { ...room, open: false } }} />);
 
-	const sendBtn = await screen.findByRole('button', { name: 'send-button' });
+	const sendBtn = await screen.findByRole('button', { name: 'Send' });
 	expect(sendBtn).toBeInTheDocument();
 });

apps/meteor/client/views/omnichannel/modals/TranscriptModal.tsx

@@ -1,14 +1,8 @@
 import type { IOmnichannelRoom } from '@rocket.chat/core-typings';
 import {
-	Field,
 	Button,
-	TextInput,
 	Modal,
 	Box,
-	FieldGroup,
-	FieldLabel,
-	FieldRow,
-	FieldError,
 	ModalHeader,
 	ModalIcon,
 	ModalTitle,
@@ -17,8 +11,9 @@ import {
 	ModalFooter,
 	ModalFooterControllers,
 } from '@rocket.chat/fuselage';
+import { Field, FieldGroup, FieldLabel, FieldRow, FieldError, TextInput } from '@rocket.chat/fuselage-forms';
 import { useCallback, useEffect } from 'react';
-import { useForm } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 type TranscriptModalProps = {
@@ -34,7 +29,7 @@ const TranscriptModal = ({ email: emailDefault = '', room, onRequest, onSend, on
 	const { t } = useTranslation();
 
 	const {
-		register,
+		control,
 		handleSubmit,
 		setValue,
 		setFocus,
@@ -72,8 +67,6 @@ const TranscriptModal = ({ email: emailDefault = '', room, onRequest, onSend, on
 		}
 	}, [setValue, transcriptRequest]);
 
-	// const canSubmit = isValid && Boolean(watch('subject'));
-
 	return (
 		<Modal open wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(submit)} {...props} />} {...props}>
 			<ModalHeader>
@@ -87,23 +80,33 @@ const TranscriptModal = ({ email: emailDefault = '', room, onRequest, onSend, on
 					<Field>
 						<FieldLabel>{t('Email')}*</FieldLabel>
 						<FieldRow>
-							<TextInput
-								disabled={!!emailDefault || !!transcriptRequest}
-								error={errors.email?.message}
-								flexGrow={1}
-								{...register('email', { required: t('Required_field', { field: t('Email') }) })}
+							<Controller
+								name='email'
+								control={control}
+								rules={{ required: t('Required_field', { field: t('Email') }) }}
+								render={({ field }) => (
+									<TextInput
+										{...field}
+										disabled={!!emailDefault || !!transcriptRequest}
+										error={errors.email?.message}
+										flexGrow={1}
+										required={true}
+									/>
+								)}
 							/>
 						</FieldRow>
-						<FieldError>{errors.email?.message}</FieldError>
+						{errors.email && <FieldError>{errors.email?.message}</FieldError>}
 					</Field>
 					<Field>
 						<FieldLabel>{t('Subject')}*</FieldLabel>
 						<FieldRow>
-							<TextInput
-								disabled={!!transcriptRequest}
-								error={errors.subject?.message}
-								flexGrow={1}
-								{...register('subject', { required: t('Required_field', { field: t('Subject') }) })}
+							<Controller
+								name='subject'
+								control={control}
+								rules={{ required: t('Required_field', { field: t('Subject') }) }}
+								render={({ field }) => (
+									<TextInput {...field} disabled={!!transcriptRequest} error={errors.subject?.message} flexGrow={1} required={true} />
+								)}
 							/>
 						</FieldRow>
 						<FieldError>{errors.subject?.message}</FieldError>
@@ -119,12 +122,12 @@ const TranscriptModal = ({ email: emailDefault = '', room, onRequest, onSend, on
 						</Button>
 					)}
 					{roomOpen && !transcriptRequest && (
-						<Button aria-label='request-button' disabled={isSubmitting} loading={isSubmitting} primary type='submit'>
+						<Button disabled={isSubmitting} loading={isSubmitting} primary type='submit'>
 							{t('Request')}
 						</Button>
 					)}
 					{!roomOpen && (
-						<Button aria-label='send-button' disabled={isSubmitting} loading={isSubmitting} primary type='submit'>
+						<Button disabled={isSubmitting} loading={isSubmitting} primary type='submit'>
 							{t('Send')}
 						</Button>
 					)}