From e19c59fa87e07cab3b557fdcd99e7839ceeb8e2f Mon Sep 17 00:00:00 2001 From: daledah Date: Tue, 3 Mar 2026 14:27:52 +0700 Subject: [PATCH 01/10] fix: selected option is announced without selected state --- src/CONST/index.ts | 4 ++ .../SelectionList/BaseSelectionList.tsx | 57 ++++++++++--------- .../SelectionList/ListItem/BaseListItem.tsx | 9 ++- 3 files changed, 41 insertions(+), 29 deletions(-) diff --git a/src/CONST/index.ts b/src/CONST/index.ts index 99b67b2d50d3a..a1ee9f6b302a8 100644 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -5728,6 +5728,8 @@ const CONST = { LINK: 'link', /** Use to identify a list of items. */ LIST: 'list', + /** Use for a list of selectable options (single or multi-select). */ + LISTBOX: 'listbox', /** Use for individual items within a list. */ LISTITEM: 'listitem', /** Use for a list of choices or options. */ @@ -5736,6 +5738,8 @@ const CONST = { MENUBAR: 'menubar', /** Use for items within a menu. */ MENUITEM: 'menuitem', + /** Use for selectable options within a listbox. */ + OPTION: 'option', /** Use when no specific role is needed. */ NONE: 'none', /** Use for elements that don't require a specific role. */ diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 08a1c41469fba..43e20aca0827f 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -512,32 +512,37 @@ function BaseSelectionList({ ) : ( <> {!shouldHeaderBeInsideList && header} - item.keyForList} - extraData={extraData} - ListFooterComponent={listFooterContent} - scrollEnabled={scrollEnabled} - indicatorStyle="white" - keyboardShouldPersistTaps="always" - showsVerticalScrollIndicator={showScrollIndicator} - onEndReached={onEndReached} - onEndReachedThreshold={onEndReachedThreshold} - style={style?.listStyle} - contentContainerStyle={styles.pb3} - initialScrollIndex={shouldScrollToFocusedIndexOnMount ? initialFocusedIndex : undefined} - onScrollBeginDrag={onScrollBeginDrag} - maintainVisibleContentPosition={{disabled: disableMaintainingScrollPosition}} - ListHeaderComponent={ - <> - {customListHeaderContent} - {textInputComponent({shouldBeInsideList: true})} - {shouldHeaderBeInsideList && header} - - } - /> + + item.keyForList} + extraData={extraData} + ListFooterComponent={listFooterContent} + scrollEnabled={scrollEnabled} + indicatorStyle="white" + keyboardShouldPersistTaps="always" + showsVerticalScrollIndicator={showScrollIndicator} + onEndReached={onEndReached} + onEndReachedThreshold={onEndReachedThreshold} + style={style?.listStyle} + contentContainerStyle={styles.pb3} + initialScrollIndex={shouldScrollToFocusedIndexOnMount ? initialFocusedIndex : undefined} + onScrollBeginDrag={onScrollBeginDrag} + maintainVisibleContentPosition={{disabled: disableMaintainingScrollPosition}} + ListHeaderComponent={ + <> + {customListHeaderContent} + {textInputComponent({shouldBeInsideList: true})} + {shouldHeaderBeInsideList && header} + + } + /> + {children} )} diff --git a/src/components/SelectionList/ListItem/BaseListItem.tsx b/src/components/SelectionList/ListItem/BaseListItem.tsx index 525a5fb65cc8f..b8adad4c6f24d 100644 --- a/src/components/SelectionList/ListItem/BaseListItem.tsx +++ b/src/components/SelectionList/ListItem/BaseListItem.tsx @@ -87,8 +87,12 @@ function BaseListItem({ const shouldShowHiddenCheckmark = shouldShowRBRIndicator && !shouldShowCheckmark && !!item.canShowSeveralIndicators; + // For single-select lists, use role="option" with aria-selected so screen readers announce "selected"/"not selected". + // For multi-select (checkbox/radio), keep existing role and state. + const isSelectableOption = !canSelectMultiple && accessibilityRole !== CONST.ROLE.CHECKBOX && accessibilityRole !== CONST.ROLE.RADIO; + const effectiveRole = isSelectableOption ? CONST.ROLE.OPTION : accessibilityRole; const accessibilityState = - accessibilityRole === CONST.ROLE.CHECKBOX || accessibilityRole === CONST.ROLE.RADIO ? {checked: !!item.isSelected, selected: !!isFocused} : {selected: !!isFocused}; + accessibilityRole === CONST.ROLE.CHECKBOX || accessibilityRole === CONST.ROLE.RADIO ? {checked: !!item.isSelected, selected: !!isFocused} : {selected: !!item.isSelected}; return ( ({ wrapperStyle={pressableWrapperStyle} testID={testID} accessible={accessible} - role={accessible === false ? CONST.ROLE.PRESENTATION : accessibilityRole} + role={accessible === false ? CONST.ROLE.PRESENTATION : effectiveRole} > Date: Tue, 3 Mar 2026 14:30:55 +0700 Subject: [PATCH 02/10] fix lint --- .../SelectionListWithSections/BaseListItem.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/SelectionListWithSections/BaseListItem.tsx b/src/components/SelectionListWithSections/BaseListItem.tsx index cdebcc04ca163..39f98c3ee103b 100644 --- a/src/components/SelectionListWithSections/BaseListItem.tsx +++ b/src/components/SelectionListWithSections/BaseListItem.tsx @@ -83,8 +83,12 @@ function BaseListItem({ const defaultAccessibilityLabel = item.text === item.alternateText ? (item.text ?? '') : [item.text, item.alternateText].filter(Boolean).join(', '); const accessibilityLabel = item.accessibilityLabel ?? defaultAccessibilityLabel; + // For single-select lists, use role="option" with aria-selected so screen readers announce "selected"/"not selected". + // For multi-select (checkbox/radio), keep existing role and state. + const isSelectableOption = !canSelectMultiple && accessibilityRole !== CONST.ROLE.CHECKBOX && accessibilityRole !== CONST.ROLE.RADIO; + const effectiveRole = isSelectableOption ? CONST.ROLE.OPTION : accessibilityRole; const accessibilityState = - accessibilityRole === CONST.ROLE.CHECKBOX || accessibilityRole === CONST.ROLE.RADIO ? {checked: !!item.isSelected, selected: !!isFocused} : {selected: !!isFocused}; + accessibilityRole === CONST.ROLE.CHECKBOX || accessibilityRole === CONST.ROLE.RADIO ? {checked: !!item.isSelected, selected: !!isFocused} : {selected: !!item.isSelected}; return ( ({ interactive={item.isInteractive} accessibilityLabel={accessibilityLabel} accessibilityState={accessibilityState} - role={accessibilityRole} + role={effectiveRole} isNested hoverDimmingValue={1} pressDimmingValue={item.isInteractive === false ? 1 : variables.pressDimValue} @@ -138,7 +142,6 @@ function BaseListItem({ > Date: Fri, 6 Mar 2026 00:26:10 +0700 Subject: [PATCH 03/10] fix ts --- src/components/SelectionList/BaseSelectionList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 77b0a701cf521..c6ae46c3bae33 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -3,7 +3,7 @@ import {FlashList} from '@shopify/flash-list'; import type {FlashListRef, ListRenderItem, ListRenderItemInfo} from '@shopify/flash-list'; import {deepEqual} from 'fast-equals'; import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; -import type {TextInputKeyPressEvent} from 'react-native'; +import type {Role, TextInputKeyPressEvent} from 'react-native'; import {View} from 'react-native'; import OptionsListSkeletonView from '@components/OptionsListSkeletonView'; import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types'; @@ -493,7 +493,7 @@ function BaseSelectionList({ <> {!shouldHeaderBeInsideList && header} Date: Tue, 10 Mar 2026 11:32:06 +0700 Subject: [PATCH 04/10] fix comments --- .../SelectionList/BaseSelectionList.tsx | 58 +++++++++---------- .../BaseSelectionListWithSections.tsx | 3 +- 2 files changed, 29 insertions(+), 32 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 39a8bd6489c44..a31af6ef807db 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -536,37 +536,33 @@ function BaseSelectionList({ ) : ( <> {!shouldHeaderBeInsideList && header} - - item.keyForList} - extraData={extraData} - ListFooterComponent={listFooterContent} - scrollEnabled={scrollEnabled} - indicatorStyle="white" - keyboardShouldPersistTaps="always" - showsVerticalScrollIndicator={showScrollIndicator} - onEndReached={onEndReached} - onEndReachedThreshold={onEndReachedThreshold} - style={style?.listStyle} - contentContainerStyle={styles.pb3} - initialScrollIndex={shouldScrollToFocusedIndexOnMount ? initialFocusedIndex : undefined} - onScrollBeginDrag={onScrollBeginDrag} - maintainVisibleContentPosition={{disabled: disableMaintainingScrollPosition}} - ListHeaderComponent={ - <> - {customListHeaderContent} - {textInputComponent({shouldBeInsideList: true})} - {shouldHeaderBeInsideList && header} - - } - /> - + item.keyForList} + extraData={extraData} + ListFooterComponent={listFooterContent} + scrollEnabled={scrollEnabled} + indicatorStyle="white" + keyboardShouldPersistTaps="always" + showsVerticalScrollIndicator={showScrollIndicator} + onEndReached={onEndReached} + onEndReachedThreshold={onEndReachedThreshold} + style={[styles.flex1, style?.listStyle]} + contentContainerStyle={styles.pb3} + initialScrollIndex={shouldScrollToFocusedIndexOnMount ? initialFocusedIndex : undefined} + onScrollBeginDrag={onScrollBeginDrag} + maintainVisibleContentPosition={{disabled: disableMaintainingScrollPosition}} + ListHeaderComponent={ + <> + {customListHeaderContent} + {textInputComponent({shouldBeInsideList: true})} + {shouldHeaderBeInsideList && header} + + } + /> {children} )} diff --git a/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx b/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx index 57b3d60dd181c..60d27ad74157d 100644 --- a/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx +++ b/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx @@ -2,7 +2,7 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native'; import lodashDebounce from 'lodash/debounce'; import isEmpty from 'lodash/isEmpty'; import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; -import type {LayoutChangeEvent, SectionList as RNSectionList, TextInput as RNTextInput, SectionListData, SectionListRenderItemInfo, TextInputKeyPressEvent} from 'react-native'; +import type {LayoutChangeEvent, SectionList as RNSectionList, TextInput as RNTextInput, Role, SectionListData, SectionListRenderItemInfo, TextInputKeyPressEvent} from 'react-native'; import {View} from 'react-native'; import Button from '@components/Button'; import Checkbox from '@components/Checkbox'; @@ -1037,6 +1037,7 @@ function BaseSelectionListWithSections({ renderScrollComponent={renderScrollComponent} removeClippedSubviews={removeClippedSubviews} ref={listRef} + role={!canSelectMultiple ? (CONST.ROLE.LISTBOX as Role) : undefined} sections={slicedSections} stickySectionHeadersEnabled={false} renderSectionHeader={(arg) => ( From 26c6ca5b2548026f1c3ba9626fa60b8bb06bb328 Mon Sep 17 00:00:00 2001 From: daledah Date: Tue, 10 Mar 2026 11:50:12 +0700 Subject: [PATCH 05/10] remove style --- src/components/SelectionList/BaseSelectionList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index a31af6ef807db..38814053be99f 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -550,7 +550,7 @@ function BaseSelectionList({ showsVerticalScrollIndicator={showScrollIndicator} onEndReached={onEndReached} onEndReachedThreshold={onEndReachedThreshold} - style={[styles.flex1, style?.listStyle]} + style={style?.listStyle} contentContainerStyle={styles.pb3} initialScrollIndex={shouldScrollToFocusedIndexOnMount ? initialFocusedIndex : undefined} onScrollBeginDrag={onScrollBeginDrag} From 26a64f8c3c8f955e123b996ba39f5f2dbf8c5ff4 Mon Sep 17 00:00:00 2001 From: daledah Date: Wed, 11 Mar 2026 12:24:36 +0700 Subject: [PATCH 06/10] add web condition and missing role --- .../BaseSelectionListWithSections.tsx | 6 +++++- .../BaseSelectionListWithSections.tsx | 5 ++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx b/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx index 064f258f42a6e..ff8841e808ce0 100644 --- a/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx +++ b/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx @@ -2,7 +2,7 @@ import {useIsFocused} from '@react-navigation/native'; import {FlashList} from '@shopify/flash-list'; import type {FlashListRef, ListRenderItemInfo} from '@shopify/flash-list'; import React, {useImperativeHandle, useRef} from 'react'; -import type {TextInputKeyPressEvent} from 'react-native'; +import type {Role, TextInputKeyPressEvent} from 'react-native'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; import OptionsListSkeletonView from '@components/OptionsListSkeletonView'; @@ -26,6 +26,7 @@ import useScrollEventEmitter from '@hooks/useScrollEventEmitter'; import useSingleExecution from '@hooks/useSingleExecution'; import {focusedItemRef} from '@hooks/useSyncFocus/useSyncFocusImplementation'; import useThemeStyles from '@hooks/useThemeStyles'; +import getPlatform from '@libs/getPlatform'; import Log from '@libs/Log'; import CONST from '@src/CONST'; import type {FlattenedItem, ListItem, SelectionListWithSectionsProps} from './types'; @@ -87,6 +88,8 @@ function BaseSelectionListWithSections({ const {isKeyboardShown} = useKeyboardState(); const {safeAreaPaddingBottomStyle} = useSafeAreaPaddings(); const triggerScrollEvent = useScrollEventEmitter(); + const platform = getPlatform(); + const isWeb = platform === CONST.PLATFORM.WEB; const paddingBottomStyle = !isKeyboardShown && !footerContent && safeAreaPaddingBottomStyle; @@ -353,6 +356,7 @@ function BaseSelectionListWithSections({ renderListEmptyContent() ) : ( ({ const activeElementRole = useActiveElementRole(); const isFocused = useIsFocused(); const scrollEnabled = useScrollEnabled(); + const platform = getPlatform(); + const isWeb = platform === CONST.PLATFORM.WEB; const [maxToRenderPerBatch, setMaxToRenderPerBatch] = useState(shouldUseDynamicMaxToRenderPerBatch ? 0 : CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT); const [isInitialSectionListRender, setIsInitialSectionListRender] = useState(true); const {isKeyboardShown} = useKeyboardState(); @@ -1037,7 +1040,7 @@ function BaseSelectionListWithSections({ renderScrollComponent={renderScrollComponent} removeClippedSubviews={removeClippedSubviews} ref={listRef} - role={!canSelectMultiple ? (CONST.ROLE.LISTBOX as Role) : undefined} + role={!canSelectMultiple && isWeb ? (CONST.ROLE.LISTBOX as Role) : undefined} sections={slicedSections} stickySectionHeadersEnabled={false} renderSectionHeader={(arg) => ( From b02c7da28b6d9ff4a623e9bdbca869b2b2236505 Mon Sep 17 00:00:00 2001 From: daledah Date: Wed, 11 Mar 2026 14:06:40 +0700 Subject: [PATCH 07/10] fix test --- src/components/SelectionList/ListItem/BaseListItem.tsx | 1 + src/components/SelectionListWithSections/BaseListItem.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/SelectionList/ListItem/BaseListItem.tsx b/src/components/SelectionList/ListItem/BaseListItem.tsx index cca9c6d0be09b..35300845010d5 100644 --- a/src/components/SelectionList/ListItem/BaseListItem.tsx +++ b/src/components/SelectionList/ListItem/BaseListItem.tsx @@ -149,6 +149,7 @@ function BaseListItem({ > ({ > Date: Thu, 12 Mar 2026 16:06:33 +0700 Subject: [PATCH 08/10] create a new util function --- src/components/SelectionList/BaseSelectionList.tsx | 5 +++-- .../BaseSelectionListWithSections.tsx | 9 +++------ .../BaseSelectionListWithSections.tsx | 8 +++----- 3 files changed, 9 insertions(+), 13 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 80fdffaeae7e5..9b8e7888b258d 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -3,7 +3,7 @@ import {FlashList} from '@shopify/flash-list'; import type {FlashListRef, ListRenderItem, ListRenderItemInfo} from '@shopify/flash-list'; import {deepEqual} from 'fast-equals'; import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; -import type {Role, TextInputKeyPressEvent} from 'react-native'; +import type {TextInputKeyPressEvent} from 'react-native'; import {Keyboard, View} from 'react-native'; import OptionsListSkeletonView from '@components/OptionsListSkeletonView'; import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types'; @@ -27,6 +27,7 @@ import useSearchFocusSync from './hooks/useSearchFocusSync'; import useSelectedItemFocusSync from './hooks/useSelectedItemFocusSync'; import ListItemRenderer from './ListItem/ListItemRenderer'; import type {ButtonOrCheckBoxRoles, DataDetailsType, ListItem, SelectionListProps} from './types'; +import {getListboxRole} from './utils/getListboxRole'; const ANIMATED_HIGHLIGHT_DURATION = CONST.ANIMATED_HIGHLIGHT_ENTRY_DELAY + @@ -550,7 +551,7 @@ function BaseSelectionList({ <> {!shouldHeaderBeInsideList && header} ({ const {isKeyboardShown} = useKeyboardState(); const {safeAreaPaddingBottomStyle} = useSafeAreaPaddings(); const triggerScrollEvent = useScrollEventEmitter(); - const platform = getPlatform(); - const isWeb = platform === CONST.PLATFORM.WEB; - const paddingBottomStyle = !isKeyboardShown && !footerContent && safeAreaPaddingBottomStyle; const {flattenedData, disabledIndexes, itemsCount, selectedItems, initialFocusedIndex, firstFocusableIndex} = useFlattenedSections(sections, initiallyFocusedItemKey); @@ -361,7 +358,7 @@ function BaseSelectionListWithSections({ renderListEmptyContent() ) : ( ({ const activeElementRole = useActiveElementRole(); const isFocused = useIsFocused(); const scrollEnabled = useScrollEnabled(); - const platform = getPlatform(); - const isWeb = platform === CONST.PLATFORM.WEB; const [maxToRenderPerBatch, setMaxToRenderPerBatch] = useState(shouldUseDynamicMaxToRenderPerBatch ? 0 : CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT); const [isInitialSectionListRender, setIsInitialSectionListRender] = useState(true); const {isKeyboardShown} = useKeyboardState(); @@ -1047,7 +1045,7 @@ function BaseSelectionListWithSections({ renderScrollComponent={renderScrollComponent} removeClippedSubviews={removeClippedSubviews} ref={listRef} - role={!canSelectMultiple && isWeb ? (CONST.ROLE.LISTBOX as Role) : undefined} + role={getListboxRole(canSelectMultiple)} sections={slicedSections} stickySectionHeadersEnabled={false} renderSectionHeader={(arg) => ( From eb4a7a61119da2a57b31a46d02637c12e3edb81c Mon Sep 17 00:00:00 2001 From: daledah Date: Thu, 12 Mar 2026 16:06:42 +0700 Subject: [PATCH 09/10] fix ts --- .../SelectionList/utils/getListboxRole/index.ts | 6 ++++++ .../SelectionList/utils/getListboxRole/index.web.ts | 8 ++++++++ .../SelectionList/utils/getListboxRole/types.ts | 6 ++++++ 3 files changed, 20 insertions(+) create mode 100644 src/components/SelectionList/utils/getListboxRole/index.ts create mode 100644 src/components/SelectionList/utils/getListboxRole/index.web.ts create mode 100644 src/components/SelectionList/utils/getListboxRole/types.ts diff --git a/src/components/SelectionList/utils/getListboxRole/index.ts b/src/components/SelectionList/utils/getListboxRole/index.ts new file mode 100644 index 0000000000000..f174324481d8a --- /dev/null +++ b/src/components/SelectionList/utils/getListboxRole/index.ts @@ -0,0 +1,6 @@ +import type {GetListboxRole} from './types'; + +const getListboxRole: GetListboxRole = () => undefined; + +// eslint-disable-next-line import/prefer-default-export +export {getListboxRole}; diff --git a/src/components/SelectionList/utils/getListboxRole/index.web.ts b/src/components/SelectionList/utils/getListboxRole/index.web.ts new file mode 100644 index 0000000000000..f20364a6872ea --- /dev/null +++ b/src/components/SelectionList/utils/getListboxRole/index.web.ts @@ -0,0 +1,8 @@ +import type {Role} from 'react-native'; +import CONST from '@src/CONST'; +import type {GetListboxRole} from './types'; + +const getListboxRole: GetListboxRole = (canSelectMultiple) => (!canSelectMultiple ? (CONST.ROLE.LISTBOX as Role) : undefined); + +// eslint-disable-next-line import/prefer-default-export +export {getListboxRole}; diff --git a/src/components/SelectionList/utils/getListboxRole/types.ts b/src/components/SelectionList/utils/getListboxRole/types.ts new file mode 100644 index 0000000000000..f78e7a8494844 --- /dev/null +++ b/src/components/SelectionList/utils/getListboxRole/types.ts @@ -0,0 +1,6 @@ +import type {Role} from 'react-native'; + +type GetListboxRole = (canSelectMultiple: boolean) => Role | undefined; + +// eslint-disable-next-line import/prefer-default-export +export type {GetListboxRole}; From 38a35eada05841c7a74252734941f850680b1e01 Mon Sep 17 00:00:00 2001 From: daledah Date: Thu, 12 Mar 2026 16:20:45 +0700 Subject: [PATCH 10/10] remove useless prop and test id --- src/components/SelectionList/ListItem/BaseListItem.tsx | 5 ++--- src/components/SelectionListWithSections/BaseListItem.tsx | 5 ++--- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/SelectionList/ListItem/BaseListItem.tsx b/src/components/SelectionList/ListItem/BaseListItem.tsx index 35300845010d5..d59a897f9567a 100644 --- a/src/components/SelectionList/ListItem/BaseListItem.tsx +++ b/src/components/SelectionList/ListItem/BaseListItem.tsx @@ -143,13 +143,12 @@ function BaseListItem({ onMouseLeave={handleMouseLeave} tabIndex={accessible === false ? -1 : item.tabIndex} wrapperStyle={pressableWrapperStyle} - testID={testID} + testID={`${CONST.BASE_LIST_ITEM_TEST_ID}${item.keyForList}`} accessible={accessible} role={accessible === false ? CONST.ROLE.PRESENTATION : effectiveRole} > ({ onMouseLeave={handleMouseLeave} tabIndex={item.tabIndex} wrapperStyle={pressableWrapperStyle} - testID={testID} + testID={`${CONST.BASE_LIST_ITEM_TEST_ID}${item.keyForList}`} >