fix: a11y in CreateDiscussion and RoomAutoComplete components

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 { useId, useState } from 'react';
+import { useState } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 
 import { useEncryptedRoomDescription } from '../../navbar/NavBarPagesGroup/actions/useEncryptedRoomDescription';
@@ -49,7 +49,6 @@ const CreateDiscussion = ({
 	encryptedParentRoom = false,
 }: CreateDiscussionProps) => {
 	const t = useTranslation();
-	const parentRoomId = useId();
 
 	const [encryptedDisabled, setEncryptedDisabled] = useState(encryptedParentRoom);
 
@@ -133,27 +132,21 @@ const CreateDiscussion = ({
 								control={control}
 								name='parentRoom'
 								rules={{ required: t('Required_field', { field: t('Discussion_target_channel') }) }}
-								render={({ field: { name, onBlur, onChange, value } }) => (
+								render={({ field }) => (
 									<RoomAutoComplete
-										aria-label={t('Discussion_target_channel')}
-										name={name}
-										onBlur={onBlur}
-										onChange={onChange}
-										value={value}
+										{...field}
 										error={Boolean(errors.parentRoom?.message)}
 										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 id={`${parentRoomId}-error`}>{errors.parentRoom.message}</FieldError>}
+					{errors.parentRoom && <FieldError>{errors.parentRoom.message}</FieldError>}
 				</Field>
 				<Field>
 					<FieldLabel required>{t('Name')}</FieldLabel>

apps/meteor/client/components/RoomAutoComplete/RoomAutoComplete.tsx

@@ -1,19 +1,22 @@
 import type { IRoom } from '@rocket.chat/core-typings';
-import { AutoComplete, Option, Box } from '@rocket.chat/fuselage';
+import { Option, Box } from '@rocket.chat/fuselage';
+import { AutoComplete, type AutoCompleteProps } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { RoomAvatar } from '@rocket.chat/ui-avatar';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
-import type { ComponentProps, ReactElement } from 'react';
-import { memo, useMemo, useState } from 'react';
+import type { ReactElement } from 'react';
+import { forwardRef, memo, useMemo, useState } from 'react';
+
+type LabelType = { name: string; avatarETag?: string; type: IRoom['t']; encrypted?: IRoom['encrypted'] };
 
 const generateQuery = (
 	term = '',
 ): {
 	selector: string;
 } => ({ selector: JSON.stringify({ name: term }) });
 
-type RoomAutoCompleteProps = Omit<ComponentProps<typeof AutoComplete>, 'filter'> & {
+type RoomAutoCompleteProps = Omit<AutoCompleteProps<LabelType>, 'filter'> & {
 	scope?: 'admin' | 'regular';
 	renderRoomIcon?: (props: { encrypted: IRoom['encrypted']; type: IRoom['t'] }) => ReactElement | null;
 	setSelectedRoom?: (room: IRoom | undefined) => void;
@@ -32,7 +35,10 @@ const ROOM_AUTOCOMPLETE_PARAMS = {
 	},
 } as const;
 
-const RoomAutoComplete = ({ value, onChange, scope = 'regular', renderRoomIcon, setSelectedRoom, ...props }: RoomAutoCompleteProps) => {
+const RoomAutoComplete = forwardRef<HTMLInputElement, RoomAutoCompleteProps>(function RoomAutoComplete(
+	{ value, onChange, scope = 'regular', renderRoomIcon, setSelectedRoom, ...props },
+	ref,
+) {
 	const [filter, setFilter] = useState('');
 	const filterDebounced = useDebouncedValue(filter, 300);
 	const roomsAutoCompleteEndpoint = useEndpoint('GET', ROOM_AUTOCOMPLETE_PARAMS[scope].endpoint);
@@ -57,6 +63,7 @@ const RoomAutoComplete = ({ value, onChange, scope = 'regular', renderRoomIcon,
 	return (
 		<AutoComplete
 			{...props}
+			ref={ref}
 			value={value}
 			onChange={(val) => {
 				onChange(val);
@@ -76,7 +83,7 @@ const RoomAutoComplete = ({ value, onChange, scope = 'regular', renderRoomIcon,
 					<Box margin='none' mi={2}>
 						{label?.name}
 					</Box>
-					{renderRoomIcon?.({ ...label })}
+					{renderRoomIcon?.({ encrypted: label?.encrypted, type: label?.type })}
 				</>
 			)}
 			renderItem={({ value, label, ...props }) => (
@@ -85,7 +92,7 @@ const RoomAutoComplete = ({ value, onChange, scope = 'regular', renderRoomIcon,
 					label={
 						<>
 							{label?.name}
-							{renderRoomIcon?.({ ...label })}
+							{renderRoomIcon?.({ encrypted: label?.encrypted, type: label?.type })}
 						</>
 					}
 					avatar={<RoomAvatar size={AVATAR_SIZE} room={{ _id: value, ...label }} />}
@@ -94,6 +101,6 @@ const RoomAutoComplete = ({ value, onChange, scope = 'regular', renderRoomIcon,
 			options={options}
 		/>
 	);
-};
+});
 
 export default memo(RoomAutoComplete);