From 2ea6b1e31954ad806038205b3ff110373c31de63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= <michal.skalka@swmansion.com>
Date: Tue, 6 Jun 2023 12:32:08 +0200
Subject: [PATCH] migrated RadioButton to PressableWithFeedback

---
 src/components/RadioButton.js          | 14 +++++++++++---
 src/components/RadioButtonWithLabel.js |  2 +-
 src/components/RadioButtons.js         |  3 ++-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/RadioButton.js b/src/components/RadioButton.js
index 01d12138d998..1111acc591be 100644
--- a/src/components/RadioButton.js
+++ b/src/components/RadioButton.js
@@ -1,9 +1,10 @@
 import React from 'react';
-import {View, Pressable} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
+import PressableWithFeedback from './Pressable/PressableWithFeedback';
 
 const propTypes = {
     /** Whether radioButton is checked */
@@ -12,6 +13,9 @@ const propTypes = {
     /** A function that is called when the box/label is pressed */
     onPress: PropTypes.func.isRequired,
 
+    /** Specifies the accessibility label for the radio button */
+    accessibilityLabel: PropTypes.string.isRequired,
+
     /** Should the input be styled for errors  */
     hasError: PropTypes.bool,
 
@@ -25,9 +29,13 @@ const defaultProps = {
 };
 
 const RadioButton = (props) => (
-    <Pressable
+    <PressableWithFeedback
         disabled={props.disabled}
         onPress={props.onPress}
+        hoverDimmingValue={1}
+        pressDimmingValue={1}
+        accessibilityLabel={props.accessibilityLabel}
+        accessibilityRole="radio"
     >
         <View style={[styles.radioButtonContainer, props.isChecked && styles.checkedContainer, props.hasError && styles.borderColorDanger, props.disabled && styles.cursorDisabled]}>
             <Icon
@@ -37,7 +45,7 @@ const RadioButton = (props) => (
                 width={14}
             />
         </View>
-    </Pressable>
+    </PressableWithFeedback>
 );
 
 RadioButton.propTypes = propTypes;
diff --git a/src/components/RadioButtonWithLabel.js b/src/components/RadioButtonWithLabel.js
index 776235f90cfe..7dbcb5676ce9 100644
--- a/src/components/RadioButtonWithLabel.js
+++ b/src/components/RadioButtonWithLabel.js
@@ -55,7 +55,7 @@ const RadioButtonWithLabel = (props) => {
                 <RadioButton
                     isChecked={props.isChecked}
                     onPress={props.onPress}
-                    label={props.label}
+                    accessibilityLabel={props.label}
                     hasError={props.hasError}
                 />
                 <PressableWithFeedback
diff --git a/src/components/RadioButtons.js b/src/components/RadioButtons.js
index e24815fe5ab1..65ca22054672 100644
--- a/src/components/RadioButtons.js
+++ b/src/components/RadioButtons.js
@@ -30,8 +30,9 @@ class RadioButtons extends React.Component {
     render() {
         return (
             <View>
-                {_.map(this.props.items, (item) => (
+                {_.map(this.props.items, (item, index) => (
                     <RadioButtonWithLabel
+                        key={`${item.label}-${index}`}
                         isChecked={item.value === this.state.checkedValue}
                         style={[styles.mt4]}
                         onPress={() => {