Merge pull request #20711 from robertKozik/20602-migrate-PinButton

20602 — migrate PinButton to PressableWithoutFeedback
Expensify · Jun 16, 2023 · d3afedb · d3afedb
2 parents cc9cab1 + aa9d332
commit d3afedb
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/src/components/PinButton.js b/src/components/PinButton.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import {Pressable} from 'react-native';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import Icon from './Icon';
@@ -9,6 +8,7 @@ import reportPropTypes from '../pages/reportPropTypes';
 import * as Report from '../libs/actions/Report';
 import * as Expensicons from './Icon/Expensicons';
 import * as Session from '../libs/actions/Session';
+import PressableWithFeedback from './Pressable/PressableWithFeedback';
 
 const propTypes = {
     /** Report to pin */
@@ -23,15 +23,18 @@ const defaultProps = {
 function PinButton(props) {
     return (
         <Tooltip text={props.report.isPinned ? props.translate('common.unPin') : props.translate('common.pin')}>
-            <Pressable
+            <PressableWithFeedback
                 onPress={Session.checkIfActionIsAllowed(() => Report.togglePinnedState(props.report.reportID, props.report.isPinned))}
                 style={[styles.touchableButtonImage]}
+                accessibilityState={{checked: props.report.isPinned}}
+                accessibilityLabel={props.report.isPinned ? props.translate('common.unPin') : props.translate('common.pin')}
+                accessibilityRole="button"
             >
                 <Icon
                     src={Expensicons.Pin}
                     fill={props.report.isPinned ? themeColors.heading : themeColors.icon}
                 />
-            </Pressable>
+            </PressableWithFeedback>
         </Tooltip>
     );
 }