chore(a11y): RegisterView

app/containers/CustomFields/index.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import RNPickerSelect from 'react-native-picker-select';
+
+import { FormTextInput } from '../TextInput';
+import useParsedCustomFields from '../../lib/hooks/useCustomFields';
+
+interface ICustomFields {
+	Accounts_CustomFields: string;
+	customFields: any;
+	onCustomFieldChange: (value: any) => void;
+}
+
+const CustomFields = ({ Accounts_CustomFields, customFields, onCustomFieldChange }: ICustomFields) => {
+	const { parsedCustomFields } = useParsedCustomFields(Accounts_CustomFields);
+
+	if (!Accounts_CustomFields) {
+		return null;
+	}
+	try {
+		return Object.keys(parsedCustomFields).map((key: string, index: number, array: any) => {
+			if (parsedCustomFields[key].type === 'select') {
+				const options = parsedCustomFields[key].options.map((option: string) => ({ label: option, value: option }));
+				return (
+					<RNPickerSelect
+						key={key}
+						items={options}
+						onValueChange={value => {
+							const newValue: { [key: string]: string } = {};
+							newValue[key] = value;
+							onCustomFieldChange({ ...customFields, ...newValue });
+						}}
+						value={customFields[key]}>
+						<FormTextInput
+							inputRef={e => {
+								// @ts-ignore
+								this[key] = e;
+							}}
+							required={parsedCustomFields[key]?.required}
+							label={key}
+							value={customFields[key]}
+							testID='settings-view-language'
+						/>
+					</RNPickerSelect>
+				);
+			}
+			return (
+				<FormTextInput
+					inputRef={e => {
+						// @ts-ignore
+						this[key] = e;
+					}}
+					key={key}
+					label={key}
+					value={customFields[key]}
+					onChangeText={value => {
+						const newValue: { [key: string]: string } = {};
+						newValue[key] = value;
+						onCustomFieldChange({ ...customFields, ...newValue });
+					}}
+					onSubmitEditing={() => {
+						if (array.length - 1 > index) {
+							// @ts-ignore
+							return this[array[index + 1]].focus();
+						}
+					}}
+					required={parsedCustomFields[key]?.required}
+					maxLength={parsedCustomFields[key]?.maxLength ?? undefined}
+					containerStyle={{ marginBottom: 0, marginTop: 0 }}
+				/>
+			);
+		});
+	} catch (error) {
+		return null;
+	}
+};
+
+export default CustomFields;

app/containers/CustomIcon/mappedIcons.js

