fix: iOS experience and android title focus

RocketChat · Dec 12, 2024 · fc4caf1 · fc4caf1
1 parent c863edc
commit fc4caf1
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 101 deletions.
diff --git a/app/containers/LoginServices/index.tsx b/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} />
 		</>

diff --git a/app/containers/LoginServices/interfaces.ts b/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 {

diff --git a/app/containers/OrSeparator.tsx b/app/containers/OrSeparator.tsx
@@ -28,7 +28,7 @@ const OrSeparator = React.memo(() => {
 	const text = { color: colors.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]} />

diff --git a/app/containers/TextInput/FormTextInput.tsx b/app/containers/TextInput/FormTextInput.tsx
@@ -1,14 +1,16 @@
-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 { A11y } from 'react-native-a11y-order';
 
 import i18n from '../../i18n';
 import { useTheme } from '../../theme';
 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,99 +99,109 @@ 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={accessibilityLabel ?? `${label}${required ? `, ${i18n.t('Required')}` : ''}`}
-			style={[styles.inputContainer, containerStyle]}>
-			{label ? (
-				<Text style={[styles.label, { color: colors.fontTitlesLabels }, error?.error && { color: colors.fontDanger }]}>
-					{label}{' '}
-					{required && <Text style={[styles.required, { color: colors.fontSecondaryInfo }]}>{`(${i18n.t('Required')})`}</Text>}
-				</Text>
-			) : null}
+		<A11y.Order>
+			<A11y.Index index={1}>
+				<View
+					accessible
+					accessibilityLabel={`${label}${accessibilityLabelRequired}${accessibilityInputValue}`}
+					style={[styles.inputContainer, containerStyle]}>
+					{label ? (
+						<Text style={[styles.label, { color: colors.fontTitlesLabels }, error?.error && { color: colors.fontDanger }]}>
+							{label}{' '}
+							{required && (
+								<Text style={[styles.required, { color: colors.fontSecondaryInfo }]}>{`(${i18n.t('Required')})`}</Text>
+							)}
+						</Text>
+					) : null}
 
-			<View style={styles.wrap}>
-				<Input
-					style={[
-						styles.input,
-						iconLeft && styles.inputIconLeft,
-						(secureTextEntry || iconRight || showClearInput) && styles.inputIconRight,
-						{
-							backgroundColor: colors.surfaceRoom,
-							borderColor: colors.strokeLight,
-							color: colors.fontTitlesLabels
-						},
-						error?.error && {
-							color: colors.buttonBackgroundDangerDefault,
-							borderColor: colors.buttonBackgroundDangerDefault
-						},
-						inputStyle
-					]}
-					// @ts-ignore ref error
-					ref={inputRef}
-					autoCorrect={false}
-					autoCapitalize='none'
-					underlineColorAndroid='transparent'
-					secureTextEntry={secureTextEntry && !showPassword}
-					testID={testID}
-					placeholder={placeholder}
-					value={value}
-					placeholderTextColor={colors.fontAnnotation}
-					{...inputProps}
-				/>
+					<View accessible style={styles.wrap}>
+						<Input
+							style={[
+								styles.input,
+								iconLeft && styles.inputIconLeft,
+								(secureTextEntry || iconRight || showClearInput) && styles.inputIconRight,
+								{
+									backgroundColor: colors.surfaceRoom,
+									borderColor: colors.strokeLight,
+									color: colors.fontTitlesLabels
+								},
+								error?.error && {
+									color: colors.buttonBackgroundDangerDefault,
+									borderColor: colors.buttonBackgroundDangerDefault
+								},
+								inputStyle
+							]}
+							// @ts-ignore ref error
+							ref={inputRef}
+							autoCorrect={false}
+							autoCapitalize='none'
+							underlineColorAndroid='transparent'
+							secureTextEntry={secureTextEntry && !showPassword}
+							testID={testID}
+							placeholder={placeholder}
+							value={value}
+							placeholderTextColor={colors.fontAnnotation}
+							{...inputProps}
+						/>
 
-				{iconLeft ? (
-					<CustomIcon
-						name={iconLeft}
-						testID={testID ? `${testID}-icon-left` : undefined}
-						size={20}
-						color={colors.fontSecondaryInfo}
-						style={[styles.iconContainer, styles.iconLeft]}
-					/>
-				) : null}
+						{iconLeft ? (
+							<CustomIcon
+								name={iconLeft}
+								testID={testID ? `${testID}-icon-left` : undefined}
+								size={20}
+								color={colors.fontSecondaryInfo}
+								style={[styles.iconContainer, styles.iconLeft]}
+							/>
+						) : null}
 
-				{showClearInput ? (
-					<Touchable onPress={onClearInput} style={[styles.iconContainer, styles.iconRight]} testID='clear-text-input'>
-						<CustomIcon name='input-clear' size={20} color={colors.fontDefault} />
-					</Touchable>
-				) : null}
+						{showClearInput ? (
+							<Touchable onPress={onClearInput} style={[styles.iconContainer, styles.iconRight]} testID='clear-text-input'>
+								<CustomIcon name='input-clear' size={20} color={colors.fontDefault} />
+							</Touchable>
+						) : null}
 
-				{iconRight && !showClearInput ? (
-					<CustomIcon
-						name={iconRight}
-						testID={testID ? `${testID}-icon-right` : undefined}
-						size={20}
-						color={colors.fontDefault}
-						style={[styles.iconContainer, styles.iconRight]}
-						accessible={false}
-					/>
-				) : null}
+						{iconRight && !showClearInput ? (
+							<CustomIcon
+								name={iconRight}
+								testID={testID ? `${testID}-icon-right` : undefined}
+								size={20}
+								color={colors.fontDefault}
+								style={[styles.iconContainer, styles.iconRight]}
+								accessible={false}
+							/>
+						) : null}
 
-				{secureTextEntry ? (
-					<Touchable
-						accessibilityLabel={showPassword ? i18n.t('Hide_Password') : i18n.t('Show_Password')}
-						onPress={() => setShowPassword(!showPassword)}
-						style={[styles.iconContainer, styles.iconRight]}>
-						<CustomIcon
-							name={showPassword ? 'unread-on-top' : 'unread-on-top-disabled'}
-							testID={testID ? `${testID}-icon-password` : undefined}
-							size={20}
-							color={colors.fontDefault}
-						/>
-					</Touchable>
-				) : null}
+						{secureTextEntry ? (
+							<A11y.Index style={[styles.iconContainer, styles.iconRight]} index={2}>
+								<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}
+										size={20}
+										color={colors.fontDefault}
+									/>
+								</Touchable>
+							</A11y.Index>
+						) : null}
 
-				{loading ? (
-					<ActivityIndicator
-						style={[styles.iconContainer, styles.iconRight]}
-						color={colors.fontDefault}
-						testID={testID ? `${testID}-loading` : undefined}
-					/>
-				) : null}
-				{left}
-			</View>
-			{error && error.reason ? <Text style={[styles.error, { color: colors.fontDanger }]}>{error.reason}</Text> : null}
-		</View>
+						{loading ? (
+							<ActivityIndicator
+								style={[styles.iconContainer, styles.iconRight]}
+								color={colors.fontDefault}
+								testID={testID ? `${testID}-loading` : undefined}
+							/>
+						) : null}
+						{left}
+					</View>
+					{error && error.reason ? <Text style={[styles.error, { color: colors.fontDanger }]}>{error.reason}</Text> : null}
+				</View>
+			</A11y.Index>
+		</A11y.Order>
 	);
 };
