Skip to content

Commit 605cc45

Browse files
OtavioStasiakcoderabbitai[bot]
OtavioStasiak
and
coderabbitai[bot]
authored
feat(a11y): toasts to native dialogs (#6514)
* feat: new i18n translation * feat: add listPicker * feat: layout and code improvements * fix: copy and a11y label read * feat: added hint to Toasts option * feat: e2e tests * fix: jest mock and imports * fix: jest * fix: code improvements * fix: zh-CN translation Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: te-IN translation Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: no translation Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: nl translation Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: hu translation Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: fi translation Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: es translation Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: tr translation * chore: code improvements * chore: code improvements * fix: remove extra pause if there is no subtitle * fix: i18n ListPicker * fix: i18n translation * fix: it translation Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update app/i18n/locales/sv.json Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: translation * fix: remove unused useMemo --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
1 parent ed6499c commit 605cc45

File tree

33 files changed

+331
-6
lines changed

33 files changed

+331
-6
lines changed

‎.maestro/tests/accessibilityAndAppearance/ToastsAndDialogs.yml‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
appId: chat.rocket.reactnative
2+
name: Toasts and Dialogs
3+
onFlowStart:
4+
- runFlow: '../../helpers/setup.yaml'
5+
onFlowEnd:
6+
- evalScript: ${output.utils.deleteCreatedUsers()}
7+
8+
---
9+
- runFlow: ../../helpers/launch-app.yaml
10+
- runFlow: ../../helpers/login.yaml
11+
12+
# Show alerts as Toasts
13+
- tapOn: 'Menu'
14+
- tapOn: 'Accessibility & appearance'
15+
- tapOn: 'Show alerts as. Toasts'
16+
- assertVisible: 'Toasts. Dismissed automatically. Checked'
17+
- assertVisible: 'Dialogs. Require manual dismissal. Unchecked'
18+
- tapOn: 'Bottom Sheet backdrop'
19+
- tapOn: 'Menu'
20+
- tapOn: 'Edit status'
21+
- tapOn:
22+
id: 'status-view-offline'
23+
- tapOn: 'Save'
24+
- assertVisible: 'Status saved successfully!'
25+
26+
# Show alerts as Dialogs
27+
- tapOn: 'Accessibility & appearance'
28+
- tapOn: 'Show alerts as. Toasts'
29+
- assertVisible: 'Toasts. Dismissed automatically. Checked'
30+
- tapOn: 'Dialogs. Require manual dismissal. Unchecked'
31+
- tapOn: 'Menu'
32+
- tapOn: 'Edit status'
33+
- tapOn:
34+
id: 'status-view-online'
35+
- tapOn: 'Save'
36+
- assertVisible: 'Status saved successfully!'
37+
- assertVisible: 'OK'
38+
- tapOn: 'OK'

‎app/containers/ActionSheet/Item.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,29 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
3636
color = colors.fontDisabled;
3737
}
3838
const height = 48 * fontScale;
39+
const accessibilityLabel = item?.accessibilityLabel || (item?.subtitle ? `${item.title}. ${item.subtitle}` : item.title);
3940

