fix: password verifier accessibility

Author: cardoso

apps/meteor/client/views/account/security/ChangePassphrase.tsx

@@ -59,18 +59,26 @@ export const ChangePassphrase = (): JSX.Element => {
 		reset,
 		resetField,
 		control,
+		trigger,
 	} = useForm({
 		defaultValues,
 		mode: 'all',
 	});
 
-	const { passphrase } = watch();
+	const { passphrase, confirmationPassphrase } = watch();
 	const { validations, valid } = useValidatePassphrase(passphrase);
 	useEffect(() => {
 		if (!valid) {
 			resetField('confirmationPassphrase');
+			return;
 		}
-	}, [valid, resetField]);
+		if (confirmationPassphrase) {
+			const validateConfirmation = async () => {
+				await trigger('confirmationPassphrase');
+			};
+			void validateConfirmation();
+		}
+	}, [valid, confirmationPassphrase, resetField, trigger]);
 	const keysExist = useKeysExist();
 
 	const updatePassword = useChangeE2EPasswordMutation();

packages/password-policies/src/PasswordPolicy.ts

@@ -25,10 +25,12 @@ type PasswordPolicyType = {
 	policy: PasswordPolicyParametersEntry[];
 };
 
-export type PasswordPolicyOptions = Partial<PasswordPolicyMap & {
-	enabled: boolean;
-	throwError: boolean;
-}>;
+export type PasswordPolicyOptions = Partial<
+	PasswordPolicyMap & {
+		enabled: boolean;
+		throwError: boolean;
+	}
+>;
 
 export type PasswordPolicyValidation = {
 	[K in PasswordPolicyKey]: PasswordPolicyMap[K] extends number

packages/ui-client/src/components/PasswordVerifier/PasswordVerifier.tsx

@@ -1,11 +1,9 @@
 import { useVerifyPassword } from '@rocket.chat/ui-contexts';
 
-import { PasswordVerifierList } from './PasswordVerifierList';
+import { PasswordVerifierList, type PasswordVerifierListProps } from './PasswordVerifierList';
 
-type PasswordVerifierProps = {
-	password: string | undefined;
-	id?: string;
-	vertical?: boolean;
+export type PasswordVerifierProps = Pick<PasswordVerifierListProps, 'id' | 'vertical'> & {
+	password: string;
 };
 
 export const PasswordVerifier = ({ password, id, vertical }: PasswordVerifierProps) => {

packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx

@@ -1,39 +1,45 @@
 import { Box, Icon, type IconProps } from '@rocket.chat/fuselage';
 import type { PasswordPolicyValidation } from '@rocket.chat/ui-contexts';
+import { useId } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const variants = {
 	success: {
 		name: 'success-circle',
+		label: 'Success',
 		color: 'status-font-on-success',
 	},
 	error: {
 		name: 'error-circle',
+		label: 'Error',
 		color: 'status-font-on-danger',
 	},
-} satisfies Record<string, IconProps>;
+} as const satisfies Record<string, IconProps>;
 
 type PasswordVerifierItemProps = PasswordPolicyValidation & {
 	vertical: boolean;
 };
 
 export const PasswordVerifierItem = (props: PasswordVerifierItemProps) => {
 	const { t } = useTranslation();
-	const { name, color } = variants[props.isValid ? 'success' : 'error'];
-	const label = t(`${props.name}-label`, 'limit' in props ? { limit: props.limit } : undefined);
+	const id = useId();
+	const icon = variants[props.isValid ? 'success' : 'error'];
+	const name = `${props.name}-label` as const;
+	const requirementText = t(name, 'limit' in props ? { limit: props.limit } : undefined);
 	return (
 		<Box
 			display='flex'
 			flexBasis={props.vertical ? '100%' : '50%'}
 			alignItems='center'
 			mbe={8}
 			fontScale='c1'
-			color={color}
+			color={icon.color}
 			role='listitem'
-			aria-label={label}
+			aria-hidden='false'
+			aria-labelledby={`${id}-icon ${id}-text`}
 		>
-			<Icon name={name} color={color} size='x16' mie={4} />
-			<span aria-hidden>{label}</span>
+			<Icon id={`${id}-icon`} aria-label={t(icon.label)} aria-hidden='false' name={icon.name} color={icon.color} size='x16' mie={4} />
+			<span id={`${id}-text`}>{requirementText}</span>
 		</Box>
 	);
 };

packages/ui-client/src/components/PasswordVerifier/PasswordVerifierList.tsx

@@ -5,13 +5,13 @@ import { useTranslation } from 'react-i18next';
 
 import { PasswordVerifierItem } from './PasswordVerifierItem';
 
-type PasswordVerifierListProps = {
+export type PasswordVerifierListProps = {
 	id?: string;
 	validations: PasswordPolicyValidation[];
 	vertical?: boolean;
 };
 
-export const PasswordVerifierList = ({ id, validations, vertical }: PasswordVerifierListProps) => {
+export const PasswordVerifierList = ({ id, validations, vertical = true }: PasswordVerifierListProps) => {
 	const { t } = useTranslation();
 	const uniqueId = useId();
 
@@ -28,9 +28,9 @@ export const PasswordVerifierList = ({ id, validations, vertical }: PasswordVeri
 				<Box mbe={8} fontScale='c2' id={uniqueId} aria-hidden>
 					{t('Password_must_have')}
 				</Box>
-				<Box display='flex' flexWrap='wrap' role='list' aria-labelledby={uniqueId}>
+				<Box display='flex' flexWrap='wrap' role='list' aria-labelledby={uniqueId} aria-live='polite'>
 					{validations.map((validation) => (
-						<PasswordVerifierItem key={validation.name} vertical={!!vertical} {...validation} />
+						<PasswordVerifierItem key={validation.name} vertical={vertical} {...validation} />
 					))}
 				</Box>
 			</Box>

packages/ui-client/src/components/PasswordVerifier/PasswordVerifiers.spec.tsx

@@ -40,7 +40,7 @@ it('should render policy list if its enabled and not empty', async () => {
 	});
 
 	expect(screen.queryByRole('list')).toBeVisible();
-	expect(screen.queryByRole('listitem', { name: 'get-password-policy-minLength-label' })).toBeVisible();
+	expect(screen.queryByRole('listitem', { name: 'Success get-password-policy-minLength-label' })).toBeVisible();
 });
 
 it('should render all the policies when all policies are enabled', async () => {
@@ -77,7 +77,10 @@ it("should render policy as invalid if password doesn't match the requirements",
 		expect(screen.queryByTestId('password-verifier-skeleton')).toBeNull();
 	});
 
-	expect(screen.getByRole('listitem', { name: 'get-password-policy-minLength-label' })).toHaveAttribute('aria-invalid', 'true');
+	const item = screen.getByRole('listitem', { name: 'Error get-password-policy-minLength-label' });
+
+	expect(item.children[0]).toHaveAccessibleName('Error');
+	expect(item.children[1]).toHaveTextContent('get-password-policy-minLength-label');
 });
 
 it('should render policy as valid if password matches the requirements', async () => {
@@ -91,5 +94,9 @@ it('should render policy as valid if password matches the requirements', async (
 	await waitFor(() => {
 		expect(screen.queryByTestId('password-verifier-skeleton')).toBeNull();
 	});
-	expect(screen.getByRole('listitem', { name: 'get-password-policy-minLength-label' })).toHaveAttribute('aria-invalid', 'false');
+
+	const item = screen.getByRole('listitem', { name: 'Success get-password-policy-minLength-label' });
+
+	expect(item.children[0]).toHaveAccessibleName('Success');
+	expect(item.children[1]).toHaveTextContent('get-password-policy-minLength-label');
 });