Skip to content

Commit 6db5ffb

Browse files
OtavioStasiakOtavioStasiak
authored
feat(a11y): adjust the name and role of the multi-select (RocketChat#6499)
1 parent 0d13c14 commit 6db5ffb

File tree

53 files changed

+1556
-626
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1556
-626
lines changed

‎.maestro/tests/assorted/join-from-directory.yaml‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ tags:
2626
visible:
2727
id: 'rooms-list-view-directory'
2828
timeout: 60000
29+
- waitForAnimationToEnd:
30+
timeout: 10000
2931
- tapOn:
3032
id: 'rooms-list-view-directory'
3133
- extendedWaitUntil:
@@ -95,10 +97,10 @@ tags:
9597
id: 'directory-view-filter'
9698
- extendedWaitUntil:
9799
visible:
98-
text: 'Users'
100+
text: 'Users unselected'
99101
timeout: 60000
100102
- tapOn:
101-
text: 'Users'
103+
text: 'Users unselected'
102104
- tapOn:
103105
id: 'directory-view-search'
104106
- inputText: ${output.otherUser.username}
@@ -143,10 +145,10 @@ tags:
143145
id: 'directory-view-filter'
144146
- extendedWaitUntil:
145147
visible:
146-
text: 'Teams'
148+
text: 'Teams unselected'
147149
timeout: 60000
148150
- tapOn:
149-
text: 'Teams'
151+
text: 'Teams unselected'
150152
- tapOn:
151153
id: 'directory-view-search'
152154
- inputText: ${output.team}

‎.maestro/tests/room/discussion.yaml‎

Lines changed: 17 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -41,66 +41,48 @@ tags:
4141
id: 'new-message-view-create-discussion'
4242
- extendedWaitUntil:
4343
visible:
44-
id: 'create-discussion-view'
45-
timeout: 60000
46-
- tapOn:
47-
id: 'create-discussion-select-channel'
48-
- extendedWaitUntil:
49-
visible:
50-
id: 'action-sheet'
44+
id: 'select-users-view'
5145
timeout: 60000
46+
# Select users in SelectedUsersView
5247
- extendedWaitUntil:
5348
visible:
54-
id: 'multi-select-item-${output.room.name}'
49+
id: 'select-users-view-search'
5550
timeout: 60000
5651
- tapOn:
57-
id: 'multi-select-item-${output.room.name}'
58-
- tapOn:
59-
id: 'multi-select-discussion-name'
60-
- inputText: ${output.discussionFromNewMessage}
61-
- tapOn:
62-
id: 'create-discussion-select-users'
52+
id: 'select-users-view-search'
53+
- inputText: ${output.selectUser}
6354
- extendedWaitUntil:
6455
visible:
65-
id: 'action-sheet'
56+
id: 'select-users-view-item-${output.selectUser}'
6657
timeout: 60000
6758
- tapOn:
68-
id: 'multi-select-search'
69-
- inputText: ${output.selectUser}
59+
id: 'select-users-view-item-${output.selectUser}'
7060
- extendedWaitUntil:
7161
visible:
72-
id: 'multi-select-item-${output.selectUser}'
62+
id: 'selected-user-${output.selectUser}'
7363
timeout: 60000
7464
- tapOn:
75-
id: 'multi-select-item-${output.selectUser}'
76-
- pressKey: Enter
65+
id: 'selected-users-view-submit'
7766
- extendedWaitUntil:
7867
visible:
79-
id: 'multi-select-chip-${output.selectUser}'
68+
id: 'create-discussion-view'
8069
timeout: 60000
81-
70+
# Select channel and enter discussion name
8271
- tapOn:
83-
id: 'create-discussion-select-users'
72+
id: 'create-discussion-select-channel'
8473
- extendedWaitUntil:
8574
visible:
8675
id: 'action-sheet'
8776
timeout: 60000
88-
- tapOn:
89-
id: 'multi-select-search'
90-
- eraseText
91-
- inputText: 'user'
92-
- pressKey: Enter
93-
9477
- extendedWaitUntil:
9578
visible:
96-
id: 'multi-select-chip-${output.selectUser}'
79+
id: 'multi-select-item-${output.room.name}'
9780
timeout: 60000
9881
- tapOn:
99-
id: 'multi-select-chip-${output.selectUser}'
100-
- extendedWaitUntil:
101-
notVisible:
102-
id: 'multi-select-chip-${output.selectUser}'
103-
timeout: 60000
82+
id: 'multi-select-item-${output.room.name}'
83+
- tapOn:
84+
id: 'multi-select-discussion-name'
85+
- inputText: ${output.discussionFromNewMessage}
10486
- tapOn:
10587
id: 'create-discussion-submit'
10688
- extendedWaitUntil:

‎app/containers/ActionSheet/Provider.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import hoistNonReactStatics from 'hoist-non-react-statics';
22
import React, { createRef, type ForwardedRef, forwardRef, useContext } from 'react';
3+
import { type AccessibilityRole } from 'react-native';
34

45
import { type TIconsName } from '../CustomIcon';
56
import ActionSheet from './ActionSheet';
@@ -14,6 +15,7 @@ export type TActionSheetOptionsItem = {
1415
onPress: () => void;
1516
right?: () => React.ReactElement;
1617
enabled?: boolean;
18+
accessibilityRole?: AccessibilityRole;
1719
disabledReason?: string;
1820
};
1921

‎app/containers/Chip/__snapshots__/Chip.test.tsx.snap‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,12 @@ exports[`Story Snapshots: ChipFullWidth should match snapshot 1`] = `
4545
{
4646
"borderRadius": 4,
4747
"justifyContent": "center",
48-
"marginRight": 8,
48+
"marginHorizontal": 4,
4949
"maxWidth": 192,
50-
"paddingHorizontal": 8,
50+
"paddingHorizontal": 4,
5151
},
5252
{
53-
"backgroundColor": "#F2F3F5",
53+
"backgroundColor": "#E4E7EA",
5454
"maxWidth": undefined,
5555
},
5656
undefined,
@@ -70,7 +70,7 @@ exports[`Story Snapshots: ChipFullWidth should match snapshot 1`] = `
7070
[
7171
{
7272
"marginRight": 8,
73-
"maxWidth": 120,
73+
"maxWidth": 110,
7474
},
7575
{
7676
"maxWidth": undefined,
@@ -148,12 +148,12 @@ exports[`Story Snapshots: ChipText should match snapshot 1`] = `
148148
{
149149
"borderRadius": 4,
150150
"justifyContent": "center",
151-
"marginRight": 8,
151+
"marginHorizontal": 4,
152152
"maxWidth": 192,
153-
"paddingHorizontal": 8,
153+
"paddingHorizontal": 4,
154154
},
155155
{
156-
"backgroundColor": "#F2F3F5",
156+
"backgroundColor": "#E4E7EA",
157157
"maxWidth": 192,
158158
},
159159
undefined,
@@ -228,7 +228,7 @@ exports[`Story Snapshots: ChipText should match snapshot 1`] = `
228228
[
229229
{
230230
"marginRight": 8,
231-
"maxWidth": 120,
231+
"maxWidth": 110,
232232
},
233233
undefined,
234234
]
@@ -330,12 +330,12 @@ exports[`Story Snapshots: ChipWithShortText should match snapshot 1`] = `
330330
{
331331
"borderRadius": 4,
332332
"justifyContent": "center",
333-
"marginRight": 8,
333+
"marginHorizontal": 4,
334334
"maxWidth": 192,
335-
"paddingHorizontal": 8,
335+
"paddingHorizontal": 4,
336336
},
337337
{
338-
"backgroundColor": "#F2F3F5",
338+
"backgroundColor": "#E4E7EA",
339339
"maxWidth": 192,
340340
},
341341
undefined,
@@ -410,7 +410,7 @@ exports[`Story Snapshots: ChipWithShortText should match snapshot 1`] = `
410410
[
411411
{
412412
"marginRight": 8,
413-
"maxWidth": 120,
413+
"maxWidth": 110,
414414
},
415415
undefined,
416416
]
@@ -512,12 +512,12 @@ exports[`Story Snapshots: ChipWithoutAvatar should match snapshot 1`] = `
512512
{
513513
"borderRadius": 4,
514514
"justifyContent": "center",
515-
"marginRight": 8,
515+
"marginHorizontal": 4,
516516
"maxWidth": 192,
517-
"paddingHorizontal": 8,
517+
"paddingHorizontal": 4,
518518
},
519519
{
520-
"backgroundColor": "#F2F3F5",
520+
"backgroundColor": "#E4E7EA",
521521
"maxWidth": 192,
522522
},
523523
undefined,
@@ -537,7 +537,7 @@ exports[`Story Snapshots: ChipWithoutAvatar should match snapshot 1`] = `
537537
[
538538
{
539539
"marginRight": 8,
540-
"maxWidth": 120,
540+
"maxWidth": 110,
541541
},
542542
undefined,
543543
]
@@ -639,12 +639,12 @@ exports[`Story Snapshots: ChipWithoutAvatarAndIcon should match snapshot 1`] = `
639639
{
640640
"borderRadius": 4,
641641
"justifyContent": "center",
642-
"marginRight": 8,
642+
"marginHorizontal": 4,
643643
"maxWidth": 192,
644-
"paddingHorizontal": 8,
644+
"paddingHorizontal": 4,
645645
},
646646
{
647-
"backgroundColor": "#F2F3F5",
647+
"backgroundColor": "#E4E7EA",
648648
"maxWidth": 192,
649649
},
650650
undefined,
@@ -664,7 +664,7 @@ exports[`Story Snapshots: ChipWithoutAvatarAndIcon should match snapshot 1`] = `
664664
[
665665
{
666666
"marginRight": 8,
667-
"maxWidth": 120,
667+
"maxWidth": 110,
668668
},
669669
undefined,
670670
]
@@ -740,12 +740,12 @@ exports[`Story Snapshots: ChipWithoutIcon should match snapshot 1`] = `
740740
{
741741
"borderRadius": 4,
742742
"justifyContent": "center",
743-
"marginRight": 8,
743+
"marginHorizontal": 4,
744744
"maxWidth": 192,
745-
"paddingHorizontal": 8,
745+
"paddingHorizontal": 4,
746746
},
747747
{
748-
"backgroundColor": "#F2F3F5",
748+
"backgroundColor": "#E4E7EA",
749749
"maxWidth": 192,
750750
},
751751
undefined,
@@ -820,7 +820,7 @@ exports[`Story Snapshots: ChipWithoutIcon should match snapshot 1`] = `
820820
[
821821
{
822822
"marginRight": 8,
823-
"maxWidth": 120,
823+
"maxWidth": 110,
824824
},
825825
undefined,
826826
]

‎app/containers/Chip/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import Avatar from '../Avatar';
88

99
const styles = StyleSheet.create({
1010
pressable: {
11-
paddingHorizontal: 8,
12-
marginRight: 8,
11+
paddingHorizontal: 4,
12+
marginHorizontal: 4,
1313
borderRadius: 4,
1414
justifyContent: 'center',
1515
maxWidth: 192
@@ -24,7 +24,7 @@ const styles = StyleSheet.create({
2424
},
2525
textContainer: {
2626
marginRight: 8,
27-
maxWidth: 120
27+
maxWidth: 110
2828
},
2929
name: {
3030
fontSize: 16,
@@ -50,7 +50,7 @@ const Chip = ({ avatar, text, onPress, testID, style, fullWidth }: IChip) => {
5050
style={({ pressed }) => [
5151
styles.pressable,
5252
{
53-
backgroundColor: pressed ? colors.surfaceNeutral : colors.surfaceHover,
53+
backgroundColor: pressed ? colors.surfaceNeutral : colors.buttonBackgroundSecondaryDefault,
5454
maxWidth: fullWidth ? undefined : styles.pressable.maxWidth
5555
},
5656
style

‎app/containers/List/List.stories.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,49 @@ export const Separator = () => (
6969
</List.Container>
7070
);
7171

72+
export const Radio = () => (
73+
<List.Container>
74+
<List.Separator />
75+
<List.Radio
76+
translateTitle={false}
77+
translateSubtitle={false}
78+
title='Option 1'
79+
value='option1'
80+
isSelected={true}
81+
onPress={() => alert('Option 1 selected')}
82+
/>
83+
<List.Separator />
84+
<List.Radio
85+
translateTitle={false}
86+
translateSubtitle={false}
87+
title='Option 2'
88+
value='option2'
89+
isSelected={false}
90+
onPress={() => alert('Option 2 selected')}
91+
/>
92+
<List.Separator />
93+
<List.Radio
94+
translateTitle={false}
95+
translateSubtitle={false}
96+
title='Option 3'
97+
value='option3'
98+
isSelected={false}
99+
onPress={() => alert('Option 3 selected')}
100+
/>
101+
<List.Separator />
102+
<List.Radio
103+
title={longText}
104+
subtitle={longText}
105+
value='option4'
106+
isSelected={true}
107+
translateTitle={false}
108+
translateSubtitle={false}
109+
onPress={() => alert('Option 4 selected')}
110+
/>
111+
<List.Separator />
112+
</List.Container>
113+
);
114+
72115
export const SectionAndInfo = () => (
73116
<SafeAreaView>
74117
<List.Container>

0 commit comments

Comments
 (0)