Revert "Fix: Keyboard Navigation: Paid expense details: The content is focused in a confusing order"

src/CONST/index.ts

@@ -8614,8 +8614,6 @@ const CONST = {
             ROTATE_BUTTON: 'Header-RotateButton',
             CLOSE_BUTTON: 'Header-CloseButton',
             MORE_BUTTON: 'Header-MoreButton',
-            PREVIOUS_BUTTON: 'Header-PreviousButton',
-            NEXT_BUTTON: 'Header-NextButton',
         },
         TOP_BAR: {
             CANCEL_BUTTON: 'TopBar-CancelButton',

src/components/FlatList/FlatListWithScrollKey/types.ts

@@ -1,8 +1,7 @@
 import type {ForwardedRef} from 'react';
-import type {ListRenderItem, FlatList as RNFlatList} from 'react-native';
-import type {CustomFlatListProps} from '@components/FlatList/FlatList/types';
+import type {FlatListProps, ListRenderItem, FlatList as RNFlatList} from 'react-native';
 
-type BaseFlatListWithScrollKeyProps<T> = Omit<CustomFlatListProps<T>, 'data' | 'initialScrollIndex' | 'onContentSizeChange'> & {
+type BaseFlatListWithScrollKeyProps<T> = Omit<FlatListProps<T>, 'data' | 'initialScrollIndex' | 'onContentSizeChange'> & {
     data: T[];
     initialScrollKey?: string | null | undefined;
     keyExtractor: (item: T, index: number) => string;
@@ -12,6 +11,6 @@ type BaseFlatListWithScrollKeyProps<T> = Omit<CustomFlatListProps<T>, 'data' | '
     ref: ForwardedRef<RNFlatList>;
 };
 
-type FlatListWithScrollKeyProps<T> = Omit<BaseFlatListWithScrollKeyProps<T>, 'onContentSizeChange'> & Pick<CustomFlatListProps<T>, 'onContentSizeChange'>;
+type FlatListWithScrollKeyProps<T> = Omit<BaseFlatListWithScrollKeyProps<T>, 'onContentSizeChange'> & Pick<FlatListProps<T>, 'onContentSizeChange'>;
 
 export type {FlatListWithScrollKeyProps, BaseFlatListWithScrollKeyProps};

src/components/PrevNextButtons.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {View} from 'react-native';
 import type {GestureResponderEvent} from 'react-native';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
-import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
@@ -28,18 +27,17 @@ function PrevNextButtons({isPrevButtonDisabled, isNextButtonDisabled, onNext, on
     const icons = useMemoizedLazyExpensifyIcons(['ArrowRight', 'BackArrow']);
     const styles = useThemeStyles();
     const theme = useTheme();
-    const {translate} = useLocalize();
 
     return (
         <View style={styles.flexRow}>
             <PressableWithFeedback
                 accessible
                 accessibilityRole={CONST.ROLE.BUTTON}
-                accessibilityLabel={translate('common.previous')}
+                accessibilityLabel={CONST.ROLE.BUTTON}
                 disabled={isPrevButtonDisabled}
-                sentryLabel={CONST.SENTRY_LABEL.HEADER.PREVIOUS_BUTTON}
                 style={[styles.h7, styles.mr1, styles.alignItemsCenter, styles.justifyContentCenter]}
                 onPress={onPrevious}
+                sentryLabel={CONST.SENTRY_LABEL.PREV_NEXT_BUTTONS.PREV_BUTTON}
             >
                 <View style={[styles.reportActionContextMenuMiniButton, {backgroundColor: theme.borderLighter}, isPrevButtonDisabled && styles.buttonOpacityDisabled]}>
                     <Icon
@@ -53,11 +51,11 @@ function PrevNextButtons({isPrevButtonDisabled, isNextButtonDisabled, onNext, on
             <PressableWithFeedback
                 accessible
                 accessibilityRole={CONST.ROLE.BUTTON}
-                accessibilityLabel={translate('common.next')}
+                accessibilityLabel={CONST.ROLE.BUTTON}
                 disabled={isNextButtonDisabled}
-                sentryLabel={CONST.SENTRY_LABEL.HEADER.NEXT_BUTTON}
                 style={[styles.h7, styles.alignItemsCenter, styles.justifyContentCenter]}
                 onPress={onNext}
+                sentryLabel={CONST.SENTRY_LABEL.PREV_NEXT_BUTTONS.NEXT_BUTTON}
             >
                 <View style={[styles.reportActionContextMenuMiniButton, {backgroundColor: theme.borderLighter}, isNextButtonDisabled && styles.buttonOpacityDisabled]}>
                     <Icon

src/hooks/useReportScrollManager/index.native.ts

@@ -1,46 +1,39 @@
-import {useCallback, useContext} from 'react';
+import {useContext} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import type {ScrollView} from 'react-native';
 import {ActionListContext} from '@pages/inbox/ReportScreenContext';
 import type ReportScrollManagerData from './types';
 
-function useReportScrollManager(isInverted = true): ReportScrollManagerData {
-    const {flatListRef} = useContext(ActionListContext);
+function useReportScrollManager(): ReportScrollManagerData {
+    const {flatListRef, scrollPositionRef} = useContext(ActionListContext);
 
     /**
      * Scroll to the provided index.
      */
-    const scrollToIndex = useCallback(
-        (index: number) => {
-            if (!flatListRef?.current) {
-                return;
-            }
-
-            flatListRef.current.scrollToIndex({index});
-        },
-        [flatListRef],
-    );
-
-    /**
-     * Scroll to the visual bottom of the list.
-     */
-    const scrollToBottom = useCallback(() => {
+    const scrollToIndex = (index: number) => {
         if (!flatListRef?.current) {
             return;
         }
+        flatListRef.current.scrollToIndex({index});
+    };
 
-        if (isInverted) {
-            flatListRef.current.scrollToOffset({animated: false, offset: 0});
+    /**
+     * Scroll to the bottom of the inverted FlatList.
+     * When FlatList is inverted it's "bottom" is really it's top
+     */
+    const scrollToBottom = () => {
+        if (!flatListRef?.current) {
             return;
         }
 
-        flatListRef.current.scrollToEnd({animated: false});
-    }, [flatListRef, isInverted]);
+        scrollPositionRef.current = {offset: 0};
+        flatListRef.current?.scrollToOffset({animated: false, offset: 0});
+    };
 
     /**
      * Scroll to the end of the FlatList.
      */
-    const scrollToEnd = useCallback(() => {
+    const scrollToEnd = () => {
         if (!flatListRef?.current) {
             return;
         }
@@ -53,18 +46,14 @@ function useReportScrollManager(isInverted = true): ReportScrollManagerData {
         }
 
         flatListRef.current.scrollToEnd({animated: false});
-    }, [flatListRef]);
-
-    const scrollToOffset = useCallback(
-        (offset: number) => {
-            if (!flatListRef?.current) {
-                return;
-            }
+    };
 
-            flatListRef.current.scrollToOffset({offset, animated: false});
-        },
-        [flatListRef],
-    );
+    const scrollToOffset = (offset: number) => {
+        if (!flatListRef?.current) {
+            return;
+        }
+        flatListRef.current.scrollToOffset({offset, animated: false});
+    };
 
     return {ref: flatListRef, scrollToIndex, scrollToBottom, scrollToEnd, scrollToOffset};
 }

src/hooks/useReportScrollManager/index.ts

@@ -1,8 +1,8 @@
-import {useCallback, useContext} from 'react';
+import {useContext} from 'react';
 import {ActionListContext} from '@pages/inbox/ReportScreenContext';
 import type ReportScrollManagerData from './types';
 
-function useReportScrollManager(isInverted = true): ReportScrollManagerData {
+function useReportScrollManager(): ReportScrollManagerData {
     const {flatListRef} = useContext(ActionListContext);
 
     /**
@@ -17,20 +17,16 @@ function useReportScrollManager(isInverted = true): ReportScrollManagerData {
     };
 
     /**
-     * Scroll to the visual bottom of the list.
+     * Scroll to the bottom of the inverted FlatList.
+     * When FlatList is inverted it's "bottom" is really it's top
      */
-    const scrollToBottom = useCallback(() => {
+    const scrollToBottom = () => {
         if (!flatListRef?.current) {
             return;
         }
 
-        if (isInverted) {
-            flatListRef.current.scrollToOffset({animated: false, offset: 0});
-            return;
-        }
-
-        flatListRef.current.scrollToEnd({animated: false});
-    }, [flatListRef, isInverted]);
+        flatListRef.current.scrollToOffset({animated: false, offset: 0});
+    };
 
     /**
      * Scroll to the end of the FlatList.

src/pages/inbox/report/PureReportActionItem.tsx

@@ -553,7 +553,7 @@ function PureReportActionItem({
     const [amountOwed] = useOnyx(ONYXKEYS.NVP_PRIVATE_AMOUNT_OWED);
     const [ownerBillingGraceEndPeriod] = useOnyx(ONYXKEYS.NVP_PRIVATE_OWNER_BILLING_GRACE_PERIOD_END);
     const {transitionActionSheetState} = ActionSheetAwareScrollView.useActionSheetAwareScrollViewActions();
-    const {translate, formatPhoneNumber, localeCompare, formatTravelDate, getLocalDateFromDatetime} = useLocalize();
+    const {translate, formatPhoneNumber, localeCompare, formatTravelDate, getLocalDateFromDatetime, datetimeToCalendarTime} = useLocalize();
     const {showConfirmModal} = useConfirmModal();
     const personalDetail = useCurrentUserPersonalDetails();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
@@ -2053,6 +2053,12 @@ function PureReportActionItem({
         );
     };
 
+    // Calculating accessibilityLabel for chat message with sender, date and time and the message content.
+    const displayName = getDisplayNameOrDefault(personalDetails?.[action.actorAccountID ?? CONST.DEFAULT_NUMBER_ID]);
+    const formattedTimestamp = datetimeToCalendarTime(action.created, false);
+    const plainMessage = getReportActionText(action);
+    const accessibilityLabel = `${displayName}, ${formattedTimestamp}, ${plainMessage}`;
+
     return (
         <View>
             {shouldShowCreatedAction && createdActionContent}
@@ -2073,7 +2079,8 @@ function PureReportActionItem({
                 onSecondaryInteraction={showPopover}
                 preventDefaultContextMenu={draftMessage === undefined && !hasErrors}
                 withoutFocusOnSecondaryInteraction
-                accessibilityLabel={translate('accessibilityHints.chatMessage')}
+                accessibilityLabel={accessibilityLabel}
+                accessibilityHint={translate('accessibilityHints.chatMessage')}
                 accessibilityRole={CONST.ROLE.BUTTON}
                 sentryLabel={CONST.SENTRY_LABEL.REPORT.PURE_REPORT_ACTION_ITEM}
             >