feat: better accessibility hinting (#817)

Author: boazpoolman

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}

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' ? (