Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Chat - Unable to deselect user using The Tab key. #47705

Merged
merged 3 commits into from
Aug 26, 2024
Merged

fix: Chat - Unable to deselect user using The Tab key. #47705

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7bbf7d2
fix: Chat - Unable to deselect user using The Tab key.
Krishna2323 Aug 20, 2024
ea07a5e
update CONST.ACCESSIBILITY_ROLE to CONST.ROLE
Krishna2323 Aug 20, 2024
4789618
remove ACCESSIBILITY_ROLE constant.
Krishna2323 Aug 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 0 additions & 63 deletions src/CONST.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3758,69 +3758,6 @@ 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',

/**
* @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: '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',

/**
* @deprecated Please stop using the accessibilityRole prop and use the role prop instead.
*/
TEXTBOX: 'textbox',
},
/**
* Acceptable values for the `role` attribute on react native components.
*
Expand Down
2 changes: 1 addition & 1 deletion src/components/Attachments/AttachmentCarousel/CarouselItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ function CarouselItem({item, onPress, isFocused, isModalHovered}: CarouselItemPr
<PressableWithoutFeedback
style={[styles.attachmentRevealButtonContainer]}
onPress={onPress}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
accessibilityRole={CONST.ROLE.BUTTON}
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
accessibilityLabel={item.file?.name || translate('attachmentView.unknownFilename')}
>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Attachments/AttachmentView/AttachmentViewImage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ function AttachmentViewImage({url, file, isAuthTokenRequired, loadComplete, onPr
onPress={onPress}
disabled={loadComplete}
style={[styles.flex1, styles.flexRow, styles.alignSelfStretch]}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
accessibilityRole={CONST.ROLE.BUTTON}
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
accessibilityLabel={file?.name || translate('attachmentView.unknownFilename')}
>
Expand Down
2 changes: 1 addition & 1 deletion src/components/AvatarWithImagePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -368,7 +368,7 @@ function AvatarWithImagePicker({
>
<PressableWithoutFeedback
onPress={() => onPressAvatar(openPicker)}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
accessibilityRole={CONST.ROLE.BUTTON}
accessibilityLabel={translate('avatarWithImagePicker.editImage')}
disabled={isAvatarCropModalOpen || (disabled && !enablePreview)}
disabledStyle={disabledStyle}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Button/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,13 +137,13 @@ type ButtonProps = Partial<ChildrenProps> & {

type KeyboardShortcutComponentProps = Pick<ButtonProps, 'isDisabled' | 'isLoading' | 'onPress' | 'pressOnEnter' | 'allowBubble' | 'enterKeyEventListenerPriority'>;

const accessibilityRoles: string[] = Object.values(CONST.ACCESSIBILITY_ROLE);
const accessibilityRoles: string[] = Object.values(CONST.ROLE);

function KeyboardShortcutComponent({isDisabled = false, isLoading = false, onPress = () => {}, pressOnEnter, allowBubble, enterKeyEventListenerPriority}: KeyboardShortcutComponentProps) {
const isFocused = useIsFocused();
const activeElementRole = useActiveElementRole();

const shouldDisableEnterShortcut = useMemo(() => accessibilityRoles.includes(activeElementRole ?? '') && activeElementRole !== CONST.ACCESSIBILITY_ROLE.TEXT, [activeElementRole]);
const shouldDisableEnterShortcut = useMemo(() => accessibilityRoles.includes(activeElementRole ?? '') && activeElementRole !== CONST.ROLE.PRESENTATION, [activeElementRole]);

const keyboardShortcutCallback = useCallback(
(event?: GestureResponderEvent | KeyboardEvent) => {
Expand Down
2 changes: 1 addition & 1 deletion src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ function ImageRenderer({tnode}: ImageRendererProps) {
showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs))
}
shouldUseHapticsOnLongPress
accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
accessibilityRole={CONST.ROLE.BUTTON}
accessibilityLabel={translate('accessibilityHints.viewAttachment')}
>
{thumbnailImageComponent}
Expand Down
2 changes: 1 addition & 1 deletion src/components/PDFView/index.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused
onPress={onPress}
fullDisabled={successToLoadPDF}
style={[themeStyles.flex1, themeStyles.alignSelfStretch, !failedToLoadPDF && themeStyles.flexRow]}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
accessibilityRole={CONST.ROLE.BUTTON}
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
accessibilityLabel={fileName || translate('attachmentView.unknownFilename')}
>
Expand Down
2 changes: 1 addition & 1 deletion src/components/PDFView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ function PDFView({onToggleKeyboard, fileName, onPress, isFocused, sourceURL, max
<PressableWithoutFeedback
onPress={onPress}
style={[styles.flex1, styles.flexRow, styles.alignSelfStretch]}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
accessibilityRole={CONST.ROLE.BUTTON}
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
accessibilityLabel={fileName || translate('attachmentView.unknownFilename')}
>
Expand Down
4 changes: 2 additions & 2 deletions src/components/ReferralProgramCTA.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ function ReferralProgramCTA({referralContentType, style, onDismiss}: ReferralPro
}}
style={[styles.br2, styles.highlightBG, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, {gap: 10, padding: 10}, styles.pl5, style]}
accessibilityLabel="referral"
role={CONST.ACCESSIBILITY_ROLE.BUTTON}
role={CONST.ROLE.BUTTON}
>
<Text>
{translate(`referralProgram.${referralContentType}.buttonText1`)}
Expand All @@ -72,7 +72,7 @@ function ReferralProgramCTA({referralContentType, style, onDismiss}: ReferralPro
e.preventDefault();
}}
style={[styles.touchableButtonImage]}
role={CONST.ACCESSIBILITY_ROLE.BUTTON}
role={CONST.ROLE.BUTTON}
accessibilityLabel={translate('common.close')}
>
<Icon
Expand Down
4 changes: 2 additions & 2 deletions src/components/RoomHeaderAvatars.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function RoomHeaderAvatars({icons, reportID}: RoomHeaderAvatarsProps) {
<PressableWithoutFocus
style={styles.noOutline}
onPress={() => navigateToAvatarPage(icons[0])}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
accessibilityRole={CONST.ROLE.BUTTON}
accessibilityLabel={icons[0].name ?? ''}
disabled={icons[0].source === Expensicons.FallbackAvatar}
>
Expand Down Expand Up @@ -77,7 +77,7 @@ function RoomHeaderAvatars({icons, reportID}: RoomHeaderAvatarsProps) {
<PressableWithoutFocus
style={[styles.mln4, StyleUtils.getAvatarBorderRadius(CONST.AVATAR_SIZE.LARGE_BORDERED, icon.type)]}
onPress={() => navigateToAvatarPage(icon)}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
accessibilityRole={CONST.ROLE.BUTTON}
accessibilityLabel={icon.name ?? ''}
disabled={icon.source === Expensicons.FallbackAvatar}
>
Expand Down
2 changes: 1 addition & 1 deletion src/components/TextLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ function TextLink({href, onPress, children, style, onMouseDown = (event) => even
return (
<Text
style={[styles.link, style]}
role={CONST.ACCESSIBILITY_ROLE.LINK}
role={CONST.ROLE.LINK}
href={href}
onPress={openLinkOnTap}
onKeyDown={openLinkOnEnterKey}
Expand Down
2 changes: 1 addition & 1 deletion src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel}: Video
<PressableWithoutFeedback
style={[styles.videoThumbnailContainer]}
accessibilityLabel={accessibilityLabel}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
accessibilityRole={CONST.ROLE.BUTTON}
onPress={onPress}
onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
onPressOut={() => ControlSelection.unblock()}
Expand Down
4 changes: 2 additions & 2 deletions src/pages/NewChatPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,8 +255,8 @@ function NewChatPage({isGroupChat}: NewChatPageProps) {
<PressableWithFeedback
onPress={() => toggleOption(item)}
disabled={item.isDisabled}
role={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
accessibilityLabel={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
role={CONST.ROLE.BUTTON}
accessibilityLabel={CONST.ROLE.BUTTON}
style={[styles.flexRow, styles.alignItemsCenter, styles.ml3]}
>
<SelectCircle isChecked={item.isSelected} />
Expand Down
2 changes: 1 addition & 1 deletion src/pages/ProfilePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ function ProfilePage({route}: ProfilePageProps) {
style={[styles.noOutline, styles.mb4]}
onPress={() => Navigation.navigate(ROUTES.PROFILE_AVATAR.getRoute(String(accountID)))}
accessibilityLabel={translate('common.profile')}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
accessibilityRole={CONST.ROLE.BUTTON}
disabled={!hasAvatar}
>
<OfflineWithFeedback pendingAction={details?.pendingFields?.avatar}>
Expand Down
6 changes: 3 additions & 3 deletions src/pages/iou/request/step/IOURequestStepScan/index.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -552,7 +552,7 @@ function IOURequestStepScan({
<AttachmentPicker>
{({openPicker}) => (
<PressableWithFeedback
role={CONST.ACCESSIBILITY_ROLE.BUTTON}
role={CONST.ROLE.BUTTON}
accessibilityLabel={translate('receipt.gallery')}
style={[styles.alignItemsStart]}
onPress={() => {
Expand All @@ -571,7 +571,7 @@ function IOURequestStepScan({
)}
</AttachmentPicker>
<PressableWithFeedback
role={CONST.ACCESSIBILITY_ROLE.BUTTON}
role={CONST.ROLE.BUTTON}
accessibilityLabel={translate('receipt.shutter')}
style={[styles.alignItemsCenter]}
onPress={capturePhoto}
Expand All @@ -585,7 +585,7 @@ function IOURequestStepScan({
</PressableWithFeedback>
{hasFlash && (
<PressableWithFeedback
role={CONST.ACCESSIBILITY_ROLE.BUTTON}
role={CONST.ROLE.BUTTON}
accessibilityLabel={translate('receipt.flash')}
style={[styles.alignItemsEnd]}
disabled={cameraPermissionStatus !== RESULTS.GRANTED}
Expand Down
6 changes: 3 additions & 3 deletions src/pages/iou/request/step/IOURequestStepScan/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -602,7 +602,7 @@ function IOURequestStepScan({
{({openPicker}) => (
<PressableWithFeedback
accessibilityLabel={translate('receipt.chooseFile')}
role={CONST.ACCESSIBILITY_ROLE.BUTTON}
role={CONST.ROLE.BUTTON}
onPress={() => {
openPicker({
onPicked: setReceiptAndNavigate,
Expand All @@ -619,7 +619,7 @@ function IOURequestStepScan({
)}
</AttachmentPicker>
<PressableWithFeedback
role={CONST.ACCESSIBILITY_ROLE.BUTTON}
role={CONST.ROLE.BUTTON}
accessibilityLabel={translate('receipt.shutter')}
style={[styles.alignItemsCenter]}
onPress={capturePhoto}
Expand All @@ -630,7 +630,7 @@ function IOURequestStepScan({
/>
</PressableWithFeedback>
<PressableWithFeedback
role={CONST.ACCESSIBILITY_ROLE.BUTTON}
role={CONST.ROLE.BUTTON}
accessibilityLabel={translate('receipt.flash')}
style={[styles.alignItemsEnd, !isTorchAvailable && styles.opacity0]}
onPress={toggleFlashlight}
Expand Down
Loading