@@ -84,6 +84,7 @@ export const mappedIcons = {
 	'encrypted': 59730,
 	'engagement-dashboard': 59731,
 	'enterprise-feature': 59732,
+	'error-circle': 59867,
 	'facebook-monochromatic': 59733,
 	'federation': 59652,
 	'federation-disabled': 59651,
@@ -192,6 +193,7 @@ export const mappedIcons = {
 	'status-offline': 59744,
 	'status-online': 59745,
 	'strike': 59846,
+	'success-circle': 59855,
 	'sun': 59847,
 	'support': 59848,
 	'team': 59849,

app/containers/LoginServices/ServicesSeparator.tsx

@@ -8,7 +8,7 @@ import I18n from '../../i18n';
 import { IServicesSeparator } from './interfaces';
 
 const ServicesSeparator = ({ services, separator, collapsed, onPress }: IServicesSeparator) => {
-	const { colors, theme } = useTheme();
+	const { colors } = useTheme();
 
 	const { length } = Object.values(services);
 
@@ -22,12 +22,12 @@ const ServicesSeparator = ({ services, separator, collapsed, onPress }: IService
 					style={styles.options}
 					color={colors.fontHint}
 				/>
-				<OrSeparator theme={theme} />
+				<OrSeparator />
 			</>
 		);
 	}
 	if (length > 0 && separator) {
-		return <OrSeparator theme={theme} />;
+		return <OrSeparator />;
 	}
 	return null;
 };

app/containers/LoginServices/index.tsx

@@ -9,18 +9,21 @@ import { SERVICES_COLLAPSED_HEIGHT, SERVICE_HEIGHT } from './styles';
 import ServicesSeparator from './ServicesSeparator';
 import Service from './Service';
 
-const ServiceList = ({ services, CAS_enabled, CAS_login_url, Gitlab_URL, server }: IServiceList) => (
+const ServiceList = ({ services, CAS_enabled, CAS_login_url, Gitlab_URL, server, collapsed }: IServiceList) => (
 	<>
-		{Object.values(services).map((service: IItemService) => (
-			<Service
-				key={service._id}
-				CAS_enabled={CAS_enabled}
-				CAS_login_url={CAS_login_url}
-				Gitlab_URL={Gitlab_URL}
-				server={server}
-				service={service}
-			/>
-		))}
+		{Object.values(services).map((service: IItemService, index: number) => {
+			if (index > 2 && collapsed) return <></>;
+			return (
+				<Service
+					key={service._id}
+					CAS_enabled={CAS_enabled}
+					CAS_login_url={CAS_login_url}
+					Gitlab_URL={Gitlab_URL}
+					server={server}
+					service={service}
+				/>
+			);
+		})}
 	</>
 );
 
@@ -61,6 +64,7 @@ const LoginServices = ({ separator }: { separator: boolean }): React.ReactElemen
 						CAS_login_url={CAS_login_url}
 						Gitlab_URL={Gitlab_URL}
 						server={server}
+						collapsed={collapsed}
 					/>
 				</Animated.View>
 				<ServicesSeparator services={services} separator={separator} collapsed={collapsed} onPress={onPressButtonSeparator} />
@@ -75,6 +79,7 @@ const LoginServices = ({ separator }: { separator: boolean }): React.ReactElemen
 				CAS_login_url={CAS_login_url}
 				Gitlab_URL={Gitlab_URL}
 				server={server}
+				collapsed={collapsed}
 			/>
 			<ServicesSeparator services={services} separator={separator} collapsed={collapsed} onPress={onPressButtonSeparator} />
 		</>

app/containers/LoginServices/interfaces.ts

@@ -50,6 +50,7 @@ export interface IServiceList {
 	CAS_login_url: string;
 	Gitlab_URL: string;
 	server: string;
+	collapsed: boolean;
 }
 
 export interface IServicesSeparator {

app/containers/OrSeparator.tsx

@@ -3,8 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import I18n from '../i18n';
 import sharedStyles from '../views/Styles';
-import { themes } from '../lib/constants';
-import { TSupportedThemes } from '../theme';
+import { useTheme } from '../theme';
 
 const styles = StyleSheet.create({
 	container: {
@@ -17,22 +16,19 @@ const styles = StyleSheet.create({
 		flex: 1
 	},
 	text: {
-		fontSize: 14,
-		marginLeft: 14,
-		marginRight: 14,
+		fontSize: 16,
+		marginHorizontal: 12,
 		...sharedStyles.textMedium
 	}
 });
 
-interface IOrSeparator {
-	theme: TSupportedThemes;
-}
+const OrSeparator = React.memo(() => {
+	const { colors } = useTheme();
+	const line = { backgroundColor: colors.strokeLight };
+	const text = { color: colors.fontSecondaryInfo };
 
-const OrSeparator = React.memo(({ theme }: IOrSeparator) => {
-	const line = { backgroundColor: themes[theme].strokeLight };
-	const text = { color: themes[theme].fontSecondaryInfo };
 	return (
-		<View style={styles.container}>
+		<View accessible style={styles.container}>
 			<View style={[styles.line, line]} />
 			<Text style={[styles.text, text]}>{I18n.t('OR')}</Text>
 			<View style={[styles.line, line]} />

app/containers/TextInput/FormTextInput.tsx

@@ -1,6 +1,6 @@
-import { BottomSheetTextInput } from '@discord/bottom-sheet';
 import React, { useState } from 'react';
 import { StyleProp, StyleSheet, Text, TextInput as RNTextInput, TextInputProps, TextStyle, View, ViewStyle } from 'react-native';
+import { BottomSheetTextInput } from '@discord/bottom-sheet';
 import Touchable from 'react-native-platform-touchable';
 
 import i18n from '../../i18n';
@@ -9,6 +9,7 @@ import sharedStyles from '../../views/Styles';
 import ActivityIndicator from '../ActivityIndicator';
 import { CustomIcon, TIconsName } from '../CustomIcon';
 import { TextInput } from './TextInput';
+import { isIOS } from '../../lib/methods/helpers';
 
 const styles = StyleSheet.create({
 	error: {
@@ -97,10 +98,12 @@ export const FormTextInput = ({
 	const [showPassword, setShowPassword] = useState(false);
 	const showClearInput = onClearInput && value && value.length > 0;
 	const Input = bottomSheet ? BottomSheetTextInput : TextInput;
+	const accessibilityLabelRequired = required ? `, ${i18n.t('Required')}` : '';
+	const accessibilityInputValue = (!secureTextEntry && value && isIOS) || showPassword ? `, ${value}` : '';
 	return (
 		<View
 			accessible
-			accessibilityLabel={`${label} - ${required ? i18n.t('Required') : ''}`}
+			accessibilityLabel={accessibilityLabel ?? `${label}${accessibilityLabelRequired}${accessibilityInputValue}`}
 			style={[styles.inputContainer, containerStyle]}>
 			{label ? (
 				<Text style={[styles.label, { color: colors.fontTitlesLabels }, error?.error && { color: colors.fontDanger }]}>
@@ -109,7 +112,7 @@ export const FormTextInput = ({
 				</Text>
 			) : null}
 
-			<View style={styles.wrap}>
+			<View accessible style={styles.wrap}>
 				<Input
 					style={[
 						styles.input,
@@ -167,7 +170,10 @@ export const FormTextInput = ({
 				) : null}
 
 				{secureTextEntry ? (
-					<Touchable onPress={() => setShowPassword(!showPassword)} style={[styles.iconContainer, styles.iconRight]}>
+					<Touchable
+						accessible
+						accessibilityLabel={showPassword ? i18n.t('Hide_Password') : i18n.t('Show_Password')}
+						onPress={() => setShowPassword(!showPassword)}>
 						<CustomIcon
 							name={showPassword ? 'unread-on-top' : 'unread-on-top-disabled'}
 							testID={testID ? `${testID}-icon-password` : undefined}

app/containers/Touch.tsx

@@ -16,18 +16,18 @@ const Touch = React.forwardRef<RectButton, ITouchProps>(
 		const { colors } = useTheme();
 
 		return (
-			// container for accessibility
-			<View accessible={accessible} accessibilityLabel={accessibilityLabel} accessibilityRole='button'>
-				<RectButton
-					ref={ref}
-					onPress={onPress}
-					activeOpacity={1}
-					underlayColor={underlayColor || colors.surfaceNeutral}
-					rippleColor={colors.surfaceNeutral}
-					{...props}>
+			<RectButton
+				ref={ref}
+				onPress={onPress}
+				activeOpacity={1}
+				underlayColor={underlayColor || colors.surfaceNeutral}
+				rippleColor={colors.surfaceNeutral}
+				{...props}
+				style={{}}>
+				<View accessible={accessible} accessibilityLabel={accessibilityLabel} accessibilityRole='button' style={props.style}>
 					{children}
-				</RectButton>
-			</View>
+				</View>
+			</RectButton>
 		);
 	}
 );

app/i18n/locales/ar.json

@@ -32,6 +32,13 @@
   "are_typing": "يكتب",
   "Are_you_sure_question_mark": "هل أنت متأكد؟",
   "Are_you_sure_you_want_to_leave_the_room": "متأكد من مغادرة الغرفة {{room}}؟",
+  "At_Least_1_Lowercase_Letter": "رسالة صغيرة على الأقل",
+  "At_Least_1_Number": "رقم واحد على الأقل",
+  "At_Least_1_Symbol": "رمز واحد على الأقل",
+  "At_Least_1_Uppercase_Letter": "على الأقل حرف واحد كبير",
+  "At_Least_Characters": "على الأقل {{quantity}} حرفًا",
+  "At_Most_24_Characters": "على الأقل 24 حرفًا",
+  "At_Most_Characters": "بحد أقصى {{quantity}} حرفًا",
   "Audio": "صوت",
   "Auto_Translate": "ترجمة تلقائية",
   "Automatic": "تلقائي",
@@ -71,6 +78,7 @@
   "Code_or_password_invalid": "الرمز أو كلمة المرور خاطئة",
   "Collaborative": "تعاونية",
   "Confirm": "تأكيد",
+  "Confirm_Password": "تأكيد كلمة المرور",
   "Connect": "اتصال",
   "Connecting": "جار الاتصال...",
   "Contact_us": "تواصل معنا",
@@ -172,6 +180,7 @@
   "Get_help": "احصل على المساعدة",
   "Glossary_of_simplified_terms": "مسرد المصطلحات المبسطة",
   "Help": "مساعدة",
+  "Hide_Password": "إخفاء كلمة المرور",
   "Hide_room": "إخفاء",
   "Hide_System_Messages": "إخفاء رسائل النظام",
   "Hide_type_messages": "إخفاء رسائل \"{{type}}\"",
@@ -231,6 +240,7 @@
   "Mark_unread": "علامة غير مقروء",
   "Max_number_of_users_allowed_is_number": "أقصى عدد للمستخدمين {{maxUsers}}",
   "Max_number_of_uses": "أقصى عدد للاستخدام",
+  "Max_Repeating_Characters": "الحد الأقصى. {{quantity}} من الأحرف المتكررة",
   "Members": "أفراد",
   "members": "أفراد",
   "Mentions": "الإشارات",
@@ -312,6 +322,8 @@
   "Passcode_choose_title": "اختر كلمة المرور الجديدة",
   "Passcode_enter_title": "أدخل كلمة المرور",
   "Password": "كلمة المرور",
+  "Password_Tip_Error": "الشرط غير محقق.",
+  "Password_Tip_Success": "تم استيفاء الشرط.",
   "Permalink_copied_to_clipboard": "تم نسخ الرابط الثابت إلى الحافظة!",
   "Phone": "الهاتف",
   "Pin": "ثبت",
@@ -406,6 +418,7 @@
   "Share_Link": "مشاركة رابط",
   "Share_this_app": "مشاركة هذا البرنامج",
   "Show_more": "إظهار أكثر",
+  "Show_Password": "عرض كلمة المرور",
   "Show_the_keyboard_shortcut_list": "عرض قائمة اختصارات لوحة المفاتيح",
   "Sign_Up": "تسجيل جديد",
   "Slash_Gimme_Description": "يعرض ༼ つ ◕_◕ ༽つ قبل رسالتك",
@@ -505,5 +518,6 @@
   "Your_invite_link_will_expire_on__date__or_after__usesLeft__uses": "ستنتهي صلاحية رابط الدعوة الخاص بك في {{date}} أو بعد {{usesLeft}} استخدامات",
   "Your_invite_link_will_never_expire": "لن تنتهي صلاحية رابط الدعوة الخاص بك",
   "Your_password_is": "كلمة المرور الخاصة بك هي",
+  "Your_Password_Must_Have": "يجب أن تحتوي كلمة المرور الخاصة بك على:",
   "Your_workspace": "مساحة عملك"
 }