Keyboard Accessibility Issue: “To:” Field Not Activatable via Keyboard on Confirm Details Screen.

src/components/MoneyRequestConfirmationList.tsx

@@ -874,6 +874,8 @@
         ],
     );
 
+    const canEditParticipant = isFromGlobalCreateAndCanEditParticipant && !isTestReceipt && (!isRestrictedToPreferredPolicy || isTypeInvoice);
+
     const sections = useMemo(() => {
         const options: Array<Section<MoneyRequestConfirmationListItem>> = [];
         if (isTypeSplit) {
@@ -895,8 +897,8 @@
                 ...participant,
                 isSelected: false,
                 keyForList: `${participant.keyForList ?? participant.accountID ?? participant.reportID}`,
-                isInteractive: isFromGlobalCreateAndCanEditParticipant && !isTestReceipt && (!isRestrictedToPreferredPolicy || isTypeInvoice),
-                shouldShowRightCaret: isFromGlobalCreateAndCanEditParticipant && !isTestReceipt && (!isRestrictedToPreferredPolicy || isTypeInvoice),
+                isInteractive: canEditParticipant,
+                shouldShowRightCaret: canEditParticipant,
             }));
 
             options.push({
@@ -907,19 +909,7 @@
         }
 
         return options;
-    }, [
-        isTypeSplit,
-        translate,
-        payeePersonalDetails,
-        getSplitSectionHeader,
-        splitParticipants,
-        selectedParticipants,
-        isFromGlobalCreateAndCanEditParticipant,
-        isTestReceipt,
-        isRestrictedToPreferredPolicy,
-        isTypeInvoice,
-        shouldHideToSection,
-    ]);
+    }, [isTypeSplit, translate, payeePersonalDetails, getSplitSectionHeader, splitParticipants, selectedParticipants, canEditParticipant, shouldHideToSection]);
 
     useEffect(() => {
         if (!isDistanceRequest || (isMovingTransactionFromTrackExpense && !isPolicyExpenseChat) || !transactionID || isReadOnly) {
@@ -1007,7 +997,7 @@
      * Navigate to the participant step
      */
     const navigateToParticipantPage = () => {
-        if (!isFromGlobalCreateAndCanEditParticipant) {
+        if (!canEditParticipant) {
             return;
         }
 
@@ -1148,7 +1138,7 @@
                 onSendMoney?.(paymentMethod);
             }
         },
         [
             routeError,
             transactionID,
             iouType,

src/components/SelectionList/BaseSelectionList.tsx

@@ -257,7 +257,7 @@ function BaseSelectionList<TItem extends ListItem>({
     }, [data, focusedIndex, isItemSelected]);
 
     const selectFocusedOption = () => {
-        if (!focusedOption) {
+        if (!focusedOption || focusedOption.isInteractive === false) {
             return;
         }
         selectRow(focusedOption);
@@ -363,6 +363,7 @@ function BaseSelectionList<TItem extends ListItem>({
                 shouldSyncFocus={!isTextInputFocusedRef.current && hasKeyBeenPressed.current}
                 shouldDisableHoverStyle={shouldDisableHoverStyle}
                 shouldShowRightCaret={shouldShowRightCaret}
+                shouldPreventEnterKeySubmit={!disableKeyboardShortcuts}
             />
         );
     };

src/components/SelectionList/ListItem/BaseListItem.tsx

@@ -103,6 +103,28 @@ function BaseListItem<TItem extends ListItem>({
 
     // Sync focus on an item
     useSyncFocus(pressableRef, !!isFocused, shouldSyncFocus);
+
+    // List items use role="option" which doesn't natively respond to Enter key presses.
+    // When the list-level keyboard shortcut is disabled (disableKeyboardShortcuts), we handle
+    // Enter activation here at the item level so each row can still be activated individually
+    // without interfering with other focusable controls (e.g. footer inputs) on the same screen.
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+        if (
+            shouldPreventEnterKeySubmit ||
+            accessible === false ||
+            event.key !== CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey ||
+            event.shiftKey ||
+            event.metaKey ||
+            event.ctrlKey ||
+            item.isInteractive === false
+        ) {
+            return;
+        }
+
+        event.preventDefault();
+        onSelectRow(item);
+    };
+
     const handleMouseLeave = (e: React.MouseEvent<Element, MouseEvent>) => {
         bind.onMouseLeave();
         e.stopPropagation();
@@ -191,6 +213,9 @@ function BaseListItem<TItem extends ListItem>({
                 {...accessibleAndAccessibilityLabel}
                 accessibilityState={accessibilityState}
                 onMouseLeave={handleMouseLeave}
+                // When the list-level Enter shortcut is disabled (disableKeyboardShortcuts), items with role="option"
+                // won't natively fire click on Enter, so we handle it manually via onKeyDown.
+                onKeyDown={!shouldPreventEnterKeySubmit ? handleKeyDown : undefined}
                 wrapperStyle={pressableWrapperStyle}
                 testID={`${CONST.BASE_LIST_ITEM_TEST_ID}${item.keyForList}`}
             >

src/components/SelectionList/ListItem/ListItemRenderer.tsx

@@ -17,6 +17,7 @@ type ListItemRendererProps<TItem extends ListItem> = Omit<BaseListItemProps<TIte
         titleStyles?: StyleProp<TextStyle>;
         titleContainerStyles?: StyleProp<ViewStyle>;
         shouldHighlightSelectedItem: boolean;
+        shouldPreventEnterKeySubmit?: boolean;
     };
 
 function ListItemRenderer<TItem extends ListItem>({
@@ -53,6 +54,7 @@ function ListItemRenderer<TItem extends ListItem>({
     shouldDisableHoverStyle,
     shouldShowRightCaret,
     errorRowStyles,
+    shouldPreventEnterKeySubmit = true,
 }: ListItemRendererProps<TItem>) {
     const handleOnCheckboxPress = () => {
         if (isTransactionGroupListItemType(item)) {
@@ -81,8 +83,7 @@ function ListItemRenderer<TItem extends ListItem>({
                 onCheckboxPress={handleOnCheckboxPress()}
                 onDismissError={() => onDismissError?.(item)}
                 shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
-                // We're already handling the Enter key press in the useKeyboardShortcut hook, so we don't want the list item to submit the form
-                shouldPreventEnterKeySubmit
+                shouldPreventEnterKeySubmit={shouldPreventEnterKeySubmit}
                 rightHandSideComponent={rightHandSideComponent}
                 keyForList={item.keyForList}
                 shouldUseDefaultRightHandSideComponent={shouldUseDefaultRightHandSideComponent}

src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx

@@ -181,7 +181,7 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
 
     const selectFocusedItem = () => {
         const focusedItem = getFocusedItem();
-        if (!focusedItem) {
+        if (!focusedItem || focusedItem.isInteractive === false) {
             return;
         }
         selectRow(focusedItem);
@@ -363,6 +363,7 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
                         titleNumberOfLines={titleNumberOfLines}
                         shouldUseDefaultRightHandSideComponent={shouldUseDefaultRightHandSideComponent}
                         shouldDisableHoverStyle={shouldDisableHoverStyle}
+                        shouldPreventEnterKeySubmit={!disableKeyboardShortcuts}
                     />
                 );
             }