Merge pull request Expensify#21916 from robertKozik/CONST-accessibili…

…tyRole Refactor accessibilityRoles to use CONST values
tienifr · Jul 5, 2023 · 11b8908 · 11b8908
2 parents 7e908b1 + 7df963b
commit 11b8908
Show file tree

Hide file tree

Showing 52 changed files with 91 additions and 67 deletions.
diff --git a/src/CONST.js b/src/CONST.js
@@ -2510,6 +2510,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
@@ -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}
                 >
                     <AttachmentView
                         source={sourceURLWithAuth}

diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
@@ -74,7 +74,7 @@ function BaseAnchorForCommentsOnly(props) {
                 <Text
                     ref={(el) => (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
@@ -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
@@ -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}
                             >
                                 <Slider
                                     sliderValue={translateSlider}

diff --git 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}
                             >
                                 <Text
                                     style={[styles.optionAlternateText, styles.textLabelSupporting, styles.link]}

diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
@@ -277,7 +277,7 @@ class AvatarWithImagePicker extends React.Component {
             <View style={[styles.alignItemsCenter, ...additionalStyles]}>
                 <PressableWithoutFeedback
                     onPress={() => this.setState({isMenuVisible: true})}
-                    accessibilityRole="button"
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
                     accessibilityLabel={this.props.translate('avatarWithImagePicker.editImage')}
                 >
                     <View style={[styles.pRelative, styles.avatarLarge]}>

diff --git 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) {
                             <Tooltip text={props.translate('common.close')}>
                                 <PressableWithFeedback
                                     onPress={props.onClose}
-                                    accessibilityRole="button"
+                                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                                     accessibilityLabel={props.translate('common.close')}
                                 >
                                     <Icon src={Expensicons.Close} />

diff --git 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';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
 
 const propTypes = {
@@ -78,7 +79,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}}
             accessibilityLabel={props.accessibilityLabel}
             pressDimmingValue={1}

diff --git 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 {
                 <PressableWithFeedback
                     onPress={this.toggleSection}
                     style={[styles.pb4, styles.flexRow]}
-                    accessibilityRole="button"
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                     accessibilityLabel={this.props.title}
                     hoverDimmingValue={1}
                     pressDimmingValue={0.2}

diff --git a/src/components/CurrencySymbolButton.js b/src/components/CurrencySymbolButton.js
@@ -5,6 +5,7 @@ import styles from '../styles/styles';
 import Tooltip from './Tooltip';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
+import CONST from '../CONST';
 
 const propTypes = {
     /** Currency symbol of selected currency */
@@ -22,7 +23,7 @@ function CurrencySymbolButton(props) {
             <PressableWithoutFeedback
                 onPress={props.onCurrencyButtonPress}
                 accessibilityLabel={props.translate('iOUCurrencySelection.selectCurrency')}
-                accessibilityRole="button"
+                accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
             >
                 <Text style={styles.iouAmountText}>{props.currencySymbol}</Text>
             </PressableWithoutFeedback>

diff --git 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}
                 >
                     <Icon
                         fill={themeColors.icon}

diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem.js b/src/components/EmojiPicker/EmojiPickerMenuItem.js
@@ -5,6 +5,7 @@ import * as StyleUtils from '../../styles/StyleUtils';
 import getButtonState from '../../libs/getButtonState';
 import Text from '../Text';
 import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
+import CONST from '../../CONST';
 
 const propTypes = {
     /** The unicode that is used to display the emoji */
@@ -75,7 +76,7 @@ class EmojiPickerMenuItem extends PureComponent {
                     styles.emojiItem,
                 ]}
                 accessibilityLabel={this.props.emoji}
-                accessibilityRole="button"
+                accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
             >
                 <Text style={[styles.emojiText]}>{this.props.emoji}</Text>
             </PressableWithoutFeedback>

diff --git 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}
                 >
                     <View style={[styles.emojiItem, styles.justifyContentCenter]}>
                         <Text style={[styles.emojiText, styles.ph2, styles.textNoWrap]}>{currentSkinTone.code}</Text>

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
@@ -61,7 +61,7 @@ function ImageRenderer(props) {
                         Navigation.navigate(route);
                     }}
                     onLongPress={(event) => showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))}
