Merge pull request Expensify#19664 from Skalakid/17024-migrate-Worksp…

…aceMembersPage 17024 - migrate WorkspaceMembersPage to PressableWithFeedback
ojasjadhav2 · Jun 8, 2023 · 37141ca · 37141ca
2 parents fda04d5 + 68d6037
commit 37141ca
Showing 1 changed file with 15 additions and 7 deletions.
diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js
@@ -1,8 +1,7 @@
 import React from 'react';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-// eslint-disable-next-line no-restricted-imports
-import {View, TouchableOpacity} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import styles from '../../styles/styles';
@@ -35,6 +34,7 @@ import TextInput from '../../components/TextInput';
 import KeyboardDismissingFlatList from '../../components/KeyboardDismissingFlatList';
 import withCurrentUserPersonalDetails from '../../components/withCurrentUserPersonalDetails';
 import * as PolicyUtils from '../../libs/PolicyUtils';
+import PressableWithFeedback from '../../components/Pressable/PressableWithFeedback';
 
 const propTypes = {
     /** The personal details of the person who is logged in */
@@ -319,25 +319,33 @@ class WorkspaceMembersPage extends React.Component {
      * @returns {React.Component}
      */
     renderItem({item}) {
+        const isChecked = _.contains(this.state.selectedEmployees, item.login);
         return (
             <OfflineWithFeedback
                 errorRowStyles={[styles.peopleRowBorderBottom]}
                 onClose={() => this.dismissError(item)}
                 pendingAction={item.pendingAction}
                 errors={item.errors}
             >
-                <TouchableOpacity
+                <PressableWithFeedback
                     style={[styles.peopleRow, (_.isEmpty(item.errors) || this.state.errors[item.login]) && styles.peopleRowBorderBottom]}
                     onPress={() => this.toggleUser(item.login, item.pendingAction)}
-                    activeOpacity={0.7}
+                    accessibilityRole="checkbox"
+                    accessibilityState={{
+                        checked: isChecked,
+                    }}
+                    accessibilityLabel={this.props.formatPhoneNumber(item.displayName)}
+                    // disable hover dimming
+                    hoverDimmingValue={1}
+                    pressDimmingValue={0.7}
                 >
                     <Checkbox
-                        isChecked={_.contains(this.state.selectedEmployees, item.login)}
+                        isChecked={isChecked}
                         onPress={() => this.toggleUser(item.login, item.pendingAction)}
                     />
                     <View style={styles.flex1}>
                         <OptionRow
-                            onSelectRow={() => this.toggleUser(item.login, item.pendingAction)}
+                            isDisabled
                             boldStyle
                             option={{
                                 text: this.props.formatPhoneNumber(item.displayName),
@@ -359,7 +367,7 @@ class WorkspaceMembersPage extends React.Component {
                             <Text style={[styles.peopleBadgeText]}>{this.props.translate('common.admin')}</Text>
                         </View>
                     )}
-                </TouchableOpacity>
+                </PressableWithFeedback>
                 {!_.isEmpty(this.state.errors[item.login]) && (
                     <FormHelpMessage
                         isError