chore: form improve a11y

RocketChat · Nov 21, 2024 · 7c68607 · 7c68607
1 parent f7601eb
commit 7c68607
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 13 deletions.
diff --git a/apps/meteor/client/views/omnichannel/contactInfo/EditContactInfo.tsx b/apps/meteor/client/views/omnichannel/contactInfo/EditContactInfo.tsx
@@ -155,7 +155,10 @@ const EditContactInfo = ({ contactData, onClose, onCancel }: ContactNewEditProps
 		return createContact.mutate(payload);
 	};
 
+	const formId = useUniqueId();
 	const nameField = useUniqueId();
+	const emailField = useUniqueId();
+	const phoneField = useUniqueId();
 
 	if (isLoadingCustomFields) {
 		return (
@@ -172,7 +175,7 @@ const EditContactInfo = ({ contactData, onClose, onCancel }: ContactNewEditProps
 				<ContextualbarTitle>{contactData ? t('Edit_Contact_Profile') : t('New_contact')}</ContextualbarTitle>
 				<ContextualbarClose onClick={onClose} />
 			</ContextualbarHeader>
-			<ContextualbarScrollableContent is='form' onSubmit={handleSubmit(handleSave)}>
+			<ContextualbarScrollableContent id={formId} is='form' onSubmit={handleSubmit(handleSave)}>
 				<Field>
 					<FieldLabel htmlFor={nameField} required>
 						{t('Name')}
@@ -182,13 +185,25 @@ const EditContactInfo = ({ contactData, onClose, onCancel }: ContactNewEditProps
 							name='name'
 							control={control}
 							rules={{ validate: validateName }}
-							render={({ field }) => <TextInput id={nameField} {...field} error={errors.name?.message} />}
+							render={({ field }) => (
+								<TextInput
+									id={nameField}
+									{...field}
+									error={errors.name?.message}
+									aria-invalid={errors.name ? 'true' : 'false'}
+									aria-describedby={`${nameField}-error`}
+								/>
+							)}
 						/>
 					</FieldRow>
-					{errors.name && <FieldError>{errors.name.message}</FieldError>}
+					{errors.name && (
+						<FieldError id={`${nameField}-error`} role='alert'>
+							{errors.name.message}
+						</FieldError>
+					)}
 				</Field>
 				<Field>
-					<FieldLabel>{t('Email')}</FieldLabel>
+					<FieldLabel id={emailField}>{t('Email')}</FieldLabel>
 					{emailFields.map((field, index) => (
 						<Fragment key={field.id}>
 							<FieldRow>
@@ -199,11 +214,24 @@ const EditContactInfo = ({ contactData, onClose, onCancel }: ContactNewEditProps
 										required: t('Required_field', { field: t('Email') }),
 										validate: validateEmailFormat,
 									}}
-									render={({ field }) => <TextInput {...field} error={errors.emails?.[index]?.address?.message} />}
+									render={({ field }) => (
+										<TextInput
+											{...field}
+											aria-labelledby={emailField}
+											error={errors.emails?.[index]?.address?.message}
+											aria-invalid={errors.emails?.[index]?.address ? 'true' : 'false'}
+											aria-describedby={`${emailField + index}-error`}
+											aria-required='true'
+										/>
+									)}
 								/>
-								<IconButton small onClick={() => removeEmail(index)} mis={8} icon='trash' />
+								<IconButton title={t('Remove_email')} small onClick={() => removeEmail(index)} mis={8} icon='trash' />
 							</FieldRow>
-							{errors.emails?.[index]?.address && <FieldError>{errors.emails?.[index]?.address?.message}</FieldError>}
+							{errors.emails?.[index]?.address && (
+								<FieldError id={`${emailField + index}-error`} role='alert'>
+									{errors.emails?.[index]?.address?.message}
+								</FieldError>
+							)}
 						</Fragment>
 					))}
 					<Button
@@ -214,7 +242,7 @@ const EditContactInfo = ({ contactData, onClose, onCancel }: ContactNewEditProps
 					</Button>
 				</Field>
 				<Field>
-					<FieldLabel>{t('Phone')}</FieldLabel>
+					<FieldLabel id={phoneField}>{t('Phone')}</FieldLabel>
 					{phoneFields.map((field, index) => (
 						<Fragment key={field.id}>
 							<FieldRow>
@@ -225,12 +253,24 @@ const EditContactInfo = ({ contactData, onClose, onCancel }: ContactNewEditProps
 										required: t('Required_field', { field: t('Phone') }),
 										validate: validatePhone,
 									}}
-									render={({ field }) => <TextInput {...field} error={errors.phones?.[index]?.message} />}
+									render={({ field }) => (
+										<TextInput
+											{...field}
+											aria-labelledby={phoneField}
+											error={errors.phones?.[index]?.phoneNumber?.message}
+											aria-invalid={errors.phones?.[index]?.phoneNumber ? 'true' : 'false'}
+											aria-describedby={`${phoneField + index}-error`}
+											aria-required='true'
+										/>
+									)}
 								/>
-								<IconButton small onClick={() => removePhone(index)} mis={8} icon='trash' />
+								<IconButton title={t('Remove_phone')} small onClick={() => removePhone(index)} mis={8} icon='trash' />
 							</FieldRow>
-							{errors.phones?.[index]?.phoneNumber && <FieldError>{errors.phones?.[index]?.phoneNumber?.message}</FieldError>}
-							<FieldError>{errors.phones?.[index]?.message}</FieldError>
+							{errors.phones?.[index]?.phoneNumber && (
+								<FieldError id={`${phoneField + index}-error`} role='alert'>
+									{errors.phones?.[index]?.phoneNumber?.message}
+								</FieldError>
+							)}
 						</Fragment>
 					))}
 					<Button
@@ -258,7 +298,7 @@ const EditContactInfo = ({ contactData, onClose, onCancel }: ContactNewEditProps
 			<ContextualbarFooter>
 				<ButtonGroup stretch>
 					<Button onClick={onCancel}>{t('Cancel')}</Button>
-					<Button onClick={handleSubmit(handleSave)} loading={isSubmitting} primary>
+					<Button type='submit' form={formId} loading={isSubmitting} primary>
 						{t('Save')}
 					</Button>
 				</ButtonGroup>

diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json
@@ -4570,9 +4570,11 @@
   "Remove_custom_oauth": "Remove custom OAuth",
   "Remove_from_room": "Remove from room",
   "Remove_from_team": "Remove from team",
+  "Remove_email": "Remove email",
   "Remove_extension": "Remove extension",
   "Remove_last_character": "Remove last character",
   "Remove_last_admin": "Removing last admin",
+  "Remove_phone": "Remove phone",
   "Remove_someone_from_room": "Remove someone from the room",
   "remove-closed-livechat-room": "Remove Closed Omnichannel Room",
   "remove-closed-livechat-room_description": "Permission to remove closed omnichannel room",

diff --git a/packages/i18n/src/locales/pt-BR.i18n.json b/packages/i18n/src/locales/pt-BR.i18n.json
@@ -3590,9 +3590,11 @@
   "Remove_custom_oauth": "Remover oauth customizado",
   "Remove_from_room": "Remover da sala",
   "Remove_from_team": "Remover da equipe",
+  "Remove_email": "Remover endereço de e-mail",
   "Remove_extension": "Remover extensão",
   "Remove_last_character": "Remover último caracter",
   "Remove_last_admin": "Removendo último admin",
+  "Remove_phone": "Remover número de telefone",
   "Remove_someone_from_room": "Remover alguém da sala",
   "remove-closed-livechat-room": "Remover sala de omnichannel fechada",
   "remove-closed-livechat-rooms": "Remover todas as salas de omnichannel fechadas",