chore(a11y): DeleteAccountActionSheetContent

app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx

@@ -12,24 +12,25 @@ import { useActionSheet } from '../Provider';
 
 const styles = StyleSheet.create({
 	subtitleText: {
-		fontSize: 14,
 		...sharedStyles.textRegular,
-		marginBottom: 10
+		fontSize: 16,
+		lineHeight: 24
 	},
 	buttonSeparator: {
-		marginRight: 8
+		marginRight: 12
 	},
 	footerButtonsContainer: {
 		flexDirection: 'row',
 		paddingTop: 16
 	},
 	titleContainerText: {
+		...sharedStyles.textBold,
 		fontSize: 16,
-		...sharedStyles.textSemibold
+		lineHeight: 24
 	},
 	titleContainer: {
 		paddingRight: 80,
-		marginBottom: 16,
+		marginBottom: 12,
 		flexDirection: 'row',
 		alignItems: 'center'
 	}
@@ -53,8 +54,8 @@ const FooterButtons = ({
 					styles.buttonSeparator,
 					{ flex: 1, backgroundColor: cancelBackgroundColor || colors.buttonBackgroundSecondaryDefault }
 				]}
-				color={colors.backdropColor}
 				title={cancelTitle}
+				color={colors.buttonFontSecondary}
 				onPress={cancelAction}
 				testID={`${testID}-cancel`}
 			/>
@@ -120,7 +121,6 @@ const ActionSheetContentWithInputAndSubmit = ({
 				<FormTextInput
 					key={inputConfig.key}
 					value={inputValues[index]}
-					placeholder={inputConfig.placeholder}
 					onChangeText={value => handleInputChange(value, index)}
 					onSubmitEditing={() => {
 						if (index < inputs.length - 1) {
@@ -143,17 +143,18 @@ const ActionSheetContentWithInputAndSubmit = ({
 		return (
 			<FormTextInput
 				value={inputValues[0]}
-				placeholder={placeholder}
 				onChangeText={value => handleInputChange(value, 0)}
 				onSubmitEditing={() => {
 					setTimeout(() => {
 						hideActionSheet();
 					}, 100);
 					if (inputValues[0]) onSubmit(inputValues[0]);
 				}}
+				accessibilityLabel={placeholder}
 				testID={`${testID}-input`}
 				secureTextEntry={secureTextEntry}
 				bottomSheet={isIOS}
+				containerStyle={{ marginTop: 12, marginBottom: 36 }}
 			/>
 		);
 	};
@@ -164,9 +165,9 @@ const ActionSheetContentWithInputAndSubmit = ({
 	return (
 		<View style={sharedStyles.containerScrollView} testID='action-sheet-content-with-input-and-submit'>
 			<>
-				<View style={styles.titleContainer}>
+				<View accessible accessibilityLabel={title} style={styles.titleContainer}>
 					{iconName ? <CustomIcon name={iconName} size={32} color={iconColor || colors.buttonBackgroundDangerDefault} /> : null}
-					<Text style={[styles.titleContainerText, { color: colors.fontDefault, paddingLeft: iconName ? 16 : 0 }]}>{title}</Text>
+					<Text style={[styles.titleContainerText, { color: colors.fontDefault, paddingLeft: iconName ? 12 : 0 }]}>{title}</Text>
 				</View>
 				{description ? <Text style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>{description}</Text> : null}
 				{customText}

app/containers/TextInput/FormTextInput.tsx

@@ -2,6 +2,7 @@ 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 Touchable from 'react-native-platform-touchable';
+import { A11y } from 'react-native-a11y-order';
 
 import i18n from '../../i18n';
 import { useTheme } from '../../theme';
@@ -97,96 +98,108 @@ export const FormTextInput = ({
 	const [showPassword, setShowPassword] = useState(false);
 	const showClearInput = onClearInput && value && value.length > 0;
 	const Input = bottomSheet ? BottomSheetTextInput : TextInput;
+
 	return (
-		<View
-			accessible
-			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={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}
 
-			<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 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>
 	);
 };

app/i18n/locales/ar.json

@@ -172,6 +172,7 @@
   "Get_help": "احصل على المساعدة",
   "Glossary_of_simplified_terms": "مسرد المصطلحات المبسطة",
   "Help": "مساعدة",
+  "Hide_Password": "إخفاء كلمة المرور",
   "Hide_room": "إخفاء",
   "Hide_System_Messages": "إخفاء رسائل النظام",
   "Hide_type_messages": "إخفاء رسائل \"{{type}}\"",
@@ -406,6 +407,7 @@
   "Share_Link": "مشاركة رابط",
   "Share_this_app": "مشاركة هذا البرنامج",
   "Show_more": "إظهار أكثر",
+  "Show_Password": "عرض كلمة المرور",
   "Show_the_keyboard_shortcut_list": "عرض قائمة اختصارات لوحة المفاتيح",
   "Sign_Up": "تسجيل جديد",
   "Slash_Gimme_Description": "يعرض ༼ つ ◕_◕ ༽つ قبل رسالتك",

app/i18n/locales/bn-IN.json

@@ -286,6 +286,7 @@
   "Group_by": "দ্বারা গ্রুপ করুন",
   "Has_left_the_team": "দল ছেড়ে দিয়েছে",
   "Help": "সাহায্য",
+  "Hide_Password": "পাসওয়ার্ড লুকান",
   "Hide_System_Messages": "সিস্টেম বার্তা লুকান",
   "Hide_type_messages": "\"{{type}}\" বার্তা লুকান",
   "How_It_Works": "এটি কীভাবে কাজ করে",
@@ -622,6 +623,7 @@
   "Show_badge_for_mentions": "উল্লেখের জন্য ব্যাজ দেখান",
   "Show_badge_for_mentions_Info": "মুখ্য উল্লেখের জন্য শুধুমাত্র ব্যাজ প্রদর্শন করুন",
   "Show_more": "আরও দেখুন..",
+  "Show_Password": "পাসওয়ার্ড দেখান",
   "Sign_Up": "নিবন্ধন করুন",
   "Skip": "অবগাহন",
   "Sort_by": "দ্বারা সাজানো",

app/i18n/locales/cs.json

@@ -306,6 +306,7 @@
   "Group_by": "Skupina vytvořená",
   "Has_left_the_team": "opustil tým",
   "Help": "Pomoc",
+  "Hide_Password": "Skrýt heslo",
   "Hide_room": "Skrýt",
   "Hide_System_Messages": "Skrýt systémové zprávy",
   "Hide_type_messages": "Skrýt \"{{type}}\" zprávy",
@@ -673,6 +674,7 @@
   "Show_badge_for_mentions_Info": "Zobrazit odznak pouze pro přímé zmínky",
   "Show_less": "Ukaž méně",
   "Show_more": "Zobrazit více",
+  "Show_Password": "Zobrazit heslo",
   "Show_the_keyboard_shortcut_list": "Zobrazit seznam klávesových zkratek",
   "Sign_Up": "Přihlásit se",
   "Skip": "Přeskočit",

app/i18n/locales/de.json

@@ -279,6 +279,7 @@
   "Group_by": "Gruppieren nach",
   "Has_left_the_team": "Hat das Team verlassen",
   "Help": "Hilfe",
+  "Hide_Password": "Passwort verbergen",
   "Hide_room": "Raum verstecken",
   "Hide_System_Messages": "Systemnachrichten ausblenden",
   "Hide_type_messages": "\"{{type}}\"-Nachrichten ausblenden",
@@ -608,6 +609,7 @@
   "Show_badge_for_mentions": "Zeige Abzeichen für Erwähnungen",
   "Show_badge_for_mentions_Info": "Zeige Abzeichen nur für direkte Erwähnungen",
   "Show_more": "Mehr anzeigen",
+  "Show_Password": "Passwort anzeigen",
   "Show_the_keyboard_shortcut_list": "Liste der Tastenkombinationen anzeigen",
   "Sign_Up": "Anmelden",
   "Skip": "Überspringen",

app/i18n/locales/en.json

@@ -323,6 +323,7 @@
   "Group_by": "Group by",
   "Has_left_the_team": "has left the team",
   "Help": "Help",
+  "Hide_Password": "Hide Password",
   "Hide_room": "Hide",
   "Hide_System_Messages": "Hide system messages",
   "Hide_type_messages": "Hide \"{{type}}\" messages",
@@ -694,6 +695,7 @@
   "Show_badge_for_mentions_Info": "Display badge for direct mentions only",
   "Show_less": "Show less",
   "Show_more": "Show more",
+  "Show_Password": "Show Password",
   "Show_the_keyboard_shortcut_list": "Show the keyboard shortcut list",
   "Sign_Up": "Sign up",
   "Skip": "Skip",

app/i18n/locales/es.json

@@ -118,6 +118,7 @@
   "Get_link": "Obtener enlace",
   "Glossary_of_simplified_terms": "Glosario de términos simplificados",
   "Help": "Ayuda",
+  "Hide_Password": "Ocultar contraseña",
   "Hide_room": "Ocultar",
   "In_App_And_Desktop": "En la aplicación y en el escritorio",
   "In_App_and_Desktop_Alert_info": "Muestra un banner en la parte superior de la pantalla cuando la aplicación esté abierta y muestra una notificación en el escritorio",
@@ -244,6 +245,7 @@
   "Settings_succesfully_changed": "¡Configuración cambiada correctamente!",
   "Share": "Compartir",
   "Share_this_app": "Compartir esta aplicación",
+  "Show_Password": "Mostrar contraseña",
   "Show_the_keyboard_shortcut_list": "Mostrar la lista de atajos de teclado",
   "Sign_Up": "Registrarse",
   "Slash_Gimme_Description": "Muestra  (つ ◕_◕) つ  antes de tu mensaje",

app/i18n/locales/fi.json

@@ -264,6 +264,7 @@
   "Group_by": "Ryhmittelyperuste",
   "Has_left_the_team": "on poistunut tiimistä",
   "Help": "Apua",
+  "Hide_Password": "Piilota salasana",
   "Hide_room": "Piilota",
   "Hide_System_Messages": "Piilota järjestelmäilmoitukset",
   "Hide_type_messages": "Piilota \"{{type}}\"-viestit",
@@ -583,6 +584,7 @@
   "Show_badge_for_mentions": "Näytä mainintojen merkki",
   "Show_badge_for_mentions_Info": "Näytä vain suorien mainintojen merkki",
   "Show_more": "Näytä lisää",
+  "Show_Password": "Näytä salasana",
   "Show_the_keyboard_shortcut_list": "Näytä pikanäppäinten luettelo",
   "Sign_Up": "Rekisteröidy",
   "Skip": "Ohita",