From 826690f5b92e3f9083e22d199542ca158800072f Mon Sep 17 00:00:00 2001
From: Tim R <timothy.roettger@adhocteam.us>
Date: Mon, 6 Nov 2023 13:02:17 -0600
Subject: [PATCH] Ready for PR

---
 .../SegmentedControl/SegmentedControl.tsx           | 13 +++++++------
 packages/components/src/utils/index.tsx             | 12 ++++++++++++
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
index dc751a48..409157ea 100644
--- a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
+++ b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
@@ -1,8 +1,8 @@
 import * as DesignTokens from '@department-of-veterans-affairs/mobile-tokens'
 import {
+  Pressable,
   Text,
   TextStyle,
-  TouchableOpacity,
   View,
   ViewStyle,
   useColorScheme,
@@ -12,7 +12,7 @@ import React, { FC, useEffect } from 'react'
 import styled from 'styled-components/native'
 
 import { ComponentWrapper } from '../../wrapper'
-import { webStorybookColorScheme } from '../../utils'
+import { PressableOpacityStyle, webStorybookColorScheme } from '../../utils'
 
 /**
  * Props for {@link SegmentedControl}
@@ -41,7 +41,7 @@ type SegmentProps = {
   widthPct: string
 }
 
-const Segment = styled(TouchableOpacity)<SegmentProps>`
+const Segment = styled(Pressable)<SegmentProps>`
   border-radius: 8px;
   padding-vertical: 7px;
   width: ${(props) => props.widthPct};
@@ -124,11 +124,12 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
         isSelected={isSelected}
         key={index}
         widthPct={`${100 / labels.length}%`}
-        accessibilityLabel={accessibilityLabel}
+        aria-label={accessibilityLabel}
         accessibilityHint={a11yHints ? a11yHints[index] : ''}
         accessibilityValue={accessibilityValue}
-        accessibilityRole={'tab'}
+        role={'tab'}
         accessibilityState={{ selected: isSelected }}
+        style={PressableOpacityStyle()}
         testID={testIDs?.[index]}>
         <Text allowFontScaling={false} style={textStyle}>
           {label}
@@ -139,7 +140,7 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
 
   return (
     <ComponentWrapper>
-      <View style={viewStyle} accessibilityRole="tablist">
+      <View style={viewStyle} role="tablist">
         {labels.map((label, index) => buildSegment(label, index))}
       </View>
     </ComponentWrapper>
diff --git a/packages/components/src/utils/index.tsx b/packages/components/src/utils/index.tsx
index e99dcd7b..9c683367 100644
--- a/packages/components/src/utils/index.tsx
+++ b/packages/components/src/utils/index.tsx
@@ -63,3 +63,15 @@ export function webStorybookColorScheme(): ColorSchemeName {
   const storybookDarkMode = require('storybook-dark-mode')
   return storybookDarkMode.useDarkMode() ? 'dark' : 'light'
 }
+
+/**
+ * Convenience function for handling TouchableOpacity styling on Pressable component
+ * @param styles - RN styling to apply to Pressable component besides on press opacity
+ */
+export function PressableOpacityStyle(styles?: ViewStyle) {
+  if (styles) {
+    return ({pressed}) => [{opacity: pressed ? 0.2 : 1, ...styles}]
+  }
+
+  return ({pressed}) => [{opacity: pressed ? 0.2 : 1}]
+}
\ No newline at end of file