Merge branch 'master' of ssh://github.com/react-native-segmented-control/segmented-control

Author: Naturalclar

README.md

@@ -6,8 +6,6 @@ React Native SegmentedControl library. Use SegmentedControl to render a UISegmen
 
 For Android and Web, it has a js implementation that mocks iOS 13 style of UISegmentedControl.
 
-**For Expo Users:** Expo SDK 38 or later is required for this package.
-
 | iOS                                                                                                                           | Android                                                                                                                       | Web                                                                                                                          |
 | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
 | <img src="https://user-images.githubusercontent.com/6936373/71608757-dc6ef680-2bc6-11ea-85be-aa31f25ecf36.png" width="320" /> | <img src="https://user-images.githubusercontent.com/6936373/79550655-9edd9d00-80d3-11ea-98bf-8b7c0b0798d3.png" width="320" /> | <img src="https://user-images.githubusercontent.com/6936373/79590620-3f52b200-8112-11ea-863b-236c4465fba6.png" width="640"/> |

js/SegmentedControl.js

@@ -36,6 +36,7 @@ const SegmentedControl = ({
   fontStyle,
   activeFontStyle,
   appearance,
+  accessibilityHintSeperator = 'out of',
 }: SegmentedControlProps): React.Node => {
   const colorSchemeHook = useColorScheme();
   const colorScheme = appearance || colorSchemeHook;
@@ -99,6 +100,7 @@ const SegmentedControl = ({
               <SegmentedControlTab
                 enabled={enabled}
                 selected={selectedIndex === index}
+                accessibilityHint={`${index + 1} ${accessibilityHintSeperator} ${values.length}`}
                 key={index}
                 value={value}
                 tintColor={tintColor}
@@ -120,6 +122,7 @@ const SegmentedControl = ({
             {
               transform: [{translateX: animation}],
               width: segmentWidth - 4,
+              zIndex: -1,
               backgroundColor:
                 tintColor || (colorScheme === 'dark' ? '#636366' : 'white'),
             },

js/SegmentedControlTab.js

@@ -27,6 +27,7 @@ type Props = $ReadOnly<{|
   activeFontStyle?: FontStyle,
   tabStyle?: ViewStyle,
   appearance?: 'dark' | 'light' | null,
+  accessibilityHint?: string,
 |}>;
 
 function isBase64(str) {
@@ -45,6 +46,7 @@ export const SegmentedControlTab = ({
   activeFontStyle = {},
   appearance,
   tabStyle,
+  accessibilityHint,
 }: Props): React.Node => {
   const colorSchemeHook = useColorScheme();
   const colorScheme = appearance || colorSchemeHook;
@@ -88,6 +90,8 @@ export const SegmentedControlTab = ({
       style={[styles.container, tabStyle]}
       disabled={!enabled}
       onPress={onSelect}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole="button"
       accessibilityState={{selected: selected, disabled: !enabled}}>
       <View style={styles.default}>
         {typeof value === 'number' || typeof value === 'object' ? (

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-segmented-control/segmented-control",
-  "version": "2.4.3",
+  "version": "2.5.0",
   "description": "React Native SegmentedControlIOS library",
   "main": "js/index.js",
   "types": "index.d.ts",
@@ -51,7 +51,7 @@
     "react-native-web": "^0.14.10",
     "react-test-renderer": "17.0.2",
     "rimraf": "^3.0.2",
-    "semantic-release": "^19.0.5",
+    "semantic-release": "^23.0.6",
     "typescript": "^4"
   },
   "resolutions": {