-                    accessibilityRole="imagebutton"
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
                     accessibilityLabel={props.translate('accessibilityHints.viewAttachment')}
                 >
                     <ThumbnailImage

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js
@@ -9,6 +9,7 @@ import {ShowContextMenuContext, showContextMenuForReport} from '../../../ShowCon
 import styles from '../../../../styles/styles';
 import * as ReportUtils from '../../../../libs/ReportUtils';
 import PressableWithoutFeedback from '../../../Pressable/PressableWithoutFeedback';
+import CONST from '../../../../CONST';
 
 const propTypes = {
     /** Press in handler for the code block */
@@ -42,7 +43,7 @@ const BasePreRenderer = forwardRef((props, ref) => {
                         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')}
                     >
                         <View>

diff --git a/src/components/HeaderWithBackButton.js b/src/components/HeaderWithBackButton.js
@@ -179,7 +179,7 @@ class HeaderWithBackButton extends Component {
                                     this.props.onBackButtonPress();
                                 }}
                                 style={[styles.touchableButtonImage]}
-                                accessibilityRole="button"
+                                accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                                 accessibilityLabel={this.props.translate('common.back')}
                             >
                                 <Icon src={Expensicons.BackArrow} />
@@ -210,7 +210,7 @@ class HeaderWithBackButton extends Component {
                                         this.triggerButtonCompleteAndDownload();
                                     }}
                                     style={[styles.touchableButtonImage]}
-                                    accessibilityRole="button"
+                                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                                     accessibilityLabel={this.props.translate('common.download')}
                                 >
                                     <Icon
@@ -226,7 +226,7 @@ class HeaderWithBackButton extends Component {
                                 <PressableWithoutFeedback
                                     onPress={() => Navigation.navigate(ROUTES.getGetAssistanceRoute(this.props.guidesCallTaskID))}
                                     style={[styles.touchableButtonImage]}
-                                    accessibilityRole="button"
+                                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                                     accessibilityLabel={this.props.translate('getAssistancePage.questionMarkButtonTooltip')}
                                 >
                                     <Icon src={Expensicons.QuestionMark} />
@@ -250,7 +250,7 @@ class HeaderWithBackButton extends Component {
                                 <PressableWithoutFeedback
                                     onPress={this.props.onCloseButtonPress}
                                     style={[styles.touchableButtonImage]}
-                                    accessibilityRole="button"
+                                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                                     accessibilityLabel={this.props.translate('common.close')}
                                 >
                                     <Icon src={Expensicons.Close} />

diff --git 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}
                 >
                     <Image

diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js
@@ -126,7 +126,7 @@ function OfflineWithFeedback(props) {
                         <PressableWithoutFeedback
                             onPress={props.onClose}
                             style={[styles.touchableButtonImage]}
-                            accessibilityRole="button"
+                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                             accessibilityLabel={props.translate('common.close')}
                         >
                             <Icon src={Expensicons.Close} />

diff --git 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
@@ -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}
             >
                 <Icon
                     src={Expensicons.Pin}

diff --git a/src/components/RadioButton.js b/src/components/RadioButton.js
@@ -5,6 +5,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 = {
     /** Whether radioButton is checked */
@@ -36,7 +37,7 @@ function RadioButton(props) {
             hoverDimmingValue={1}
             pressDimmingValue={1}
             accessibilityLabel={props.accessibilityLabel}
-            accessibilityRole="radio"
+            accessibilityRole={CONST.ACCESSIBILITY_ROLE.RADIO}
         >
             <View style={[styles.radioButtonContainer, props.isChecked && styles.checkedContainer, props.hasError && styles.borderColorDanger, props.disabled && styles.cursorDisabled]}>
                 <Icon

diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js
@@ -13,6 +13,7 @@ import variables from '../../styles/variables';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import * as Session from '../../libs/actions/Session';
 import PressableWithFeedback from '../Pressable/PressableWithFeedback';
+import CONST from '../../CONST';
 
 const propTypes = {
     /** Whether it is for context menu so we can modify its style */
@@ -85,7 +86,7 @@ function AddReactionBubble(props) {
                 // Prevent text input blur when Add reaction is clicked
                 onMouseDown={(e) => 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
@@ -23,6 +23,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 */
@@ -107,7 +108,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')}
             >
                 <View style={[styles.flexShrink1]}>