From ac6b8cab99c9b780fc3af11a906a4309ada5d24c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ot=C3=A1vio=20Stasiak?= <91474186+OtavioStasiak@users.noreply.github.com> Date: Wed, 8 Jan 2025 13:08:58 -0300 Subject: [PATCH] chore(a11y): DeleteAccountActionSheetContent (#6047) --------- Co-authored-by: OtavioStasiak --- .../index.tsx | 21 ++++++++-------- app/containers/TextInput/FormTextInput.tsx | 8 ++++-- app/i18n/locales/ar.json | 2 ++ app/i18n/locales/bn-IN.json | 2 ++ app/i18n/locales/cs.json | 2 ++ app/i18n/locales/de.json | 2 ++ app/i18n/locales/en.json | 2 ++ app/i18n/locales/es.json | 2 ++ app/i18n/locales/fi.json | 2 ++ app/i18n/locales/fr.json | 2 ++ app/i18n/locales/hi-IN.json | 2 ++ app/i18n/locales/hu.json | 2 ++ app/i18n/locales/it.json | 2 ++ app/i18n/locales/ja.json | 2 ++ app/i18n/locales/nl.json | 2 ++ app/i18n/locales/pt-BR.json | 2 ++ app/i18n/locales/pt-PT.json | 2 ++ app/i18n/locales/ru.json | 2 ++ app/i18n/locales/sl-SI.json | 2 ++ app/i18n/locales/sv.json | 2 ++ app/i18n/locales/ta-IN.json | 2 ++ app/i18n/locales/te-IN.json | 2 ++ app/i18n/locales/tr.json | 2 ++ app/i18n/locales/zh-CN.json | 2 ++ app/i18n/locales/zh-TW.json | 2 ++ .../AlertText.tsx | 25 +++++++++++++++++++ .../DeleteAccountActionSheetContent/index.tsx | 14 +++-------- app/views/Styles.ts | 5 ++-- 28 files changed, 95 insertions(+), 24 deletions(-) create mode 100644 app/views/ProfileView/components/DeleteAccountActionSheetContent/AlertText.tsx diff --git a/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx b/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx index ae0f2c3bb2..103a61b4ac 100644 --- a/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx +++ b/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 = ({ handleInputChange(value, index)} onSubmitEditing={() => { if (index < inputs.length - 1) { @@ -143,7 +143,6 @@ const ActionSheetContentWithInputAndSubmit = ({ return ( handleInputChange(value, 0)} onSubmitEditing={() => { setTimeout(() => { @@ -151,9 +150,11 @@ const ActionSheetContentWithInputAndSubmit = ({ }, 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 ( <> - + {iconName ? : null} - {title} + {title} {description ? {description} : null} {customText} diff --git a/app/containers/TextInput/FormTextInput.tsx b/app/containers/TextInput/FormTextInput.tsx index a3b7e27638..251d40a9c1 100644 --- a/app/containers/TextInput/FormTextInput.tsx +++ b/app/containers/TextInput/FormTextInput.tsx @@ -97,6 +97,7 @@ export const FormTextInput = ({ const [showPassword, setShowPassword] = useState(false); const showClearInput = onClearInput && value && value.length > 0; const Input = bottomSheet ? BottomSheetTextInput : TextInput; + return ( ) : null} - + setShowPassword(!showPassword)} style={[styles.iconContainer, styles.iconRight]}> + setShowPassword(!showPassword)}> { + const { colors } = useTheme(); + return {text}; +}; + +export default AlertText; diff --git a/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx b/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx index 681b1af718..ac58a0031b 100644 --- a/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx +++ b/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx @@ -1,6 +1,6 @@ import { sha256 } from 'js-sha256'; import React from 'react'; -import { Keyboard, Text } from 'react-native'; +import { Keyboard } from 'react-native'; import { useDispatch } from 'react-redux'; import { deleteAccount } from '../../../../actions/login'; @@ -12,7 +12,7 @@ import { events, logEvent } from '../../../../lib/methods/helpers/log'; import { deleteOwnAccount } from '../../../../lib/services/restApi'; import { useTheme } from '../../../../theme'; import { getTranslations } from './getTranslations'; -import sharedStyles from '../../../Styles'; +import AlertText from './AlertText'; export function DeleteAccountActionSheetContent(): React.ReactElement { const { hideActionSheet, showActionSheet } = useActionSheet(); @@ -68,11 +68,6 @@ export function DeleteAccountActionSheetContent(): React.ReactElement { ); } -const AlertText = ({ text = '' }) => { - const { colors } = useTheme(); - return {text}; -}; - function ConfirmDeleteAccountActionSheetContent({ changeOwnerRooms = '', removedRooms = '', password = '' }) { const { hideActionSheet } = useActionSheet(); const dispatch = useDispatch(); @@ -90,15 +85,14 @@ function ConfirmDeleteAccountActionSheetContent({ changeOwnerRooms = '', removed description={i18n.t('Deleting_a_user_will_delete_all_messages')} onCancel={hideActionSheet} onSubmit={handleDeleteAccount} - placeholder={i18n.t('Password')} testID='room-info-edit-view-name' confirmTitle={i18n.t('Delete_Account_confirm')} confirmBackgroundColor={colors.buttonBackgroundDangerDefault} showInput={false} customText={ <> - {!!changeOwnerRooms && } - {!!removedRooms && } + {!!changeOwnerRooms && } + {!!removedRooms && } } /> diff --git a/app/views/Styles.ts b/app/views/Styles.ts index 6e9ea83739..7ef2b61f03 100644 --- a/app/views/Styles.ts +++ b/app/views/Styles.ts @@ -18,8 +18,9 @@ export default StyleSheet.create({ flexDirection: 'column' }, containerScrollView: { - padding: 16, - paddingBottom: 30 + paddingTop: 12, + paddingHorizontal: 16, + paddingBottom: 24 }, tabletScreenContent: { justifyContent: 'center',