From b1ae310ba95dbc479d9f44b294425c971237f533 Mon Sep 17 00:00:00 2001
From: Abdelrahman Khattab <abzokhattab@gmail.com>
Date: Fri, 6 Mar 2026 11:22:18 +0100
Subject: [PATCH 1/5] Fix badge style regressions from #82210

- Add ListItemFocusContext so InviteMemberListItem can propagate
  isFocused to rightElement children. MemberRightIcon consumes this
  context to apply badgeDefaultActive when the row is focused,
  preventing the badge from blending into the activeComponentBG
  highlight.
- Map DONE action to reportStatusBadge.closed in BadgeActionCell so the
  Done action badge matches the Done status badge color (pink).
---
 .../SelectionList/ListItem/InviteMemberListItem.tsx |  3 ++-
 .../SelectionList/ListItemFocusContext.tsx          | 13 +++++++++++++
 .../InviteMemberListItem.tsx                        |  3 ++-
 .../Search/ActionCell/BadgeActionCell.tsx           | 11 ++++++++++-
 src/pages/workspace/MemberRightIcon.tsx             |  6 +++++-
 5 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 src/components/SelectionList/ListItemFocusContext.tsx

diff --git a/src/components/SelectionList/ListItem/InviteMemberListItem.tsx b/src/components/SelectionList/ListItem/InviteMemberListItem.tsx
index 6a8e730c1d1e3..25f6b6d81dd15 100644
--- a/src/components/SelectionList/ListItem/InviteMemberListItem.tsx
+++ b/src/components/SelectionList/ListItem/InviteMemberListItem.tsx
@@ -5,6 +5,7 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import {useProductTrainingContext} from '@components/ProductTrainingContext';
 import ReportActionAvatars from '@components/ReportActionAvatars';
 import SelectCircle from '@components/SelectCircle';
+import {ListItemFocusContext} from '@components/SelectionList/ListItemFocusContext';
 import Text from '@components/Text';
 import TextWithTooltip from '@components/TextWithTooltip';
 import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
@@ -153,7 +154,7 @@ function InviteMemberListItem<TItem extends ListItem>({
                                 />
                             )}
                         </View>
