From 977257a895fa7df5716e0d1989259bb1ca3a8aa6 Mon Sep 17 00:00:00 2001 From: Trevor Coleman Date: Fri, 17 Nov 2023 17:10:55 -0500 Subject: [PATCH 01/20] fix(ACCESSIBILITY_ROLE): Deprecate ACCESSIBLITY_ROLE --- src/CONST.ts | 46 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) diff --git a/src/CONST.ts b/src/CONST.ts index 69ca8256cc6f..3f1834d7266d 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2769,18 +2769,62 @@ const CONST = { EXPENSIFY_LOGO_SIZE_RATIO: 0.22, EXPENSIFY_LOGO_MARGIN_RATIO: 0.03, }, + /** + * Acceptable values for the `accessibilityRole` prop on react native components. + * @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', + + /** + * @deprecated Please stop using the accessibilityRole prop and use the role prop instead. + */ IMAGEBUTTON: 'img button', + + /** + * @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: 'slider', + + /** + * @deprecated Please stop using the accessibilityRole prop and use the role prop instead. + */ IMAGE: 'img', }, + }, TRANSLATION_KEYS: { ATTACHMENT: 'common.attachment', }, From 0b1c9734b350b1de38c4a9250ff2e6f9182bc7ba Mon Sep 17 00:00:00 2001 From: Trevor Coleman Date: Fri, 17 Nov 2023 17:11:11 -0500 Subject: [PATCH 02/20] fix(ACCESSIBILITY_ROLE): Add CONST.ROLE --- src/CONST.ts | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) diff --git a/src/CONST.ts b/src/CONST.ts index 3f1834d7266d..f12c52ad79ac 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2824,6 +2824,67 @@ const CONST = { */ IMAGE: 'img', }, + /** + * 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', + /** 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', From 9fbda55ad0a91c6e2e44d70f3547a387134f4bc2 Mon Sep 17 00:00:00 2001 From: Trevor Coleman Date: Fri, 17 Nov 2023 17:12:42 -0500 Subject: [PATCH 03/20] fix(ACCESSIBILITY_ROLE): fix formatting in JSDoc comment --- src/CONST.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/CONST.ts b/src/CONST.ts index f12c52ad79ac..35c183e9607c 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2771,6 +2771,9 @@ const CONST = { }, /** * 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: { From 7743c4c52a9a542d2b9945f0ac65dd4ba3dea27d Mon Sep 17 00:00:00 2001 From: Trevor Coleman Date: Fri, 17 Nov 2023 17:19:41 -0500 Subject: [PATCH 04/20] fix(ACCESSIBILITY_ROLE): redirect `role` props that point to `ACCESSIBLITY_ROLE.TEXT` to point to `ROLE.PRESENTATION` --- src/components/AmountTextInput.js | 4 ++-- src/components/DatePicker/index.android.js | 2 +- src/components/DatePicker/index.ios.js | 2 +- src/components/DatePicker/index.js | 2 +- .../EmojiPicker/EmojiPickerMenu/index.js | 2 +- .../EmojiPickerMenu/index.native.js | 2 +- .../PreRenderer/BasePreRenderer.js | 2 +- src/components/MagicCodeInput.js | 4 ++-- src/components/NewDatePicker/index.js | 2 +- .../OptionsSelector/BaseOptionsSelector.js | 2 +- src/components/PDFView/PDFPasswordForm.js | 2 +- src/components/RoomNameInput/index.js | 2 +- src/components/RoomNameInput/index.native.js | 2 +- .../SelectionList/BaseSelectionList.js | 2 +- .../TextInput/TextInputLabel/index.js | 2 +- src/pages/EditRequestDescriptionPage.js | 2 +- src/pages/EditRequestMerchantPage.js | 2 +- .../EnablePayments/AdditionalDetailsStep.js | 8 ++++---- .../PrivateNotes/PrivateNotesEditPage.js | 2 +- src/pages/ReimbursementAccount/AddressForm.js | 4 ++-- .../BankAccountManualStep.js | 8 ++++---- src/pages/ReimbursementAccount/CompanyStep.js | 8 ++++---- .../ReimbursementAccount/IdentityForm.js | 6 +++--- .../ReimbursementAccount/ValidationStep.js | 12 +++++------ src/pages/ReportWelcomeMessagePage.js | 2 +- .../TeachersUnite/IntroSchoolPrincipalPage.js | 6 +++--- src/pages/TeachersUnite/KnowATeacherPage.js | 6 +++--- src/pages/iou/MoneyRequestDescriptionPage.js | 2 +- src/pages/iou/MoneyRequestMerchantPage.js | 2 +- .../Profile/Contacts/NewContactMethodPage.js | 2 +- .../Profile/CustomStatus/StatusSetPage.js | 2 +- src/pages/settings/Profile/DisplayNamePage.js | 4 ++-- .../Profile/PersonalDetails/AddressPage.js | 16 +++++++-------- .../Profile/PersonalDetails/LegalNamePage.js | 4 ++-- .../settings/Security/CloseAccountPage.js | 4 ++-- src/pages/settings/Wallet/AddDebitCardPage.js | 20 +++++++++---------- src/pages/tasks/NewTaskDescriptionPage.js | 2 +- src/pages/tasks/NewTaskDetailsPage.js | 4 ++-- src/pages/tasks/NewTaskTitlePage.js | 2 +- src/pages/tasks/TaskDescriptionPage.js | 2 +- src/pages/tasks/TaskTitlePage.js | 2 +- .../workspace/WorkspaceInviteMessagePage.js | 2 +- src/pages/workspace/WorkspaceNewRoomPage.js | 2 +- src/pages/workspace/WorkspaceSettingsPage.js | 2 +- .../reimburse/WorkspaceRateAndUnitPage.js | 4 ++-- src/stories/Form.stories.js | 6 +++--- 46 files changed, 92 insertions(+), 92 deletions(-) diff --git a/src/components/AmountTextInput.js b/src/components/AmountTextInput.js index bd88712432a8..9a30d2a5b5ef 100644 --- a/src/components/AmountTextInput.js +++ b/src/components/AmountTextInput.js @@ -41,7 +41,7 @@ const defaultProps = { function AmountTextInput(props) { const styles = useThemeStyles(); return ( - ); diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js index 5e7086fb78ad..2821d27a7168 100644 --- a/src/components/DatePicker/index.android.js +++ b/src/components/DatePicker/index.android.js @@ -47,7 +47,7 @@ const DatePicker = forwardRef(({value, defaultValue, label, placeholder, errorTe 0} /> diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js index a2b01059a63c..ea8d3858c49b 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js @@ -51,7 +51,7 @@ const BasePreRenderer = forwardRef((props, ref) => { onPressIn={props.onPressIn} onPressOut={props.onPressOut} onLongPress={(event) => showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} accessibilityLabel={props.translate('accessibilityHints.prestyledText')} > diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index 677fe1c38827..0ad0781a8ec5 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -307,7 +307,7 @@ function MagicCodeInput(props) { {/* Hide the input above the text. Cannot set opacity to 0 as it would break pasting on iOS Safari. */} - { inputRefs.current[index] = ref; // Setting attribute type to "search" to prevent Password Manager from appearing in Mobile Chrome @@ -342,7 +342,7 @@ function MagicCodeInput(props) { selectionColor="transparent" textInputContainerStyles={[styles.borderNone]} inputStyle={[styles.inputTransparent]} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} /> diff --git a/src/components/NewDatePicker/index.js b/src/components/NewDatePicker/index.js index 8403bdb2661f..c96f34d31e78 100644 --- a/src/components/NewDatePicker/index.js +++ b/src/components/NewDatePicker/index.js @@ -76,7 +76,7 @@ function NewDatePicker({containerStyles, defaultValue, disabled, errorText, inpu icon={Expensicons.Calendar} label={label} accessibilityLabel={label} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} value={value || selectedDate || ''} placeholder={placeholder || translate('common.dateFormat')} errorText={errorText} diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 8c480c27f20f..b266e95ffca8 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -378,7 +378,7 @@ class BaseOptionsSelector extends Component { value={this.props.value} label={this.props.textInputLabel} accessibilityLabel={this.props.textInputLabel} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} onChangeText={this.updateSearchValue} errorText={this.state.errorMessage} onSubmitEditing={this.selectFocusedOption} diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js index e20e2c44a76e..2c33d8d93a31 100644 --- a/src/components/PDFView/PDFPasswordForm.js +++ b/src/components/PDFView/PDFPasswordForm.js @@ -123,7 +123,7 @@ function PDFPasswordForm({isFocused, isPasswordInvalid, shouldShowLoadingIndicat ref={textInputRef} label={translate('common.password')} accessibilityLabel={translate('common.password')} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} /** * This is a workaround to bypass Safari's autofill odd behaviour. * This tricks the browser not to fill the username somewhere else and still fill the password correctly. diff --git a/src/components/RoomNameInput/index.js b/src/components/RoomNameInput/index.js index e6695405ace8..bb4b3f373808 100644 --- a/src/components/RoomNameInput/index.js +++ b/src/components/RoomNameInput/index.js @@ -48,7 +48,7 @@ function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, disabled={disabled} label={translate('newRoomPage.roomName')} accessibilityLabel={translate('newRoomPage.roomName')} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} prefixCharacter={CONST.POLICY.ROOM_PREFIX} placeholder={translate('newRoomPage.social')} onChange={setModifiedRoomName} diff --git a/src/components/RoomNameInput/index.native.js b/src/components/RoomNameInput/index.native.js index 828affe33d07..274c5edaea6f 100644 --- a/src/components/RoomNameInput/index.native.js +++ b/src/components/RoomNameInput/index.native.js @@ -33,7 +33,7 @@ function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, disabled={disabled} label={translate('newRoomPage.roomName')} accessibilityLabel={translate('newRoomPage.roomName')} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} prefixCharacter={CONST.POLICY.ROOM_PREFIX} placeholder={translate('newRoomPage.social')} onChange={setModifiedRoomName} diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js index 90ed7c707fe9..883d58ae30ee 100644 --- a/src/components/SelectionList/BaseSelectionList.js +++ b/src/components/SelectionList/BaseSelectionList.js @@ -391,7 +391,7 @@ function BaseSelectionList({ }} label={textInputLabel} accessibilityLabel={textInputLabel} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} value={textInputValue} placeholder={textInputPlaceholder} maxLength={textInputMaxLength} diff --git a/src/components/TextInput/TextInputLabel/index.js b/src/components/TextInput/TextInputLabel/index.js index 43dd1a0ef330..dbd6fa765503 100644 --- a/src/components/TextInput/TextInputLabel/index.js +++ b/src/components/TextInput/TextInputLabel/index.js @@ -19,7 +19,7 @@ function TextInputLabel({for: inputId, label, labelTranslateY, labelScale}) { return ( {label} diff --git a/src/pages/EditRequestDescriptionPage.js b/src/pages/EditRequestDescriptionPage.js index f6779ac83ead..57a2ec89b3bf 100644 --- a/src/pages/EditRequestDescriptionPage.js +++ b/src/pages/EditRequestDescriptionPage.js @@ -67,7 +67,7 @@ function EditRequestDescriptionPage({defaultDescription, onSubmit}) { defaultValue={defaultDescription} label={translate('moneyRequestConfirmationList.whatsItFor')} accessibilityLabel={translate('moneyRequestConfirmationList.whatsItFor')} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} ref={(el) => { if (!el) { return; diff --git a/src/pages/EditRequestMerchantPage.js b/src/pages/EditRequestMerchantPage.js index 1bc464fc37da..2afbde95717c 100644 --- a/src/pages/EditRequestMerchantPage.js +++ b/src/pages/EditRequestMerchantPage.js @@ -57,7 +57,7 @@ function EditRequestMerchantPage({defaultMerchant, onSubmit}) { defaultValue={defaultMerchant} label={translate('common.merchant')} accessibilityLabel={translate('common.merchant')} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} ref={(e) => (merchantInputRef.current = e)} /> diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js index d7cabe144dd4..0dc16194bdf5 100644 --- a/src/pages/EnablePayments/AdditionalDetailsStep.js +++ b/src/pages/EnablePayments/AdditionalDetailsStep.js @@ -193,7 +193,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP containerStyles={[styles.mt4]} label={translate(fieldNameTranslationKeys.legalFirstName)} accessibilityLabel={translate(fieldNameTranslationKeys.legalFirstName)} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} defaultValue={PersonalDetails.extractFirstAndLastNameFromAvailableDetails(currentUserPersonalDetails).firstName} shouldSaveDraft /> @@ -203,7 +203,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP containerStyles={[styles.mt4]} label={translate(fieldNameTranslationKeys.legalLastName)} accessibilityLabel={translate(fieldNameTranslationKeys.legalLastName)} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} defaultValue={PersonalDetails.extractFirstAndLastNameFromAvailableDetails(currentUserPersonalDetails).lastName} shouldSaveDraft /> @@ -225,7 +225,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP inputMode={CONST.INPUT_MODE.TEL} label={translate(fieldNameTranslationKeys.phoneNumber)} accessibilityLabel={translate(fieldNameTranslationKeys.phoneNumber)} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} defaultValue={currentUserPersonalDetails.phoneNumber} placeholder={translate('common.phoneNumberPlaceholder')} shouldSaveDraft @@ -245,7 +245,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP containerStyles={[styles.mt4]} label={translate(fieldNameTranslationKeys[shouldAskForFullSSN ? 'ssnFull9' : 'ssn'])} accessibilityLabel={translate(fieldNameTranslationKeys[shouldAskForFullSSN ? 'ssnFull9' : 'ssn'])} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} maxLength={shouldAskForFullSSN ? 9 : 4} inputMode={CONST.INPUT_MODE.NUMERIC} /> diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.js b/src/pages/PrivateNotes/PrivateNotesEditPage.js index c4946d3c07b4..3ba4d9c0fea4 100644 --- a/src/pages/PrivateNotes/PrivateNotesEditPage.js +++ b/src/pages/PrivateNotes/PrivateNotesEditPage.js @@ -145,7 +145,7 @@ function PrivateNotesEditPage({route, personalDetailsList, report}) { > props.onFieldChange({city: value})} @@ -144,7 +144,7 @@ function AddressForm(props) { shouldSaveDraft={props.shouldSaveDraft} label={props.translate('common.zip')} accessibilityLabel={props.translate('common.zip')} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} inputMode={CONST.INPUT_MODE.NUMERIC} value={props.values.zipCode} defaultValue={props.defaultValues.zipCode} diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js index dd541c68ecf4..a241a82585d8 100644 --- a/src/pages/ReimbursementAccount/BankAccountManualStep.js +++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js @@ -98,25 +98,25 @@ function BankAccountManualStep(props) { style={[styles.exampleCheckImage, styles.mb5]} source={exampleCheckImage(preferredLocale)} /> - - props.onFieldChange({firstName: value})} @@ -163,7 +163,7 @@ function IdentityForm(props) { shouldSaveDraft={props.shouldSaveDraft} label={`${props.translate('common.lastName')}`} aria-label={props.translate('common.lastName')} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} value={props.values.lastName} defaultValue={props.defaultValues.lastName} onChangeText={(value) => props.onFieldChange({lastName: value})} @@ -189,7 +189,7 @@ function IdentityForm(props) { shouldSaveDraft={props.shouldSaveDraft} label={`${props.translate('common.ssnLast4')}`} aria-label={props.translate('common.ssnLast4')} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} containerStyles={[styles.mt4]} inputMode={CONST.INPUT_MODE.NUMERIC} defaultValue={props.defaultValues.ssnLast4} diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index 386b6b346467..2325bdbbc431 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -153,29 +153,29 @@ function ValidationStep({reimbursementAccount, translate, onBackButtonPress, acc {translate('validationStep.descriptionCTA')} - - - {!requiresTwoFactorAuth && ( diff --git a/src/pages/ReportWelcomeMessagePage.js b/src/pages/ReportWelcomeMessagePage.js index a0e471d00df6..1eaae48081a3 100644 --- a/src/pages/ReportWelcomeMessagePage.js +++ b/src/pages/ReportWelcomeMessagePage.js @@ -99,7 +99,7 @@ function ReportWelcomeMessagePage(props) { inputID="welcomeMessage" label={props.translate('welcomeMessagePage.welcomeMessage')} accessibilityLabel={props.translate('welcomeMessagePage.welcomeMessage')} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} autoGrowHeight maxLength={CONST.MAX_COMMENT_LENGTH} ref={(el) => { diff --git a/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js b/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js index e04b720e8365..f44356347273 100644 --- a/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js +++ b/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js @@ -107,7 +107,7 @@ function IntroSchoolPrincipalPage(props) { name="firstName" label={translate('teachersUnitePage.principalFirstName')} accessibilityLabel={translate('teachersUnitePage.principalFirstName')} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} maxLength={CONST.DISPLAY_NAME.MAX_LENGTH} autoCapitalize="words" /> @@ -119,7 +119,7 @@ function IntroSchoolPrincipalPage(props) { name="lastName" label={translate('teachersUnitePage.principalLastName')} accessibilityLabel={translate('teachersUnitePage.principalLastName')} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} maxLength={CONST.DISPLAY_NAME.MAX_LENGTH} autoCapitalize="words" /> @@ -131,7 +131,7 @@ function IntroSchoolPrincipalPage(props) { name="partnerUserID" label={translate('teachersUnitePage.principalWorkEmail')} accessibilityLabel={translate('teachersUnitePage.principalWorkEmail')} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} inputMode={CONST.INPUT_MODE.EMAIL} autoCapitalize="none" /> diff --git a/src/pages/TeachersUnite/KnowATeacherPage.js b/src/pages/TeachersUnite/KnowATeacherPage.js index 7c2b8f03f879..f2a5732b6a0a 100644 --- a/src/pages/TeachersUnite/KnowATeacherPage.js +++ b/src/pages/TeachersUnite/KnowATeacherPage.js @@ -117,7 +117,7 @@ function KnowATeacherPage(props) { name="fname" label={translate('common.firstName')} accessibilityLabel={translate('common.firstName')} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} maxLength={CONST.DISPLAY_NAME.MAX_LENGTH} autoCapitalize="words" /> @@ -129,7 +129,7 @@ function KnowATeacherPage(props) { name="lname" label={translate('common.lastName')} accessibilityLabel={translate('common.lastName')} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} maxLength={CONST.DISPLAY_NAME.MAX_LENGTH} autoCapitalize="words" /> @@ -141,7 +141,7 @@ function KnowATeacherPage(props) { name="partnerUserID" label={`${translate('common.email')}/${translate('common.phoneNumber')}`} accessibilityLabel={`${translate('common.email')}/${translate('common.phoneNumber')}`} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} inputMode={CONST.INPUT_MODE.EMAIL} autoCapitalize="none" /> diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js index 43d7b58bfc7f..9444b917fae1 100644 --- a/src/pages/iou/MoneyRequestDescriptionPage.js +++ b/src/pages/iou/MoneyRequestDescriptionPage.js @@ -132,7 +132,7 @@ function MoneyRequestDescriptionPage({iou, route, selectedTab}) { defaultValue={iou.comment} label={translate('moneyRequestConfirmationList.whatsItFor')} accessibilityLabel={translate('moneyRequestConfirmationList.whatsItFor')} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} ref={(el) => { if (!el) { return; diff --git a/src/pages/iou/MoneyRequestMerchantPage.js b/src/pages/iou/MoneyRequestMerchantPage.js index 2c5869dfa7a3..be57f0b6c534 100644 --- a/src/pages/iou/MoneyRequestMerchantPage.js +++ b/src/pages/iou/MoneyRequestMerchantPage.js @@ -118,7 +118,7 @@ function MoneyRequestMerchantPage({iou, route}) { maxLength={CONST.MERCHANT_NAME_MAX_LENGTH} label={translate('common.merchant')} accessibilityLabel={translate('common.merchant')} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} ref={inputCallbackRef} /> diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js index 718c414bac87..45917cd6ce2d 100644 --- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js +++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js @@ -120,7 +120,7 @@ function NewContactMethodPage(props) { InputComponent={TextInput} label={`${props.translate('common.email')}/${props.translate('common.phoneNumber')}`} aria-label={`${props.translate('common.email')}/${props.translate('common.phoneNumber')}`} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} inputMode={CONST.INPUT_MODE.EMAIL} ref={(el) => (loginInputRef.current = el)} inputID="phoneOrEmail" diff --git a/src/pages/settings/Profile/CustomStatus/StatusSetPage.js b/src/pages/settings/Profile/CustomStatus/StatusSetPage.js index 6c7a2d896aa9..b9ae9c8d2f51 100644 --- a/src/pages/settings/Profile/CustomStatus/StatusSetPage.js +++ b/src/pages/settings/Profile/CustomStatus/StatusSetPage.js @@ -76,7 +76,7 @@ function StatusSetPage({draftStatus, currentUserPersonalDetails}) { inputID={INPUT_IDS.STATUS_TEXT} label={translate('statusPage.message')} aria-label={INPUT_IDS.STATUS_TEXT} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} defaultValue={defaultText} maxLength={CONST.STATUS_TEXT_MAX_LENGTH} autoFocus diff --git a/src/pages/settings/Profile/DisplayNamePage.js b/src/pages/settings/Profile/DisplayNamePage.js index 85f630a41212..5c13bfe72d5f 100644 --- a/src/pages/settings/Profile/DisplayNamePage.js +++ b/src/pages/settings/Profile/DisplayNamePage.js @@ -102,7 +102,7 @@ function DisplayNamePage(props) { name="fname" label={props.translate('common.firstName')} aria-label={props.translate('common.firstName')} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} defaultValue={lodashGet(currentUserDetails, 'firstName', '')} maxLength={CONST.DISPLAY_NAME.MAX_LENGTH} spellCheck={false} @@ -115,7 +115,7 @@ function DisplayNamePage(props) { name="lname" label={props.translate('common.lastName')} aria-label={props.translate('common.lastName')} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} defaultValue={lodashGet(currentUserDetails, 'lastName', '')} maxLength={CONST.DISPLAY_NAME.MAX_LENGTH} spellCheck={false} diff --git a/src/pages/settings/Profile/PersonalDetails/AddressPage.js b/src/pages/settings/Profile/PersonalDetails/AddressPage.js index 22907aa6e5b0..31857a34253d 100644 --- a/src/pages/settings/Profile/PersonalDetails/AddressPage.js +++ b/src/pages/settings/Profile/PersonalDetails/AddressPage.js @@ -210,11 +210,11 @@ function AddressPage({privatePersonalDetails, route}) { /> - ) : ( - )} - - @@ -122,7 +122,7 @@ function CloseAccountPage(props) { autoCapitalize="none" label={props.translate('closeAccountPage.enterDefaultContact')} aria-label={props.translate('closeAccountPage.enterDefaultContact')} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} containerStyles={[styles.mt5]} autoCorrect={false} inputMode={Str.isValidEmail(userEmailOrPhone) ? CONST.INPUT_MODE.EMAIL : CONST.INPUT_MODE.TEXT} diff --git a/src/pages/settings/Wallet/AddDebitCardPage.js b/src/pages/settings/Wallet/AddDebitCardPage.js index 45893dfb5d65..1d9303ee7484 100644 --- a/src/pages/settings/Wallet/AddDebitCardPage.js +++ b/src/pages/settings/Wallet/AddDebitCardPage.js @@ -126,40 +126,40 @@ function DebitCardPage(props) { scrollContextEnabled style={[styles.mh5, styles.flexGrow1]} > - (nameOnCardRef.current = ref)} spellCheck={false} /> - - - @@ -175,11 +175,11 @@ function DebitCardPage(props) { isLimitedToUSA /> - { inputCallbackRef(el); updateMultilineInputRange(el); diff --git a/src/pages/tasks/NewTaskDetailsPage.js b/src/pages/tasks/NewTaskDetailsPage.js index 4d0040e01107..eeca276e591b 100644 --- a/src/pages/tasks/NewTaskDetailsPage.js +++ b/src/pages/tasks/NewTaskDetailsPage.js @@ -103,7 +103,7 @@ function NewTaskDetailsPage(props) { (this.welcomeMessageInputRef = el)} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} inputID="welcomeMessage" label={this.props.translate('workspace.inviteMessage.personalMessagePrompt')} accessibilityLabel={this.props.translate('workspace.inviteMessage.personalMessagePrompt')} diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js index 2174c23bdf92..e88baf9d8b9e 100644 --- a/src/pages/workspace/WorkspaceNewRoomPage.js +++ b/src/pages/workspace/WorkspaceNewRoomPage.js @@ -209,7 +209,7 @@ function WorkspaceNewRoomPage(props) { inputID="welcomeMessage" label={translate('welcomeMessagePage.welcomeMessageOptional')} accessibilityLabel={translate('welcomeMessagePage.welcomeMessageOptional')} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} autoGrowHeight maxLength={CONST.MAX_COMMENT_LENGTH} autoCapitalize="none" diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js index cc9505a4378f..02a0fcf56cd6 100644 --- a/src/pages/workspace/WorkspaceSettingsPage.js +++ b/src/pages/workspace/WorkspaceSettingsPage.js @@ -144,7 +144,7 @@ function WorkspaceSettingsPage({policy, currencyList, windowWidth, route}) { - Date: Fri, 17 Nov 2023 17:23:17 -0500 Subject: [PATCH 05/20] fix(ACCESSIBILITY_ROLE): fix role attributes being passed invalid `img button` value by reverting them to `accessibilityRole` --- src/components/Attachments/AttachmentCarousel/CarouselItem.js | 2 +- .../Attachments/AttachmentView/AttachmentViewImage/index.js | 2 +- .../AttachmentView/AttachmentViewImage/index.native.js | 3 ++- src/components/AvatarWithImagePicker.js | 2 +- .../HTMLEngineProvider/HTMLRenderers/ImageRenderer.js | 2 +- src/components/PDFView/index.js | 2 +- src/components/PDFView/index.native.js | 2 +- src/components/ReportActionItem/ReportActionItemImage.js | 2 +- src/components/RoomHeaderAvatars.js | 4 ++-- src/pages/DetailsPage.js | 2 +- src/pages/ProfilePage.js | 2 +- 11 files changed, 13 insertions(+), 12 deletions(-) diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.js b/src/components/Attachments/AttachmentCarousel/CarouselItem.js index b6cc0cbf21a4..cc9edd6fa5db 100644 --- a/src/components/Attachments/AttachmentCarousel/CarouselItem.js +++ b/src/components/Attachments/AttachmentCarousel/CarouselItem.js @@ -81,7 +81,7 @@ function CarouselItem({item, isFocused, onPress}) { {children} diff --git a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js index 22bcf259ed77..3b080e47e4d1 100755 --- a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js +++ b/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} diff --git a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js index fc443e5ea17b..8523430c537c 100755 --- a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js @@ -36,8 +36,9 @@ 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} diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index 893a02288e77..6d78c3517303 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -266,7 +266,7 @@ class AvatarWithImagePicker extends React.Component { 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} diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index 7cbdf8d69831..f5ecc106d629 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/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')} > {this.renderPDFView()} diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index b022823d215a..d5dc537fafe2 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -185,7 +185,7 @@ class PDFView extends Component { {this.renderPDFView()} diff --git a/src/components/ReportActionItem/ReportActionItemImage.js b/src/components/ReportActionItem/ReportActionItemImage.js index f0eed3ac2f02..1adc90a9c137 100644 --- a/src/components/ReportActionItem/ReportActionItemImage.js +++ b/src/components/ReportActionItem/ReportActionItemImage.js @@ -89,7 +89,7 @@ function ReportActionItemImage({thumbnail, image, enablePreviewModal, transactio const route = ROUTES.REPORT_ATTACHMENTS.getRoute(report.reportID, imageSource); Navigation.navigate(route); }} - role={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON} + accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON} accessibilityLabel={translate('accessibilityHints.viewAttachment')} > {receiptImageComponent} diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js index 0bb0f11d747c..4f7285e54003 100644 --- a/src/components/RoomHeaderAvatars.js +++ b/src/components/RoomHeaderAvatars.js @@ -41,7 +41,7 @@ function RoomHeaderAvatars(props) { Date: Fri, 17 Nov 2023 17:25:12 -0500 Subject: [PATCH 06/20] fix(ACCESSIBILITY_ROLE): reset ADJUSTABLE TO 'adjustable' --- src/CONST.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/CONST.ts b/src/CONST.ts index 35c183e9607c..ee096b4598c4 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2820,7 +2820,7 @@ const CONST = { /** * @deprecated Please stop using the accessibilityRole prop and use the role prop instead. */ - ADJUSTABLE: 'slider', + ADJUSTABLE: 'adjustable', /** * @deprecated Please stop using the accessibilityRole prop and use the role prop instead. From b72ac43d69ea0a452ba4412e8268e8784a9edfe3 Mon Sep 17 00:00:00 2001 From: Trevor Coleman Date: Fri, 17 Nov 2023 17:25:43 -0500 Subject: [PATCH 07/20] fix(ACCESSIBILITY_ROLE): set role prop to use CONST.ROLE instead of deprecatd CONST.ACCESSIBLITY_ROLE --- src/components/Badge.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx index 22c056dfdfc4..e19d080ed721 100644 --- a/src/components/Badge.tsx +++ b/src/components/Badge.tsx @@ -46,7 +46,7 @@ function Badge({success = false, error = false, pressable = false, text, environ Date: Fri, 17 Nov 2023 17:27:24 -0500 Subject: [PATCH 08/20] fix(ACCESSIBILITY_ROLE): set role prop to use CONST.ROLE instead of deprecatd CONST.ACCESSIBLITY_ROLE --- src/components/ImageView/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js index 61243eb90969..68ef653cdf0c 100644 --- a/src/components/ImageView/index.js +++ b/src/components/ImageView/index.js @@ -263,7 +263,7 @@ function ImageView({isAuthTokenRequired, url, fileName, onError}) { }} onPressIn={onContainerPressIn} onPress={onContainerPress} - role={CONST.ACCESSIBILITY_ROLE.IMAGE} + role={CONST.ROLE.IMG} accessibilityLabel={fileName} > Date: Fri, 17 Nov 2023 17:27:40 -0500 Subject: [PATCH 09/20] fix(ACCESSIBILITY_ROLE): set role prop to use CONST.ROLE instead of deprecatd CONST.ACCESSIBLITY_ROLE --- src/components/AvatarCropModal/AvatarCropModal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js index a37f228a0d0d..07823eb68407 100644 --- a/src/components/AvatarCropModal/AvatarCropModal.js +++ b/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} > Date: Fri, 17 Nov 2023 17:32:31 -0500 Subject: [PATCH 10/20] fix(ACCESSIBILITY_ROLE): set role props to use CONST.ROLE instead of deprecatd CONST.ACCESSIBLITY_ROLE --- src/CONST.ts | 4 ++-- .../BaseAnchorForAttachmentsOnly.js | 2 +- .../AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js | 4 ++-- src/components/AvatarWithDisplayName.js | 4 ++-- src/components/Banner.js | 2 +- src/components/Button/index.js | 2 +- src/components/Checkbox.js | 2 +- src/components/CollapsibleSection/index.tsx | 2 +- src/components/CurrencySymbolButton.js | 2 +- src/components/EmojiPicker/CategoryShortcutButton.js | 2 +- src/components/EmojiPicker/EmojiPickerButtonDropdown.js | 2 +- src/components/EmojiPicker/EmojiPickerMenuItem/index.js | 2 +- .../EmojiPicker/EmojiPickerMenuItem/index.native.js | 2 +- src/components/EmojiPicker/EmojiSkinToneList.js | 2 +- src/components/HeaderWithBackButton/index.js | 2 +- src/components/LHNOptionsList/OptionRowLHN.js | 2 +- .../LocationErrorMessage/BaseLocationErrorMessage.js | 2 +- src/components/MenuItem.js | 2 +- src/components/OptionRow.js | 4 ++-- src/components/ParentNavigationSubtitle.js | 2 +- src/components/PinButton.js | 2 +- src/components/RadioButton.js | 2 +- src/components/Reactions/AddReactionBubble.js | 2 +- src/components/Reactions/EmojiReactionBubble.js | 2 +- src/components/ReportActionItem/TaskPreview.js | 2 +- src/components/ReportHeaderSkeletonView.js | 2 +- src/components/SelectionList/BaseListItem.js | 2 +- src/components/SignInButtons/GoogleSignIn/index.website.js | 4 ++-- src/components/SignInButtons/IconButton.js | 2 +- src/components/SingleOptionSelector.js | 2 +- src/components/Switch.tsx | 2 +- src/components/TextLink.js | 2 +- src/components/ThreeDotsMenu/index.js | 2 +- .../VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js | 2 +- src/libs/Navigation/AppNavigator/Navigators/Overlay.js | 4 ++-- src/pages/ReportDetailsPage.js | 2 +- src/pages/home/HeaderView.js | 4 ++-- .../ReportActionCompose/AttachmentPickerWithMenuItems.js | 6 +++--- src/pages/home/report/ReportActionCompose/SendButton.js | 2 +- src/pages/home/report/ReportActionItemCreated.js | 2 +- 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/AvatarWithOptionalStatus.js | 2 +- src/pages/home/sidebar/PressableAvatarWithIndicator.js | 2 +- src/pages/home/sidebar/SidebarLinks.js | 2 +- .../sidebar/SidebarScreen/FloatingActionButtonAndPopover.js | 2 +- src/pages/home/sidebar/SignInButton.js | 2 +- src/pages/iou/ReceiptSelector/index.js | 6 +++--- src/pages/iou/ReceiptSelector/index.native.js | 6 +++--- src/pages/settings/InitialSettingsPage.js | 4 ++-- .../Contacts/ValidateCodeForm/BaseValidateCodeForm.js | 2 +- src/pages/signin/ChangeExpensifyLoginLink.js | 2 +- src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js | 4 ++-- src/pages/workspace/WorkspaceInitialPage.js | 4 ++-- src/pages/workspace/WorkspaceInviteMessagePage.js | 2 +- 56 files changed, 74 insertions(+), 74 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index ee096b4598c4..6c739336e208 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2805,7 +2805,7 @@ const CONST = { /** * @deprecated Please stop using the accessibilityRole prop and use the role prop instead. */ - IMAGEBUTTON: 'img button', + IMAGEBUTTON: 'imagebutton', /** * @deprecated Please stop using the accessibilityRole prop and use the role prop instead. @@ -2825,7 +2825,7 @@ const CONST = { /** * @deprecated Please stop using the accessibilityRole prop and use the role prop instead. */ - IMAGE: 'img', + IMAGE: 'image', }, /** * Acceptable values for the `role` attribute on react native components. diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js index 1e2d18bc4691..6161ba140726 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} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} > (linkRef = el)} style={StyleSheet.flatten([style, defaultTextStyle])} - role={CONST.ACCESSIBILITY_ROLE.LINK} + role={CONST.ROLE.LINK} hrefAttrs={{ rel, target: isEmail || !linkProps.href ? '_self' : target, diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js index de6d6b8ef6e2..bdcc2fe65941 100644 --- a/src/components/AvatarWithDisplayName.js +++ b/src/components/AvatarWithDisplayName.js @@ -110,7 +110,7 @@ function AvatarWithDisplayName(props) { showActorDetails(props.report, props.shouldEnableDetailPageNavigation)} accessibilityLabel={title} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} > {shouldShowSubscriptAvatar ? ( ReportUtils.navigateToDetailsPage(props.report)} style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]} accessibilityLabel={title} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} > {headerView} diff --git a/src/components/Banner.js b/src/components/Banner.js index 2fcb866334e0..aff4c38feb0c 100644 --- a/src/components/Banner.js +++ b/src/components/Banner.js @@ -99,7 +99,7 @@ function Banner(props) { diff --git a/src/components/Button/index.js b/src/components/Button/index.js index b9aaf8868924..241d75847aea 100644 --- a/src/components/Button/index.js +++ b/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()} diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index 4b9ce922aacb..1326bdc002de 100644 --- a/src/components/Checkbox.js +++ b/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} diff --git a/src/components/CollapsibleSection/index.tsx b/src/components/CollapsibleSection/index.tsx index 434017f2a547..2c362959f8b1 100644 --- a/src/components/CollapsibleSection/index.tsx +++ b/src/components/CollapsibleSection/index.tsx @@ -31,7 +31,7 @@ function CollapsibleSection({title, children}: CollapsibleSectionProps) { {currencySymbol} diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js index 6ced702b316c..e1e5b6276e1f 100644 --- a/src/components/EmojiPicker/CategoryShortcutButton.js +++ b/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} > {({hovered, pressed}) => ( diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem/index.js b/src/components/EmojiPicker/EmojiPickerMenuItem/index.js index 24f876841ff7..f2397f394d1f 100644 --- a/src/components/EmojiPicker/EmojiPickerMenuItem/index.js +++ b/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} > {this.props.emoji} diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.js b/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.js index 151fabf85be3..45522fa95d75 100644 --- a/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.js +++ b/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} > {this.props.emoji} diff --git a/src/components/EmojiPicker/EmojiSkinToneList.js b/src/components/EmojiPicker/EmojiSkinToneList.js index 25fc9ad0836a..69690fa882c9 100644 --- a/src/components/EmojiPicker/EmojiSkinToneList.js +++ b/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} > {currentSkinTone.code} diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js index 1371e6a36b97..400d1227d8ba 100755 --- a/src/components/HeaderWithBackButton/index.js +++ b/src/components/HeaderWithBackButton/index.js @@ -160,7 +160,7 @@ function HeaderWithBackButton({ = 2} > diff --git a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js b/src/components/LocationErrorMessage/BaseLocationErrorMessage.js index ee12a9699c3e..456775c713ec 100644 --- a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js +++ b/src/components/LocationErrorMessage/BaseLocationErrorMessage.js @@ -63,7 +63,7 @@ function BaseLocationErrorMessage({onClose, onAllowLocationLinkPress, locationEr onPress={onClose} onMouseDown={(e) => e.preventDefault()} style={[styles.touchableButtonImage]} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} accessibilityLabel={translate('common.close')} > diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 103d063f9024..2bf972d428bc 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -184,7 +184,7 @@ const MenuItem = React.forwardRef((props, ref) => { ]} disabled={props.disabled} ref={ref} - role={CONST.ACCESSIBILITY_ROLE.MENUITEM} + role={CONST.ROLE.MENUITEM} accessibilityLabel={props.title ? props.title.toString() : ''} > {({pressed}) => ( diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index e1c554dc1d37..ad79825d6e1f 100644 --- a/src/components/OptionRow.js +++ b/src/components/OptionRow.js @@ -193,7 +193,7 @@ function OptionRow(props) { props.isSelected && props.highlightSelected && styles.optionRowSelected, ]} accessibilityLabel={props.option.text} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} hoverDimmingValue={1} hoverStyle={props.hoverStyle || styles.sidebarLinkHover} needsOffscreenAlphaCompositing={lodashGet(props.option, 'icons.length', 0) >= 2} @@ -268,7 +268,7 @@ function OptionRow(props) { props.onSelectedStatePressed(props.option)} disabled={isDisabled} - role={CONST.ACCESSIBILITY_ROLE.CHECKBOX} + role={CONST.ROLE.CHECKBOX} accessibilityLabel={CONST.ACCESSIBILITY_ROLE.CHECKBOX} > diff --git a/src/components/ParentNavigationSubtitle.js b/src/components/ParentNavigationSubtitle.js index 0ce6582fe86d..8cbe54b5653e 100644 --- a/src/components/ParentNavigationSubtitle.js +++ b/src/components/ParentNavigationSubtitle.js @@ -42,7 +42,7 @@ function ParentNavigationSubtitle(props) { Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(props.parentReportID)); }} accessibilityLabel={translate('threads.parentNavigationSummary', {rootReportName, workspaceName})} - role={CONST.ACCESSIBILITY_ROLE.LINK} + role={CONST.ROLE.LINK} style={[...props.pressableStyles]} > {props.isChecked && ( diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js index 2fc03b466bbf..b4f5fcdb5527 100644 --- a/src/components/Reactions/AddReactionBubble.js +++ b/src/components/Reactions/AddReactionBubble.js @@ -99,7 +99,7 @@ function AddReactionBubble(props) { e.preventDefault(); }} accessibilityLabel={props.translate('emojiReactions.addReactionTooltip')} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} // disable dimming pressDimmingValue={1} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js index 58b66ee64719..d0fbf3bfdbd3 100644 --- a/src/components/Reactions/EmojiReactionBubble.js +++ b/src/components/Reactions/EmojiReactionBubble.js @@ -83,7 +83,7 @@ function EmojiReactionBubble(props) { // Prevent text input blur when emoji reaction is left clicked e.preventDefault(); }} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} accessibilityLabel={props.emojiCodes.join('')} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} > diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js index 4e405098a2ea..02507ec22aff 100644 --- a/src/components/ReportActionItem/TaskPreview.js +++ b/src/components/ReportActionItem/TaskPreview.js @@ -106,7 +106,7 @@ function TaskPreview(props) { onPressOut={() => ControlSelection.unblock()} onLongPress={(event) => showContextMenuForReport(event, props.contextMenuAnchor, props.chatReportID, props.action, props.checkIfContextMenuActive)} style={[styles.flexRow, styles.justifyContentBetween]} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} accessibilityLabel={props.translate('task.task')} > diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js index e0ef3f4257e3..928688103ca4 100644 --- a/src/components/ReportHeaderSkeletonView.js +++ b/src/components/ReportHeaderSkeletonView.js @@ -34,7 +34,7 @@ function ReportHeaderSkeletonView(props) { {}} style={[styles.LHNToggle]} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} accessibilityLabel={props.translate('common.back')} > diff --git a/src/components/SelectionList/BaseListItem.js b/src/components/SelectionList/BaseListItem.js index a37f2fe4ddc0..03d78ed89b75 100644 --- a/src/components/SelectionList/BaseListItem.js +++ b/src/components/SelectionList/BaseListItem.js @@ -42,7 +42,7 @@ function BaseListItem({ onPress={() => onSelectRow(item)} disabled={isDisabled} accessibilityLabel={item.text} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} hoverDimmingValue={1} hoverStyle={styles.hoveredComponentBG} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} diff --git a/src/components/SignInButtons/GoogleSignIn/index.website.js b/src/components/SignInButtons/GoogleSignIn/index.website.js index ac5018df8c15..7a909c5b1658 100644 --- a/src/components/SignInButtons/GoogleSignIn/index.website.js +++ b/src/components/SignInButtons/GoogleSignIn/index.website.js @@ -76,7 +76,7 @@ function GoogleSignIn({translate, isDesktopFlow}) {
@@ -84,7 +84,7 @@ function GoogleSignIn({translate, isDesktopFlow}) {
diff --git a/src/components/SignInButtons/IconButton.js b/src/components/SignInButtons/IconButton.js index 706ceb2edc3f..ddfde61d6a07 100644 --- a/src/components/SignInButtons/IconButton.js +++ b/src/components/SignInButtons/IconButton.js @@ -38,7 +38,7 @@ function IconButton({onPress, translate, provider}) { onSelectOption(option)} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} accessibilityState={{checked: selectedOptionKey === option.key}} aria-checked={selectedOptionKey === option.key} accessibilityLabel={option.label} diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx index 2398f531628d..5195c0040add 100644 --- a/src/components/Switch.tsx +++ b/src/components/Switch.tsx @@ -38,7 +38,7 @@ function Switch({isOn, onToggle, accessibilityLabel}: SwitchProps) { style={[styles.switchTrack, !isOn && styles.switchInactive]} onPress={() => onToggle(!isOn)} onLongPress={() => onToggle(!isOn)} - role={CONST.ACCESSIBILITY_ROLE.SWITCH} + role={CONST.ROLE.SWITCH} aria-checked={isOn} accessibilityLabel={accessibilityLabel} // disable hover dim for switch diff --git a/src/components/TextLink.js b/src/components/TextLink.js index ab59f6f8b121..a803ef951e0e 100644 --- a/src/components/TextLink.js +++ b/src/components/TextLink.js @@ -67,7 +67,7 @@ function TextLink(props) { return ( diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js index f3f55dee3253..a23b40e55159 100644 --- a/src/pages/ReportDetailsPage.js +++ b/src/pages/ReportDetailsPage.js @@ -216,7 +216,7 @@ function ReportDetailsPage(props) { {isPolicyAdmin ? ( { Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(props.report.policyID)); diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 98c20a2f75aa..ae56dab35497 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -187,7 +187,7 @@ function HeaderView(props) { style={[styles.LHNToggle]} accessibilityHint={props.translate('accessibilityHints.navigateToChatsList')} accessibilityLabel={props.translate('common.back')} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} > {shouldShowSubscript ? ( e.preventDefault()} style={styles.composerSizeButton} disabled={isBlockedFromConcierge || disabled} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} accessibilityLabel={translate('reportActionCompose.collapse')} > @@ -228,7 +228,7 @@ function AttachmentPickerWithMenuItems({ onMouseDown={(e) => e.preventDefault()} style={styles.composerSizeButton} disabled={isBlockedFromConcierge || disabled} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} accessibilityLabel={translate('reportActionCompose.expand')} > @@ -248,7 +248,7 @@ function AttachmentPickerWithMenuItems({ }} style={styles.composerSizeButton} disabled={isBlockedFromConcierge || disabled} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} accessibilityLabel={translate('reportActionCompose.addAction')} > diff --git a/src/pages/home/report/ReportActionCompose/SendButton.js b/src/pages/home/report/ReportActionCompose/SendButton.js index 60c657ca95c7..fde40998fa8c 100644 --- a/src/pages/home/report/ReportActionCompose/SendButton.js +++ b/src/pages/home/report/ReportActionCompose/SendButton.js @@ -44,7 +44,7 @@ function SendButton({isDisabled: isDisabledProp, handleSendMessage}) { isDisabledProp || pressed || isDisabled ? undefined : styles.buttonSuccess, isDisabledProp ? styles.cursorDisabled : undefined, ]} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} accessibilityLabel={translate('common.send')} > {({pressed}) => ( diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js index 4c7f14a21abc..6294b1d83574 100644 --- a/src/pages/home/report/ReportActionItemCreated.js +++ b/src/pages/home/report/ReportActionItemCreated.js @@ -75,7 +75,7 @@ function ReportActionItemCreated(props) { onPress={() => ReportUtils.navigateToDetailsPage(props.report)} style={[styles.mh5, styles.mb3, styles.alignSelfStart]} accessibilityLabel={props.translate('common.details')} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} disabled={shouldDisableDetailPage} > {getAvatar()} @@ -233,7 +233,7 @@ function ReportActionItemSingle(props) { onPress={showActorDetails} disabled={shouldDisableDetailPage} accessibilityLabel={actorHint} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} > {_.map(personArray, (fragment, index) => ( { Report.navigateToAndOpenChildReport(props.childReportID); }} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} accessibilityLabel={`${props.numberOfReplies} ${replyText}`} onSecondaryInteraction={props.onSecondaryInteraction} > diff --git a/src/pages/home/sidebar/AvatarWithOptionalStatus.js b/src/pages/home/sidebar/AvatarWithOptionalStatus.js index 4507b21a382c..20f9447f52ce 100644 --- a/src/pages/home/sidebar/AvatarWithOptionalStatus.js +++ b/src/pages/home/sidebar/AvatarWithOptionalStatus.js @@ -42,7 +42,7 @@ function AvatarWithOptionalStatus({emojiStatus, isCreateMenuOpen}) { diff --git a/src/pages/home/sidebar/PressableAvatarWithIndicator.js b/src/pages/home/sidebar/PressableAvatarWithIndicator.js index ddf89321b680..d72aef2ef824 100644 --- a/src/pages/home/sidebar/PressableAvatarWithIndicator.js +++ b/src/pages/home/sidebar/PressableAvatarWithIndicator.js @@ -52,7 +52,7 @@ function PressableAvatarWithIndicator({isCreateMenuOpen, currentUserPersonalDeta return ( diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 5e69be266342..8a9abbd0fec1 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -168,7 +168,7 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js index 739f7e3e0295..f59cd2a2b8a9 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js @@ -239,7 +239,7 @@ function FloatingActionButtonAndPopover(props) { /> { diff --git a/src/pages/home/sidebar/SignInButton.js b/src/pages/home/sidebar/SignInButton.js index c42e56551200..f820298b0a22 100644 --- a/src/pages/home/sidebar/SignInButton.js +++ b/src/pages/home/sidebar/SignInButton.js @@ -15,7 +15,7 @@ function SignInButton() { return ( diff --git a/src/pages/iou/ReceiptSelector/index.js b/src/pages/iou/ReceiptSelector/index.js index dd7c2e3a104e..e9e734ddf2f8 100644 --- a/src/pages/iou/ReceiptSelector/index.js +++ b/src/pages/iou/ReceiptSelector/index.js @@ -208,7 +208,7 @@ function ReceiptSelector({route, transactionID, iou, report}) { {({openPicker}) => ( { openPicker({ onPicked: (file) => { @@ -227,7 +227,7 @@ function ReceiptSelector({route, transactionID, iou, report}) { )} {({openPicker}) => ( { @@ -251,7 +251,7 @@ function ReceiptSelector({route, report, iou, transactionID}) { )} {props.translate('validateCodeForm.magicCodeNotReceived')} diff --git a/src/pages/signin/ChangeExpensifyLoginLink.js b/src/pages/signin/ChangeExpensifyLoginLink.js index 219085240459..0fee34f988a1 100755 --- a/src/pages/signin/ChangeExpensifyLoginLink.js +++ b/src/pages/signin/ChangeExpensifyLoginLink.js @@ -38,7 +38,7 @@ function ChangeExpensifyLoginLink(props) { diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js index f5651e45aeb8..fdec73df0c2f 100755 --- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js +++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js @@ -344,7 +344,7 @@ function BaseValidateCodeForm(props) { hoverDimmingValue={1} pressDimmingValue={0.2} disabled={isValidateCodeFormSubmitting} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} accessibilityLabel={props.isUsingRecoveryCode ? props.translate('recoveryCodeForm.use2fa') : props.translate('recoveryCodeForm.useRecoveryCode')} > {props.isUsingRecoveryCode ? props.translate('recoveryCodeForm.use2fa') : props.translate('recoveryCodeForm.useRecoveryCode')} @@ -380,7 +380,7 @@ function BaseValidateCodeForm(props) { disabled={shouldDisableResendValidateCode} hoverDimmingValue={1} pressDimmingValue={0.2} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')} > diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js index 77e831e62b63..3c73687ca813 100644 --- a/src/pages/workspace/WorkspaceInitialPage.js +++ b/src/pages/workspace/WorkspaceInitialPage.js @@ -271,7 +271,7 @@ function WorkspaceInitialPage(props) { style={[styles.pRelative, styles.avatarLarge]} onPress={singleExecution(waitForNavigate(() => openEditor(policy.id)))} accessibilityLabel={translate('workspace.common.settings')} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} > openEditor(policy.id)))} accessibilityLabel={translate('workspace.common.settings')} - role={CONST.ACCESSIBILITY_ROLE.BUTTON} + role={CONST.ROLE.BUTTON} > Date: Fri, 17 Nov 2023 17:33:39 -0500 Subject: [PATCH 11/20] fix(ACCESSIBILITY_ROLE): replace reference to deprecatd CONST.ACCESSIBLITY_ROLE with CONST.ROLE --- src/components/SelectionList/BaseSelectionList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js index 883d58ae30ee..d9854915fae4 100644 --- a/src/components/SelectionList/BaseSelectionList.js +++ b/src/components/SelectionList/BaseSelectionList.js @@ -148,7 +148,7 @@ function BaseSelectionList({ const [focusedIndex, setFocusedIndex] = useState(() => _.findIndex(flattenedSections.allOptions, (option) => option.keyForList === initiallyFocusedOptionKey)); // Disable `Enter` shortcut if the active element is a button or checkbox - const disableEnterShortcut = activeElement && [CONST.ACCESSIBILITY_ROLE.BUTTON, CONST.ACCESSIBILITY_ROLE.CHECKBOX].includes(activeElement.role); + const disableEnterShortcut = activeElement && [CONST.ROLE.BUTTON, CONST.ROLE.CHECKBOX].includes(activeElement.role); /** * Scrolls to the desired item index in the section list From 69315522d4d8d37521f550ba1abb5c4314578a89 Mon Sep 17 00:00:00 2001 From: Trevor Coleman Date: Fri, 17 Nov 2023 17:37:26 -0500 Subject: [PATCH 12/20] fix(ACCESSIBILITY_ROLE): replace accessibilityRole with role --- .../HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js index a60be614d9bc..19430836c93d 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js @@ -69,7 +69,7 @@ function MentionUserRenderer(props) { event.preventDefault(); Navigation.navigate(navigationRoute); }} - accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK} + role={CONST.ROLE.LINK} accessibilityLabel={`/${navigationRoute}`} > Date: Fri, 17 Nov 2023 17:37:35 -0500 Subject: [PATCH 13/20] fix(ACCESSIBILITY_ROLE): replace accessibilityRole with role --- src/components/MessagesRow.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MessagesRow.js b/src/components/MessagesRow.js index d9568834cbe3..e0603de05271 100644 --- a/src/components/MessagesRow.js +++ b/src/components/MessagesRow.js @@ -56,7 +56,7 @@ function MessagesRow({messages, type, onClose, containerStyles, canDismiss}) { From de4b4c0ea142478674b96875792742634cf9b246 Mon Sep 17 00:00:00 2001 From: Trevor Coleman Date: Fri, 17 Nov 2023 17:37:42 -0500 Subject: [PATCH 14/20] fix(ACCESSIBILITY_ROLE): replace accessibilityRole with role --- src/pages/home/sidebar/SidebarLinks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 8a9abbd0fec1..63ca37bb5745 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -162,7 +162,7 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority height={variables.lhnLogoHeight} /> } - accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT} + role={CONST.ROLE.PRESENTATION} shouldShowEnvironmentBadge /> From b60079b223408c19a9dc97203a419ef6b4763945 Mon Sep 17 00:00:00 2001 From: Trevor Coleman Date: Mon, 20 Nov 2023 13:34:06 -0500 Subject: [PATCH 15/20] prettier --- src/components/AmountTextInput.js | 3 ++- .../AttachmentViewImage/index.native.js | 1 - src/components/MagicCodeInput.js | 3 ++- .../ReimbursementAccount/BankAccountManualStep.js | 6 ++++-- src/pages/ReimbursementAccount/ValidationStep.js | 9 ++++++--- .../Profile/PersonalDetails/AddressPage.js | 12 ++++++++---- src/pages/settings/Wallet/AddDebitCardPage.js | 15 ++++++++++----- .../reimburse/WorkspaceRateAndUnitPage.js | 3 ++- 8 files changed, 34 insertions(+), 18 deletions(-) diff --git a/src/components/AmountTextInput.js b/src/components/AmountTextInput.js index 9a30d2a5b5ef..6183af2e1677 100644 --- a/src/components/AmountTextInput.js +++ b/src/components/AmountTextInput.js @@ -41,7 +41,8 @@ const defaultProps = { function AmountTextInput(props) { const styles = useThemeStyles(); return ( - {children} diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index 0ad0781a8ec5..88c21e031a71 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -307,7 +307,8 @@ function MagicCodeInput(props) { {/* Hide the input above the text. Cannot set opacity to 0 as it would break pasting on iOS Safari. */} - { inputRefs.current[index] = ref; // Setting attribute type to "search" to prevent Password Manager from appearing in Mobile Chrome diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js index a241a82585d8..316ef7a2649c 100644 --- a/src/pages/ReimbursementAccount/BankAccountManualStep.js +++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js @@ -98,7 +98,8 @@ function BankAccountManualStep(props) { style={[styles.exampleCheckImage, styles.mb5]} source={exampleCheckImage(preferredLocale)} /> - - {translate('validationStep.descriptionCTA')} - - - - ) : ( - )} - - - (nameOnCardRef.current = ref)} spellCheck={false} /> - - - - - Date: Mon, 27 Nov 2023 14:10:37 -0500 Subject: [PATCH 16/20] fix: remove empty checkbox.js --- src/components/Checkbox.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/components/Checkbox.js diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js deleted file mode 100644 index e69de29bb2d1..000000000000 From a4f07627194182025fabed7008f048dd05f90479 Mon Sep 17 00:00:00 2001 From: Trevor Coleman Date: Mon, 27 Nov 2023 14:18:54 -0500 Subject: [PATCH 17/20] fix: remove accessibilityLabel --- src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js index cc4fbfac4acc..c422b0bbe16d 100644 --- a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js +++ b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js @@ -180,7 +180,6 @@ class WorkspaceRateAndUnitPage extends React.Component { } > Date: Mon, 27 Nov 2023 14:24:18 -0500 Subject: [PATCH 18/20] fix: remove accessibilityLabel --- src/components/AmountTextInput.js | 1 - src/components/MagicCodeInput.js | 1 - src/pages/ReimbursementAccount/ValidationStep.js | 3 --- 3 files changed, 5 deletions(-) diff --git a/src/components/AmountTextInput.js b/src/components/AmountTextInput.js index 6183af2e1677..5efcc003d853 100644 --- a/src/components/AmountTextInput.js +++ b/src/components/AmountTextInput.js @@ -42,7 +42,6 @@ function AmountTextInput(props) { const styles = useThemeStyles(); return ( { inputRefs.current[index] = ref; // Setting attribute type to "search" to prevent Password Manager from appearing in Mobile Chrome diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index 373a3991d15c..67ee86627ac8 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -154,7 +154,6 @@ function ValidationStep({reimbursementAccount, translate, onBackButtonPress, acc Date: Mon, 27 Nov 2023 14:29:53 -0500 Subject: [PATCH 19/20] test commit --- src/components/MagicCodeInput.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index 78bdea53fcc1..b081f26b121d 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -308,6 +308,7 @@ function MagicCodeInput(props) { {/* Hide the input above the text. Cannot set opacity to 0 as it would break pasting on iOS Safari. */} { inputRefs.current[index] = ref; // Setting attribute type to "search" to prevent Password Manager from appearing in Mobile Chrome From 1214c03a8d93c07206bd27a30eec1746d0ab6f11 Mon Sep 17 00:00:00 2001 From: Trevor Coleman Date: Mon, 27 Nov 2023 14:30:41 -0500 Subject: [PATCH 20/20] revert test commit --- src/components/MagicCodeInput.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index b081f26b121d..78bdea53fcc1 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -308,7 +308,6 @@ function MagicCodeInput(props) { {/* Hide the input above the text. Cannot set opacity to 0 as it would break pasting on iOS Safari. */} { inputRefs.current[index] = ref; // Setting attribute type to "search" to prevent Password Manager from appearing in Mobile Chrome