Update CONSTS to direct developers to use role instead of accessibilityRole (#31500)

src/CONST.ts

@@ -2769,17 +2769,125 @@ const CONST = {
         EXPENSIFY_LOGO_SIZE_RATIO: 0.22,
         EXPENSIFY_LOGO_MARGIN_RATIO: 0.03,
     },
+    /**
+     * Acceptable values for the `accessibilityRole` prop on react native components.
+     *
+     * **IMPORTANT:** Do not use with the `role` prop as it can cause errors.
+     *
+     * @deprecated ACCESSIBILITY_ROLE is deprecated. Please use CONST.ROLE instead.
+     */
     ACCESSIBILITY_ROLE: {
+        /**
+         * @deprecated Please stop using the accessibilityRole prop and use the role prop instead.
+         */
         BUTTON: 'button',
+
+        /**
+         * @deprecated Please stop using the accessibilityRole prop and use the role prop instead.
+         */
         LINK: 'link',
+
+        /**
+         * @deprecated Please stop using the accessibilityRole prop and use the role prop instead.
+         */
         MENUITEM: 'menuitem',
-        TEXT: 'presentation',
+
+        /**
+         * @deprecated Please stop using the accessibilityRole prop and use the role prop instead.
+         */
+        TEXT: 'text',
+
+        /**
+         * @deprecated Please stop using the accessibilityRole prop and use the role prop instead.
+         */
         RADIO: 'radio',
-        IMAGEBUTTON: 'img button',
+
+        /**
+         * @deprecated Please stop using the accessibilityRole prop and use the role prop instead.
+         */
+        IMAGEBUTTON: 'imagebutton',
+
+        /**
+         * @deprecated Please stop using the accessibilityRole prop and use the role prop instead.
+         */
         CHECKBOX: 'checkbox',
+
+        /**
+         * @deprecated Please stop using the accessibilityRole prop and use the role prop instead.
+         */
+        SWITCH: 'switch',
+
+        /**
+         * @deprecated Please stop using the accessibilityRole prop and use the role prop instead.
+         */
+        ADJUSTABLE: 'adjustable',
+
+        /**
+         * @deprecated Please stop using the accessibilityRole prop and use the role prop instead.
+         */
+        IMAGE: 'image',
+    },
+    /**
+     * Acceptable values for the `role` attribute on react native components.
+     *
+     * **IMPORTANT:** Not for use with the `accessibilityRole` prop, as it accepts different values, and new components
+     * should use the `role` prop instead.
+     */
+    ROLE: {
+        /** Use for elements with important, time-sensitive information. */
+        ALERT: 'alert',
+        /** Use for elements that act as buttons. */
+        BUTTON: 'button',
+        /** Use for elements representing checkboxes. */
+        CHECKBOX: 'checkbox',
+        /** Use for elements that allow a choice from multiple options. */
+        COMBOBOX: 'combobox',
+        /** Use with scrollable lists to represent a grid layout. */
+        GRID: 'grid',
+        /** Use for section headers or titles. */
+        HEADING: 'heading',
+        /** Use for image elements. */
+        IMG: 'img',
+        /** Use for elements that navigate to other pages or content. */
+        LINK: 'link',
+        /** Use to identify a list of items. */
+        LIST: 'list',
+        /** Use for a list of choices or options. */
+        MENU: 'menu',
+        /** Use for a container of multiple menus. */
+        MENUBAR: 'menubar',
+        /** Use for items within a menu. */
+        MENUITEM: 'menuitem',
+        /** Use when no specific role is needed. */
+        NONE: 'none',
+        /** Use for elements that don't require a specific role. */
+        PRESENTATION: 'presentation',
+        /** Use for elements showing progress of a task. */
+        PROGRESSBAR: 'progressbar',
+        /** Use for radio buttons. */
+        RADIO: 'radio',
+        /** Use for groups of radio buttons. */
+        RADIOGROUP: 'radiogroup',
+        /** Use for scrollbar elements. */
+        SCROLLBAR: 'scrollbar',
+        /** Use for text fields that are used for searching. */
+        SEARCHBOX: 'searchbox',
+        /** Use for adjustable elements like sliders. */
+        SLIDER: 'slider',
+        /** Use for a button that opens a list of choices. */
+        SPINBUTTON: 'spinbutton',
+        /** Use for elements providing a summary of app conditions. */
+        SUMMARY: 'summary',
+        /** Use for on/off switch elements. */
         SWITCH: 'switch',
-        ADJUSTABLE: 'slider',
-        IMAGE: 'img',
+        /** Use for tab elements in a tab list. */
+        TAB: 'tab',
+        /** Use for a list of tabs. */
+        TABLIST: 'tablist',
+        /** Use for timer elements. */
+        TIMER: 'timer',
+        /** Use for toolbars containing action buttons or components. */
+        TOOLBAR: 'toolbar',
     },
     TRANSLATION_KEYS: {
         ATTACHMENT: 'common.attachment',

src/components/AmountTextInput.js

@@ -42,6 +42,7 @@ function AmountTextInput(props) {
     const styles = useThemeStyles();
     return (
         <TextInput
+            accessibilityLabel="Text input field"
             disableKeyboard
             autoGrow
             hideFocusedState
@@ -55,7 +56,7 @@ function AmountTextInput(props) {
             blurOnSubmit={false}
             selection={props.selection}
             onSelectionChange={props.onSelectionChange}
-            role={CONST.ACCESSIBILITY_ROLE.TEXT}
+            role={CONST.ROLE.PRESENTATION}
             onKeyPress={props.onKeyPress}
         />
     );

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}
-                    role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                    role={CONST.ROLE.BUTTON}
                 >
                     <AttachmentView
                         source={sourceURLWithAuth}

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js

@@ -76,14 +76,14 @@ function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '',
             }}
             onPressIn={onPressIn}
             onPressOut={onPressOut}
-            role={CONST.ACCESSIBILITY_ROLE.LINK}
+            role={CONST.ROLE.LINK}
             accessibilityLabel={href}
         >
             <Tooltip text={href}>
                 <Text
                     ref={(el) => (linkRef = el)}
                     style={StyleSheet.flatten([style, defaultTextStyle])}
-                    role={CONST.ACCESSIBILITY_ROLE.LINK}
+                    role={CONST.ROLE.LINK}
                     hrefAttrs={{
                         rel,
                         target: isEmail || !linkProps.href ? '_self' : target,

src/components/Attachments/AttachmentCarousel/CarouselItem.js

@@ -81,7 +81,7 @@ function CarouselItem({item, isFocused, onPress}) {
             <PressableWithoutFeedback
                 style={[styles.attachmentRevealButtonContainer]}
                 onPress={onPress}
-                role={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
+                accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
                 accessibilityLabel={item.file.name || translate('attachmentView.unknownFilename')}
             >
                 {children}

src/components/Attachments/AttachmentView/AttachmentViewImage/index.js

@@ -28,7 +28,7 @@ function AttachmentViewImage({source, file, isAuthTokenRequired, loadComplete, o
             onPress={onPress}
             disabled={loadComplete}
             style={[styles.flex1, styles.flexRow, styles.alignSelfStretch]}
-            role={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
+            accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
             accessibilityLabel={file.name || translate('attachmentView.unknownFilename')}
         >
             {children}

src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js

@@ -36,7 +36,7 @@ function AttachmentViewImage({source, file, isAuthTokenRequired, isFocused, isUs
             onPress={onPress}
             disabled={loadComplete}
             style={[styles.flex1, styles.flexRow, styles.alignSelfStretch]}
-            role={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
+            accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
             accessibilityLabel={file.name || translate('attachmentView.unknownFilename')}
         >
             {children}

src/components/AvatarCropModal/AvatarCropModal.js

@@ -412,7 +412,7 @@ function AvatarCropModal(props) {
                                     onLayout={initializeSliderContainer}
                                     onPressIn={(e) => runOnUI(sliderOnPress)(e.nativeEvent.locationX)}
                                     accessibilityLabel="slider"
-                                    role={CONST.ACCESSIBILITY_ROLE.ADJUSTABLE}
+                                    role={CONST.ROLE.SLIDER}
                                 >
                                     <Slider
                                         sliderValue={translateSlider}

src/components/AvatarWithDisplayName.js

@@ -110,7 +110,7 @@ function AvatarWithDisplayName(props) {
                     <PressableWithoutFeedback
                         onPress={() => showActorDetails(props.report, props.shouldEnableDetailPageNavigation)}
                         accessibilityLabel={title}
-                        role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                        role={CONST.ROLE.BUTTON}
                     >
                         {shouldShowSubscriptAvatar ? (
                             <SubscriptAvatar
@@ -165,7 +165,7 @@ function AvatarWithDisplayName(props) {
             onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
             style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
             accessibilityLabel={title}
-            role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+            role={CONST.ROLE.BUTTON}
         >
             {headerView}
         </PressableWithoutFeedback>

src/components/AvatarWithImagePicker.js

@@ -266,7 +266,7 @@ class AvatarWithImagePicker extends React.Component {
                         <Tooltip text={this.props.translate('avatarWithImagePicker.editImage')}>
                             <PressableWithoutFeedback
                                 onPress={() => this.setState((prev) => ({isMenuVisible: !prev.isMenuVisible}))}
-                                role={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
+                                accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
                                 accessibilityLabel={this.props.translate('avatarWithImagePicker.editImage')}
                                 disabled={this.state.isAvatarCropModalOpen}
                                 ref={this.anchorRef}

src/components/Badge.tsx

@@ -46,7 +46,7 @@ function Badge({success = false, error = false, pressable = false, text, environ
         <Wrapper
             style={pressable ? wrapperStyles : wrapperStyles({focused: false, hovered: false, isDisabled: false, isScreenReaderActive: false, pressed: false})}
             onPress={onPress}
-            role={pressable ? CONST.ACCESSIBILITY_ROLE.BUTTON : CONST.ACCESSIBILITY_ROLE.TEXT}
+            role={pressable ? CONST.ROLE.BUTTON : CONST.ROLE.PRESENTATION}
             accessibilityLabel={pressable ? text : undefined}
             aria-label={!pressable ? text : undefined}
             accessible={false}

src/components/Banner.js

@@ -99,7 +99,7 @@ function Banner(props) {
                             <Tooltip text={props.translate('common.close')}>
                                 <PressableWithFeedback
                                     onPress={props.onClose}
-                                    role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                                    role={CONST.ROLE.BUTTON}
                                     accessibilityLabel={props.translate('common.close')}
                                 >
                                     <Icon src={Expensicons.Close} />

src/components/Button/index.js

@@ -330,7 +330,7 @@ function Button({
             ]}
             id={id}
             accessibilityLabel={accessibilityLabel}
-            role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+            role={CONST.ROLE.BUTTON}
             hoverDimmingValue={1}
         >
             {renderContent()}

src/components/Checkbox.js

@@ -95,7 +95,7 @@ function Checkbox(props) {
             ref={props.forwardedRef}
             style={[StyleUtils.getCheckboxPressableStyle(props.containerBorderRadius + 2), props.style]} // to align outline on focus, border-radius of pressable should be 2px more than Checkbox
             onKeyDown={handleSpaceKey}
-            role={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
+            role={CONST.ROLE.CHECKBOX}
             ariaChecked={props.isChecked}
             accessibilityLabel={props.accessibilityLabel}
             pressDimmingValue={1}

src/components/CollapsibleSection/index.tsx

@@ -31,7 +31,7 @@ function CollapsibleSection({title, children}: CollapsibleSectionProps) {
             <PressableWithFeedback
                 onPress={toggleSection}
                 style={[styles.pb4, styles.flexRow]}
-                role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                role={CONST.ROLE.BUTTON}
                 accessibilityLabel={title}
                 hoverDimmingValue={1}
                 pressDimmingValue={0.2}

src/components/CurrencySymbolButton.js

@@ -23,7 +23,7 @@ function CurrencySymbolButton({onCurrencyButtonPress, currencySymbol}) {
             <PressableWithoutFeedback
                 onPress={onCurrencyButtonPress}
                 accessibilityLabel={translate('common.selectCurrency')}
-                role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                role={CONST.ROLE.BUTTON}
             >
                 <Text style={styles.iouAmountText}>{currencySymbol}</Text>
             </PressableWithoutFeedback>

src/components/DatePicker/index.android.js

@@ -47,7 +47,7 @@ const DatePicker = forwardRef(({value, defaultValue, label, placeholder, errorTe
             <TextInput
                 label={label}
                 accessibilityLabel={label}
-                role={CONST.ACCESSIBILITY_ROLE.TEXT}
+                role={CONST.ROLE.PRESENTATION}
                 value={dateAsText}
                 forceActiveLabel
                 placeholder={placeholder}

src/components/DatePicker/index.ios.js

@@ -87,7 +87,7 @@ function DatePicker({value, defaultValue, innerRef, onInputChange, preferredLoca
                 forceActiveLabel
                 label={label}
                 accessibilityLabel={label}
-                role={CONST.ACCESSIBILITY_ROLE.TEXT}
+                role={CONST.ROLE.PRESENTATION}
                 value={dateAsText}
                 placeholder={placeholder}
                 errorText={errorText}

src/components/DatePicker/index.js

@@ -61,7 +61,7 @@ function DatePicker({maxDate, minDate, onInputChange, innerRef, label, value, pl
             onFocus={showDatepicker}
             label={label}
             accessibilityLabel={label}
-            role={CONST.ACCESSIBILITY_ROLE.TEXT}
+            role={CONST.ROLE.PRESENTATION}
             onInputChange={setDate}
             value={value}
             placeholder={placeholder}

src/components/EmojiPicker/CategoryShortcutButton.js

@@ -40,7 +40,7 @@ function CategoryShortcutButton(props) {
                 onHoverOut={() => setIsHighlighted(false)}
                 style={({pressed}) => [StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)), styles.categoryShortcutButton, isHighlighted && styles.emojiItemHighlighted]}
                 accessibilityLabel={`emojiPicker.headers.${props.code}`}
-                role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                role={CONST.ROLE.BUTTON}
             >
                 <Icon
                     fill={theme.icon}

src/components/EmojiPicker/EmojiPickerButtonDropdown.js

@@ -51,7 +51,7 @@ function EmojiPickerButtonDropdown(props) {
                 onPress={onPress}
                 id="emojiDropdownButton"
                 accessibilityLabel="statusEmoji"
-                role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                role={CONST.ROLE.BUTTON}
             >
                 {({hovered, pressed}) => (
                     <View style={styles.emojiPickerButtonDropdownContainer}>

src/components/EmojiPicker/EmojiPickerMenu/index.js

@@ -482,7 +482,7 @@ function EmojiPickerMenu(props) {
                 <TextInput
                     label={translate('common.search')}
                     accessibilityLabel={translate('common.search')}
-                    role={CONST.ACCESSIBILITY_ROLE.TEXT}
+                    role={CONST.ROLE.PRESENTATION}
                     onChangeText={filterEmojis}
                     defaultValue=""
                     ref={searchInputRef}

src/components/EmojiPicker/EmojiPickerMenu/index.native.js

@@ -157,7 +157,7 @@ function EmojiPickerMenu({preferredLocale, onEmojiSelected, preferredSkinTone, t
                 <TextInput
                     label={translate('common.search')}
                     accessibilityLabel={translate('common.search')}
-                    role={CONST.ACCESSIBILITY_ROLE.TEXT}
+                    role={CONST.ROLE.PRESENTATION}
                     onChangeText={filterEmojis}
                     blurOnSubmit={filteredEmojis.length > 0}
                 />

src/components/EmojiPicker/EmojiPickerMenuItem/index.js

@@ -101,7 +101,7 @@ class EmojiPickerMenuItem extends PureComponent {
                     this.props.themeStyles.emojiItem,
                 ]}
                 accessibilityLabel={this.props.emoji}
-                role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                role={CONST.ROLE.BUTTON}
             >
                 <Text style={[this.props.themeStyles.emojiText]}>{this.props.emoji}</Text>
             </PressableWithoutFeedback>

src/components/EmojiPicker/EmojiPickerMenuItem/index.native.js

@@ -78,7 +78,7 @@ class EmojiPickerMenuItem extends PureComponent {
                     this.props.themeStyles.emojiItem,
                 ]}
                 accessibilityLabel={this.props.emoji}
-                role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                role={CONST.ROLE.BUTTON}
             >
                 <Text style={[this.props.themeStyles.emojiText]}>{this.props.emoji}</Text>
             </PressableWithoutFeedback>

src/components/EmojiPicker/EmojiSkinToneList.js

@@ -49,7 +49,7 @@ function EmojiSkinToneList(props) {
                     onPress={toggleIsSkinToneListVisible}
                     style={[styles.flexRow, styles.alignSelfCenter, styles.justifyContentStart, styles.alignItemsCenter]}
                     accessibilityLabel={props.translate('emojiPicker.skinTonePickerLabel')}
-                    role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                    role={CONST.ROLE.BUTTON}
                 >
                     <View style={[styles.emojiItem, styles.wAuto, styles.justifyContentCenter]}>
                         <Text style={[styles.emojiText, styles.ph2, styles.textNoWrap]}>{currentSkinTone.code}</Text>

src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js

@@ -77,7 +77,7 @@ function ImageRenderer(props) {
                             ReportUtils.isArchivedRoom(report),
                         )
                     }
-                    role={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
                     accessibilityLabel={translate('accessibilityHints.viewAttachment')}
                 >
                     <ThumbnailImage