diff --git a/.maestro/tests/assorted/join-from-directory.yaml b/.maestro/tests/assorted/join-from-directory.yaml index edeaae617dc..5e8de558c70 100644 --- a/.maestro/tests/assorted/join-from-directory.yaml +++ b/.maestro/tests/assorted/join-from-directory.yaml @@ -26,6 +26,8 @@ tags: visible: id: 'rooms-list-view-directory' timeout: 60000 +- waitForAnimationToEnd: + timeout: 10000 - tapOn: id: 'rooms-list-view-directory' - extendedWaitUntil: @@ -95,10 +97,10 @@ tags: id: 'directory-view-filter' - extendedWaitUntil: visible: - text: 'Users' + text: 'Users unselected' timeout: 60000 - tapOn: - text: 'Users' + text: 'Users unselected' - tapOn: id: 'directory-view-search' - inputText: ${output.otherUser.username} @@ -143,10 +145,10 @@ tags: id: 'directory-view-filter' - extendedWaitUntil: visible: - text: 'Teams' + text: 'Teams unselected' timeout: 60000 - tapOn: - text: 'Teams' + text: 'Teams unselected' - tapOn: id: 'directory-view-search' - inputText: ${output.team} diff --git a/.maestro/tests/room/discussion.yaml b/.maestro/tests/room/discussion.yaml index dcfe68b6789..3221343b4bb 100644 --- a/.maestro/tests/room/discussion.yaml +++ b/.maestro/tests/room/discussion.yaml @@ -41,66 +41,48 @@ tags: id: 'new-message-view-create-discussion' - extendedWaitUntil: visible: - id: 'create-discussion-view' - timeout: 60000 -- tapOn: - id: 'create-discussion-select-channel' -- extendedWaitUntil: - visible: - id: 'action-sheet' + id: 'select-users-view' timeout: 60000 +# Select users in SelectedUsersView - extendedWaitUntil: visible: - id: 'multi-select-item-${output.room.name}' + id: 'select-users-view-search' timeout: 60000 - tapOn: - id: 'multi-select-item-${output.room.name}' -- tapOn: - id: 'multi-select-discussion-name' -- inputText: ${output.discussionFromNewMessage} -- tapOn: - id: 'create-discussion-select-users' + id: 'select-users-view-search' +- inputText: ${output.selectUser} - extendedWaitUntil: visible: - id: 'action-sheet' + id: 'select-users-view-item-${output.selectUser}' timeout: 60000 - tapOn: - id: 'multi-select-search' -- inputText: ${output.selectUser} + id: 'select-users-view-item-${output.selectUser}' - extendedWaitUntil: visible: - id: 'multi-select-item-${output.selectUser}' + id: 'selected-user-${output.selectUser}' timeout: 60000 - tapOn: - id: 'multi-select-item-${output.selectUser}' -- pressKey: Enter + id: 'selected-users-view-submit' - extendedWaitUntil: visible: - id: 'multi-select-chip-${output.selectUser}' + id: 'create-discussion-view' timeout: 60000 - +# Select channel and enter discussion name - tapOn: - id: 'create-discussion-select-users' + id: 'create-discussion-select-channel' - extendedWaitUntil: visible: id: 'action-sheet' timeout: 60000 -- tapOn: - id: 'multi-select-search' -- eraseText -- inputText: 'user' -- pressKey: Enter - - extendedWaitUntil: visible: - id: 'multi-select-chip-${output.selectUser}' + id: 'multi-select-item-${output.room.name}' timeout: 60000 - tapOn: - id: 'multi-select-chip-${output.selectUser}' -- extendedWaitUntil: - notVisible: - id: 'multi-select-chip-${output.selectUser}' - timeout: 60000 + id: 'multi-select-item-${output.room.name}' +- tapOn: + id: 'multi-select-discussion-name' +- inputText: ${output.discussionFromNewMessage} - tapOn: id: 'create-discussion-submit' - extendedWaitUntil: diff --git a/app/containers/ActionSheet/Provider.tsx b/app/containers/ActionSheet/Provider.tsx index 6de0804a344..d74043234e3 100644 --- a/app/containers/ActionSheet/Provider.tsx +++ b/app/containers/ActionSheet/Provider.tsx @@ -1,5 +1,6 @@ import hoistNonReactStatics from 'hoist-non-react-statics'; import React, { createRef, type ForwardedRef, forwardRef, useContext } from 'react'; +import { type AccessibilityRole } from 'react-native'; import { type TIconsName } from '../CustomIcon'; import ActionSheet from './ActionSheet'; @@ -14,6 +15,7 @@ export type TActionSheetOptionsItem = { onPress: () => void; right?: () => React.ReactElement; enabled?: boolean; + accessibilityRole?: AccessibilityRole; disabledReason?: string; }; diff --git a/app/containers/Chip/__snapshots__/Chip.test.tsx.snap b/app/containers/Chip/__snapshots__/Chip.test.tsx.snap index e34fd48920c..58de1a6452d 100644 --- a/app/containers/Chip/__snapshots__/Chip.test.tsx.snap +++ b/app/containers/Chip/__snapshots__/Chip.test.tsx.snap @@ -45,12 +45,12 @@ exports[`Story Snapshots: ChipFullWidth should match snapshot 1`] = ` { "borderRadius": 4, "justifyContent": "center", - "marginRight": 8, + "marginHorizontal": 4, "maxWidth": 192, - "paddingHorizontal": 8, + "paddingHorizontal": 4, }, { - "backgroundColor": "#F2F3F5", + "backgroundColor": "#E4E7EA", "maxWidth": undefined, }, undefined, @@ -70,7 +70,7 @@ exports[`Story Snapshots: ChipFullWidth should match snapshot 1`] = ` [ { "marginRight": 8, - "maxWidth": 120, + "maxWidth": 110, }, { "maxWidth": undefined, @@ -148,12 +148,12 @@ exports[`Story Snapshots: ChipText should match snapshot 1`] = ` { "borderRadius": 4, "justifyContent": "center", - "marginRight": 8, + "marginHorizontal": 4, "maxWidth": 192, - "paddingHorizontal": 8, + "paddingHorizontal": 4, }, { - "backgroundColor": "#F2F3F5", + "backgroundColor": "#E4E7EA", "maxWidth": 192, }, undefined, @@ -228,7 +228,7 @@ exports[`Story Snapshots: ChipText should match snapshot 1`] = ` [ { "marginRight": 8, - "maxWidth": 120, + "maxWidth": 110, }, undefined, ] @@ -330,12 +330,12 @@ exports[`Story Snapshots: ChipWithShortText should match snapshot 1`] = ` { "borderRadius": 4, "justifyContent": "center", - "marginRight": 8, + "marginHorizontal": 4, "maxWidth": 192, - "paddingHorizontal": 8, + "paddingHorizontal": 4, }, { - "backgroundColor": "#F2F3F5", + "backgroundColor": "#E4E7EA", "maxWidth": 192, }, undefined, @@ -410,7 +410,7 @@ exports[`Story Snapshots: ChipWithShortText should match snapshot 1`] = ` [ { "marginRight": 8, - "maxWidth": 120, + "maxWidth": 110, }, undefined, ] @@ -512,12 +512,12 @@ exports[`Story Snapshots: ChipWithoutAvatar should match snapshot 1`] = ` { "borderRadius": 4, "justifyContent": "center", - "marginRight": 8, + "marginHorizontal": 4, "maxWidth": 192, - "paddingHorizontal": 8, + "paddingHorizontal": 4, }, { - "backgroundColor": "#F2F3F5", + "backgroundColor": "#E4E7EA", "maxWidth": 192, }, undefined, @@ -537,7 +537,7 @@ exports[`Story Snapshots: ChipWithoutAvatar should match snapshot 1`] = ` [ { "marginRight": 8, - "maxWidth": 120, + "maxWidth": 110, }, undefined, ] @@ -639,12 +639,12 @@ exports[`Story Snapshots: ChipWithoutAvatarAndIcon should match snapshot 1`] = ` { "borderRadius": 4, "justifyContent": "center", - "marginRight": 8, + "marginHorizontal": 4, "maxWidth": 192, - "paddingHorizontal": 8, + "paddingHorizontal": 4, }, { - "backgroundColor": "#F2F3F5", + "backgroundColor": "#E4E7EA", "maxWidth": 192, }, undefined, @@ -664,7 +664,7 @@ exports[`Story Snapshots: ChipWithoutAvatarAndIcon should match snapshot 1`] = ` [ { "marginRight": 8, - "maxWidth": 120, + "maxWidth": 110, }, undefined, ] @@ -740,12 +740,12 @@ exports[`Story Snapshots: ChipWithoutIcon should match snapshot 1`] = ` { "borderRadius": 4, "justifyContent": "center", - "marginRight": 8, + "marginHorizontal": 4, "maxWidth": 192, - "paddingHorizontal": 8, + "paddingHorizontal": 4, }, { - "backgroundColor": "#F2F3F5", + "backgroundColor": "#E4E7EA", "maxWidth": 192, }, undefined, @@ -820,7 +820,7 @@ exports[`Story Snapshots: ChipWithoutIcon should match snapshot 1`] = ` [ { "marginRight": 8, - "maxWidth": 120, + "maxWidth": 110, }, undefined, ] diff --git a/app/containers/Chip/index.tsx b/app/containers/Chip/index.tsx index e97f3581eb5..b45d61e94ae 100644 --- a/app/containers/Chip/index.tsx +++ b/app/containers/Chip/index.tsx @@ -8,8 +8,8 @@ import Avatar from '../Avatar'; const styles = StyleSheet.create({ pressable: { - paddingHorizontal: 8, - marginRight: 8, + paddingHorizontal: 4, + marginHorizontal: 4, borderRadius: 4, justifyContent: 'center', maxWidth: 192 @@ -24,7 +24,7 @@ const styles = StyleSheet.create({ }, textContainer: { marginRight: 8, - maxWidth: 120 + maxWidth: 110 }, name: { fontSize: 16, @@ -50,7 +50,7 @@ const Chip = ({ avatar, text, onPress, testID, style, fullWidth }: IChip) => { style={({ pressed }) => [ styles.pressable, { - backgroundColor: pressed ? colors.surfaceNeutral : colors.surfaceHover, + backgroundColor: pressed ? colors.surfaceNeutral : colors.buttonBackgroundSecondaryDefault, maxWidth: fullWidth ? undefined : styles.pressable.maxWidth }, style diff --git a/app/containers/List/List.stories.tsx b/app/containers/List/List.stories.tsx index 2f80fb7b322..fe375218e27 100644 --- a/app/containers/List/List.stories.tsx +++ b/app/containers/List/List.stories.tsx @@ -69,6 +69,49 @@ export const Separator = () => ( ); +export const Radio = () => ( + + + alert('Option 1 selected')} + /> + + alert('Option 2 selected')} + /> + + alert('Option 3 selected')} + /> + + alert('Option 4 selected')} + /> + + +); + export const SectionAndInfo = () => ( diff --git a/app/containers/List/ListItem.tsx b/app/containers/List/ListItem.tsx index 696ec0c17b1..5a999e1a7a3 100644 --- a/app/containers/List/ListItem.tsx +++ b/app/containers/List/ListItem.tsx @@ -102,9 +102,9 @@ interface IListItemContent { heightContainer?: number; rightContainerStyle?: StyleProp; styleTitle?: StyleProp; - additionalAcessibilityLabel?: string | boolean; + additionalAccessibilityLabel?: string | boolean; accessibilityRole?: AccessibilityRole; - additionalAcessibilityLabelCheck?: boolean; + additionalAccessibilityLabelCheck?: boolean; numberOfLines?: number; } @@ -124,8 +124,8 @@ const Content = React.memo( heightContainer, rightContainerStyle = {}, styleTitle, - additionalAcessibilityLabel, - additionalAcessibilityLabelCheck, + additionalAccessibilityLabel, + additionalAccessibilityLabelCheck, accessibilityRole, accessibilityLabel, numberOfLines @@ -146,14 +146,14 @@ const Content = React.memo( if (subtitle) { label = translateSubtitle ? `${label} ${I18n.t(subtitle)}` : `${label} ${subtitle}`; } - if (typeof additionalAcessibilityLabel === 'string') { - label = `${label} ${additionalAcessibilityLabel}`; + if (typeof additionalAccessibilityLabel === 'string') { + label = `${label} ${additionalAccessibilityLabel}`; } - if (typeof additionalAcessibilityLabel === 'boolean') { - if (additionalAcessibilityLabelCheck) { - label = `${label} ${additionalAcessibilityLabel ? I18n.t('Checked') : I18n.t('Unchecked')}`; + if (typeof additionalAccessibilityLabel === 'boolean') { + if (additionalAccessibilityLabelCheck) { + label = `${label} ${additionalAccessibilityLabel ? I18n.t('Checked') : I18n.t('Unchecked')}`; } else { - label = `${label} ${additionalAcessibilityLabel ? I18n.t('Enabled') : I18n.t('Disabled')}`; + label = `${label} ${additionalAccessibilityLabel ? I18n.t('Enabled') : I18n.t('Disabled')}`; } } return label; @@ -163,8 +163,8 @@ const Content = React.memo( subtitle, translateTitle, translateSubtitle, - additionalAcessibilityLabel, - additionalAcessibilityLabelCheck + additionalAccessibilityLabel, + additionalAccessibilityLabelCheck ]); return ( @@ -245,7 +245,7 @@ const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props } ); }); -interface IListItem extends Omit, Omit { +export interface IListItem extends Omit, Omit { backgroundColor?: string; onPress?: Function; } diff --git a/app/containers/List/ListRadio.tsx b/app/containers/List/ListRadio.tsx new file mode 100644 index 00000000000..58e044bd378 --- /dev/null +++ b/app/containers/List/ListRadio.tsx @@ -0,0 +1,29 @@ +import React from 'react'; + +import i18n from '../../i18n'; +import ListItem, { type IListItem } from './ListItem'; +import ListIcon from './ListIcon'; +import { useTheme } from '../../theme'; + +interface IListRadio extends IListItem { + value: any; + isSelected: boolean; +} + +const ListRadio = ({ value, isSelected, ...rest }: IListRadio) => { + const { colors } = useTheme(); + + const iconName = isSelected ? 'radio-checked' : 'radio-unchecked'; + const iconColor = isSelected ? colors.badgeBackgroundLevel2 : colors.strokeMedium; + + return ( + } + additionalAccessibilityLabel={isSelected ? i18n.t('Selected') : i18n.t('Unselected')} + accessibilityRole='radio' + /> + ); +}; + +export default ListRadio; diff --git a/app/containers/List/__snapshots__/List.test.tsx.snap b/app/containers/List/__snapshots__/List.test.tsx.snap index 459389d9d94..6414017d4fd 100644 --- a/app/containers/List/__snapshots__/List.test.tsx.snap +++ b/app/containers/List/__snapshots__/List.test.tsx.snap @@ -1239,6 +1239,782 @@ exports[`Story Snapshots: Pressable should match snapshot 1`] = ` `; +exports[`Story Snapshots: Radio should match snapshot 1`] = ` + + + + + + + + + + + Option 1 + + + + + + +  + + + + + + + + + + + + + + + Option 2 + + + + + + +  + + + + + + + + + + + + + + + Option 3 + + + + + + +  + + + + + + + + + + + + + + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries + + + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries + + + + + +  + + + + + + + + + +`; + exports[`Story Snapshots: SectionAndInfo should match snapshot 1`] = ` void; +} + +const SelectedUsers = ({ users, useRealName, onPress }: ISelectedUsers) => { + const { colors } = useTheme(); + + return ( + <> + + + {I18n.t('N_Selected_members', { n: users.length })} + + + item._id} + style={[ + styles.list, + { + backgroundColor: colors.surfaceTint, + borderColor: colors.strokeLight + } + ]} + contentContainerStyle={styles.invitedList} + renderItem={({ item }) => { + const name = useRealName && item.fname ? item.fname : item.name; + const username = item.name; + + return ( + onPress(item)} testID={`create-channel-view-item-${item.name}`} /> + ); + }} + keyboardShouldPersistTaps='always' + /> + + ); +}; + +export default SelectedUsers; diff --git a/app/containers/ServerItem/Touchable.tsx b/app/containers/ServerItem/Touchable.tsx index ccf68681245..5ec949fb42d 100644 --- a/app/containers/ServerItem/Touchable.tsx +++ b/app/containers/ServerItem/Touchable.tsx @@ -1,4 +1,5 @@ import React, { memo } from 'react'; +import { type AccessibilityRole } from 'react-native'; import SwipeableDeleteTouchable from './SwipeableDeleteItem/Touchable'; import Touch from '../Touch'; @@ -13,6 +14,7 @@ export interface IServerItemTouchableProps { onDeletePress?(): void; accessibilityLabel?: string; accessibilityHint?: string; + accessibilityRole?: AccessibilityRole; } const Touchable = ({ @@ -22,7 +24,8 @@ const Touchable = ({ onPress, onDeletePress, accessibilityLabel, - accessibilityHint + accessibilityHint, + accessibilityRole = 'button' }: IServerItemTouchableProps): React.ReactElement => { const { colors } = useTheme(); @@ -52,7 +55,8 @@ const Touchable = ({ style={{ backgroundColor: colors.surfaceLight }} accessible accessibilityLabel={accessibilityLabel} - accessibilityHint={accessibilityHint}> + accessibilityHint={accessibilityHint} + accessibilityRole={accessibilityRole}> {children} ); diff --git a/app/containers/ServerItem/__snapshots__/ServerItem.test.tsx.snap b/app/containers/ServerItem/__snapshots__/ServerItem.test.tsx.snap index b02764e50e8..01509e744dc 100644 --- a/app/containers/ServerItem/__snapshots__/ServerItem.test.tsx.snap +++ b/app/containers/ServerItem/__snapshots__/ServerItem.test.tsx.snap @@ -3,6 +3,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = ` [ @@ -161,36 +163,49 @@ exports[`Story Snapshots: Content should match snapshot 1`] = ` https://open.rocket.chat/ - -  - + +  + + , @@ -349,36 +365,49 @@ exports[`Story Snapshots: Content should match snapshot 1`] = ` https://superlongservername.tologintoasuperlongservername/ - -  - + +  + + , @@ -537,32 +567,44 @@ exports[`Story Snapshots: Content should match snapshot 1`] = ` https://stable.rocket.chat/ - -  - + +  + + , @@ -773,7 +815,7 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = ` ] } accessibilityHint="Activate to select server. Available actions: delete" - accessibilityLabel="Rocket.Chat, https://open.rocket.chat/" + accessibilityLabel="Rocket.Chat. https://open.rocket.chat/. Unselected" accessible={true} onAccessibilityAction={[Function]} style={{}} @@ -877,32 +919,44 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = ` https://open.rocket.chat/ - -  - + +  + + @@ -1110,7 +1164,7 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = ` ] } accessibilityHint="Activate to select server. Available actions: delete" - accessibilityLabel="Another Server, https://example.com/" + accessibilityLabel="Another Server. https://example.com/. Unselected" accessible={true} onAccessibilityAction={[Function]} style={{}} @@ -1214,32 +1268,44 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = ` https://example.com/ - -  - + +  + + @@ -1251,6 +1317,7 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = ` exports[`Story Snapshots: Themes should match snapshot 1`] = ` [ @@ -1409,36 +1477,49 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = ` https://open.rocket.chat/ - -  - + +  + + , @@ -1597,36 +1679,49 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = ` https://open.rocket.chat/ - -  - + +  + + , @@ -1785,32 +1881,44 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = ` https://open.rocket.chat/ - -  - + +  + + , diff --git a/app/containers/ServerItem/index.tsx b/app/containers/ServerItem/index.tsx index 1e68e0b6fef..faf04f52465 100644 --- a/app/containers/ServerItem/index.tsx +++ b/app/containers/ServerItem/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Text, View } from 'react-native'; import { Image } from 'expo-image'; -import Radio from '../Radio'; +import * as List from '../List'; import styles, { ROW_HEIGHT } from './styles'; import { useTheme } from '../../theme'; import Touchable from './Touchable'; @@ -31,20 +31,23 @@ const ServerItem = React.memo(({ item, onPress, onDeletePress, hasCheck }: IServ const { colors } = useTheme(); const { width } = useResponsiveLayout(); - const serverName = item.name || item.id; - const accessibilityLabel = `${serverName}, ${item.id}`; + const iconName = hasCheck ? 'radio-checked' : 'radio-unchecked'; + const iconColor = hasCheck ? colors.badgeBackgroundLevel2 : colors.strokeMedium; + const accessibilityLabel = `${item.name || item.id}. ${item.id}. ${I18n.t(hasCheck ? 'Selected' : 'Unselected')}`; + const accessibilityHint = onDeletePress ? I18n.t('Activate_to_select_server_Available_actions_delete') : I18n.t('Activate_to_select_server'); return ( + width={width}> {item.iconURL ? ( - + + ); diff --git a/app/containers/Switch/index.tsx b/app/containers/Switch/index.tsx index ea82e0f5d1c..3905ef56989 100644 --- a/app/containers/Switch/index.tsx +++ b/app/containers/Switch/index.tsx @@ -1,7 +1,9 @@ -import { Switch as RNSwitch, type SwitchProps } from 'react-native'; +import { AccessibilityInfo, Switch as RNSwitch, type SwitchProps } from 'react-native'; import React from 'react'; import { useTheme } from '../../theme'; +import { isIOS } from '../../lib/methods/helpers'; +import I18n from '../../i18n'; const Switch = (props: SwitchProps): React.ReactElement => { const { colors } = useTheme(); @@ -11,8 +13,21 @@ const Switch = (props: SwitchProps): React.ReactElement => { true: colors.buttonBackgroundPrimaryDefault }; + const onValueChange = (value: boolean) => { + props?.onValueChange?.(value); + if (isIOS) { + AccessibilityInfo.announceForAccessibility(I18n.t(value ? 'Enabled' : 'Disabled')); + } + }; + return ( - + ); }; diff --git a/app/containers/Touch.tsx b/app/containers/Touch.tsx index 7017ad340a5..cc76c7b2a7c 100644 --- a/app/containers/Touch.tsx +++ b/app/containers/Touch.tsx @@ -81,6 +81,7 @@ const Touch = React.forwardRef, ITouchProps> {...props}> item.value?.name || item.text?.text; const Item = ({ item, selected, onSelect }: IItem) => { const itemName = item.value?.name || item.text.text.toLowerCase(); const { colors } = useTheme(); + const iconName = selected ? 'checkbox-checked' : 'checkbox-unchecked'; + const iconColor = selected ? colors.badgeBackgroundLevel2 : colors.strokeMedium; + return ( - onSelect(item)}> + onSelect(item)}> {item.imageUrl ? : null} @@ -41,7 +51,7 @@ const Item = ({ item, selected, onSelect }: IItem) => { - {selected ? : null} + diff --git a/app/ee/omnichannel/containers/OmnichannelHeader/index.tsx b/app/ee/omnichannel/containers/OmnichannelHeader/index.tsx index c5bdb602d7e..1680db43703 100644 --- a/app/ee/omnichannel/containers/OmnichannelHeader/index.tsx +++ b/app/ee/omnichannel/containers/OmnichannelHeader/index.tsx @@ -71,7 +71,7 @@ const OmnichannelStatus = memo(() => { title='Omnichannel' color={colors.fontDefault} onPress={toggleLivechat} - additionalAcessibilityLabel={statusLivechat} + additionalAccessibilityLabel={statusLivechat} right={() => ( diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx index c201424d8b7..a314c801885 100644 --- a/app/stacks/InsideStack.tsx +++ b/app/stacks/InsideStack.tsx @@ -273,7 +273,7 @@ const NewMessageStackNavigator = () => { return ( - + {/* @ts-ignore */} diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx index 88512884d15..d4dd3ccc2fa 100644 --- a/app/stacks/MasterDetailStack/index.tsx +++ b/app/stacks/MasterDetailStack/index.tsx @@ -187,7 +187,6 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => { - {/* @ts-ignore */} diff --git a/app/stacks/MasterDetailStack/types.ts b/app/stacks/MasterDetailStack/types.ts index 602d7b5e3b6..70f5726e6de 100644 --- a/app/stacks/MasterDetailStack/types.ts +++ b/app/stacks/MasterDetailStack/types.ts @@ -83,11 +83,12 @@ export type ModalStackParamList = { showCloseModal?: boolean; }; SelectedUsersView: { - maxUsers: number; - showButton: boolean; - title: string; - buttonText: string; - nextAction: Function; + maxUsers?: number; + showButton?: boolean; + title?: string; + buttonText?: string; + showSkipText?: boolean; + nextAction?: Function; }; InviteUsersView: { rid: string; @@ -170,13 +171,6 @@ export type ModalStackParamList = { DisplayPrefsView: undefined; AdminPanelView: undefined; NewMessageView: undefined; - SelectedUsersViewCreateChannel: { - maxUsers: number; - showButton: boolean; - title: string; - buttonText: string; - nextAction: Function; - }; // TODO: Change CreateChannelView: { isTeam?: boolean; // TODO: To check teamId?: string; diff --git a/app/stacks/types.ts b/app/stacks/types.ts index bf7e6708617..c8afff63863 100644 --- a/app/stacks/types.ts +++ b/app/stacks/types.ts @@ -241,12 +241,13 @@ export type DrawerParamList = { export type NewMessageStackParamList = { NewMessageView: undefined; - SelectedUsersViewCreateChannel: { + SelectedUsersView: { maxUsers?: number; showButton?: boolean; title?: string; buttonText?: string; nextAction?: Function; + showSkipText?: boolean; }; // TODO: Change CreateChannelView?: { isTeam?: boolean; // TODO: To check diff --git a/app/views/AccessibilityAndAppearanceView/components/ListPicker.tsx b/app/views/AccessibilityAndAppearanceView/components/ListPicker.tsx index b14e8302461..c3c78054fb7 100644 --- a/app/views/AccessibilityAndAppearanceView/components/ListPicker.tsx +++ b/app/views/AccessibilityAndAppearanceView/components/ListPicker.tsx @@ -100,7 +100,7 @@ const ListPicker = ({ )} rightContainerStyle={styles.rightContainer} - additionalAcessibilityLabel={option?.label} + additionalAccessibilityLabel={option?.label} /> ); }; diff --git a/app/views/AccessibilityAndAppearanceView/index.tsx b/app/views/AccessibilityAndAppearanceView/index.tsx index da71ce1ba85..4706b0475ec 100644 --- a/app/views/AccessibilityAndAppearanceView/index.tsx +++ b/app/views/AccessibilityAndAppearanceView/index.tsx @@ -88,6 +88,7 @@ const AccessibilityAndAppearanceView = () => { title='Autoplay_gifs' right={renderAutoplayGifs} onPress={toggleAutoplayGifs} + accessibilityRole='switch' /> { title='Mentions_With_@_Symbol' right={renderMentionsWithAtSymbolSwitch} onPress={toggleMentionsWithAtSymbol} + accessibilityRole='switch' /> { title='Rooms_With_#_Symbol' right={renderRoomsWithHashTagSwitch} onPress={toggleRoomsWithHashTag} + accessibilityRole='switch' + /> + + + + + { + setAlertDisplayType(value); + }} + title={I18n.t('A11y_appearance_show_alerts_as')} + value={alertDisplayType || 'TOAST'} /> diff --git a/app/views/AddChannelTeamView.tsx b/app/views/AddChannelTeamView.tsx index d41d60dcef6..d721b1059bf 100644 --- a/app/views/AddChannelTeamView.tsx +++ b/app/views/AddChannelTeamView.tsx @@ -68,7 +68,7 @@ const AddChannelTeamView = () => { title='Create_New' onPress={() => isMasterDetail - ? navigation.navigate('SelectedUsersViewCreateChannel', { + ? navigation.navigate('SelectedUsersView', { nextAction: () => navigation.navigate('CreateChannelView', { teamId }) }) : navigation.navigate('SelectedUsersView', { diff --git a/app/views/AddExistingChannelView/index.tsx b/app/views/AddExistingChannelView/index.tsx index f16fb14105d..71c2fc68682 100644 --- a/app/views/AddExistingChannelView/index.tsx +++ b/app/views/AddExistingChannelView/index.tsx @@ -168,8 +168,8 @@ const AddExistingChannelView = () => { testID={`add-existing-channel-view-item-${item.name}`} left={() => } right={() => (isChecked(item.rid) ? : null)} - additionalAcessibilityLabel={isChecked(item.rid)} - additionalAcessibilityLabelCheck + additionalAccessibilityLabel={isChecked(item.rid)} + additionalAccessibilityLabelCheck /> ); }} diff --git a/app/views/AutoTranslateView/index.tsx b/app/views/AutoTranslateView/index.tsx index 6f89a6e19f4..06c6c76ee23 100644 --- a/app/views/AutoTranslateView/index.tsx +++ b/app/views/AutoTranslateView/index.tsx @@ -104,8 +104,8 @@ const AutoTranslateView = (): React.ReactElement => { ) : null } translateTitle={false} - additionalAcessibilityLabel={selectedLanguage === language} - additionalAcessibilityLabelCheck + additionalAccessibilityLabel={selectedLanguage === language} + additionalAccessibilityLabelCheck /> )); @@ -124,7 +124,7 @@ const AutoTranslateView = (): React.ReactElement => { right={() => ( )} - additionalAcessibilityLabel={enableAutoTranslate} + additionalAccessibilityLabel={enableAutoTranslate} /> diff --git a/app/views/CreateChannelView/index.tsx b/app/views/CreateChannelView/index.tsx index aca29b5a6cc..37b397088e6 100644 --- a/app/views/CreateChannelView/index.tsx +++ b/app/views/CreateChannelView/index.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useEffect, useLayoutEffect } from 'react'; import { shallowEqual, useDispatch } from 'react-redux'; -import { FlatList, ScrollView, StyleSheet, Text, View } from 'react-native'; +import { ScrollView, StyleSheet, View } from 'react-native'; import { type RouteProp, useNavigation, useRoute } from '@react-navigation/native'; import { type NativeStackNavigationProp } from '@react-navigation/native-stack'; import { useForm } from 'react-hook-form'; @@ -18,14 +18,13 @@ import I18n from '../../i18n'; import { useTheme } from '../../theme'; import { Review } from '../../lib/methods/helpers/review'; import SafeAreaView from '../../containers/SafeAreaView'; -import sharedStyles from '../Styles'; import { type ChatsStackParamList } from '../../stacks/types'; import Button from '../../containers/Button'; import { ControlledFormTextInput } from '../../containers/TextInput'; -import Chip from '../../containers/Chip'; import { RoomSettings } from './RoomSettings'; import { type ISelectedUser } from '../../reducers/selectedUsers'; import useA11yErrorAnnouncement from '../../lib/hooks/useA11yErrorAnnouncement'; +import SelectedUsers from '../../containers/SelectedUsers'; const styles = StyleSheet.create({ containerTextInput: { @@ -35,23 +34,6 @@ const styles = StyleSheet.create({ containerStyle: { marginBottom: 16 }, - list: { - width: '100%' - }, - invitedHeader: { - marginVertical: 12, - marginHorizontal: 16, - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center' - }, - invitedCount: { - fontSize: 12, - ...sharedStyles.textRegular - }, - invitedList: { - paddingHorizontal: 16 - }, buttonCreate: { marginTop: 32, marginHorizontal: 16 @@ -172,43 +154,7 @@ const CreateChannelView = () => { e2eEnabledDefaultPrivateRooms={e2eEnabledDefaultPrivateRooms} /> - {users.length > 0 ? ( - <> - - - {I18n.t('N_Selected_members', { n: users.length })} - - - item._id} - style={[ - styles.list, - { - backgroundColor: colors.surfaceTint, - borderColor: colors.strokeLight - } - ]} - contentContainerStyle={styles.invitedList} - renderItem={({ item }) => { - const name = useRealName && item.fname ? item.fname : item.name; - const username = item.name; - - return ( - removeUser(item)} - testID={`create-channel-view-item-${item.name}`} - /> - ); - }} - keyboardShouldPersistTaps='always' - horizontal - /> - - ) : null} + {users.length > 0 ? : null}