-                        {!!item.rightElement && item.rightElement}
+                        {!!item.rightElement && <ListItemFocusContext.Provider value={{isFocused: !!isFocused}}>{item.rightElement}</ListItemFocusContext.Provider>}
                         {!!shouldShowCheckBox && (
                             <PressableWithFeedback
                                 onPress={handleCheckboxPress}
diff --git a/src/components/SelectionList/ListItemFocusContext.tsx b/src/components/SelectionList/ListItemFocusContext.tsx
new file mode 100644
index 0000000000000..264ef0acc24a4
--- /dev/null
+++ b/src/components/SelectionList/ListItemFocusContext.tsx
@@ -0,0 +1,13 @@
+import {createContext, useContext} from 'react';
+
+type ListItemFocusContextValue = {
+    isFocused: boolean;
+};
+
+const ListItemFocusContext = createContext<ListItemFocusContextValue>({isFocused: false});
+
+function useListItemFocus() {
+    return useContext(ListItemFocusContext);
+}
+
+export {ListItemFocusContext, useListItemFocus};
diff --git a/src/components/SelectionListWithSections/InviteMemberListItem.tsx b/src/components/SelectionListWithSections/InviteMemberListItem.tsx
index dd7ef2d56a88b..326f31fc524a9 100644
--- a/src/components/SelectionListWithSections/InviteMemberListItem.tsx
+++ b/src/components/SelectionListWithSections/InviteMemberListItem.tsx
@@ -5,6 +5,7 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import {useProductTrainingContext} from '@components/ProductTrainingContext';
 import ReportActionAvatars from '@components/ReportActionAvatars';
 import SelectCircle from '@components/SelectCircle';
+import {ListItemFocusContext} from '@components/SelectionList/ListItemFocusContext';
 import Text from '@components/Text';
 import TextWithTooltip from '@components/TextWithTooltip';
 import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
@@ -150,7 +151,7 @@ function InviteMemberListItem<TItem extends ListItem>({
                                 />
                             )}
                         </View>
-                        {!!item.rightElement && item.rightElement}
+                        {!!item.rightElement && <ListItemFocusContext.Provider value={{isFocused: !!isFocused}}>{item.rightElement}</ListItemFocusContext.Provider>}
                         {!!shouldShowCheckBox && (
                             <PressableWithFeedback
                                 onPress={handleCheckboxPress}
diff --git a/src/components/SelectionListWithSections/Search/ActionCell/BadgeActionCell.tsx b/src/components/SelectionListWithSections/Search/ActionCell/BadgeActionCell.tsx
index 0dcb058e74060..41460d6d3f5c1 100644
--- a/src/components/SelectionListWithSections/Search/ActionCell/BadgeActionCell.tsx
+++ b/src/components/SelectionListWithSections/Search/ActionCell/BadgeActionCell.tsx
@@ -23,7 +23,16 @@ function BadgeActionCell({action, isLargeScreenWidth, shouldDisablePointerEvents
     const StyleUtils = useStyleUtils();
     const text = translate(actionTranslationsMap[action]);
 
-    const badgeTheme = action === CONST.SEARCH.ACTION_TYPES.PAID ? theme.reportStatusBadge.paid : theme.reportStatusBadge.approved;
+    const getBadgeTheme = () => {
+        if (action === CONST.SEARCH.ACTION_TYPES.PAID) {
+            return theme.reportStatusBadge.paid;
+        }
+        if (action === CONST.SEARCH.ACTION_TYPES.DONE) {
+            return theme.reportStatusBadge.closed;
+        }
+        return theme.reportStatusBadge.approved;
+    };
+    const badgeTheme = getBadgeTheme();
 
     return (
         <View
diff --git a/src/pages/workspace/MemberRightIcon.tsx b/src/pages/workspace/MemberRightIcon.tsx
index bcd48b4385e06..647161c3b587d 100644
--- a/src/pages/workspace/MemberRightIcon.tsx
+++ b/src/pages/workspace/MemberRightIcon.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import Badge from '@components/Badge';
+import {useListItemFocus} from '@components/SelectionList/ListItemFocusContext';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 
@@ -14,6 +16,8 @@ type MemberRightIconProps = {
 
 export default function MemberRightIcon({role, owner, login, badgeStyles}: MemberRightIconProps) {
     const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const {isFocused} = useListItemFocus();
 
     let badgeText: TranslationPaths | undefined;
     if (owner && owner === login) {
@@ -27,7 +31,7 @@ export default function MemberRightIcon({role, owner, login, badgeStyles}: Membe
         return (
             <Badge
                 text={translate(badgeText)}
-                badgeStyles={badgeStyles}
+                badgeStyles={[isFocused && styles.badgeDefaultActive, badgeStyles]}
             />
         );
     }

From ba0aa89bc60af423eb544afa8fdc18804313bada Mon Sep 17 00:00:00 2001
From: Abdelrahman Khattab <abzokhattab@gmail.com>
Date: Fri, 6 Mar 2026 11:44:38 +0100
Subject: [PATCH 2/5] Add missing sentryLabel to PressableWithFeedback in
 InviteMemberListItem

---
 .../SelectionListWithSections/InviteMemberListItem.tsx           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/SelectionListWithSections/InviteMemberListItem.tsx b/src/components/SelectionListWithSections/InviteMemberListItem.tsx
index 326f31fc524a9..40f9aed7d0ac5 100644
--- a/src/components/SelectionListWithSections/InviteMemberListItem.tsx
+++ b/src/components/SelectionListWithSections/InviteMemberListItem.tsx
@@ -159,6 +159,7 @@ function InviteMemberListItem<TItem extends ListItem>({
                                 role={CONST.ROLE.BUTTON}
                                 accessibilityLabel={item.text ?? ''}
                                 style={[styles.ml2, styles.optionSelectCircle]}
+                                sentryLabel={CONST.SENTRY_LABEL.LIST_ITEM.INVITE_MEMBER_CHECKBOX}
                             >
                                 <SelectCircle
                                     isChecked={item.isSelected ?? false}

From 52d52e9775d4578d47237987f8cbf75ae237fb52 Mon Sep 17 00:00:00 2001
From: Abdelrahman Khattab <abzokhattab@gmail.com>
Date: Fri, 6 Mar 2026 11:50:33 +0100
Subject: [PATCH 3/5] Simplify BadgeActionCell theme to ternary
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Only PAID and DONE reach this component, so replace the
three-way branch with a simple ternary: PAID → paid, else → closed.
---
 .../Search/ActionCell/BadgeActionCell.tsx             | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/components/SelectionListWithSections/Search/ActionCell/BadgeActionCell.tsx b/src/components/SelectionListWithSections/Search/ActionCell/BadgeActionCell.tsx
index 41460d6d3f5c1..66b3acb0f07f3 100644
--- a/src/components/SelectionListWithSections/Search/ActionCell/BadgeActionCell.tsx
+++ b/src/components/SelectionListWithSections/Search/ActionCell/BadgeActionCell.tsx
@@ -23,16 +23,7 @@ function BadgeActionCell({action, isLargeScreenWidth, shouldDisablePointerEvents
     const StyleUtils = useStyleUtils();
     const text = translate(actionTranslationsMap[action]);
 
-    const getBadgeTheme = () => {
-        if (action === CONST.SEARCH.ACTION_TYPES.PAID) {
-            return theme.reportStatusBadge.paid;
-        }
-        if (action === CONST.SEARCH.ACTION_TYPES.DONE) {
-            return theme.reportStatusBadge.closed;
-        }
-        return theme.reportStatusBadge.approved;
-    };
-    const badgeTheme = getBadgeTheme();
+    const badgeTheme = action === CONST.SEARCH.ACTION_TYPES.PAID ? theme.reportStatusBadge.paid : theme.reportStatusBadge.closed;
 
     return (
         <View

From 25de8660c10a185b39f2daf9314805919b0742b6 Mon Sep 17 00:00:00 2001
From: Abdelrahman Khattab <abzokhattab@gmail.com>
Date: Fri, 6 Mar 2026 12:15:57 +0100
Subject: [PATCH 4/5] Add ListItemFocusContext to UserListItem for badge
 visibility fix

UserListItem also applies activeComponentBG on focused rows via
BaseListItem, causing the same badge color collision. Wrap
rightElement with ListItemFocusContext.Provider so MemberRightIcon
picks up isFocused and switches to badgeDefaultActive automatically.
---
 src/components/SelectionList/ListItem/UserListItem.tsx    | 3 ++-
 src/components/SelectionListWithSections/UserListItem.tsx | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/SelectionList/ListItem/UserListItem.tsx b/src/components/SelectionList/ListItem/UserListItem.tsx
index c83b28706baa4..9859accdeef8b 100644
--- a/src/components/SelectionList/ListItem/UserListItem.tsx
+++ b/src/components/SelectionList/ListItem/UserListItem.tsx
@@ -5,6 +5,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 import Icon from '@components/Icon';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import ReportActionAvatars from '@components/ReportActionAvatars';
+import {ListItemFocusContext} from '@components/SelectionList/ListItemFocusContext';
 import Text from '@components/Text';
 import TextWithTooltip from '@components/TextWithTooltip';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
@@ -162,7 +163,7 @@ function UserListItem<TItem extends ListItem>({
                                 />
                             )}
                         </View>
-                        {!!item.rightElement && item.rightElement}
+                        {!!item.rightElement && <ListItemFocusContext.Provider value={{isFocused: !!isFocused}}>{item.rightElement}</ListItemFocusContext.Provider>}
                         {!!item.shouldShowRightCaret && (
                             <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, isDisabled && styles.cursorDisabled]}>
                                 <Icon
diff --git a/src/components/SelectionListWithSections/UserListItem.tsx b/src/components/SelectionListWithSections/UserListItem.tsx
index 4562b9625bc82..02c502b2f48c3 100644
--- a/src/components/SelectionListWithSections/UserListItem.tsx
+++ b/src/components/SelectionListWithSections/UserListItem.tsx
@@ -4,6 +4,7 @@ import {View} from 'react-native';
 import Icon from '@components/Icon';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import ReportActionAvatars from '@components/ReportActionAvatars';
+import {ListItemFocusContext} from '@components/SelectionList/ListItemFocusContext';
 import Text from '@components/Text';
 import TextWithTooltip from '@components/TextWithTooltip';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
@@ -160,7 +161,7 @@ function UserListItem<TItem extends ListItem>({
                                 />
                             )}
                         </View>
-                        {!!item.rightElement && item.rightElement}
+                        {!!item.rightElement && <ListItemFocusContext.Provider value={{isFocused: !!isFocused}}>{item.rightElement}</ListItemFocusContext.Provider>}
                         {!!item.shouldShowRightIcon && (
                             <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, isDisabled && styles.cursorDisabled]}>
                                 <Icon

From e4f4d9408e433e9616a1e484d0d8829f0b4ad9f0 Mon Sep 17 00:00:00 2001
From: Abdelrahman Khattab <abzokhattab@gmail.com>
Date: Fri, 6 Mar 2026 15:48:51 +0100
Subject: [PATCH 5/5] Address review: make isFocused optional and use shorthand

- Make isFocused optional in ListItemFocusContextValue type
- Use shorthand {isFocused} instead of {isFocused: !!isFocused} in
  all four ListItemFocusContext providers
---
 src/components/SelectionList/ListItem/InviteMemberListItem.tsx  | 2 +-
 src/components/SelectionList/ListItem/UserListItem.tsx          | 2 +-
 src/components/SelectionList/ListItemFocusContext.tsx           | 2 +-
 .../SelectionListWithSections/InviteMemberListItem.tsx          | 2 +-
 src/components/SelectionListWithSections/UserListItem.tsx       | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/SelectionList/ListItem/InviteMemberListItem.tsx b/src/components/SelectionList/ListItem/InviteMemberListItem.tsx
index 25f6b6d81dd15..8c3c111b6ffa5 100644
--- a/src/components/SelectionList/ListItem/InviteMemberListItem.tsx
+++ b/src/components/SelectionList/ListItem/InviteMemberListItem.tsx
@@ -154,7 +154,7 @@ function InviteMemberListItem<TItem extends ListItem>({
                                 />
                             )}
                         </View>
-                        {!!item.rightElement && <ListItemFocusContext.Provider value={{isFocused: !!isFocused}}>{item.rightElement}</ListItemFocusContext.Provider>}
+                        {!!item.rightElement && <ListItemFocusContext.Provider value={{isFocused}}>{item.rightElement}</ListItemFocusContext.Provider>}
                         {!!shouldShowCheckBox && (
                             <PressableWithFeedback
                                 onPress={handleCheckboxPress}
diff --git a/src/components/SelectionList/ListItem/UserListItem.tsx b/src/components/SelectionList/ListItem/UserListItem.tsx
index 9859accdeef8b..dc84b6414f60a 100644
--- a/src/components/SelectionList/ListItem/UserListItem.tsx
+++ b/src/components/SelectionList/ListItem/UserListItem.tsx
@@ -163,7 +163,7 @@ function UserListItem<TItem extends ListItem>({
                                 />
                             )}
                         </View>
-                        {!!item.rightElement && <ListItemFocusContext.Provider value={{isFocused: !!isFocused}}>{item.rightElement}</ListItemFocusContext.Provider>}
+                        {!!item.rightElement && <ListItemFocusContext.Provider value={{isFocused}}>{item.rightElement}</ListItemFocusContext.Provider>}
                         {!!item.shouldShowRightCaret && (
                             <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, isDisabled && styles.cursorDisabled]}>
                                 <Icon
diff --git a/src/components/SelectionList/ListItemFocusContext.tsx b/src/components/SelectionList/ListItemFocusContext.tsx
index 264ef0acc24a4..6a7e80a3ae25c 100644
--- a/src/components/SelectionList/ListItemFocusContext.tsx
+++ b/src/components/SelectionList/ListItemFocusContext.tsx
@@ -1,7 +1,7 @@
 import {createContext, useContext} from 'react';
 
 type ListItemFocusContextValue = {
-    isFocused: boolean;
+    isFocused?: boolean;
 };
 
 const ListItemFocusContext = createContext<ListItemFocusContextValue>({isFocused: false});
diff --git a/src/components/SelectionListWithSections/InviteMemberListItem.tsx b/src/components/SelectionListWithSections/InviteMemberListItem.tsx
index 40f9aed7d0ac5..7a561997f5754 100644
--- a/src/components/SelectionListWithSections/InviteMemberListItem.tsx
+++ b/src/components/SelectionListWithSections/InviteMemberListItem.tsx
@@ -151,7 +151,7 @@ function InviteMemberListItem<TItem extends ListItem>({
                                 />
                             )}
                         </View>
-                        {!!item.rightElement && <ListItemFocusContext.Provider value={{isFocused: !!isFocused}}>{item.rightElement}</ListItemFocusContext.Provider>}
+                        {!!item.rightElement && <ListItemFocusContext.Provider value={{isFocused}}>{item.rightElement}</ListItemFocusContext.Provider>}
                         {!!shouldShowCheckBox && (
                             <PressableWithFeedback
                                 onPress={handleCheckboxPress}
diff --git a/src/components/SelectionListWithSections/UserListItem.tsx b/src/components/SelectionListWithSections/UserListItem.tsx
index 02c502b2f48c3..dfdf4ffbdb426 100644
--- a/src/components/SelectionListWithSections/UserListItem.tsx
+++ b/src/components/SelectionListWithSections/UserListItem.tsx
@@ -161,7 +161,7 @@ function UserListItem<TItem extends ListItem>({
                                 />
                             )}
                         </View>
-                        {!!item.rightElement && <ListItemFocusContext.Provider value={{isFocused: !!isFocused}}>{item.rightElement}</ListItemFocusContext.Provider>}
+                        {!!item.rightElement && <ListItemFocusContext.Provider value={{isFocused}}>{item.rightElement}</ListItemFocusContext.Provider>}
                         {!!item.shouldShowRightIcon && (
                             <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, isDisabled && styles.cursorDisabled]}>
                                 <Icon