4041
return (
41-
<View accessible accessibilityLabel={item.title}>
42-
<Touch onPress={onPress} style={[styles.item, { backgroundColor: colors.surfaceLight, height }]} testID={item.testID}>
42+
<View>
43+
<Touch
44+
accessible
45+
accessibilityLabel={accessibilityLabel}
46+
accessibilityRole='button'
47+
onPress={onPress}
48+
style={[styles.item, { backgroundColor: colors.surfaceLight, height }]}
49+
testID={item.testID}>
4350
{item.icon ? <CustomIcon name={item.icon} size={24} color={color} /> : null}
4451
<View style={styles.titleContainer}>
4552
<Text numberOfLines={1} style={[styles.title, { color, marginLeft: item.icon ? 16 : 0 }]}>
4653
{item.title}
4754
</Text>
55+
{item?.subtitle ? (
56+
<Text
57+
numberOfLines={1}
58+
style={[styles.subtitle, { color: colors.fontSecondaryInfo, marginLeft: item.icon ? 16 : 0 }]}>
59+
{item.subtitle}
60+
</Text>
61+
) : null}
4862
</View>
4963
{item.right ? <View style={styles.rightContainer}>{item.right ? item.right() : null}</View> : null}
5064
</Touch>

‎app/containers/ActionSheet/Provider.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import ActionSheet from './ActionSheet';
66

77
export type TActionSheetOptionsItem = {
88
title: string;
9+
subtitle?: string;
10+
accessibilityLabel?: string;
911
icon?: TIconsName;
1012
danger?: boolean;
1113
testID?: string;

‎app/containers/ActionSheet/styles.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,15 @@ export default StyleSheet.create({
2020
flex: 1
2121
},
2222
title: {
23-
fontSize: 16,
23+
fontSize: 18,
24+
lineHeight: 26,
2425
...sharedStyles.textMedium
2526
},
27+
subtitle: {
28+
fontSize: 14,
29+
lineHeight: 20,
30+
...sharedStyles.textRegular
31+
},
2632
handle: {
2733
justifyContent: 'center',
2834
alignItems: 'center',

‎app/containers/Toast.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import React, { useEffect } from 'react';
2-
import { StyleSheet } from 'react-native';
2+
import { Alert, StyleSheet } from 'react-native';
33
import EasyToast from 'react-native-easy-toast';
44

5+
import { useUserPreferences } from '../lib/methods/userPreferences';
6+
import { TAlertDisplayType } from '../views/AccessibilityAndAppearanceView';
57
import EventEmitter from '../lib/methods/helpers/events';
68
import { useTheme } from '../theme';
79
import sharedStyles from '../views/Styles';
10+
import { ALERT_DISPLAY_TYPE_PREFERENCES_KEY } from '../lib/constants/keys';
811

912
const styles = StyleSheet.create({
1013
toast: {
@@ -25,19 +28,24 @@ let toast: EasyToast | null | undefined;
2528

2629
const Toast = (): React.ReactElement => {
2730
const { colors, theme } = useTheme();
31+
const [alertDisplayType] = useUserPreferences<TAlertDisplayType>(ALERT_DISPLAY_TYPE_PREFERENCES_KEY, 'TOAST');
2832

2933
useEffect(() => {
3034
listener = EventEmitter.addEventListener(LISTENER, showToast);
3135
return () => {
3236
EventEmitter.removeListener(LISTENER, listener);
3337
};
34-
}, []);
38+
}, [alertDisplayType]);
3539

3640
const getToastRef = (newToast: EasyToast | null) => {
3741
toast = newToast;
3842
};
3943

4044
const showToast = ({ message }: { message: string }) => {
45+
if (alertDisplayType === 'DIALOG') {
46+
Alert.alert(message);
47+
return;
48+
}
4149
if (toast && toast.show) {
4250
toast.show(message, 1000);
4351
}

‎app/i18n/locales/ar.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
{
22
"1_person_reacted": "تفاعل شخص واحد",
3+
"A11y_appearance_dialog_require_manual_dismissal": "يتطلب إنهاء يدويًا",
4+
"A11y_appearance_dialogs": "حوارات",
5+
"A11y_appearance_show_alerts_as": "عرض التنبيهات كـ",
6+
"A11y_appearance_toast_dismissed_automatically": "تم رفضه تلقائيًا",
7+
"A11y_appearance_toasts": "إشعارات منبثقة (Toast)",
38
"Accessibility": "إمكانية الوصول",
49
"Accessibility_and_Appearance": "إمكانية الوصول والمظهر",
510
"Accessibility_statement": "بيان الوصول",

‎app/i18n/locales/bn-IN.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@
44
"1_person_reacted": "1 জন ব্যক্তি প্রতিক্রিয়া দিয়েছে",
55
"A_new_owner_will_be_assigned_automatically_to__count__room": "{{count}} রুমে নতুন মালিক স্বয়ংক্রিয়ভাবে নির্ধারণ করা হবে।",
66
"A_new_owner_will_be_assigned_automatically_to__count__rooms": "{{count}} রুমে নতুন মালিক স্বয়ংক্রিয়ভাবে নির্ধারণ করা হবে।",
7+
"A11y_appearance_dialog_require_manual_dismissal": "ম্যানুয়ালভাবে বাতিল প্রয়োজন।",
8+
"A11y_appearance_dialogs": "ডায়ালগগুলো",
9+
"A11y_appearance_show_alerts_as": "এভাবে এলার্ট দেখান",
10+
"A11y_appearance_toast_dismissed_automatically": "স্বয়ংক্রিয়ভাবে বরখাস্ত করা হয়েছে",
11+
"A11y_appearance_toasts": "টোস্ট",
712
"accept": "গ্রহণ করুন",
813
"Accessibility": "অ্যাক্সেসিবিলিটি",
914
"Accessibility_and_Appearance": "অ্যাক্সেসিবিলিটি ও চেহারা",

‎app/i18n/locales/cs.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@
44
"1_person_reacted": "1 osoba reagovala",
55
"A_new_owner_will_be_assigned_automatically_to__count__room": "K {{count}} místnosti bude automaticky přiřazen nový vlastník.",
66
"A_new_owner_will_be_assigned_automatically_to__count__rooms": "K {{count}} místnostem bude automaticky přiřazen nový vlastník.",
7+
"A11y_appearance_dialog_require_manual_dismissal": "Vyžaduje ruční zavření.",
8+
"A11y_appearance_dialogs": "Dialogy",
9+
"A11y_appearance_show_alerts_as": "Zobrazit upozornění jako",
10+
"A11y_appearance_toast_dismissed_automatically": "Automaticky odmítnuto",
11+
"A11y_appearance_toasts": "Toast upozornění",
712
"accept": "Akceptovat",
813
"Accessibility": "Přístupnost",
914
"Accessibility_and_Appearance": "Přístupnost a vzhled",

‎app/i18n/locales/de.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@
44
"1_person_reacted": "1 Person hat reagiert",
55
"A_new_owner_will_be_assigned_automatically_to__count__room": "Ein neuer Besitzer wird automatisch zu {{count}} Raum zugeordnet.",
66
"A_new_owner_will_be_assigned_automatically_to__count__rooms": "Ein neuer Besitzer wird automatisch zu {{count}} Räumen zugeordnet.",
7+
"A11y_appearance_dialog_require_manual_dismissal": "Manuelle Ablehnung erforderlich",
8+
"A11y_appearance_dialogs": "Dialoge",
9+
"A11y_appearance_show_alerts_as": "Warnungen anzeigen als",
10+
"A11y_appearance_toast_dismissed_automatically": "Automatisch verworfen",
11+
"A11y_appearance_toasts": "Toast-Benachrichtigungen",
712
"accept": "Annehmen",
813
"Accessibility": "Barrierefreiheit",
914
"Accessibility_and_Appearance": "Barrierefreiheit & Erscheinungsbild",

‎app/i18n/locales/en.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@
44
"1_person_reacted": "1 person reacted",
55
"A_new_owner_will_be_assigned_automatically_to__count__room": "A new owner will be assigned automatically to {{count}} room.",
66
"A_new_owner_will_be_assigned_automatically_to__count__rooms": "A new owner will be assigned automatically to {{count}} rooms.",
7+
"A11y_appearance_dialog_require_manual_dismissal": "Require manual dismissal",
8+
"A11y_appearance_dialogs": "Dialogs",
9+
"A11y_appearance_show_alerts_as": "Show alerts as",
10+
"A11y_appearance_toast_dismissed_automatically": "Dismissed automatically",
11+
"A11y_appearance_toasts": "Toasts",
712
"accept": "Accept",
813
"Accessibility": "Accessibility",
914
"Accessibility_and_Appearance": "Accessibility & appearance",

0 commit comments

Comments
 (0)