Mirrors/Rocket.Chat
1
0
Fork 0
mirror of https://github.com/RocketChat/Rocket.Chat.git synced 2025-12-28 06:47:25 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat(a11y): Missing FieldGroup legend in profile page (#37119)

Browse Source 
Co-authored-by: Erik Göthe <194300518+ergotse@users.noreply.github.com>
Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com>
This commit is contained in:
ergot-rp 2025-11-13 23:02:01 +01:00 committed by GitHub
parent 67fa49161f
commit 7d90c9d685
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/dull-rocks-boil.md Normal file
View File

@ -0,0 +1,5 @@
---
'@rocket.chat/meteor': minor
---
Adds missing legend for fieldset in profile page to meet WCAG compliance

11
apps/meteor/client/views/account/profile/AccountProfileForm.tsx
View File

@ -25,6 +25,7 @@ import {
import { useMutation } from '@tanstack/react-query';
import type { AllHTMLAttributes, ReactElement } from 'react';
import { useId, useCallback } from 'react';
import { VisuallyHidden } from 'react-aria';
import { Controller, useFormContext } from 'react-hook-form';
import type { AccountProfileFormValues } from './getProfileInitialValues';
@ -142,6 +143,9 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
return (
<Box {...props} is='form' autoComplete='off' onSubmit={handleSubmit(handleSave)}>
<FieldGroup>
<VisuallyHidden>
<legend>{t('Profile_details')}</legend>
</VisuallyHidden>
<Field>
<Controller
control={control}
@ -240,7 +244,12 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
<Controller
control={control}
name='statusText'
rules={{ maxLength: { value: USER_STATUS_TEXT_MAX_LENGTH, message: t('Max_length_is', USER_STATUS_TEXT_MAX_LENGTH) } }}
rules={{
maxLength: {
value: USER_STATUS_TEXT_MAX_LENGTH,
message: t('Max_length_is', USER_STATUS_TEXT_MAX_LENGTH),
},
}}
render={({ field }) => (
<TextInput
{...field}