Skip to content

Commit 84815b8

Browse files
lakchotelakchote
authored
Merge pull request Expensify#80122 from annaweber830/fix-76923
Fix: Keyboard Navigation: Paid expense details: The content is focused in a confusing order
2 parents 3fdf0b8 + 3fa39cd commit 84815b8

8 files changed

Lines changed: 169 additions & 136 deletions

File tree

‎src/CONST/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8614,6 +8614,8 @@ const CONST = {
86148614
ROTATE_BUTTON: 'Header-RotateButton',
86158615
CLOSE_BUTTON: 'Header-CloseButton',
86168616
MORE_BUTTON: 'Header-MoreButton',
8617+
PREVIOUS_BUTTON: 'Header-PreviousButton',
8618+
NEXT_BUTTON: 'Header-NextButton',
86178619
},
86188620
TOP_BAR: {
86198621
CANCEL_BUTTON: 'TopBar-CancelButton',

‎src/components/FlatList/FlatListWithScrollKey/types.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import type {ForwardedRef} from 'react';
2-
import type {FlatListProps, ListRenderItem, FlatList as RNFlatList} from 'react-native';
2+
import type {ListRenderItem, FlatList as RNFlatList} from 'react-native';
3+
import type {CustomFlatListProps} from '@components/FlatList/FlatList/types';
34

4-
type BaseFlatListWithScrollKeyProps<T> = Omit<FlatListProps<T>, 'data' | 'initialScrollIndex' | 'onContentSizeChange'> & {
5+
type BaseFlatListWithScrollKeyProps<T> = Omit<CustomFlatListProps<T>, 'data' | 'initialScrollIndex' | 'onContentSizeChange'> & {
56
data: T[];
67
initialScrollKey?: string | null | undefined;
78
keyExtractor: (item: T, index: number) => string;
@@ -11,6 +12,6 @@ type BaseFlatListWithScrollKeyProps<T> = Omit<FlatListProps<T>, 'data' | 'initia
1112
ref: ForwardedRef<RNFlatList>;
1213
};
1314

14-
type FlatListWithScrollKeyProps<T> = Omit<BaseFlatListWithScrollKeyProps<T>, 'onContentSizeChange'> & Pick<FlatListProps<T>, 'onContentSizeChange'>;
15+
type FlatListWithScrollKeyProps<T> = Omit<BaseFlatListWithScrollKeyProps<T>, 'onContentSizeChange'> & Pick<CustomFlatListProps<T>, 'onContentSizeChange'>;
1516

1617
export type {FlatListWithScrollKeyProps, BaseFlatListWithScrollKeyProps};

‎src/components/PrevNextButtons.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import {View} from 'react-native';
33
import type {GestureResponderEvent} from 'react-native';
44
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
5+
import useLocalize from '@hooks/useLocalize';
56
import useTheme from '@hooks/useTheme';
67
import useThemeStyles from '@hooks/useThemeStyles';
78
import variables from '@styles/variables';
@@ -27,17 +28,18 @@ function PrevNextButtons({isPrevButtonDisabled, isNextButtonDisabled, onNext, on
2728
const icons = useMemoizedLazyExpensifyIcons(['ArrowRight', 'BackArrow']);
2829
const styles = useThemeStyles();
2930
const theme = useTheme();
31+
const {translate} = useLocalize();
3032

3133
return (
3234
<View style={styles.flexRow}>
3335
<PressableWithFeedback
3436
accessible
3537
accessibilityRole={CONST.ROLE.BUTTON}
36-
accessibilityLabel={CONST.ROLE.BUTTON}
38+
accessibilityLabel={translate('common.previous')}
3739
disabled={isPrevButtonDisabled}
40+
sentryLabel={CONST.SENTRY_LABEL.HEADER.PREVIOUS_BUTTON}
3841
style={[styles.h7, styles.mr1, styles.alignItemsCenter, styles.justifyContentCenter]}
3942
onPress={onPrevious}
40-
sentryLabel={CONST.SENTRY_LABEL.PREV_NEXT_BUTTONS.PREV_BUTTON}
4143
>
4244
<View style={[styles.reportActionContextMenuMiniButton, {backgroundColor: theme.borderLighter}, isPrevButtonDisabled && styles.buttonOpacityDisabled]}>
4345
<Icon
@@ -51,11 +53,11 @@ function PrevNextButtons({isPrevButtonDisabled, isNextButtonDisabled, onNext, on
5153
<PressableWithFeedback
5254
accessible
5355
accessibilityRole={CONST.ROLE.BUTTON}
54-
accessibilityLabel={CONST.ROLE.BUTTON}
56+
accessibilityLabel={translate('common.next')}
5557
disabled={isNextButtonDisabled}
58+
sentryLabel={CONST.SENTRY_LABEL.HEADER.NEXT_BUTTON}
5659
style={[styles.h7, styles.alignItemsCenter, styles.justifyContentCenter]}
5760
onPress={onNext}
58-
sentryLabel={CONST.SENTRY_LABEL.PREV_NEXT_BUTTONS.NEXT_BUTTON}
5961
>
6062
<View style={[styles.reportActionContextMenuMiniButton, {backgroundColor: theme.borderLighter}, isNextButtonDisabled && styles.buttonOpacityDisabled]}>
6163
<Icon

‎src/hooks/useReportScrollManager/index.native.ts‎

Lines changed: 34 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,46 @@
1-
import {useContext} from 'react';
1+
import {useCallback, useContext} from 'react';
22
// eslint-disable-next-line no-restricted-imports
33
import type {ScrollView} from 'react-native';
44
import {ActionListContext} from '@pages/inbox/ReportScreenContext';
55
import type ReportScrollManagerData from './types';
66

7-
function useReportScrollManager(): ReportScrollManagerData {
8-
const {flatListRef, scrollPositionRef} = useContext(ActionListContext);
7+
function useReportScrollManager(isInverted = true): ReportScrollManagerData {
8+
const {flatListRef} = useContext(ActionListContext);
99

1010
/**
1111
* Scroll to the provided index.
1212
*/
13-
const scrollToIndex = (index: number) => {
14-
if (!flatListRef?.current) {
15-
return;
16-
}
17-
flatListRef.current.scrollToIndex({index});
18-
};
13+
const scrollToIndex = useCallback(
14+
(index: number) => {
15+
if (!flatListRef?.current) {
16+
return;
17+
}
18+
19+
flatListRef.current.scrollToIndex({index});
20+
},
21+
[flatListRef],
22+
);
1923

2024
/**
21-
* Scroll to the bottom of the inverted FlatList.
22-
* When FlatList is inverted it's "bottom" is really it's top
25+
* Scroll to the visual bottom of the list.
2326
*/
24-
const scrollToBottom = () => {
27+
const scrollToBottom = useCallback(() => {
2528
if (!flatListRef?.current) {
2629
return;
2730
}
2831

29-
scrollPositionRef.current = {offset: 0};
30-
flatListRef.current?.scrollToOffset({animated: false, offset: 0});
31-
};
32+
if (isInverted) {
33+
flatListRef.current.scrollToOffset({animated: false, offset: 0});
34+
return;
35+
}
36+
37+
flatListRef.current.scrollToEnd({animated: false});
38+
}, [flatListRef, isInverted]);
3239

3340
/**
3441
* Scroll to the end of the FlatList.
3542
*/
36-
const scrollToEnd = () => {
43+
const scrollToEnd = useCallback(() => {
3744
if (!flatListRef?.current) {
3845
return;
3946
}
@@ -46,14 +53,18 @@ function useReportScrollManager(): ReportScrollManagerData {
4653
}
4754

4855
flatListRef.current.scrollToEnd({animated: false});
49-
};
56+
}, [flatListRef]);
5057

51-
const scrollToOffset = (offset: number) => {
52-
if (!flatListRef?.current) {
53-
return;
54-
}
55-
flatListRef.current.scrollToOffset({offset, animated: false});
56-
};
58+
const scrollToOffset = useCallback(
59+
(offset: number) => {
60+
if (!flatListRef?.current) {
61+
return;
62+
}
63+
64+
flatListRef.current.scrollToOffset({offset, animated: false});
65+
},
66+
[flatListRef],
67+
);
5768

5869
return {ref: flatListRef, scrollToIndex, scrollToBottom, scrollToEnd, scrollToOffset};
5970
}

‎src/hooks/useReportScrollManager/index.ts‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import {useContext} from 'react';
1+
import {useCallback, useContext} from 'react';
22
import {ActionListContext} from '@pages/inbox/ReportScreenContext';
33
import type ReportScrollManagerData from './types';
44

5-
function useReportScrollManager(): ReportScrollManagerData {
5+
function useReportScrollManager(isInverted = true): ReportScrollManagerData {
66
const {flatListRef} = useContext(ActionListContext);
77

88
/**
@@ -17,16 +17,20 @@ function useReportScrollManager(): ReportScrollManagerData {
1717
};
1818

1919
/**
20-
* Scroll to the bottom of the inverted FlatList.
21-
* When FlatList is inverted it's "bottom" is really it's top
20+
* Scroll to the visual bottom of the list.
2221
*/
23-
const scrollToBottom = () => {
22+
const scrollToBottom = useCallback(() => {
2423
if (!flatListRef?.current) {
2524
return;
2625
}
2726

28-
flatListRef.current.scrollToOffset({animated: false, offset: 0});
29-
};
27+
if (isInverted) {
28+
flatListRef.current.scrollToOffset({animated: false, offset: 0});
29+
return;
30+
}
31+
32+
flatListRef.current.scrollToEnd({animated: false});
33+
}, [flatListRef, isInverted]);
3034

3135
/**
3236
* Scroll to the end of the FlatList.

‎src/pages/inbox/report/PureReportActionItem.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -549,7 +549,7 @@ function PureReportActionItem({
549549
const [amountOwed] = useOnyx(ONYXKEYS.NVP_PRIVATE_AMOUNT_OWED);
550550
const [ownerBillingGraceEndPeriod] = useOnyx(ONYXKEYS.NVP_PRIVATE_OWNER_BILLING_GRACE_PERIOD_END);
551551
const {transitionActionSheetState} = ActionSheetAwareScrollView.useActionSheetAwareScrollViewActions();
552-
const {translate, formatPhoneNumber, localeCompare, formatTravelDate, getLocalDateFromDatetime, datetimeToCalendarTime} = useLocalize();
552+
const {translate, formatPhoneNumber, localeCompare, formatTravelDate, getLocalDateFromDatetime} = useLocalize();
553553
const {showConfirmModal} = useConfirmModal();
554554
const personalDetail = useCurrentUserPersonalDetails();
555555
const {shouldUseNarrowLayout} = useResponsiveLayout();
@@ -2048,12 +2048,6 @@ function PureReportActionItem({
20482048
);
20492049
};
20502050

2051-
// Calculating accessibilityLabel for chat message with sender, date and time and the message content.
2052-
const displayName = getDisplayNameOrDefault(personalDetails?.[action.actorAccountID ?? CONST.DEFAULT_NUMBER_ID]);
2053-
const formattedTimestamp = datetimeToCalendarTime(action.created, false);
2054-
const plainMessage = getReportActionText(action);
2055-
const accessibilityLabel = `${displayName}, ${formattedTimestamp}, ${plainMessage}`;
2056-
20572051
return (
20582052
<View>
20592053
{shouldShowCreatedAction && createdActionContent}
@@ -2074,8 +2068,7 @@ function PureReportActionItem({
20742068
onSecondaryInteraction={showPopover}
20752069
preventDefaultContextMenu={draftMessage === undefined && !hasErrors}
20762070
withoutFocusOnSecondaryInteraction
2077-
accessibilityLabel={accessibilityLabel}
2078-
accessibilityHint={translate('accessibilityHints.chatMessage')}
2071+
accessibilityLabel={translate('accessibilityHints.chatMessage')}
20792072
accessibilityRole={CONST.ROLE.BUTTON}
20802073
sentryLabel={CONST.SENTRY_LABEL.REPORT.PURE_REPORT_ACTION_ITEM}
20812074
>

0 commit comments

Comments
 (0)