diff --git a/src/CONST.js b/src/CONST.js index 85ee667eead5..f8ac136e720a 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -2506,6 +2506,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 fd0cc34ab7d3..0b450993883a 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js @@ -14,6 +14,7 @@ import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; 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 */ @@ -66,6 +67,8 @@ function BaseAnchorForCommentsOnly(props) { onPress={linkProps.onPress} onPressIn={props.onPressIn} onPressOut={props.onPressOut} + accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK} + accessibilityLabel={props.href} > - + {!_.isEmpty(optionItem.icons) && (optionItem.shouldShowSubscript ? ( diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index fed55eb8b5e0..eae6069783f3 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -122,6 +122,8 @@ function MenuItem(props) { ]} disabled={props.disabled} ref={props.forwardedRef} + accessibilityRole={CONST.ACCESSIBILITY_ROLE.MENUITEM} + accessibilityLabel={props.title} > {({hovered, pressed}) => ( <> diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js index 9ea6b5f28739..a20355c49a8f 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,10 +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 +89,7 @@ class PressableWithSecondaryInteraction extends Component { style={(state) => [StyleUtils.parseStyleFromFunction(this.props.style, state), ...[this.props.inline && styles.dInline]]} > {this.props.children} - + ); } } diff --git a/src/components/PressableWithSecondaryInteraction/index.native.js b/src/components/PressableWithSecondaryInteraction/index.native.js index 8a7771b00853..0ca668bb4234 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'; */ function 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')} > diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js index d8e8caf5847e..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,6 +60,8 @@ function EmojiReactionBubble(props) { enableLongPressWithHover={props.isSmallScreenWidth} // Prevent text input blur when emoji reaction is clicked onMouseDown={(e) => e.preventDefault()} + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} + accessibilityLabel={props.emojiCodes.join('')} > {props.emojiCodes.join('')} {props.count > 0 && {props.count}} diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index 2303ee6c556f..24be64dc6468 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -452,10 +452,11 @@ function ReportActionItem(props) { onSecondaryInteraction={showPopover} preventDefaultContextMenu={!props.draftMessage && !hasErrors} withoutFocusOnSecondaryInteraction + accessibilityLabel={props.translate('accessibilityHints.chatMessage')} > {(hovered) => ( - + {props.shouldDisplayNewMarker && }