feat: select a message by tapping its avatar in the list #91

src/components/__tests__/list-avatar-select.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest';
+import fs from 'node:fs';
+import path from 'node:path';
+
+// Selecting mail needed a long press; native #91 asks for a tap on the
+// left side, as the webmail's avatar does.
+
+describe('list row avatar (#91)', () => {
+  it('toggles the row into the selection on a tap', () => {
+    const src = fs.readFileSync(path.resolve(__dirname, '../../screens/EmailListScreen.tsx'), 'utf8');
+    const avatar = src.slice(src.indexOf('{density.showAvatar && ('), src.indexOf('{/* Content */}'));
+    expect(avatar).toMatch(/<Pressable\s+onPress=\{handleLongPress\}/);
+    expect(avatar).toMatch(/accessibilityRole="checkbox"/);
+    expect(avatar).toMatch(/accessibilityState=\{\{ checked: selected \}\}/);
+    expect(avatar).toMatch(/<SenderAvatar/);
+  });
+});

src/screens/EmailListScreen.tsx

@@ -228,13 +228,27 @@ const EmailRow = React.memo(function EmailRow({
         </View>
       )}
       {density.showAvatar && (
-        <SenderAvatar
+        // A tap on the avatar picks the row and starts selection mode, like
-          name={senderName}
+        // a long press (#91).
-          email={senderEmail}
+        <Pressable
-          size={componentSizes.avatarMd}
+          onPress={handleLongPress}
-          disableImages={disableAvatarImages}
+          hitSlop={4}
-          senderWarning={senderWarning}
+          accessibilityRole="checkbox"
-        />
+          accessibilityState={{ checked: selected }}
+          accessibilityLabel={tr('email_list.batch_actions.select_row', 'Select {sender}: {subject}', {
+            sender: senderName,
+            subject: singleLine(item.subject) || tr('email_viewer.no_subject', '(No Subject)'),
+          })}
+          testID="email-row-avatar"
+        >
+          <SenderAvatar
+            name={senderName}
+            email={senderEmail}
+            size={componentSizes.avatarMd}
+            disableImages={disableAvatarImages}
+            senderWarning={senderWarning}
+          />
+        </Pressable>
       )}
 
       {/* Content */}