From 33bfa831e697afcea27c059b27d7885f5eebe391 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 1 Jun 2023 11:40:14 +0700 Subject: [PATCH 01/10] fix 19360 app crashes on clicking on replying thread after deleting ws --- src/libs/ReportUtils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index ce4debd28b39..21886511df30 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -241,7 +241,7 @@ function canDeleteReportAction(reportAction, reportID) { return true; } const report = lodashGet(allReports, `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {}); - const policy = lodashGet(allPolicies, `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, {}); + const policy = lodashGet(allPolicies, `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`) || {}; return policy.role === CONST.POLICY.ROLE.ADMIN; } From ef0dc5aa48565080447ed14b814defe637e2744d Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Tue, 6 Jun 2023 12:25:47 +0200 Subject: [PATCH 02/10] migrate PressableWithSecondaryInteraction to PressableWithFeedback --- .../index.js | 8 +++---- .../index.native.js | 21 ++++++++----------- 2 files changed, 13 insertions(+), 16 deletions(-) diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js index 7f43451cbadd..f97b0ac98b2c 100644 --- a/src/components/PressableWithSecondaryInteraction/index.js +++ b/src/components/PressableWithSecondaryInteraction/index.js @@ -1,10 +1,10 @@ import _ from 'underscore'; import React, {Component} from 'react'; -import {Pressable} from 'react-native'; import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes'; import styles from '../../styles/styles'; import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; import * as StyleUtils from '../../styles/StyleUtils'; +import PressableWithFeedback from '../Pressable/PressableWithFeedback'; /** * This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked. @@ -76,11 +76,11 @@ class PressableWithSecondaryInteraction extends Component { // On Web, Text does not support LongPress events thus manage inline mode with styling instead of using Text. return ( - (this.pressableRef = el)} @@ -88,7 +88,7 @@ class PressableWithSecondaryInteraction extends Component { {...defaultPressableProps} > {this.props.children} - + ); } } diff --git a/src/components/PressableWithSecondaryInteraction/index.native.js b/src/components/PressableWithSecondaryInteraction/index.native.js index 7768430c363d..1cbc57de4ef7 100644 --- a/src/components/PressableWithSecondaryInteraction/index.native.js +++ b/src/components/PressableWithSecondaryInteraction/index.native.js @@ -1,9 +1,8 @@ import _ from 'underscore'; import React, {forwardRef} from 'react'; -import {Pressable} from 'react-native'; import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes'; import Text from '../Text'; -import HapticFeedback from '../../libs/HapticFeedback'; +import PressableWithFeedback from '../Pressable/PressableWithFeedback'; /** * This is a special Pressable that calls onSecondaryInteraction when LongPressed. @@ -13,22 +12,20 @@ import HapticFeedback from '../../libs/HapticFeedback'; */ const PressableWithSecondaryInteraction = (props) => { // Use Text node for inline mode to prevent content overflow. - const Node = props.inline ? Text : Pressable; + const Node = props.inline ? Text : PressableWithFeedback; + const executeSecondaryInteraction = (e) => { + e.preventDefault(); + props.onSecondaryInteraction(e); + }; + return ( { - if (!props.onSecondaryInteraction) { - return; - } - e.preventDefault(); - HapticFeedback.longPress(); - props.onSecondaryInteraction(e); - }} + onLongPress={props.onSecondaryInteraction ? executeSecondaryInteraction : undefined} onPressIn={props.onPressIn} onPressOut={props.onPressOut} - activeOpacity={props.activeOpacity} + pressDimmingValue={props.activeOpacity} // eslint-disable-next-line react/jsx-props-no-spreading {..._.omit(props, 'onLongPress')} > From b901d2510e6bceaf614666c7cce21cd8dec380d3 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Tue, 6 Jun 2023 12:27:21 +0200 Subject: [PATCH 03/10] add missing accessibilityLabels --- .../AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js | 3 ++- src/components/LHNOptionsList/OptionRowLHN.js | 6 ++++-- src/components/MenuItem.js | 2 ++ src/components/Reactions/EmojiReactionBubble.js | 2 ++ 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js index 3886b8fab88e..e59be949f01e 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js @@ -60,12 +60,13 @@ const BaseAnchorForCommentsOnly = (props) => { onPress={linkProps.onPress} onPressIn={props.onPressIn} onPressOut={props.onPressOut} + accessibilityRole="link" + accessibilityLabel={props.href} > (linkRef = el)} style={StyleSheet.flatten([props.style, defaultTextStyle])} - accessibilityRole="link" hrefAttrs={{ rel: props.rel, target: isEmail ? '_self' : props.target, diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 42e9168ba940..decbdf836df7 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -144,10 +144,12 @@ const OptionRowLHN = (props) => { props.isFocused ? styles.sidebarLinkActive : null, hovered && !props.isFocused ? props.hoverStyle : null, ]} - > + accessibilityRole="button" + accessibilityLabel={props.translate('accessibilityHints.navigatesToChat')} + > {!_.isEmpty(optionItem.icons) && diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index e672c68b6133..d28569034fb3 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -122,6 +122,8 @@ const MenuItem = (props) => { ]} disabled={props.disabled} ref={props.forwardedRef} + accessibilityRole="menuitem" + accessibilityLabel={props.title} > {({hovered, pressed}) => ( <> diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js index dc60d60c2f30..dd603708cf44 100644 --- a/src/components/Reactions/EmojiReactionBubble.js +++ b/src/components/Reactions/EmojiReactionBubble.js @@ -58,6 +58,8 @@ const EmojiReactionBubble = (props) => ( enableLongPressWithHover={props.isSmallScreenWidth} // Prevent text input blur when emoji reaction is clicked onMouseDown={(e) => e.preventDefault()} + accessibilityRole="button" + accessibilityLabel={props.emojiCodes.join('')} > {props.emojiCodes.join('')} {props.count > 0 && {props.count}} From 014eb8bca162a26b3243e59e76be7ec86f812ee4 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Tue, 6 Jun 2023 18:37:30 +0200 Subject: [PATCH 04/10] prettier --- src/components/LHNOptionsList/OptionRowLHN.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index decbdf836df7..233efa86e3e9 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -146,7 +146,7 @@ const OptionRowLHN = (props) => { ]} accessibilityRole="button" accessibilityLabel={props.translate('accessibilityHints.navigatesToChat')} - > + > Date: Wed, 7 Jun 2023 11:20:22 +0200 Subject: [PATCH 05/10] create const values for accessibility roles --- src/CONST.js | 7 +++++++ .../AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js | 3 ++- src/components/LHNOptionsList/OptionRowLHN.js | 2 +- src/components/MenuItem.js | 2 +- 4 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index f4e2847ba7a5..027f14cdcbff 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -2446,6 +2446,13 @@ const CONST = { EXPENSIFY_LOGO_SIZE_RATIO: 0.22, EXPENSIFY_LOGO_MARGIN_RATIO: 0.03, }, + ACCESSIBILITY_ROLE: { + BUTTON: 'button', + LINK: 'link', + MENUITEM: 'menuitem', + TEXT: 'text', + RADIO: 'radio', + }, }; export default CONST; diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js index e59be949f01e..8359150bb786 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js @@ -13,6 +13,7 @@ import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; import styles from '../../styles/styles'; import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; import {propTypes as anchorForCommentsOnlyPropTypes, defaultProps as anchorForCommentsOnlyDefaultProps} from './anchorForCommentsOnlyPropTypes'; +import CONST from '../../CONST'; const propTypes = { /** Press in handler for the link */ @@ -60,7 +61,7 @@ const BaseAnchorForCommentsOnly = (props) => { onPress={linkProps.onPress} onPressIn={props.onPressIn} onPressOut={props.onPressOut} - accessibilityRole="link" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK} accessibilityLabel={props.href} > diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 233efa86e3e9..9f7cdcb6a82b 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -144,7 +144,7 @@ const OptionRowLHN = (props) => { props.isFocused ? styles.sidebarLinkActive : null, hovered && !props.isFocused ? props.hoverStyle : null, ]} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={props.translate('accessibilityHints.navigatesToChat')} > { ]} disabled={props.disabled} ref={props.forwardedRef} - accessibilityRole="menuitem" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.MENUITEM} accessibilityLabel={props.title} > {({hovered, pressed}) => ( From cac624ca1d46ea6eecebe27d028b126c10aed0be Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Mon, 12 Jun 2023 11:05:06 +0200 Subject: [PATCH 06/10] add possibility to pass components as functions to PressableWithFeedback --- src/components/Pressable/PressableWithFeedback.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js index 281492568867..44ef8694582c 100644 --- a/src/components/Pressable/PressableWithFeedback.js +++ b/src/components/Pressable/PressableWithFeedback.js @@ -73,7 +73,7 @@ const PressableWithFeedback = forwardRef((props, ref) => { ...(state.focused ? StyleUtils.parseStyleAsArray(props.focusStyle, state) : []), ]} > - {props.children} + {_.isFunction(props.children) ? props.children(state) : props.children} )} From e94aa5b0bb89434973b30773706ca32d138493a3 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Mon, 12 Jun 2023 11:05:21 +0200 Subject: [PATCH 07/10] move accessibilityLabel to PressableWithFeedback component --- src/pages/home/report/ReportActionItem.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index e7c704fd8c8e..b1b02620dfea 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -423,10 +423,11 @@ function ReportActionItem(props) { onSecondaryInteraction={showPopover} preventDefaultContextMenu={!props.draftMessage && !hasErrors} withoutFocusOnSecondaryInteraction + accessibilityLabel={props.translate('accessibilityHints.chatMessage')} > {(hovered) => ( - + {props.shouldDisplayNewMarker && } Date: Mon, 12 Jun 2023 11:05:32 +0200 Subject: [PATCH 08/10] disable dimming on hover for PeessableWithSecondaryInteraction --- src/components/PressableWithSecondaryInteraction/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js index 6c37b9e2504d..5246e3bfb9a2 100644 --- a/src/components/PressableWithSecondaryInteraction/index.js +++ b/src/components/PressableWithSecondaryInteraction/index.js @@ -86,6 +86,7 @@ class PressableWithSecondaryInteraction extends Component { // eslint-disable-next-line react/jsx-props-no-spreading {...defaultPressableProps} style={(state) => [StyleUtils.parseStyleFromFunction(this.props.style, state), ...[this.props.inline && styles.dInline]]} + hoverDimmingValue={1} > {this.props.children} From 42fb09dff043c6f2735659348a25ad73cbf1aac2 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Tue, 13 Jun 2023 20:27:58 +0200 Subject: [PATCH 09/10] disable text selection for touch devices in PressableWithSecondaryInteraction --- src/components/PressableWithSecondaryInteraction/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js index df42d8ff85eb..a97f36fa7dd8 100644 --- a/src/components/PressableWithSecondaryInteraction/index.js +++ b/src/components/PressableWithSecondaryInteraction/index.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {Component, Pressable} from 'react'; +import React, {Component} from 'react'; import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes'; import styles from '../../styles/styles'; import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; @@ -78,6 +78,7 @@ class PressableWithSecondaryInteraction extends Component { return ( Date: Fri, 16 Jun 2023 23:18:15 +0200 Subject: [PATCH 10/10] define EmojiReactionBubble accessibilityRole by CONST value --- src/components/Reactions/EmojiReactionBubble.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js index 49d270b37fb6..c76443a82d38 100644 --- a/src/components/Reactions/EmojiReactionBubble.js +++ b/src/components/Reactions/EmojiReactionBubble.js @@ -6,6 +6,7 @@ import * as StyleUtils from '../../styles/StyleUtils'; import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteraction'; import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; import {withCurrentUserPersonalDetailsDefaultProps} from '../withCurrentUserPersonalDetails'; +import CONST from '../../CONST'; const propTypes = { /** @@ -59,7 +60,7 @@ function EmojiReactionBubble(props) { enableLongPressWithHover={props.isSmallScreenWidth} // Prevent text input blur when emoji reaction is clicked onMouseDown={(e) => e.preventDefault()} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={props.emojiCodes.join('')} > {props.emojiCodes.join('')}