Merge pull request #20250 from Skalakid/17049-migrate-RadioButton

17049 - migrate RadioButton to PressableWithFeedback
Expensify · Jun 12, 2023 · 28ad1da · 28ad1da
2 parents d626075 + d8bce4d
commit 28ad1da
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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={() => {