feat(a11y): adjust the name and role of the multi-select

.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}

.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:

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;
 };
 

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,
           ]

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

app/containers/List/List.stories.tsx

@@ -69,6 +69,49 @@ export const Separator = () => (
 	</List.Container>
 );
 
+export const Radio = () => (
+	<List.Container>
+		<List.Separator />
+		<List.Radio
+			translateTitle={false}
+			translateSubtitle={false}
+			title='Option 1'
+			value='option1'
+			isSelected={true}
+			onPress={() => alert('Option 1 selected')}
+		/>
+		<List.Separator />
+		<List.Radio
+			translateTitle={false}
+			translateSubtitle={false}
+			title='Option 2'
+			value='option2'
+			isSelected={false}
+			onPress={() => alert('Option 2 selected')}
+		/>
+		<List.Separator />
+		<List.Radio
+			translateTitle={false}
+			translateSubtitle={false}
+			title='Option 3'
+			value='option3'
+			isSelected={false}
+			onPress={() => alert('Option 3 selected')}
+		/>
+		<List.Separator />
+		<List.Radio
+			title={longText}
+			subtitle={longText}
+			value='option4'
+			isSelected={true}
+			translateTitle={false}
+			translateSubtitle={false}
+			onPress={() => alert('Option 4 selected')}
+		/>
+		<List.Separator />
+	</List.Container>
+);
+
 export const SectionAndInfo = () => (
 	<SafeAreaView>
 		<List.Container>