@momo-kits/tab-view 0.112.1-beta.5 → 0.112.1-beta.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/index.tsx +7 -1
  2. package/package.json +1 -1
  3. package/tabBar/CardTabBar.tsx +5 -1
  4. package/tabItem/CardTabItem.tsx +11 -3
  5. package/tabItem/TabItem.tsx +20 -4
  6. package/types.ts +16 -0
package/index.tsx CHANGED
@@ -31,6 +31,8 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
31
31
  selectedColor,
32
32
  unselectedColor,
33
33
  style,
34
+ accessibilityLabel,
35
+ accessibilityLabelForSelectedCard,
34
36
  },
35
37
  ref
36
38
  ) => {
@@ -93,7 +95,10 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
93
95
  }));
94
96
 
95
97
  return (
96
- <View onLayout={onLayout} style={[styles.tabView, {flex: 1}]}>
98
+ <View
99
+ onLayout={onLayout}
100
+ style={[styles.tabView, {flex: 1}]}
101
+ accessibilityLabel={accessibilityLabel}>
97
102
  <Animated.View style={style}>
98
103
  <TabBarComponent
99
104
  onPressTabItem={_onPressTabItem}
@@ -104,6 +109,7 @@ const TabComponent: ForwardRefRenderFunction<TabViewRef, TabViewProps> = (
104
109
  direction={direction}
105
110
  selectedColor={selectedColor ?? theme.colors.primary}
106
111
  unselectedColor={unselectedColor ?? theme.colors.text.default}
112
+ accessibilityLabelForSelectedCard={accessibilityLabelForSelectedCard}
107
113
  />
108
114
  </Animated.View>
109
115
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@momo-kits/tab-view",
3
- "version": "0.112.1-beta.5",
3
+ "version": "0.112.1-beta.7",
4
4
  "private": false,
5
5
  "main": "index.tsx",
6
6
  "dependencies": {},
package/tabBar/CardTabBar.tsx CHANGED
@@ -22,6 +22,7 @@ const CardTabBar: FC<TabBarProps> = ({
22
22
  selectedIndex,
23
23
  selectedColor,
24
24
  unselectedColor,
25
+ accessibilityLabelForSelectedCard,
25
26
  }) => {
26
27
  const {theme} = useContext(ApplicationContext);
27
28
  const itemWidth = containerWidth / tabs.length;
@@ -58,7 +59,10 @@ const CardTabBar: FC<TabBarProps> = ({
58
59
  <PathSvg style={{transform: [{rotateY: '180deg'}], left: 8}} />
59
60
  )}
60
61
  <View
61
- accessibilityLabel={tabs[selectedIndex]?.accessibilityLabel}
62
+ accessibilityLabel={
63
+ accessibilityLabelForSelectedCard ??
64
+ tabs[selectedIndex]?.accessibilityLabel
65
+ }
62
66
  style={[
63
67
  styles.overlayTextWrapper,
64
68
  {
package/tabItem/CardTabItem.tsx CHANGED
@@ -20,6 +20,8 @@ const CardTabItem: FC<TabItemProps> = ({
20
20
  dotSize = 'small',
21
21
  badgeValue,
22
22
  accessibilityLabel,
23
+ accessibilityLabelBadge,
24
+ accessibilityLabelText,
23
25
  } = tab;
24
26
  const color = active ? selectedColor : unselectedColor;
25
27
 
@@ -27,7 +29,8 @@ const CardTabItem: FC<TabItemProps> = ({
27
29
  <TouchableOpacity
28
30
  onPress={onPressTabItem}
29
31
  style={[styles.cardTabItem, {width}]}
30
- accessibilityLabel={accessibilityLabel}>
32
+ accessibilityLabel={accessibilityLabel}
33
+ accessibilityState={{checked: active}}>
31
34
  {renderIcon &&
32
35
  !['string', 'boolean', 'number'].includes(typeof renderIcon) && (
33
36
  <View
@@ -45,7 +48,8 @@ const CardTabItem: FC<TabItemProps> = ({
45
48
  <Text
46
49
  numberOfLines={1}
47
50
  style={[styles.textCenter, {flexShrink: 1}]}
48
- typography={'body_default_regular'}>
51
+ typography={'body_default_regular'}
52
+ accessibilityLabel={accessibilityLabelText}>
49
53
  {title}
50
54
  </Text>
51
55
  {showDot && (
@@ -58,7 +62,11 @@ const CardTabItem: FC<TabItemProps> = ({
58
62
  )}
59
63
  {!showDot && badgeValue && (
60
64
  <View>
61
- <Badge label={badgeValue} style={{marginLeft: Spacing.XS}} />
65
+ <Badge
66
+ label={badgeValue}
67
+ style={{marginLeft: Spacing.XS}}
68
+ accessibilityLabel={accessibilityLabelBadge}
69
+ />
62
70
  </View>
63
71
  )}
64
72
  </TouchableOpacity>
package/tabItem/TabItem.tsx CHANGED
@@ -29,6 +29,8 @@ const TabItem: FC<TabItemProps> = ({
29
29
  badgeValue,
30
30
  renderIcon,
31
31
  accessibilityLabel,
32
+ accessibilityLabelText,
33
+ accessibilityLabelBadge,
32
34
  } = tab;
33
35
  const typography: Typography = active
34
36
  ? 'header_s_semibold'
@@ -40,6 +42,7 @@ const TabItem: FC<TabItemProps> = ({
40
42
  return (
41
43
  <TouchableOpacity
42
44
  accessibilityLabel={accessibilityLabel}
45
+ accessibilityState={{checked: active}}
43
46
  style={[
44
47
  styles.tabItem,
45
48
  {
@@ -69,7 +72,8 @@ const TabItem: FC<TabItemProps> = ({
69
72
  numberOfLines={1}
70
73
  typography={typography}
71
74
  color={color}
72
- style={{flexShrink: 1}}>
75
+ style={{flexShrink: 1}}
76
+ accessibilityLabel={accessibilityLabelText}>
73
77
  {title}
74
78
  </Text>
75
79
  {showDot && (
@@ -77,7 +81,11 @@ const TabItem: FC<TabItemProps> = ({
77
81
  )}
78
82
  {!showDot && badgeValue && (
79
83
  <View>
80
- <Badge label={badgeValue} style={{marginLeft: Spacing.XS}} />
84
+ <Badge
85
+ label={badgeValue}
86
+ style={{marginLeft: Spacing.XS}}
87
+ accessibilityLabel={accessibilityLabelBadge}
88
+ />
81
89
  </View>
82
90
  )}
83
91
  </TouchableOpacity>
@@ -128,10 +136,18 @@ const TabItem: FC<TabItemProps> = ({
128
136
  <BadgeDot style={dotStyle} size={dotSize} />
129
137
  )}
130
138
  {(renderIcon || !!icon) && !showDot && badgeValue && (
131
- <Badge label={badgeValue} style={styles.badge} />
139
+ <Badge
140
+ label={badgeValue}
141
+ style={styles.badge}
142
+ accessibilityLabel={accessibilityLabelBadge}
143
+ />
132
144
  )}
133
145
  </View>
134
- <Text numberOfLines={1} typography={typography} color={color}>
146
+ <Text
147
+ numberOfLines={1}
148
+ typography={typography}
149
+ color={color}
150
+ accessibilityLabel={accessibilityLabelText}>
135
151
  {title}
136
152
  </Text>
137
153
  </TouchableOpacity>
package/types.ts CHANGED
@@ -33,6 +33,10 @@ export type Tab = {
33
33
  badgeValue?: string | number;
34
34
 
35
35
  accessibilityLabel?: string;
36
+
37
+ accessibilityLabelText?: string;
38
+
39
+ accessibilityLabelBadge?: string;
36
40
  };
37
41
 
38
42
  export type TabItemProps = {
@@ -107,6 +111,16 @@ export type TabViewProps = {
107
111
  unselectedColor?: string;
108
112
 
109
113
  style?: ViewStyle;
114
+
115
+ /**
116
+ * Optional. Assigns an accessibility label to the tab view for automated testing.
117
+ */
118
+ accessibilityLabel?: string;
119
+
120
+ /**
121
+ * Optional. Assigns an accessibility label to the tab view for automated testing.
122
+ */
123
+ accessibilityLabelForSelectedCard?: string;
110
124
  };
111
125
 
112
126
  /**
@@ -146,6 +160,8 @@ export type TabBarProps = {
146
160
  selectedColor?: string;
147
161
 
148
162
  unselectedColor?: string;
163
+
164
+ accessibilityLabelForSelectedCard?: string;
149
165
  };
150
166
 
151
167
  export type TabViewRef = {