Skip to content

Commit 19ce599

Browse files
javiergarciaveraclaude
javiergarciavera
and
claude
committed
perf(accessibility): fix iOS accessibility in Bridge token selector components
- BridgeTokenSelector, TokenButton, TokenSelectorItem: Pressable → TouchableOpacity Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 495414e commit 19ce599

3 files changed

Lines changed: 91 additions & 66 deletions

File tree

‎app/components/UI/Bridge/components/BridgeTokenSelector/BridgeTokenSelector.tsx‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -525,29 +525,29 @@ export const BridgeTokenSelector: React.FC = () => {
525525

526526
return (
527527
<SafeAreaView style={styles.container} edges={['bottom', 'left', 'right']}>
528-
<Box style={styles.buttonContainer}>
529-
<NetworkPills
530-
selectedChainId={selectedChainId}
531-
onChainSelect={handleChainSelect}
532-
onMorePress={() =>
533-
navigation.navigate(Routes.BRIDGE.MODALS.ROOT, {
534-
screen: Routes.BRIDGE.MODALS.NETWORK_LIST_MODAL,
535-
})
536-
}
537-
/>
538-
528+
<Box twClassName="px-4 pb-3">
539529
<TextFieldSearch
540530
value={searchString}
541531
onChangeText={handleSearchTextChange}
542532
placeholder={strings('swaps.search_token')}
543533
testID="bridge-token-search-input"
544-
style={styles.searchInput}
545534
autoComplete="off"
546535
autoCorrect={false}
547536
autoCapitalize="none"
548537
onPressClearButton={handleClearSearch}
549538
/>
550539
</Box>
540+
<Box twClassName="pt-2 pb-4 pl-4">
541+
<NetworkPills
542+
selectedChainId={selectedChainId}
543+
onChainSelect={handleChainSelect}
544+
onMorePress={() =>
545+
navigation.navigate(Routes.BRIDGE.MODALS.ROOT, {
546+
screen: Routes.BRIDGE.MODALS.NETWORK_LIST_MODAL,
547+
})
548+
}
549+
/>
550+
</Box>
551551

552552
<FlatList
553553
ref={flatListRef}
@@ -566,6 +566,15 @@ export const BridgeTokenSelector: React.FC = () => {
566566
ListFooterComponent={renderFooter}
567567
ListEmptyComponent={renderEmptyState}
568568
onLayout={handleFlatListLayout}
569+
initialNumToRender={8}
570+
maxToRenderPerBatch={5}
571+
windowSize={5}
572+
removeClippedSubviews
573+
getItemLayout={(_data, index) => ({
574+
length: ESTIMATED_ITEM_HEIGHT,
575+
offset: ESTIMATED_ITEM_HEIGHT * index,
576+
index,
577+
})}
569578
/>
570579
</SafeAreaView>
571580
);

‎app/components/UI/Bridge/components/TokenButton.tsx‎

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ import Text, {
99
} from '../../../../component-library/components/Texts/Text';
1010
import { useStyles } from '../../../../component-library/hooks';
1111
import { Theme } from '../../../../util/theme/models';
12-
import { Box } from '../../Box/Box';
13-
import { FlexDirection, AlignItems, JustifyContent } from '../../Box/box.types';
1412
import BadgeWrapper, {
1513
BadgePosition,
1614
} from '../../../../component-library/components/Badges/BadgeWrapper';
@@ -42,6 +40,10 @@ const createStyles = (params: StylesParams) => {
4240
borderRadius: 16,
4341
},
4442
pillContainer: {
43+
flexDirection: 'row' as const,
44+
alignItems: 'flex-end' as const,
45+
justifyContent: 'flex-end' as const,
46+
gap: 8,
4547
backgroundColor: theme.colors.background.muted,
4648
borderRadius: 100,
4749
paddingLeft: 8,
@@ -67,31 +69,27 @@ export const TokenButton: React.FC<TokenProps> = ({
6769
}) => {
6870
const { styles } = useStyles(createStyles, {});
6971
return (
70-
<TouchableOpacity onPress={onPress} testID={testID}>
71-
<Box
72-
style={styles.pillContainer}
73-
flexDirection={FlexDirection.Row}
74-
alignItems={AlignItems.flexEnd}
75-
justifyContent={JustifyContent.flexEnd}
76-
gap={8}
72+
<TouchableOpacity
73+
onPress={onPress}
74+
testID={testID}
75+
style={styles.pillContainer}
76+
>
77+
<BadgeWrapper
78+
badgePosition={BadgePosition.BottomRight}
79+
badgeElement={
80+
<Badge
81+
variant={BadgeVariant.Network}
82+
imageSource={networkImageSource}
83+
name={networkName}
84+
/>
85+
}
7786
>
78-
<BadgeWrapper
79-
badgePosition={BadgePosition.BottomRight}
80-
badgeElement={
81-
<Badge
82-
variant={BadgeVariant.Network}
83-
imageSource={networkImageSource}
84-
name={networkName}
85-
/>
86-
}
87-
>
88-
<TokenIcon symbol={symbol} icon={iconUrl} style={styles.icon} />
89-
</BadgeWrapper>
87+
<TokenIcon symbol={symbol} icon={iconUrl} style={styles.icon} />
88+
</BadgeWrapper>
9089

91-
<Text style={styles.tokenSymbol} variant={TextVariant.HeadingLG}>
92-
{symbol}
93-
</Text>
94-
</Box>
90+
<Text style={styles.tokenSymbol} variant={TextVariant.HeadingLG}>
91+
{symbol}
92+
</Text>
9593
</TouchableOpacity>
9694
);
9795
};

‎app/components/UI/Bridge/components/TokenSelectorItem.tsx‎

Lines changed: 47 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,28 @@ const TokenBalanceView = ({
238238
);
239239
};
240240

241-
export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
241+
const formatTokenBalance = (balance: string): string => {
242+
const numericBalance = Number(balance);
243+
if (numericBalance === 0) {
244+
return '0';
245+
}
246+
if (numericBalance < 0.00001) {
247+
return '< 0.00001';
248+
}
249+
return parseAmount(balance, 5) || balance;
250+
};
251+
252+
const TOP_ROW_BALANCE_TEXT_STYLE = {
253+
textVariant: TextVariant.BodyMDMedium,
254+
textColor: TextColor.Default,
255+
} as const;
256+
257+
const BOTTOM_ROW_BALANCE_TEXT_STYLE = {
258+
textVariant: TextVariant.BodyMD,
259+
textColor: TextColor.Alternative,
260+
} as const;
261+
262+
const TokenSelectorItemInner: React.FC<TokenSelectorItemProps> = ({
242263
token,
243264
onPress,
244265
networkName,
@@ -261,17 +282,6 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
261282

262283
const fiatValue = token.balanceFiat;
263284

264-
const formatTokenBalance = (balance: string): string => {
265-
const numericBalance = Number(balance);
266-
if (numericBalance === 0) {
267-
return '0';
268-
}
269-
if (numericBalance < 0.00001) {
270-
return '< 0.00001';
271-
}
272-
return parseAmount(balance, 5) || balance;
273-
};
274-
275285
const selectedVariant =
276286
variant ??
277287
TOKEN_SELECTOR_BALANCE_LAYOUT_VARIANTS[
@@ -288,26 +298,18 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
288298

289299
const isNative = token.address === ethers.constants.AddressZero;
290300

291-
// to check if the token is a stock by checking if the name includes 'ondo' or 'stock'
292301
const { isStockToken } = useRWAToken();
293302

294303
const fiatBalance = shouldShowBalance ? fiatValue : undefined;
295304
const tokenBalance = shouldShowBalance ? cryptoBalance : undefined;
296-
const topRowBalanceTextStyle = {
297-
textVariant: TextVariant.BodyMDMedium,
298-
textColor: TextColor.Default,
299-
};
300-
const bottomRowBalanceTextStyle = {
301-
textVariant: TextVariant.BodyMD,
302-
textColor: TextColor.Alternative,
303-
};
304305

305306
const label = token.accountType
306307
? ACCOUNT_TYPE_LABELS[token.accountType]
307308
: undefined;
308309

309310
return (
310311
<Box
312+
accessible={false}
311313
flexDirection={FlexDirection.Row}
312314
alignItems={AlignItems.center}
313315
style={styles.container}
@@ -324,11 +326,11 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
324326
)}
325327
>
326328
<Box
329+
accessible={false}
327330
flexDirection={FlexDirection.Row}
328331
alignItems={AlignItems.center}
329332
gap={4}
330333
>
331-
{/* Token Icon */}
332334
<BadgeWrapper
333335
style={styles.badgeWrapper}
334336
badgePosition={BadgePosition.BottomRight}
@@ -352,19 +354,20 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
352354
/>
353355
</BadgeWrapper>
354356

355-
{/* Token symbol/name on the left, balances on the right (extension layout pattern) */}
356357
<Box
358+
accessible={false}
357359
style={styles.tokenInfo}
358360
flexDirection={FlexDirection.Column}
359361
gap={4}
360362
>
361363
<Box
364+
accessible={false}
362365
flexDirection={FlexDirection.Row}
363366
alignItems={AlignItems.center}
364367
justifyContent={JustifyContent.spaceBetween}
365368
>
366-
<Box style={styles.tokenMainInfo} gap={4}>
367-
<Box style={styles.tokenSymbolRow}>
369+
<Box accessible={false} style={styles.tokenMainInfo} gap={4}>
370+
<Box accessible={false} style={styles.tokenSymbolRow}>
368371
<Text
369372
variant={TextVariant.BodyMDMedium}
370373
numberOfLines={1}
@@ -401,19 +404,20 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
401404
balance={tokenBalance}
402405
isSelected={isSelected}
403406
textStyle={styles.rightValue}
404-
{...topRowBalanceTextStyle}
407+
{...TOP_ROW_BALANCE_TEXT_STYLE}
405408
/>
406409
) : (
407410
<FiatBalanceView
408411
balance={fiatBalance}
409412
isSelected={isSelected}
410413
textStyle={styles.rightValue}
411-
{...topRowBalanceTextStyle}
414+
{...TOP_ROW_BALANCE_TEXT_STYLE}
412415
/>
413416
)}
414417
</Box>
415418

416419
<Box
420+
accessible={false}
417421
flexDirection={FlexDirection.Row}
418422
alignItems={AlignItems.center}
419423
justifyContent={JustifyContent.spaceBetween}
@@ -433,14 +437,14 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
433437
balance={fiatBalance}
434438
isSelected={isSelected}
435439
textStyle={styles.rightValue}
436-
{...bottomRowBalanceTextStyle}
440+
{...BOTTOM_ROW_BALANCE_TEXT_STYLE}
437441
/>
438442
) : (
439443
<TokenBalanceView
440444
balance={tokenBalance}
441445
isSelected={isSelected}
442446
textStyle={styles.rightValue}
443-
{...bottomRowBalanceTextStyle}
447+
{...BOTTOM_ROW_BALANCE_TEXT_STYLE}
444448
/>
445449
)}
446450
</Box>
@@ -453,3 +457,17 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
453457
</Box>
454458
);
455459
};
460+
461+
export const TokenSelectorItem = React.memo(
462+
TokenSelectorItemInner,
463+
(prev, next) =>
464+
prev.onPress === next.onPress &&
465+
prev.token.address === next.token.address &&
466+
prev.token.chainId === next.token.chainId &&
467+
prev.token.balance === next.token.balance &&
468+
prev.token.balanceFiat === next.token.balanceFiat &&
469+
prev.isSelected === next.isSelected &&
470+
prev.isNoFeeAsset === next.isNoFeeAsset &&
471+
prev.shouldShowBalance === next.shouldShowBalance &&
472+
prev.networkName === next.networkName,
473+
);

0 commit comments

Comments
 (0)