From afdd739c36a4444fb27c53b9d48ab2716f11dd29 Mon Sep 17 00:00:00 2001
From: Boaz Poolman <boaz_skater@hotmail.com>
Date: Fri, 24 Nov 2023 15:16:19 +0100
Subject: [PATCH] feat: better accessibility hinting

---
 js/SegmentedControl.js    | 2 ++
 js/SegmentedControlTab.js | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/js/SegmentedControl.js b/js/SegmentedControl.js
index d82ecb5f..9daf823c 100644
--- a/js/SegmentedControl.js
+++ b/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}
diff --git a/js/SegmentedControlTab.js b/js/SegmentedControlTab.js
index fbe45c31..7a29d1cf 100644
--- a/js/SegmentedControlTab.js
+++ b/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' ? (