diff --git a/.maestro/tests/accessibilityAndAppearance/ToastsAndDialogs.yml b/.maestro/tests/accessibilityAndAppearance/ToastsAndDialogs.yml new file mode 100644 index 00000000000..f9718d36c0d --- /dev/null +++ b/.maestro/tests/accessibilityAndAppearance/ToastsAndDialogs.yml @@ -0,0 +1,38 @@ +appId: chat.rocket.reactnative +name: Toasts and Dialogs +onFlowStart: + - runFlow: '../../helpers/setup.yaml' +onFlowEnd: + - evalScript: ${output.utils.deleteCreatedUsers()} + +--- +- runFlow: ../../helpers/launch-app.yaml +- runFlow: ../../helpers/login.yaml + +# Show alerts as Toasts +- tapOn: 'Menu' +- tapOn: 'Accessibility & appearance' +- tapOn: 'Show alerts as. Toasts' +- assertVisible: 'Toasts. Dismissed automatically. Checked' +- assertVisible: 'Dialogs. Require manual dismissal. Unchecked' +- tapOn: 'Bottom Sheet backdrop' +- tapOn: 'Menu' +- tapOn: 'Edit status' +- tapOn: + id: 'status-view-offline' +- tapOn: 'Save' +- assertVisible: 'Status saved successfully!' + +# Show alerts as Dialogs +- tapOn: 'Accessibility & appearance' +- tapOn: 'Show alerts as. Toasts' +- assertVisible: 'Toasts. Dismissed automatically. Checked' +- tapOn: 'Dialogs. Require manual dismissal. Unchecked' +- tapOn: 'Menu' +- tapOn: 'Edit status' +- tapOn: + id: 'status-view-online' +- tapOn: 'Save' +- assertVisible: 'Status saved successfully!' +- assertVisible: 'OK' +- tapOn: 'OK' diff --git a/app/containers/ActionSheet/Item.tsx b/app/containers/ActionSheet/Item.tsx index 5c9563078eb..e8ea276cf71 100644 --- a/app/containers/ActionSheet/Item.tsx +++ b/app/containers/ActionSheet/Item.tsx @@ -36,15 +36,29 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => { color = colors.fontDisabled; } const height = 48 * fontScale; + const accessibilityLabel = item?.accessibilityLabel || (item?.subtitle ? `${item.title}. ${item.subtitle}` : item.title); return ( - - + + {item.icon ? : null} {item.title} + {item?.subtitle ? ( + + {item.subtitle} + + ) : null} {item.right ? {item.right ? item.right() : null} : null} diff --git a/app/containers/ActionSheet/Provider.tsx b/app/containers/ActionSheet/Provider.tsx index a3ab65f0cfe..b84624dde0a 100644 --- a/app/containers/ActionSheet/Provider.tsx +++ b/app/containers/ActionSheet/Provider.tsx @@ -6,6 +6,8 @@ import ActionSheet from './ActionSheet'; export type TActionSheetOptionsItem = { title: string; + subtitle?: string; + accessibilityLabel?: string; icon?: TIconsName; danger?: boolean; testID?: string; diff --git a/app/containers/ActionSheet/styles.ts b/app/containers/ActionSheet/styles.ts index 64aaa6ced02..4a557ac3215 100644 --- a/app/containers/ActionSheet/styles.ts +++ b/app/containers/ActionSheet/styles.ts @@ -20,9 +20,15 @@ export default StyleSheet.create({ flex: 1 }, title: { - fontSize: 16, + fontSize: 18, + lineHeight: 26, ...sharedStyles.textMedium }, + subtitle: { + fontSize: 14, + lineHeight: 20, + ...sharedStyles.textRegular + }, handle: { justifyContent: 'center', alignItems: 'center', diff --git a/app/containers/Toast.tsx b/app/containers/Toast.tsx index d5f6b6b4383..2534b8e9986 100644 --- a/app/containers/Toast.tsx +++ b/app/containers/Toast.tsx @@ -1,10 +1,13 @@ import React, { useEffect } from 'react'; -import { StyleSheet } from 'react-native'; +import { Alert, StyleSheet } from 'react-native'; import EasyToast from 'react-native-easy-toast'; +import { useUserPreferences } from '../lib/methods/userPreferences'; +import { TAlertDisplayType } from '../views/AccessibilityAndAppearanceView'; import EventEmitter from '../lib/methods/helpers/events'; import { useTheme } from '../theme'; import sharedStyles from '../views/Styles'; +import { ALERT_DISPLAY_TYPE_PREFERENCES_KEY } from '../lib/constants/keys'; const styles = StyleSheet.create({ toast: { @@ -25,19 +28,24 @@ let toast: EasyToast | null | undefined; const Toast = (): React.ReactElement => { const { colors, theme } = useTheme(); + const [alertDisplayType] = useUserPreferences(ALERT_DISPLAY_TYPE_PREFERENCES_KEY, 'TOAST'); useEffect(() => { listener = EventEmitter.addEventListener(LISTENER, showToast); return () => { EventEmitter.removeListener(LISTENER, listener); }; - }, []); + }, [alertDisplayType]); const getToastRef = (newToast: EasyToast | null) => { toast = newToast; }; const showToast = ({ message }: { message: string }) => { + if (alertDisplayType === 'DIALOG') { + Alert.alert(message); + return; + } if (toast && toast.show) { toast.show(message, 1000); } diff --git a/app/i18n/locales/ar.json b/app/i18n/locales/ar.json index eef5e76afbc..d2681fcd486 100644 --- a/app/i18n/locales/ar.json +++ b/app/i18n/locales/ar.json @@ -1,5 +1,10 @@ { "1_person_reacted": "تفاعل شخص واحد", + "A11y_appearance_dialog_require_manual_dismissal": "يتطلب إنهاء يدويًا", + "A11y_appearance_dialogs": "حوارات", + "A11y_appearance_show_alerts_as": "عرض التنبيهات كـ", + "A11y_appearance_toast_dismissed_automatically": "تم رفضه تلقائيًا", + "A11y_appearance_toasts": "إشعارات منبثقة (Toast)", "Accessibility": "إمكانية الوصول", "Accessibility_and_Appearance": "إمكانية الوصول والمظهر", "Accessibility_statement": "بيان الوصول", diff --git a/app/i18n/locales/bn-IN.json b/app/i18n/locales/bn-IN.json index 95e5dc0cfba..69facdcc5d2 100644 --- a/app/i18n/locales/bn-IN.json +++ b/app/i18n/locales/bn-IN.json @@ -4,6 +4,11 @@ "1_person_reacted": "1 জন ব্যক্তি প্রতিক্রিয়া দিয়েছে", "A_new_owner_will_be_assigned_automatically_to__count__room": "{{count}} রুমে নতুন মালিক স্বয়ংক্রিয়ভাবে নির্ধারণ করা হবে।", "A_new_owner_will_be_assigned_automatically_to__count__rooms": "{{count}} রুমে নতুন মালিক স্বয়ংক্রিয়ভাবে নির্ধারণ করা হবে।", + "A11y_appearance_dialog_require_manual_dismissal": "ম্যানুয়ালভাবে বাতিল প্রয়োজন।", + "A11y_appearance_dialogs": "ডায়ালগগুলো", + "A11y_appearance_show_alerts_as": "এভাবে এলার্ট দেখান", + "A11y_appearance_toast_dismissed_automatically": "স্বয়ংক্রিয়ভাবে বরখাস্ত করা হয়েছে", + "A11y_appearance_toasts": "টোস্ট", "accept": "গ্রহণ করুন", "Accessibility": "অ্যাক্সেসিবিলিটি", "Accessibility_and_Appearance": "অ্যাক্সেসিবিলিটি ও চেহারা", diff --git a/app/i18n/locales/cs.json b/app/i18n/locales/cs.json index 97e92642ab1..76032f2be9e 100644 --- a/app/i18n/locales/cs.json +++ b/app/i18n/locales/cs.json @@ -4,6 +4,11 @@ "1_person_reacted": "1 osoba reagovala", "A_new_owner_will_be_assigned_automatically_to__count__room": "K {{count}} místnosti bude automaticky přiřazen nový vlastník.", "A_new_owner_will_be_assigned_automatically_to__count__rooms": "K {{count}} místnostem bude automaticky přiřazen nový vlastník.", + "A11y_appearance_dialog_require_manual_dismissal": "Vyžaduje ruční zavření.", + "A11y_appearance_dialogs": "Dialogy", + "A11y_appearance_show_alerts_as": "Zobrazit upozornění jako", + "A11y_appearance_toast_dismissed_automatically": "Automaticky odmítnuto", + "A11y_appearance_toasts": "Toast upozornění", "accept": "Akceptovat", "Accessibility": "Přístupnost", "Accessibility_and_Appearance": "Přístupnost a vzhled", diff --git a/app/i18n/locales/de.json b/app/i18n/locales/de.json index ad6c59d0ba3..7624000553f 100644 --- a/app/i18n/locales/de.json +++ b/app/i18n/locales/de.json @@ -4,6 +4,11 @@ "1_person_reacted": "1 Person hat reagiert", "A_new_owner_will_be_assigned_automatically_to__count__room": "Ein neuer Besitzer wird automatisch zu {{count}} Raum zugeordnet.", "A_new_owner_will_be_assigned_automatically_to__count__rooms": "Ein neuer Besitzer wird automatisch zu {{count}} Räumen zugeordnet.", + "A11y_appearance_dialog_require_manual_dismissal": "Manuelle Ablehnung erforderlich", + "A11y_appearance_dialogs": "Dialoge", + "A11y_appearance_show_alerts_as": "Warnungen anzeigen als", + "A11y_appearance_toast_dismissed_automatically": "Automatisch verworfen", + "A11y_appearance_toasts": "Toast-Benachrichtigungen", "accept": "Annehmen", "Accessibility": "Barrierefreiheit", "Accessibility_and_Appearance": "Barrierefreiheit & Erscheinungsbild", diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json index 2f93a5b9d92..1fdcd02235f 100644 --- a/app/i18n/locales/en.json +++ b/app/i18n/locales/en.json @@ -4,6 +4,11 @@ "1_person_reacted": "1 person reacted", "A_new_owner_will_be_assigned_automatically_to__count__room": "A new owner will be assigned automatically to {{count}} room.", "A_new_owner_will_be_assigned_automatically_to__count__rooms": "A new owner will be assigned automatically to {{count}} rooms.", + "A11y_appearance_dialog_require_manual_dismissal": "Require manual dismissal", + "A11y_appearance_dialogs": "Dialogs", + "A11y_appearance_show_alerts_as": "Show alerts as", + "A11y_appearance_toast_dismissed_automatically": "Dismissed automatically", + "A11y_appearance_toasts": "Toasts", "accept": "Accept", "Accessibility": "Accessibility", "Accessibility_and_Appearance": "Accessibility & appearance", diff --git a/app/i18n/locales/es.json b/app/i18n/locales/es.json index 8bf86b78caf..f6967e107a8 100644 --- a/app/i18n/locales/es.json +++ b/app/i18n/locales/es.json @@ -1,5 +1,10 @@ { "1_person_reacted": "1 persona reaccionó", + "A11y_appearance_dialog_require_manual_dismissal": "Requiere cierre manual", + "A11y_appearance_dialogs": "Diálogos", + "A11y_appearance_show_alerts_as": "Mostrar alertas como", + "A11y_appearance_toast_dismissed_automatically": "Se cierra automáticamente", + "A11y_appearance_toasts": "Toasts", "Accessibility": "Accesibilidad", "Accessibility_and_Appearance": "Accesibilidad y apariencia", "Accessibility_statement": "Declaración de accesibilidad", diff --git a/app/i18n/locales/fi.json b/app/i18n/locales/fi.json index ddbdee2f698..f20015b2968 100644 --- a/app/i18n/locales/fi.json +++ b/app/i18n/locales/fi.json @@ -4,6 +4,11 @@ "1_person_reacted": "1 henkilö reagoi", "A_new_owner_will_be_assigned_automatically_to__count__room": "Uusi omistaja liitetään automaattisesti {{count}} huoneeseen.", "A_new_owner_will_be_assigned_automatically_to__count__rooms": "Uusi omistaja liitetään automaattisesti {{count}} huoneeseen.", + "A11y_appearance_dialog_require_manual_dismissal": "Vaatii manuaalisen sulkemisen", + "A11y_appearance_dialogs": "Dialogit", + "A11y_appearance_show_alerts_as": "Näytä hälytykset seuraavasti", + "A11y_appearance_toast_dismissed_automatically": "Sulkeutuu automaattisesti", + "A11y_appearance_toasts": "Toasts", "Accessibility": "Saavutettavuus", "Accessibility_and_Appearance": "Saavutettavuus ja ulkonäkö", "Accessibility_statement": "Saavutettavuusilmoitus", diff --git a/app/i18n/locales/fr.json b/app/i18n/locales/fr.json index 2e8c7694546..c52e33cbbec 100644 --- a/app/i18n/locales/fr.json +++ b/app/i18n/locales/fr.json @@ -1,5 +1,10 @@ { "1_person_reacted": "1 personne a réagi", + "A11y_appearance_dialog_require_manual_dismissal": "Nécessite un rejet manuel", + "A11y_appearance_dialogs": "Dialogues", + "A11y_appearance_show_alerts_as": "Afficher les alertes sous forme de", + "A11y_appearance_toast_dismissed_automatically": "Rejeté automatiquement", + "A11y_appearance_toasts": "Toasts", "Accessibility": "Accessibilité", "Accessibility_and_Appearance": "Accessibilité et apparence", "Accessibility_statement": "Déclaration d'accessibilité", diff --git a/app/i18n/locales/hi-IN.json b/app/i18n/locales/hi-IN.json index bd76d399119..f7288ffbc32 100644 --- a/app/i18n/locales/hi-IN.json +++ b/app/i18n/locales/hi-IN.json @@ -4,6 +4,11 @@ "1_person_reacted": "1 व्यक्ति ने प्रतिक्रिया दी", "A_new_owner_will_be_assigned_automatically_to__count__room": "{{count}} कमरे को स्वच्छता से नया मालिक सौंपा जाएगा।", "A_new_owner_will_be_assigned_automatically_to__count__rooms": "{{count}} कमरों को स्वच्छता से नया मालिक सौंपा जाएगा।", + "A11y_appearance_dialog_require_manual_dismissal": "मैनुअल खारिज़गी की आवश्यकता।", + "A11y_appearance_dialogs": "संवाद", + "A11y_appearance_show_alerts_as": "अलर्ट्स को इस रूप में दिखाएं:", + "A11y_appearance_toast_dismissed_automatically": "स्वतः खारिज कर दिया गया", + "A11y_appearance_toasts": "टोस्ट्स", "accept": "स्वीकार करें", "Accessibility": "प्रवेशयोग्यता", "Accessibility_and_Appearance": "प्रवेशयोग्यता और दृश्यता", diff --git a/app/i18n/locales/hu.json b/app/i18n/locales/hu.json index a28d72ec1bc..b3c90d086df 100644 --- a/app/i18n/locales/hu.json +++ b/app/i18n/locales/hu.json @@ -4,6 +4,11 @@ "1_person_reacted": "1 személy reagált", "A_new_owner_will_be_assigned_automatically_to__count__room": "Az új tulajdonos automatikus hozzárendelésre kerül {{count}} szobához.", "A_new_owner_will_be_assigned_automatically_to__count__rooms": "Az új tulajdonos automatikus hozzárendelésre kerül {{count}} szobához.", + "A11y_appearance_dialog_require_manual_dismissal": "Kézi bezárást igényel", + "A11y_appearance_dialogs": "Párbeszédablakok", + "A11y_appearance_show_alerts_as": "Figyelmeztetések megjelenítése így:", + "A11y_appearance_toast_dismissed_automatically": "Automatikusan bezáródik", + "A11y_appearance_toasts": "Rövid értesítések (toast)", "accept": "Elfogadom", "Accessibility": "Akadálymentesség", "Accessibility_and_Appearance": "Hozzáférhetőség és megjelenés", diff --git a/app/i18n/locales/it.json b/app/i18n/locales/it.json index 9cf5879cfa2..7f3c41d3c2e 100644 --- a/app/i18n/locales/it.json +++ b/app/i18n/locales/it.json @@ -4,6 +4,11 @@ "1_person_reacted": "1 persona ha reagito", "A_new_owner_will_be_assigned_automatically_to__count__room": "Un nuovo proprietario verrà assegnato automaticamente alla stanza {{count}}.", "A_new_owner_will_be_assigned_automatically_to__count__rooms": "Un nuovo proprietario verrà assegnato automaticamente a {{count}} stanze.", + "A11y_appearance_dialog_require_manual_dismissal": "Richiede chiusura manuale", + "A11y_appearance_dialogs": "Dialoghi", + "A11y_appearance_show_alerts_as": "Mostra avvisi come", + "A11y_appearance_toast_dismissed_automatically": "Ignorato automaticamente", + "A11y_appearance_toasts": "Notifiche toast", "Accessibility": "Accessibilità", "Accessibility_and_Appearance": "Accessibilità e aspetto", "Accessibility_statement": "Dichiarazione di accessibilità", diff --git a/app/i18n/locales/ja.json b/app/i18n/locales/ja.json index 02a3a78a5d2..1b507a4eeb1 100644 --- a/app/i18n/locales/ja.json +++ b/app/i18n/locales/ja.json @@ -1,5 +1,10 @@ { "1_person_reacted": "1人がリアクション", + "A11y_appearance_dialog_require_manual_dismissal": "手動での解除が必要です。", + "A11y_appearance_dialogs": "ダイアログ", + "A11y_appearance_show_alerts_as": "アラートを表示する方法", + "A11y_appearance_toast_dismissed_automatically": "自動で却下されました", + "A11y_appearance_toasts": "トースト", "Accessibility": "アクセシビリティ", "Accessibility_and_Appearance": "アクセシビリティと外観", "Accessibility_statement": "アクセシビリティ声明", diff --git a/app/i18n/locales/nl.json b/app/i18n/locales/nl.json index 60811def28a..404ec8d662d 100644 --- a/app/i18n/locales/nl.json +++ b/app/i18n/locales/nl.json @@ -1,5 +1,10 @@ { "1_person_reacted": "1 persoon heeft gereageerd", + "A11y_appearance_dialog_require_manual_dismissal": "Handmatig sluiten vereist", + "A11y_appearance_dialogs": "Dialogen", + "A11y_appearance_show_alerts_as": "Waarschuwingen weergeven als", + "A11y_appearance_toast_dismissed_automatically": "Wordt automatisch gesloten", + "A11y_appearance_toasts": "Toasts", "Accessibility": "Toegankelijkheid", "Accessibility_and_Appearance": "Toegankelijkheid & uiterlijk", "Accessibility_statement": "Toegankelijkheidsverklaring", diff --git a/app/i18n/locales/nn.json b/app/i18n/locales/nn.json index 5ffb8ed781d..93887a76e62 100644 --- a/app/i18n/locales/nn.json +++ b/app/i18n/locales/nn.json @@ -1,4 +1,9 @@ { + "A11y_appearance_dialog_require_manual_dismissal": "Krev manuell avvising", + "A11y_appearance_dialogs": "Dialoger", + "A11y_appearance_show_alerts_as": "Vis varsler som", + "A11y_appearance_toast_dismissed_automatically": "Lukket automatisk", + "A11y_appearance_toasts": "Toasts", "accept": "Aksepter", "Accessibility": "Tilgjengelighet", "Accessibility_and_Appearance": "Tilgjengelighet og utseende", diff --git a/app/i18n/locales/no.json b/app/i18n/locales/no.json index d408d613d36..2dffa32c68c 100644 --- a/app/i18n/locales/no.json +++ b/app/i18n/locales/no.json @@ -4,6 +4,11 @@ "1_person_reacted": "1 person reagerte", "A_new_owner_will_be_assigned_automatically_to__count__room": "En ny eier vil automatisk bli tildelt {{count}} rom.", "A_new_owner_will_be_assigned_automatically_to__count__rooms": "En ny eier vil automatisk bli tildelt {{count}} rom.", + "A11y_appearance_dialog_require_manual_dismissal": "Krever manuell lukking", + "A11y_appearance_dialogs": "Dialoger", + "A11y_appearance_show_alerts_as": "Vis varsler som", + "A11y_appearance_toast_dismissed_automatically": "Lukkes automatisk", + "A11y_appearance_toasts": "Toasts", "accept": "Aksepter", "Accessibility": "Tilgjengelighet", "Accessibility_and_Appearance": "Tilgjengelighet og utseende", diff --git a/app/i18n/locales/pt-BR.json b/app/i18n/locales/pt-BR.json index 4bebaf7f8a2..f2fc6ef2ee3 100644 --- a/app/i18n/locales/pt-BR.json +++ b/app/i18n/locales/pt-BR.json @@ -4,6 +4,11 @@ "1_person_reacted": "1 pessoa reagiu", "A_new_owner_will_be_assigned_automatically_to__count__room": "Um novo proprietário será atribuído automaticamente a {{count}} sala.", "A_new_owner_will_be_assigned_automatically_to__count__rooms": "Um novo proprietário será atribuído automaticamente a {{count}} salas.", + "A11y_appearance_dialog_require_manual_dismissal": "Requer dispensa manual", + "A11y_appearance_dialogs": "Dialogs", + "A11y_appearance_show_alerts_as": "Exibir alertas como", + "A11y_appearance_toast_dismissed_automatically": "Dispensado automaticamente", + "A11y_appearance_toasts": "Toasts", "accept": "Aceitar", "Accessibility": "Acessibilidade", "Accessibility_and_Appearance": "Acessibilidade e aparência", diff --git a/app/i18n/locales/pt-PT.json b/app/i18n/locales/pt-PT.json index 19d1f2b6e4b..2189ceeb07e 100644 --- a/app/i18n/locales/pt-PT.json +++ b/app/i18n/locales/pt-PT.json @@ -1,5 +1,10 @@ { "1_person_reacted": "1 pessoa reagiu", + "A11y_appearance_dialog_require_manual_dismissal": "Exige dispensa manual", + "A11y_appearance_dialogs": "Dialogs", + "A11y_appearance_show_alerts_as": "Exibir alertas como", + "A11y_appearance_toast_dismissed_automatically": "Dispensado automaticamente", + "A11y_appearance_toasts": "Toasts", "Accessibility": "Acessibilidade", "Accessibility_and_Appearance": "Acessibilidade e aparência", "Accessibility_statement": "Declaração de acessibilidade", diff --git a/app/i18n/locales/ru.json b/app/i18n/locales/ru.json index 42a1ff2ee93..b46f3a54570 100644 --- a/app/i18n/locales/ru.json +++ b/app/i18n/locales/ru.json @@ -4,6 +4,11 @@ "1_person_reacted": "1 человек отреагировал", "A_new_owner_will_be_assigned_automatically_to__count__room": "Новый владелец будет автоматически назначен на {{count}} чатов.", "A_new_owner_will_be_assigned_automatically_to__count__rooms": "Новый владелец будет автоматически назначен на {{count}} чатов.", + "A11y_appearance_dialog_require_manual_dismissal": "Требуется ручное отклонение.", + "A11y_appearance_dialogs": "Диалоги", + "A11y_appearance_show_alerts_as": "Показывать уведомления как", + "A11y_appearance_toast_dismissed_automatically": "Отклонено автоматически", + "A11y_appearance_toasts": "Тосты", "Accessibility": "Доступность", "Accessibility_and_Appearance": "Доступность и внешний вид", "Accessibility_statement": "Заявление о доступности", diff --git a/app/i18n/locales/sl-SI.json b/app/i18n/locales/sl-SI.json index c91815a088f..90fe702fe08 100644 --- a/app/i18n/locales/sl-SI.json +++ b/app/i18n/locales/sl-SI.json @@ -4,6 +4,11 @@ "1_person_reacted": "1 oseba se je odzvala", "A_new_owner_will_be_assigned_automatically_to__count__room": "Novi lastnik bo samodejno dodeljen {{count}} sobi.", "A_new_owner_will_be_assigned_automatically_to__count__rooms": "Novi lastnik bo samodejno dodeljen {{count}} sobam.", + "A11y_appearance_dialog_require_manual_dismissal": "Zahtevaj ročno zavrnitev", + "A11y_appearance_dialogs": "Pogovori", + "A11y_appearance_show_alerts_as": "Prikaži opozorila kot", + "A11y_appearance_toast_dismissed_automatically": "Samodejno zavrnjeno", + "A11y_appearance_toasts": "Toast obvestila", "Accessibility": "Dostopnost", "Accessibility_and_Appearance": "Dostopnost in videz", "Accessibility_statement": "Izjava o dostopnosti", diff --git a/app/i18n/locales/sv.json b/app/i18n/locales/sv.json index bbcf557036a..8aa37894fc6 100644 --- a/app/i18n/locales/sv.json +++ b/app/i18n/locales/sv.json @@ -4,6 +4,11 @@ "1_person_reacted": "1 person reagerade", "A_new_owner_will_be_assigned_automatically_to__count__room": "En ny ägare utses automatiskt för {{count}} rum.", "A_new_owner_will_be_assigned_automatically_to__count__rooms": "En ny ägare utses automatiskt för {{count}} rum.", + "A11y_appearance_dialog_require_manual_dismissal": "Kräver manuell stängning", + "A11y_appearance_dialogs": "Dialoger", + "A11y_appearance_show_alerts_as": "Visa varningar som", + "A11y_appearance_toast_dismissed_automatically": "Avfärdat automatiskt", + "A11y_appearance_toasts": "Toastmeddelanden", "Accessibility": "Tillgänglighet", "Accessibility_and_Appearance": "Tillgänglighet och utseende", "Accessibility_statement": "Tillgänglighetsredogörelse", diff --git a/app/i18n/locales/ta-IN.json b/app/i18n/locales/ta-IN.json index 34dad132dfe..68c2bc31aa5 100644 --- a/app/i18n/locales/ta-IN.json +++ b/app/i18n/locales/ta-IN.json @@ -4,6 +4,11 @@ "1_person_reacted": "1 பேர் பின்னால் பதில் செய்துள்ளனர்", "A_new_owner_will_be_assigned_automatically_to__count__room": "{{count}} அறைக்கு புதிய உரிமையாளர் தானாகவே முடிந்துவிடப்படும்.", "A_new_owner_will_be_assigned_automatically_to__count__rooms": "{{count}} அறைகளுக்கு புதிய உரிமையாளர் தானாகவே முடிந்துவிடப்படும்.", + "A11y_appearance_dialog_require_manual_dismissal": "கைமுறையாக நிராகரிக்க வேண்டும்", + "A11y_appearance_dialogs": "டையலாக்கள்", + "A11y_appearance_show_alerts_as": "அறிவிப்புகளை இவ்வாறு காட்டு:", + "A11y_appearance_toast_dismissed_automatically": "தானாகவே தள்ளுபடி செய்யப்பட்டது", + "A11y_appearance_toasts": "டோஸ்ட்‌ஸ்", "accept": "ஏற்றுக்கொள்", "Accessibility": "அணுகல் மேம்பாடு", "Accessibility_and_Appearance": "நுகர்வுத்திறன் மற்றும் தோற்றம்", diff --git a/app/i18n/locales/te-IN.json b/app/i18n/locales/te-IN.json index fe8d6c578ce..fb93243666b 100644 --- a/app/i18n/locales/te-IN.json +++ b/app/i18n/locales/te-IN.json @@ -4,6 +4,11 @@ "1_person_reacted": "1 వ్యక్తి ప్రతిక్రియించింది", "A_new_owner_will_be_assigned_automatically_to__count__room": "కొత్త యజమాని స్వయంగా నియమించబడుతుంది {{count}} అంగడాయినందు.", "A_new_owner_will_be_assigned_automatically_to__count__rooms": "కొత్త యజమాని స్వయంగా నియమించబడుతుంది {{count}} అంగడులకు.", + "A11y_appearance_dialog_require_manual_dismissal": "మానవీయంగా మూసివేయాలి", + "A11y_appearance_dialogs": "డైలాగ్లు", + "A11y_appearance_show_alerts_as": "అలర్ట్‌లను ఇలా చూపించండి", + "A11y_appearance_toast_dismissed_automatically": "స్వయంచాలకంగా మూసివేయబడుతుంది", + "A11y_appearance_toasts": "టోస్ట్ నోటిఫికేషన్లు", "accept": "అంగీకరించు", "Accessibility": "एक्सेसिबिलिटी", "Accessibility_and_Appearance": "प्रवेशयोग्यता और रूपरेखा", diff --git a/app/i18n/locales/tr.json b/app/i18n/locales/tr.json index 301918ac80c..b5f5a0f2110 100644 --- a/app/i18n/locales/tr.json +++ b/app/i18n/locales/tr.json @@ -1,5 +1,10 @@ { "1_person_reacted": "1 kişi tepki verdi.", + "A11y_appearance_dialog_require_manual_dismissal": "Elle kapatılması gerekir", + "A11y_appearance_dialogs": "Diyaloglar", + "A11y_appearance_show_alerts_as": "Uyarıları şu şekilde göster", + "A11y_appearance_toast_dismissed_automatically": "Otomatik olarak kapatılır", + "A11y_appearance_toasts": "Toast bildirimleri", "Accessibility": "Erişilebilirlik", "Accessibility_and_Appearance": "Erişilebilirlik ve görünüm", "Accessibility_statement": "Erişilebilirlik beyanı", diff --git a/app/i18n/locales/zh-CN.json b/app/i18n/locales/zh-CN.json index a8cf20156b4..3c05553f8b2 100644 --- a/app/i18n/locales/zh-CN.json +++ b/app/i18n/locales/zh-CN.json @@ -1,5 +1,10 @@ { "1_person_reacted": "1 人回复了", + "A11y_appearance_dialog_require_manual_dismissal": "需要手动关闭", + "A11y_appearance_dialogs": "对话框", + "A11y_appearance_show_alerts_as": "将警报显示为", + "A11y_appearance_toast_dismissed_automatically": "自动消失", + "A11y_appearance_toasts": "Toast", "Accessibility": "无障碍性", "Accessibility_and_Appearance": "辅助功能和外观", "Accessibility_statement": "无障碍声明", diff --git a/app/i18n/locales/zh-TW.json b/app/i18n/locales/zh-TW.json index 1a202782ebf..1713930b774 100644 --- a/app/i18n/locales/zh-TW.json +++ b/app/i18n/locales/zh-TW.json @@ -1,5 +1,10 @@ { "1_person_reacted": "1 人回覆了", + "A11y_appearance_dialog_require_manual_dismissal": "需要手動關閉", + "A11y_appearance_dialogs": "對話框", + "A11y_appearance_show_alerts_as": "顯示警報為", + "A11y_appearance_toast_dismissed_automatically": "自動駁回", + "A11y_appearance_toasts": "快顯通知 (Toast)", "Accessibility": "無障礙設施", "Accessibility_and_Appearance": "無障礙功能與外觀", "Accessibility_statement": "无障碍声明", diff --git a/app/lib/constants/keys.ts b/app/lib/constants/keys.ts index 7c03cc54db8..e2206bb3a5b 100644 --- a/app/lib/constants/keys.ts +++ b/app/lib/constants/keys.ts @@ -19,6 +19,7 @@ export const THEME_PREFERENCES_KEY = 'RC_THEME_PREFERENCES_KEY'; export const USER_MENTIONS_PREFERENCES_KEY = 'RC_USER_MENTIONS_PREFERENCES_KEY'; export const ROOM_MENTIONS_PREFERENCES_KEY = 'RC_ROOM_MENTIONS_PREFERENCES_KEY'; export const AUTOPLAY_GIFS_PREFERENCES_KEY = 'RC_AUTOPLAY_GIFS_PREFERENCES_KEY'; +export const ALERT_DISPLAY_TYPE_PREFERENCES_KEY = 'RC_ALERT_DISPLAY_TYPE_PREFERENCES_KEY'; export const CRASH_REPORT_KEY = 'RC_CRASH_REPORT_KEY'; export const ANALYTICS_EVENTS_KEY = 'RC_ANALYTICS_EVENTS_KEY'; export const TOKEN_KEY = 'reactnativemeteor_usertoken'; diff --git a/app/views/AccessibilityAndAppearanceView/components/ListPicker.tsx b/app/views/AccessibilityAndAppearanceView/components/ListPicker.tsx new file mode 100644 index 00000000000..89e54872df7 --- /dev/null +++ b/app/views/AccessibilityAndAppearanceView/components/ListPicker.tsx @@ -0,0 +1,108 @@ +import React from 'react'; +import { StyleSheet, Text, View } from 'react-native'; + +import { TActionSheetOptionsItem, useActionSheet } from '../../../containers/ActionSheet'; +import { CustomIcon } from '../../../containers/CustomIcon'; +import * as List from '../../../containers/List'; +import I18n from '../../../i18n'; +import { useTheme } from '../../../theme'; +import sharedStyles from '../../Styles'; +import { TAlertDisplayType } from '..'; + +const styles = StyleSheet.create({ + leftTitleContainer: { + flex: 1, + justifyContent: 'center', + alignItems: 'flex-start' + }, + leftTitle: { + ...sharedStyles.textMedium, + fontSize: 16, + lineHeight: 24 + }, + rightContainer: { + flex: 1 + }, + rightTitle: { + ...sharedStyles.textRegular, + fontSize: 16, + lineHeight: 24 + }, + rightTitleContainer: { + flex: 1, + justifyContent: 'center', + alignItems: 'flex-end' + } +}); + +type TOPTIONS = { label: string; value: TAlertDisplayType; description: string | null }[]; + +interface IBaseParams { + value: TAlertDisplayType; + onChangeValue: (value: TAlertDisplayType) => void; +} + +const ListPicker = ({ + value, + title, + onChangeValue +}: { + title: string; +} & IBaseParams) => { + const { showActionSheet, hideActionSheet } = useActionSheet(); + const { colors } = useTheme(); + + const OPTIONS: TOPTIONS = [ + { + label: I18n.t('A11y_appearance_toasts'), + value: 'TOAST' as TAlertDisplayType, + description: I18n.t('A11y_appearance_toast_dismissed_automatically') + }, + { + label: I18n.t('A11y_appearance_dialogs'), + value: 'DIALOG' as TAlertDisplayType, + description: I18n.t('A11y_appearance_dialog_require_manual_dismissal') + } + ]; + + const option = OPTIONS.find(option => option.value === value) || OPTIONS[0]; + + const getOptions = (): TActionSheetOptionsItem[] => + OPTIONS.map(i => ({ + title: i.label, + subtitle: i?.description || undefined, + accessibilityLabel: `${i.label}. ${i?.description || ''}. ${ + option?.value === i.value ? I18n.t('Checked') : I18n.t('Unchecked') + }`, + onPress: () => { + hideActionSheet(); + onChangeValue(i.value); + }, + right: option?.value === i.value ? () => : undefined + })); + + const openOptions = () => { + const options = getOptions(); + showActionSheet({ options }); + }; + return ( + ( + + {title} + + )} + right={() => ( + + {option?.label} + + )} + rightContainerStyle={styles.rightContainer} + additionalAcessibilityLabel={option?.label} + /> + ); +}; + +export default ListPicker; diff --git a/app/views/AccessibilityAndAppearanceView/index.tsx b/app/views/AccessibilityAndAppearanceView/index.tsx index 4f6c8c9e976..d6651d73e0b 100644 --- a/app/views/AccessibilityAndAppearanceView/index.tsx +++ b/app/views/AccessibilityAndAppearanceView/index.tsx @@ -10,7 +10,15 @@ import I18n from '../../i18n'; import { AccessibilityStackParamList } from '../../stacks/types'; import { useAppSelector } from '../../lib/hooks'; import { useUserPreferences } from '../../lib/methods'; -import { USER_MENTIONS_PREFERENCES_KEY, ROOM_MENTIONS_PREFERENCES_KEY, AUTOPLAY_GIFS_PREFERENCES_KEY } from '../../lib/constants'; +import { + USER_MENTIONS_PREFERENCES_KEY, + ROOM_MENTIONS_PREFERENCES_KEY, + AUTOPLAY_GIFS_PREFERENCES_KEY, + ALERT_DISPLAY_TYPE_PREFERENCES_KEY +} from '../../lib/constants/keys'; +import ListPicker from './components/ListPicker'; + +export type TAlertDisplayType = 'TOAST' | 'DIALOG'; const AccessibilityAndAppearanceView = () => { const navigation = useNavigation>(); @@ -18,6 +26,10 @@ const AccessibilityAndAppearanceView = () => { const [mentionsWithAtSymbol, setMentionsWithAtSymbol] = useUserPreferences(USER_MENTIONS_PREFERENCES_KEY); const [roomsWithHashTagSymbol, setRoomsWithHashTagSymbol] = useUserPreferences(ROOM_MENTIONS_PREFERENCES_KEY); const [autoplayGifs, setAutoplayGifs] = useUserPreferences(AUTOPLAY_GIFS_PREFERENCES_KEY, true); + const [alertDisplayType, setAlertDisplayType] = useUserPreferences( + ALERT_DISPLAY_TYPE_PREFERENCES_KEY, + 'TOAST' + ); const toggleMentionsWithAtSymbol = () => { setMentionsWithAtSymbol(!mentionsWithAtSymbol); @@ -93,6 +105,17 @@ const AccessibilityAndAppearanceView = () => { /> + + + { + setAlertDisplayType(value); + }} + title={I18n.t('A11y_appearance_show_alerts_as')} + value={alertDisplayType} + /> + + );