From dfc14b326fd688e9c55711300fc35c590ae0076c Mon Sep 17 00:00:00 2001
From: Simon van Lierde <simonvanlierde@gmail.com>
Date: Mon, 7 Sep 2026 08:26:47 +0200
Subject: [PATCH 1/2] fix(app): render interpolated button labels as one text
 node

- AppButton wraps an all-primitive child run in a single Text, so
  "Select all ({count})" no longer splits into three gapped nodes
- renovate: force vulnerabilityAlerts.enabled so alerts still raise PRs
  for the Expo-owned packages that are otherwise disabled
- test setup: drop the unawaited manual cleanup(); RNTL 14 registers its own
- test-utils/host: use container.queryAll instead of a hand-rolled walk
  that also returned the container
---
 .github/renovate.json                           |  3 ++-
 app/config/setup.shared.ts                      |  3 ---
 app/src/components/base/AppButton.tsx           | 17 +++++++++++------
 .../base/__tests__/AppButton.test.tsx           | 17 +++++++++++++++++
 app/src/test-utils/host.ts                      | 12 ++----------
 5 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/.github/renovate.json b/.github/renovate.json
index 0a2dcae3..9d930f5d 100644
--- a/.github/renovate.json
+++ b/.github/renovate.json
@@ -12,7 +12,8 @@
   "labels": ["dependencies"],
   "osvVulnerabilityAlerts": true,
   "vulnerabilityAlerts": {
-    "addLabels": ["security"]
+    "addLabels": ["security"],
+    "enabled": true
   },
   "packageRules": [
     {
diff --git a/app/config/setup.shared.ts b/app/config/setup.shared.ts
index b921c37b..1175929b 100644
--- a/app/config/setup.shared.ts
+++ b/app/config/setup.shared.ts
@@ -1,5 +1,4 @@
 import { afterAll, afterEach, beforeEach, jest } from '@jest/globals';
-import { cleanup } from '@testing-library/react-native';
 import type React from 'react';
 import { server } from '@/test-utils/server';
 
@@ -30,11 +29,9 @@ beforeEach(() => server.listen({ onUnhandledRequest: 'error' }));
 afterEach(() => {
   server.resetHandlers();
   server.close();
-  cleanup();
   jest.clearAllTimers();
 });
 afterAll(() => {
-  cleanup();
   jest.clearAllTimers();
   jest.useRealTimers();
   server.close();
diff --git a/app/src/components/base/AppButton.tsx b/app/src/components/base/AppButton.tsx
index 5b2e02b8..30c42e84 100644
--- a/app/src/components/base/AppButton.tsx
+++ b/app/src/components/base/AppButton.tsx
@@ -36,12 +36,17 @@ export function AppButton({
   ...rest
 }: AppButtonProps) {
   const { colors } = useAppTheme();
-  // Bare RN text nodes must live inside <Text>, and an interpolated label
-  // ("Select all ({count})") arrives as an array of them, not a single string.
-  // Wrap each primitive and leave element children alone.
-  const renderedChildren = Children.map(children, (child) =>
-    typeof child === 'string' || typeof child === 'number' ? <Text>{child}</Text> : child,
-  );
+  // Bare RN text nodes must live inside <Text>. An interpolated label
+  // ("Select all ({count})") arrives as an array of primitives; wrap the whole
+  // run in one <Text> so it stays a single node (no flex gaps, one a11y label).
+  const parts = Children.toArray(children);
+  const isPrimitive = (c: unknown) => typeof c === 'string' || typeof c === 'number';
+  const renderedChildren =
+    parts.length > 0 && parts.every(isPrimitive) ? (
+      <Text>{children}</Text>
+    ) : (
+      Children.map(children, (child) => (isPrimitive(child) ? <Text>{child}</Text> : child))
+    );
   return (
     <Button
       variant={VARIANT_MAP[variant]}
diff --git a/app/src/components/base/__tests__/AppButton.test.tsx b/app/src/components/base/__tests__/AppButton.test.tsx
index 4cb9033c..c9acd8fa 100644
--- a/app/src/components/base/__tests__/AppButton.test.tsx
+++ b/app/src/components/base/__tests__/AppButton.test.tsx
@@ -1,5 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react-native';
 import { AppButton } from '@/components/base/AppButton';
+import { Text } from '@/components/base/ui/text';
 
 // react-native's own Platform.select (Platform.ios.js) hardcodes 'ios'/'native'
 // key checks and ignores Platform.OS, and the vendored ui/button.tsx computes
@@ -113,3 +114,19 @@ test('has web hover, cursor, and focus-visible affordances', async () => {
   expect(className).toEqual(expect.stringContaining('hover:'));
   expect(className).toEqual(expect.stringContaining('focus-visible:'));
 });
+
+test('interpolated label renders as one Text node', async () => {
+  const count = 2;
+  await render(<AppButton onPress={() => {}}>Select all ({count})</AppButton>);
+  expect(screen.getByText('Select all (2)')).toBeTruthy();
+  expect(screen.container.queryAll((el) => el.type === 'Text')).toHaveLength(1);
+});
+
+test('element children are left unwrapped', async () => {
+  await render(
+    <AppButton onPress={() => {}}>
+      <Text>Custom</Text>
+    </AppButton>,
+  );
+  expect(screen.container.queryAll((el) => el.type === 'Text')).toHaveLength(1);
+});
diff --git a/app/src/test-utils/host.ts b/app/src/test-utils/host.ts
index 7b69474a..023e548d 100644
--- a/app/src/test-utils/host.ts
+++ b/app/src/test-utils/host.ts
@@ -8,7 +8,7 @@ type HostElement = ReturnType<typeof screen.getByTestId>;
  * v14 renders host elements only, so the `UNSAFE_*ByType` / `UNSAFE_*ByProps`
  * queries that could return composite components are gone. Where a test asserts
  * on something with no accessible handle — an icon's stroke width, a list's
- * paging threshold — these walk the rendered tree by host name instead. React
+ * paging threshold — these query the rendered tree by host name instead. React
  * Native's host names are not the component names: a `FlatList` is
  * `RCTScrollView`, an `Svg` is `RNSVGSvgView`, a `View` and a `TextInput` keep
  * theirs.
@@ -17,16 +17,8 @@ type HostElement = ReturnType<typeof screen.getByTestId>;
  * one exists; reach for these only when the assertion is about a prop the user
  * cannot see.
  */
-function walk(node: unknown, out: HostElement[]): HostElement[] {
-  const el = node as { type?: unknown; children?: unknown[] } | null;
-  if (!el) return out;
-  if (typeof el.type === 'string') out.push(el as unknown as HostElement);
-  for (const child of el.children ?? []) walk(child, out);
-  return out;
-}
-
 function hosts(): HostElement[] {
-  return walk(screen.container, []);
+  return screen.container.queryAll((el) => typeof el.type === 'string') as HostElement[];
 }
 
 /** Every host element rendered under the given host name. */

From 46ff82c6c294e515f19f0ad81d70fc2ede3981f2 Mon Sep 17 00:00:00 2001
From: Simon van Lierde <simonvanlierde@gmail.com>
Date: Mon, 7 Sep 2026 08:27:14 +0200
Subject: [PATCH 2/2] chore(renovate): note why vulnerabilityAlerts forces
 enabled

---
 .github/renovate.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/renovate.json b/.github/renovate.json
index 9d930f5d..8e27ac6c 100644
--- a/.github/renovate.json
+++ b/.github/renovate.json
@@ -12,6 +12,7 @@
   "labels": ["dependencies"],
   "osvVulnerabilityAlerts": true,
   "vulnerabilityAlerts": {
+    "description": "`enabled` is forced onto alert matches, so packages a rule sets `enabled: false` (the Expo-owned group) still get vulnerability PRs.",
     "addLabels": ["security"],
     "enabled": true
   },