diff --git a/app/views/RegisterView/index.tsx b/app/views/RegisterView/index.tsx
@@ -146,7 +146,7 @@ const RegisterView = ({ navigation, route }: IProps) => {
 
 	return (
 		<FormContainer testID='register-view'>
-			<FormContainerInner>
+			<FormContainerInner accessibilityLabel={I18n.t('Sign_Up')}>
 				<LoginServices separator />
 				<View accessible accessibilityLabel={I18n.t('Sign_Up')}>
 					<Text accessible accessibilityLabel={I18n.t('Sign_Up')} style={[styles.title, { color: colors.fontTitlesLabels }]}>

diff --git a/package.json b/package.json
@@ -86,6 +86,7 @@
 		"react": "18.2.0",
 		"react-hook-form": "7.34.2",
 		"react-native": "0.73.6",
+		"react-native-a11y-order": "^0.2.2",
 		"react-native-animatable": "1.3.3",
 		"react-native-background-timer": "2.4.1",
 		"react-native-bootsplash": "4.6.0",

diff --git a/yarn.lock b/yarn.lock
@@ -11892,6 +11892,11 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-native-a11y-order@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/react-native-a11y-order/-/react-native-a11y-order-0.2.2.tgz#cefefa851acb06c35708dfa44159a9ca6541b3ae"
+  integrity sha512-njUSURENgSqIcH6T6bZ1NWngb3lsqHCgkS8cUQqid7cGw6JwurMiHuuSRyRAiZZKubKUF5nML099F4mUHGeX+Q==
+
 [email protected]:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.3.3.tgz#a13a4af8258e3bb14d0a9d839917e9bb9274ec8a"