From 63945f7f49503f48e384c6819448a9fa452ad43e Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Wed, 28 Jun 2023 12:38:54 +0200 Subject: [PATCH 1/2] refactor accessibilityRoles to use CONST values --- src/CONST.js | 5 +++++ .../BaseAnchorForAttachmentsOnly.js | 2 +- .../AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js | 2 +- src/components/AttachmentView.js | 5 +++-- src/components/AvatarCropModal/AvatarCropModal.js | 2 +- src/components/AvatarWithImagePicker.js | 2 +- src/components/Banner.js | 3 ++- src/components/Checkbox.js | 3 ++- src/components/CollapsibleSection/index.js | 3 ++- src/components/CurrencySymbolButton.js | 3 ++- src/components/EmojiPicker/CategoryShortcutButton.js | 3 ++- src/components/EmojiPicker/EmojiPickerMenuItem.js | 3 ++- src/components/EmojiPicker/EmojiSkinToneList.js | 3 ++- .../HTMLEngineProvider/HTMLRenderers/ImageRenderer.js | 2 +- .../HTMLRenderers/PreRenderer/BasePreRenderer.js | 3 ++- src/components/HeaderWithBackButton.js | 8 ++++---- src/components/ImageView/index.js | 3 ++- src/components/OfflineWithFeedback.js | 2 +- src/components/OptionRow.js | 2 +- src/components/PinButton.js | 3 ++- src/components/RadioButton.js | 3 ++- src/components/Reactions/AddReactionBubble.js | 3 ++- src/components/ReportActionItem/ReportPreview.js | 3 ++- src/components/ReportActionItem/TaskPreview.js | 2 +- src/components/ReportHeaderSkeletonView.js | 3 ++- src/components/Switch.js | 3 ++- src/components/TaskHeader.js | 2 +- src/components/TextInput/TextInputLabel/index.js | 3 ++- src/components/TextLink.js | 3 ++- src/components/ThreeDotsMenu/index.js | 2 +- .../VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js | 2 +- src/pages/ProfilePage.js | 2 +- src/pages/ReportDetailsPage.js | 2 +- src/pages/home/HeaderView.js | 6 +++--- src/pages/home/report/ReportActionCompose.js | 8 ++++---- src/pages/home/report/ReportActionItemCreated.js | 3 ++- src/pages/home/report/ReportActionItemMessageEdit.js | 4 ++-- src/pages/home/report/ReportActionItemSingle.js | 4 ++-- src/pages/home/report/ReportActionItemThread.js | 2 +- src/pages/home/sidebar/SidebarLinks.js | 6 +++--- .../SidebarScreen/FloatingActionButtonAndPopover.js | 2 +- src/pages/settings/InitialSettingsPage.js | 4 ++-- src/pages/settings/Payments/AddPayPalMePage.js | 2 +- .../Contacts/ValidateCodeForm/BaseValidateCodeForm.js | 3 ++- src/pages/signin/ChangeExpensifyLoginLink.js | 3 ++- src/pages/signin/PasswordForm.js | 2 +- src/pages/signin/ResendValidationForm.js | 2 +- src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js | 2 +- src/pages/workspace/WorkspaceInitialPage.js | 4 ++-- src/pages/workspace/WorkspaceInviteMessagePage.js | 2 +- src/pages/workspace/WorkspaceMembersPage.js | 2 +- 51 files changed, 91 insertions(+), 65 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 778d1684e03c..7a3564215a8a 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -2513,6 +2513,11 @@ const CONST = { MENUITEM: 'menuitem', TEXT: 'text', RADIO: 'radio', + IMAGEBUTTON: 'imagebutton', + CHECKBOX: 'checkbox', + SWITCH: 'switch', + ADJUSTABLE: 'adjustable', + IMAGE: 'image', }, SETTINGS_LOUNGE_ACCESS: { HEADER_IMAGE_ASPECT_RATIO: 0.64, diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js index f20f798768c2..8507713c887e 100644 --- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js +++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js @@ -58,7 +58,7 @@ function BaseAnchorForAttachmentsOnly(props) { onPressOut={props.onPressOut} onLongPress={(event) => showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))} accessibilityLabel={fileName} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} > (linkRef = el)} style={StyleSheet.flatten([props.style, defaultTextStyle])} - accessibilityRole="link" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK} hrefAttrs={{ rel: props.rel, target: isEmail ? '_self' : props.target, diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js index 383770f9279b..a33751564173 100755 --- a/src/components/AttachmentView.js +++ b/src/components/AttachmentView.js @@ -16,6 +16,7 @@ import themeColors from '../styles/themes/default'; import variables from '../styles/variables'; import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL'; import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback'; +import CONST from '../CONST'; const propTypes = { /** Whether source url requires authentication */ @@ -103,7 +104,7 @@ function AttachmentView(props) { onPress={props.onPress} disabled={loadComplete} style={containerStyles} - accessibilityRole="imagebutton" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON} accessibilityLabel={props.file.name || props.translate('attachmentView.unknownFilename')} > {children} @@ -130,7 +131,7 @@ function AttachmentView(props) { onPress={props.onPress} disabled={loadComplete} style={containerStyles} - accessibilityRole="imagebutton" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON} accessibilityLabel={props.file.name || props.translate('attachmentView.unknownFilename')} > {children} diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js index 7c2a9e58961a..99262bf12938 100644 --- a/src/components/AvatarCropModal/AvatarCropModal.js +++ b/src/components/AvatarCropModal/AvatarCropModal.js @@ -402,7 +402,7 @@ function AvatarCropModal(props) { onLayout={initializeSliderContainer} onPressIn={(e) => runOnUI(sliderOnPress)(e.nativeEvent.locationX)} accessibilityLabel="slider" - accessibilityRole="adjustable" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.ADJUSTABLE} > this.setState({isMenuVisible: true})} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON} accessibilityLabel={this.props.translate('avatarWithImagePicker.editImage')} > diff --git a/src/components/Banner.js b/src/components/Banner.js index d89e0332331a..bf2df7e3b0fc 100644 --- a/src/components/Banner.js +++ b/src/components/Banner.js @@ -13,6 +13,7 @@ import getButtonState from '../libs/getButtonState'; import Tooltip from './Tooltip'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; +import CONST from '../CONST'; const propTypes = { /** Text to display in the banner. */ @@ -96,7 +97,7 @@ function Banner(props) { diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index 0a023b7b4fb4..ea2ad90a0a97 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -6,6 +6,7 @@ import themeColors from '../styles/themes/default'; import stylePropTypes from '../styles/stylePropTypes'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; +import CONST from '../CONST'; const propTypes = { /** Whether checkbox is checked */ @@ -74,7 +75,7 @@ function Checkbox(props) { ref={props.forwardedRef} style={[props.style, styles.checkboxPressable]} onKeyDown={handleSpaceKey} - accessibilityRole="checkbox" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.CHECKBOX} accessibilityState={{checked: props.isChecked}} > {props.children ? ( diff --git a/src/components/CollapsibleSection/index.js b/src/components/CollapsibleSection/index.js index 9cdbb63f2252..e9c3a90a7b30 100644 --- a/src/components/CollapsibleSection/index.js +++ b/src/components/CollapsibleSection/index.js @@ -7,6 +7,7 @@ import styles from '../../styles/styles'; import Icon from '../Icon'; import * as Expensicons from '../Icon/Expensicons'; import PressableWithFeedback from '../Pressable/PressableWithFeedback'; +import CONST from '../../CONST'; const propTypes = { /** Title of the Collapsible section */ @@ -42,7 +43,7 @@ class CollapsibleSection extends React.Component { {props.currencySymbol} diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js index f84771b8c9ad..5dc24ccc2e04 100644 --- a/src/components/EmojiPicker/CategoryShortcutButton.js +++ b/src/components/EmojiPicker/CategoryShortcutButton.js @@ -9,6 +9,7 @@ import * as StyleUtils from '../../styles/StyleUtils'; import getButtonState from '../../libs/getButtonState'; import themeColors from '../../styles/themes/default'; import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback'; +import CONST from '../../CONST'; const propTypes = { /** The emoji code of the category header */ @@ -47,7 +48,7 @@ class CategoryShortcutButton extends PureComponent { this.state.isHighlighted && styles.emojiItemHighlighted, ]} accessibilityLabel={`emojiPicker.headers.${this.props.code}`} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} > {this.props.emoji} diff --git a/src/components/EmojiPicker/EmojiSkinToneList.js b/src/components/EmojiPicker/EmojiSkinToneList.js index c8678a295249..a239f197cdd0 100644 --- a/src/components/EmojiPicker/EmojiSkinToneList.js +++ b/src/components/EmojiPicker/EmojiSkinToneList.js @@ -9,6 +9,7 @@ import Text from '../Text'; import EmojiPickerMenuItem from './EmojiPickerMenuItem'; import getSkinToneEmojiFromIndex from './getSkinToneEmojiFromIndex'; import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback'; +import CONST from '../../CONST'; const propTypes = { /** Stores user's preferred skin tone */ @@ -47,7 +48,7 @@ function EmojiSkinToneList(props) { onPress={toggleIsSkinToneListVisible} style={[styles.flex1, styles.flexRow, styles.alignSelfCenter, styles.justifyContentStart, styles.alignItemsCenter]} accessibilityLabel={props.translate('emojiPicker.skinTonePickerLabel')} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} > {currentSkinTone.code} diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index cd9c05344e82..89ecb0f64ae2 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js @@ -66,7 +66,7 @@ function ImageRenderer(props) { style={[styles.noOutline]} onPress={show} onLongPress={(event) => showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))} - accessibilityRole="imagebutton" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON} accessibilityLabel={props.translate('accessibilityHints.viewAttachment')} > { onPressIn={props.onPressIn} onPressOut={props.onPressOut} onLongPress={(event) => showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))} - accessibilityRole="text" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT} accessibilityLabel={props.translate('accessibilityHints.prestyledText')} > diff --git a/src/components/HeaderWithBackButton.js b/src/components/HeaderWithBackButton.js index c612b82851f9..ca45585b6ff5 100755 --- a/src/components/HeaderWithBackButton.js +++ b/src/components/HeaderWithBackButton.js @@ -183,7 +183,7 @@ class HeaderWithBackButton extends Component { this.props.onBackButtonPress(); }} style={[styles.touchableButtonImage]} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={this.props.translate('common.back')} > @@ -214,7 +214,7 @@ class HeaderWithBackButton extends Component { this.triggerButtonCompleteAndDownload(); }} style={[styles.touchableButtonImage]} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={this.props.translate('common.download')} > Navigation.navigate(ROUTES.getGetAssistanceRoute(this.props.guidesCallTaskID))} style={[styles.touchableButtonImage]} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={this.props.translate('getAssistancePage.questionMarkButtonTooltip')} > @@ -254,7 +254,7 @@ class HeaderWithBackButton extends Component { diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js index 2bffa7787088..538ca792b233 100644 --- a/src/components/ImageView/index.js +++ b/src/components/ImageView/index.js @@ -8,6 +8,7 @@ import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; import FullscreenLoadingIndicator from '../FullscreenLoadingIndicator'; import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback'; +import CONST from '../../CONST'; const propTypes = { /** Whether source url requires authentication */ @@ -288,7 +289,7 @@ class ImageView extends PureComponent { }} onPressIn={this.onContainerPressIn} onPress={this.onContainerPress} - accessibilityRole="image" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGE} accessibilityLabel={this.props.fileName} > diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index 14b16949de70..2fdc8d49c01b 100644 --- a/src/components/OptionRow.js +++ b/src/components/OptionRow.js @@ -182,7 +182,7 @@ class OptionRow extends Component { !this.props.onSelectRow && !this.props.isDisabled ? styles.cursorDefault : null, ]} accessibilityLabel={this.props.option.text} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} hoverDimmingValue={1} hoverStyle={this.props.hoverStyle} > diff --git a/src/components/PinButton.js b/src/components/PinButton.js index 800e0a828d1d..84ad6e22f50b 100644 --- a/src/components/PinButton.js +++ b/src/components/PinButton.js @@ -9,6 +9,7 @@ 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'; +import CONST from '../CONST'; const propTypes = { /** Report to pin */ @@ -28,7 +29,7 @@ function PinButton(props) { style={[styles.touchableButtonImage]} accessibilityState={{checked: props.report.isPinned}} accessibilityLabel={props.report.isPinned ? props.translate('common.unPin') : props.translate('common.pin')} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} > e.preventDefault()} accessibilityLabel={props.translate('emojiReactions.addReactionTooltip')} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} // disable dimming pressDimmingValue={1} > diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js index 1b913baa25e8..b0de497b7684 100644 --- a/src/components/ReportActionItem/ReportPreview.js +++ b/src/components/ReportActionItem/ReportPreview.js @@ -25,6 +25,7 @@ import getButtonState from '../../libs/getButtonState'; import * as IOU from '../../libs/actions/IOU'; import refPropTypes from '../refPropTypes'; import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback'; +import CONST from '../../CONST'; const propTypes = { /** All the data of the action */ @@ -112,7 +113,7 @@ function ReportPreview(props) { onPressOut={() => ControlSelection.unblock()} onLongPress={(event) => showContextMenuForReport(event, props.contextMenuAnchor, props.chatReportID, props.action, props.checkIfContextMenuActive)} style={[styles.flexRow, styles.justifyContentBetween]} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={props.translate('iou.viewDetails')} > diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js index 576de1991b9c..7a1f51227a6b 100644 --- a/src/components/ReportActionItem/TaskPreview.js +++ b/src/components/ReportActionItem/TaskPreview.js @@ -65,7 +65,7 @@ function TaskPreview(props) { Navigation.navigate(ROUTES.getReportRoute(props.taskReportID))} style={[styles.flexRow, styles.justifyContentBetween, styles.chatItemMessage]} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={props.translate('newTaskPage.task')} > diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js index a5d0b285ee32..5f2d5379419d 100644 --- a/src/components/ReportHeaderSkeletonView.js +++ b/src/components/ReportHeaderSkeletonView.js @@ -12,6 +12,7 @@ import themeColors from '../styles/themes/default'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; import compose from '../libs/compose'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; +import CONST from '../CONST'; const propTypes = { ...windowDimensionsPropTypes, @@ -31,7 +32,7 @@ function ReportHeaderSkeletonView(props) { {}} style={[styles.LHNToggle]} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={props.translate('common.back')} > diff --git a/src/components/Switch.js b/src/components/Switch.js index f0fd20f7af48..608471763e29 100644 --- a/src/components/Switch.js +++ b/src/components/Switch.js @@ -3,6 +3,7 @@ import {Animated} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../styles/styles'; import * as Pressables from './Pressable'; +import CONST from '../CONST'; const propTypes = { /** Whether the switch is toggled to the on position */ @@ -56,7 +57,7 @@ class Switch extends Component { style={[styles.switchTrack, !this.props.isOn && styles.switchInactive]} onPress={this.toggleAction} onLongPress={this.toggleAction} - accessibilityRole="switch" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.SWITCH} accessibilityState={{checked: this.props.isOn}} aria-checked={this.props.isOn} accessibilityLabel={this.props.accessibilityLabel} diff --git a/src/components/TaskHeader.js b/src/components/TaskHeader.js index 5ed4a4d0cba4..3fedfe830755 100644 --- a/src/components/TaskHeader.js +++ b/src/components/TaskHeader.js @@ -66,7 +66,7 @@ function TaskHeader(props) { Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))} disabled={!isOpen} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={props.translate('newTaskPage.assignee')} hoverDimmingValue={1} pressDimmingValue={0.2} diff --git a/src/components/TextInput/TextInputLabel/index.js b/src/components/TextInput/TextInputLabel/index.js index 7411194520d3..ba8a46da377c 100644 --- a/src/components/TextInput/TextInputLabel/index.js +++ b/src/components/TextInput/TextInputLabel/index.js @@ -2,6 +2,7 @@ import React, {PureComponent} from 'react'; import {Animated} from 'react-native'; import styles from '../../../styles/styles'; import {propTypes, defaultProps} from './TextInputLabelPropTypes'; +import CONST from '../../../CONST'; class TextInputLabel extends PureComponent { componentDidMount() { @@ -15,7 +16,7 @@ class TextInputLabel extends PureComponent { return ( (this.label = el)} style={[styles.textInputLabel, styles.textInputLabelDesktop, styles.textInputLabelTransformation(this.props.labelTranslateY, 0, this.props.labelScale)]} > diff --git a/src/components/TextLink.js b/src/components/TextLink.js index f498fbe16bbd..d3d1edb5ec7c 100644 --- a/src/components/TextLink.js +++ b/src/components/TextLink.js @@ -5,6 +5,7 @@ import {Linking} from 'react-native'; import Text from './Text'; import styles from '../styles/styles'; import stylePropTypes from '../styles/stylePropTypes'; +import CONST from '../CONST'; const propTypes = { /** Link to open in new tab */ @@ -60,7 +61,7 @@ function TextLink(props) { return ( (this.button = el)} style={[styles.touchableButtonImage, ...this.props.iconStyles]} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={this.props.translate(this.props.iconTooltip)} > {isPolicyAdmin ? ( { Navigation.navigate(ROUTES.getWorkspaceInitialRoute(props.report.policyID)); diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 15ae1d2c64ec..b26c11624555 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -143,7 +143,7 @@ function HeaderView(props) { style={[styles.LHNToggle]} accessibilityHint={props.translate('accessibilityHints.navigateToChatsList')} accessibilityLabel={props.translate('common.back')} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} > {shouldShowSubscript ? ( e.preventDefault()} style={styles.composerSizeButton} disabled={isBlockedFromConcierge || this.props.disabled} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={this.props.translate('reportActionCompose.collapse')} > @@ -991,7 +991,7 @@ class ReportActionCompose extends React.Component { onMouseDown={(e) => e.preventDefault()} style={styles.composerSizeButton} disabled={isBlockedFromConcierge || this.props.disabled} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={this.props.translate('reportActionCompose.expand')} > @@ -1010,7 +1010,7 @@ class ReportActionCompose extends React.Component { }} style={styles.composerSizeButton} disabled={isBlockedFromConcierge || this.props.disabled} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={this.props.translate('reportActionCompose.addAction')} > @@ -1139,7 +1139,7 @@ class ReportActionCompose extends React.Component { style={[styles.chatItemSubmitButton, this.state.isCommentEmpty || hasExceededMaxCommentLength ? undefined : styles.buttonSuccess]} onPress={this.submitForm} disabled={this.state.isCommentEmpty || isBlockedFromConcierge || this.props.disabled || hasExceededMaxCommentLength} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={this.props.translate('common.send')} > ReportUtils.navigateToDetailsPage(props.report)} style={[styles.ph5, styles.pb3, styles.alignSelfStart]} accessibilityLabel={props.translate('common.details')} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} > diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 0d9870c1353c..fa7f312d6925 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -261,7 +261,7 @@ function ReportActionItemMessageEdit(props) { onPress={deleteDraft} style={styles.chatItemSubmitButton} nativeID={cancelButtonID} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={translate('common.close')} // disable dimming hoverDimmingValue={1} @@ -340,7 +340,7 @@ function ReportActionItemMessageEdit(props) { onPress={publishDraft} nativeID={saveButtonID} disabled={hasExceededMaxCommentLength} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={translate('common.saveChanges')} hoverDimmingValue={1} pressDimmingValue={0.2} diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js index 59307bd66734..8295a279440a 100644 --- a/src/pages/home/report/ReportActionItemSingle.js +++ b/src/pages/home/report/ReportActionItemSingle.js @@ -107,7 +107,7 @@ function ReportActionItemSingle(props) { onPressOut={ControlSelection.unblock} onPress={showActorDetails} accessibilityLabel={actorHint} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} > {props.shouldShowSubscriptAvatar ? ( @@ -139,7 +139,7 @@ function ReportActionItemSingle(props) { onPressOut={ControlSelection.unblock} onPress={showActorDetails} accessibilityLabel={actorHint} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} > {_.map(personArray, (fragment, index) => ( { Report.navigateToAndOpenChildReport(props.childReportID); }} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={`${props.numberOfReplies} ${replyText}`} > diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 77070f272bb6..648f5b9c4aca 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -202,13 +202,13 @@ class SidebarLinks extends React.Component { height={variables.lhnLogoHeight} /> } - accessibilityRole="text" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT} shouldShowEnvironmentBadge /> @@ -217,7 +217,7 @@ class SidebarLinks extends React.Component { {Session.isAnonymousUser() ? ( diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js index d1e0f3bf9bb4..d046474df3da 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js @@ -244,7 +244,7 @@ class FloatingActionButtonAndPopover extends React.Component { /> diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js index b7364ce623fa..368ff085277b 100755 --- a/src/pages/settings/InitialSettingsPage.js +++ b/src/pages/settings/InitialSettingsPage.js @@ -327,7 +327,7 @@ class InitialSettingsPage extends React.Component { style={[styles.mb3]} onPress={this.openProfileSettings} accessibilityLabel={this.props.translate('common.profile')} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} > {props.translate('addPayPalMePage.checkListOf')} Linking.openURL('https://developer.paypal.com/docs/reports/reference/paypal-supported-currencies')} > diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js index 5b1aa87cea80..92e6dfae939c 100644 --- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js @@ -20,6 +20,7 @@ import {withNetwork} from '../../../../../components/OnyxProvider'; import PressableWithFeedback from '../../../../../components/Pressable/PressableWithFeedback'; import themeColors from '../../../../../styles/themes/default'; import * as StyleUtils from '../../../../../styles/StyleUtils'; +import CONST from '../../../../../CONST'; const propTypes = { ...withLocalizePropTypes, @@ -149,7 +150,7 @@ function BaseValidateCodeForm(props) { underlayColor={themeColors.componentBG} hoverDimmingValue={1} pressDimmingValue={0.2} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={props.translate('contacts.resendMagicCode')} > {props.translate('contacts.resendMagicCode')} diff --git a/src/pages/signin/ChangeExpensifyLoginLink.js b/src/pages/signin/ChangeExpensifyLoginLink.js index 3419454d611b..c152a903fbef 100755 --- a/src/pages/signin/ChangeExpensifyLoginLink.js +++ b/src/pages/signin/ChangeExpensifyLoginLink.js @@ -9,6 +9,7 @@ import ONYXKEYS from '../../ONYXKEYS'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import compose from '../../libs/compose'; import PressableWithFeedback from '../../components/Pressable/PressableWithFeedback'; +import CONST from '../../CONST'; const propTypes = { /** The credentials of the logged in person */ @@ -36,7 +37,7 @@ function ChangeExpensifyLoginLink(props) { diff --git a/src/pages/signin/PasswordForm.js b/src/pages/signin/PasswordForm.js index 48e9493be4a3..36bf29462e21 100644 --- a/src/pages/signin/PasswordForm.js +++ b/src/pages/signin/PasswordForm.js @@ -202,7 +202,7 @@ function PasswordForm(props) { diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js index 091e386fb100..aea03469e938 100755 --- a/src/pages/signin/ResendValidationForm.js +++ b/src/pages/signin/ResendValidationForm.js @@ -94,7 +94,7 @@ function ResendValidationForm(props) { redirectToSignIn()} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={props.translate('common.back')} // disable hover dim for switch hoverDimmingValue={1} diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js index abee3ce0f25b..40eec228952e 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js @@ -270,7 +270,7 @@ function BaseValidateCodeForm(props) { disabled={props.network.isOffline} hoverDimmingValue={1} pressDimmingValue={0.2} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')} > {props.translate('validateCodeForm.magicCodeNotReceived')} diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js index 73f659574e71..e84af96f6551 100644 --- a/src/pages/workspace/WorkspaceInitialPage.js +++ b/src/pages/workspace/WorkspaceInitialPage.js @@ -205,7 +205,7 @@ function WorkspaceInitialPage(props) { style={[styles.pRelative, styles.avatarLarge]} onPress={() => openEditor(policy.id)} accessibilityLabel={props.translate('workspace.common.settings')} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} > openEditor(policy.id)} accessibilityLabel={props.translate('workspace.common.settings')} - accessibilityRole="button" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} > toggleUser(item.accountID, item.pendingAction)} - accessibilityRole="checkbox" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.CHECKBOX} accessibilityState={{ checked: isChecked, }} From 7df963b7f145f6d0069e8191c86d94a0c4271535 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Tue, 4 Jul 2023 12:15:31 +0200 Subject: [PATCH 2/2] replace accessibilityRoles with CONST values --- src/components/AvatarWithDisplayName.js | 2 +- .../HTMLEngineProvider/HTMLRenderers/ImageRenderer.js | 2 +- src/components/TextInput/TextInputLabel/index.js | 2 -- src/pages/workspace/WorkspaceMembersPage.js | 2 +- 4 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js index 152eaadcf709..a5a12e6de980 100644 --- a/src/components/AvatarWithDisplayName.js +++ b/src/components/AvatarWithDisplayName.js @@ -98,7 +98,7 @@ function AvatarWithDisplayName(props) { Navigation.navigate(ROUTES.getReportRoute(props.report.parentReportID)); }} accessibilityLabel={subtitle} - accessibilityRole="link" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK} > showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))} - accessibilityRole="imagebutton" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON} accessibilityLabel={props.translate('accessibilityHints.viewAttachment')} > (this.label = el)} style={[styles.textInputLabel, styles.textInputLabelDesktop, styles.textInputLabelTransformation(this.props.labelTranslateY, 0, this.props.labelScale)]} > diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js index 27687a6cc0f3..2a5cecb1cf94 100644 --- a/src/pages/workspace/WorkspaceMembersPage.js +++ b/src/pages/workspace/WorkspaceMembersPage.js @@ -455,7 +455,7 @@ function WorkspaceMembersPage(props) { toggleAllUsers(removableMembers)} - accessibilityRole="checkbox" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.CHECKBOX} accessibilityState={{ checked: !_.isEmpty(removableMembers) && _.every(_.keys(removableMembers), (accountID) => _.contains(selectedEmployees, Number(accountID))), }}