Skip to content

Commit ff9568f

Browse files
devin-ai-integration[bot]devin-ai-integration[bot]
authored
feat(avatar): ensure minimum 48x48 hit target for better accessibility (#3521)
feat(avatar): ensure minimum 48x48 hit target for better accessibility
1 parent d6c2579 commit ff9568f

File tree

3 files changed

+17
-25
lines changed

3 files changed

+17
-25
lines changed

‎demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ exports[`AvatarScreen renders screen 1`] = `
8383
accessible={true}
8484
collapsable={false}
8585
focusable={true}
86+
hitSlop={0}
8687
onClick={[Function]}
8788
onResponderGrant={[Function]}
8889
onResponderMove={[Function]}
@@ -208,6 +209,7 @@ exports[`AvatarScreen renders screen 1`] = `
208209
accessible={true}
209210
collapsable={false}
210211
focusable={true}
212+
hitSlop={0}
211213
onClick={[Function]}
212214
onResponderGrant={[Function]}
213215
onResponderMove={[Function]}
@@ -394,6 +396,7 @@ exports[`AvatarScreen renders screen 1`] = `
394396
accessible={true}
395397
collapsable={false}
396398
focusable={true}
399+
hitSlop={0}
397400
onClick={[Function]}
398401
onResponderGrant={[Function]}
399402
onResponderMove={[Function]}
@@ -622,6 +625,7 @@ exports[`AvatarScreen renders screen 1`] = `
622625
accessible={true}
623626
collapsable={false}
624627
focusable={true}
628+
hitSlop={0}
625629
onClick={[Function]}
626630
onResponderGrant={[Function]}
627631
onResponderMove={[Function]}
@@ -856,6 +860,7 @@ exports[`AvatarScreen renders screen 1`] = `
856860
accessible={true}
857861
collapsable={false}
858862
focusable={true}
863+
hitSlop={0}
859864
onClick={[Function]}
860865
onResponderGrant={[Function]}
861866
onResponderMove={[Function]}
@@ -1112,6 +1117,7 @@ exports[`AvatarScreen renders screen 1`] = `
11121117
accessible={true}
11131118
collapsable={false}
11141119
focusable={true}
1120+
hitSlop={4}
11151121
onClick={[Function]}
11161122
onResponderGrant={[Function]}
11171123
onResponderMove={[Function]}
@@ -1368,6 +1374,7 @@ exports[`AvatarScreen renders screen 1`] = `
13681374
accessible={true}
13691375
collapsable={false}
13701376
focusable={true}
1377+
hitSlop={0}
13711378
onClick={[Function]}
13721379
onResponderGrant={[Function]}
13731380
onResponderMove={[Function]}
@@ -1575,6 +1582,7 @@ exports[`AvatarScreen renders screen 1`] = `
15751582
accessible={true}
15761583
collapsable={false}
15771584
focusable={true}
1585+
hitSlop={0}
15781586
onClick={[Function]}
15791587
onResponderGrant={[Function]}
15801588
onResponderMove={[Function]}
@@ -1831,6 +1839,7 @@ exports[`AvatarScreen renders screen 1`] = `
18311839
accessible={true}
18321840
collapsable={false}
18331841
focusable={true}
1842+
hitSlop={0}
18341843
onClick={[Function]}
18351844
onResponderGrant={[Function]}
18361845
onResponderMove={[Function]}
@@ -2132,6 +2141,7 @@ exports[`AvatarScreen renders screen 1`] = `
21322141
accessible={true}
21332142
collapsable={false}
21342143
focusable={true}
2144+
hitSlop={0}
21352145
onClick={[Function]}
21362146
onResponderGrant={[Function]}
21372147
onResponderMove={[Function]}
@@ -2319,6 +2329,7 @@ exports[`AvatarScreen renders screen 1`] = `
23192329
accessible={true}
23202330
collapsable={false}
23212331
focusable={true}
2332+
hitSlop={0}
23222333
onClick={[Function]}
23232334
onResponderGrant={[Function]}
23242335
onResponderMove={[Function]}
@@ -2548,6 +2559,7 @@ exports[`AvatarScreen renders screen 1`] = `
25482559
accessible={true}
25492560
collapsable={false}
25502561
focusable={true}
2562+
hitSlop={0}
25512563
onClick={[Function]}
25522564
onResponderGrant={[Function]}
25532565
onResponderMove={[Function]}
@@ -2777,6 +2789,7 @@ exports[`AvatarScreen renders screen 1`] = `
27772789
accessible={true}
27782790
collapsable={false}
27792791
focusable={true}
2792+
hitSlop={0}
27802793
onClick={[Function]}
27812794
onResponderGrant={[Function]}
27822795
onResponderMove={[Function]}
@@ -2964,6 +2977,7 @@ exports[`AvatarScreen renders screen 1`] = `
29642977
accessible={true}
29652978
collapsable={false}
29662979
focusable={true}
2980+
hitSlop={0}
29672981
onClick={[Function]}
29682982
onResponderGrant={[Function]}
29692983
onResponderMove={[Function]}

‎src/components/avatar/__tests__/index.spec.js

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎src/components/avatar/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,8 @@ const Avatar = forwardRef<any, AvatarProps>((props: AvatarProps, ref: React.Forw
187187
onPress,
188188
children
189189
} = themeProps;
190+
191+
const hitTargetPadding = Math.max(0, (48 - size) / 2);
190192
const {size: _badgeSize, borderWidth: badgeBorderWidth = 0} = badgeProps;
191193
const badgeSize = _badgeSize || DEFAULT_BADGE_SIZE;
192194

@@ -346,6 +348,7 @@ const Avatar = forwardRef<any, AvatarProps>((props: AvatarProps, ref: React.Forw
346348
accessible={!_.isUndefined(onPress)}
347349
accessibilityLabel={'Avatar'}
348350
accessibilityRole={onPress ? 'button' : 'image'}
351+
hitSlop={onPress ? hitTargetPadding : undefined}
349352
{...accessibilityProps}
350353
>
351354
<View testID={`${testID}.container`} style={textContainerStyle}>

0 commit comments

Comments
 (0)