@delacour/react-native-ui 0.4.0-alpha.20261020143428 → 0.4.0-alpha.20261020154654

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-ui",
-	"version": "0.4.0-alpha.20261020143428",
+	"version": "0.4.0-alpha.20261020154654",
 	"description": "React Native UI components — Uniwind, Reanimated, Gesture Handler",
 	"type": "module",
 	"license": "MIT",
@@ -181,7 +181,7 @@
 		"expo-blur": ">=15",
 		"@maplibre/maplibre-react-native": "^11.5.0",
 		"@central-icons-react-native/round-outlined-radius-1-stroke-1.5": "^1.1",
-		"@delacour/react-native-bottom-sheet": "0.2.0-alpha.20261020143428",
+		"@delacour/react-native-bottom-sheet": "0.2.0-alpha.20261020154654",
 		"@delacour/react-native-charts": ">=0.1.0",
 		"@legendapp/list": ">=3.3",
 		"@shopify/react-native-skia": ">=2",

package/src/components/list-group/AGENTS.md

@@ -46,14 +46,27 @@ five slots: `ItemPrefix`, `ItemContent`, `ItemTitle`, `ItemDescription`,
 - **The root clips.** `overflow-hidden` is load-bearing: a pressed row fades to
   the edge of its own box, and the first and last rows would square off the
   group's corners without it.
-- **A row is a `Pressable`.** `ListGroupItemProps` extends `PressableProps`, so
-  `feedback`, `haptic`, `pressedScale` and the rest are inherited rather than
-  restated — the row owns no vocabulary of its own. Only the default differs:
-  `feedback` defaults to `fade`, because a full-bleed row that scales reads as
-  the whole card flexing rather than as one row responding. A prop is only
-  redeclared where it genuinely changes, as [`Button`](../button/AGENTS.md) does
-  with its narrower union; redeclaring one unchanged just to hang a doc comment
-  on it puts a second definition in the tree that can drift.
+- **A row is a `Pressable` only when it has a handler.**
+  `resolveListGroupItemRender` returns `pressable` for an `onPress` or
+  `onLongPress` — role `button`, children merged into one accessible element;
+  disabled, it keeps the role, reports `disabled` and dims through
+  `opacity-50`, which `Pressable` composes with its press animation — and
+  `static` for neither: a plain `Animated.View` with the same `item` slot, no
+  role and no press feedback. A Settings row showing a value is not a control,
+  and VoiceOver announcing it as a button on every swipe is the bug this
+  prevents. The rule is `Item`'s `resolveItemRender`, restated in this folder
+  rather than imported so a list group copied by the CLI does not drag `item`
+  along; the tests pin both. `Animated.View` rather than `View` keeps the `ref`
+  one type across both branches.
+- **The pressable props are `Pressable`'s.** `ListGroupItemProps` extends
+  `PressableProps`, so `feedback`, `haptic`, `pressedScale` and the rest are
+  inherited rather than restated — the row owns no vocabulary of its own. A
+  static row ignores them. Only the default differs: `feedback` defaults to
+  `fade`, because a full-bleed row that scales reads as the whole card flexing
+  rather than as one row responding. A prop is only redeclared where it
+  genuinely changes, as [`Button`](../button/AGENTS.md) does with its narrower
+  union; redeclaring one unchanged just to hang a doc comment on it puts a
+  second definition in the tree that can drift.
 - **Icons are composed, never passed as props.** `ItemPrefix` wraps its subtree
   in an `IconDefaultsProvider` carrying the `prefixIcon` slot — a step on the
   shared icon scale, like every other glyph in the library — and `foreground`,

package/src/components/list-group/list-group-item.tsx

@@ -1,7 +1,9 @@
 import { Children, type ReactElement, type ReactNode, useMemo } from "react";
+import type { AccessibilityState } from "react-native";
+import Animated from "react-native-reanimated";
 import { Pressable, type PressableProps } from "../pressable";
 import { useListGroupPart } from "./list-group.context";
-import { listGroupVariants } from "./list-group.variants";
+import { listGroupVariants, resolveListGroupItemRender } from "./list-group.variants";
 import { ListGroupItemContent } from "./list-group-item-content";
 import { ListGroupItemTitle } from "./list-group-item-title";
 
@@ -19,30 +21,63 @@ export type ListGroupItemProps = Omit<PressableProps, "children" | "disabled"> &
  * not a convenience — without it `<ListGroup.Item>Wi-Fi</ListGroup.Item>` would
  * crash.
  *
- * A row is a `Pressable`, so `feedback`, `haptic` and the rest come from there
- * rather than being restated here. Only the default differs: `fade`, because a
- * full-bleed row that scales reads as the whole card flexing rather than as one
- * row responding.
+ * Give it an `onPress` or `onLongPress` and it is a `Pressable`, announced as a
+ * button — disabled too, when it keeps the role and reports `disabled`. Leave
+ * both off and it is a plain view with the same layout, no role and no press
+ * feedback, so a static Settings row never claims to be a control.
+ * `resolveListGroupItemRender` makes that call.
+ *
+ * `feedback`, `haptic` and the rest come from `Pressable` rather than being
+ * restated here. Only the default differs: `fade`, because a full-bleed row
+ * that scales reads as the whole card flexing rather than as one row
+ * responding.
  */
 export function ListGroupItem({
 	feedback = "fade",
 	isDisabled = false,
+	haptic,
+	pressedScale,
+	pressedOpacity,
+	busy,
+	asChild,
+	onPress,
+	onLongPress,
+	accessibilityState,
 	className,
 	children,
 	...props
 }: ListGroupItemProps): ReactElement {
 	const { size } = useListGroupPart("ListGroup.Item");
 	const content = useMemo(() => wrapTextChildren(children), [children]);
+	const itemClassName = listGroupVariants({ isDisabled, size }).item({ className });
+
+	if (resolveListGroupItemRender({ isDisabled, onLongPress, onPress }) === "pressable") {
+		return (
+			<Pressable
+				accessibilityState={accessibilityState}
+				asChild={asChild}
+				busy={busy}
+				className={itemClassName}
+				disabled={isDisabled}
+				feedback={feedback}
+				haptic={haptic}
+				onLongPress={onLongPress}
+				onPress={onPress}
+				pressedOpacity={pressedOpacity}
+				pressedScale={pressedScale}
+				{...props}
+			>
+				{content}
+			</Pressable>
+		);
+	}
+
+	const state: AccessibilityState = { ...accessibilityState, busy, disabled: isDisabled };
 
 	return (
-		<Pressable
-			className={listGroupVariants({ isDisabled, size }).item({ className })}
-			disabled={isDisabled}
-			feedback={feedback}
-			{...props}
-		>
+		<Animated.View accessibilityState={state} className={itemClassName} {...props}>
 			{content}
-		</Pressable>
+		</Animated.View>
 	);
 }
 ListGroupItem.displayName = "DelacourUI.ListGroup.Item";

package/src/components/list-group/list-group.variants.test.ts

@@ -1,6 +1,11 @@
 import { describe, expect, test } from "bun:test";
 import { ICON_SIZE_TOKENS } from "../../styles/tokens";
-import { LIST_GROUP_SIZES, LIST_GROUP_VARIANTS, listGroupVariants } from "./list-group.variants";
+import {
+	LIST_GROUP_SIZES,
+	LIST_GROUP_VARIANTS,
+	listGroupVariants,
+	resolveListGroupItemRender,
+} from "./list-group.variants";
 
 /** Pulls the horizontal padding step out of a class string — `px-4` yields 4. */
 function paddingStep(cls: string): string | undefined {
@@ -221,3 +226,26 @@ describe("listGroupVariants icon slots", () => {
 		}
 	});
 });
+
+describe("resolveListGroupItemRender", () => {
+	const noop = () => {};
+
+	// A Settings row with only a value or a switch-for-show is not a control;
+	// announcing it as a button is a lie VoiceOver tells on every swipe.
+	test("is static without a press handler, disabled or not", () => {
+		expect(resolveListGroupItemRender({ isDisabled: false })).toBe("static");
+		expect(resolveListGroupItemRender({ isDisabled: true })).toBe("static");
+	});
+
+	test("is a pressable with a handler", () => {
+		expect(resolveListGroupItemRender({ isDisabled: false, onPress: noop })).toBe("pressable");
+		expect(resolveListGroupItemRender({ isDisabled: false, onLongPress: noop })).toBe("pressable");
+	});
+
+	// A disabled action is still an action: it keeps the button role and
+	// reports `disabled`, rather than vanishing into a plain view.
+	test("stays a pressable when disabled", () => {
+		expect(resolveListGroupItemRender({ isDisabled: true, onPress: noop })).toBe("pressable");
+		expect(resolveListGroupItemRender({ isDisabled: true, onLongPress: noop })).toBe("pressable");
+	});
+});

package/src/components/list-group/list-group.variants.ts

@@ -105,3 +105,27 @@ export const listGroupVariants = tv({
 });
 
 export type ListGroupVariantProps = VariantProps<typeof listGroupVariants>;
+
+/**
+ * What a list group row renders as.
+ *
+ * - `pressable` — it has a handler: a `Pressable`, announced as a button. A
+ *   disabled one keeps the role, reports `disabled`, and dims through
+ *   `opacity-50`, which `Pressable` composes with its press animation.
+ * - `static` — no handler: a plain view with no role and no press feedback. A
+ *   static row announcing itself as a button is a lie VoiceOver tells on every
+ *   swipe.
+ *
+ * The same rule as `resolveItemRender`, restated rather than imported so the
+ * list group does not take a registry dependency on `item`.
+ */
+export type ListGroupItemRender = "pressable" | "static";
+
+export function resolveListGroupItemRender(options: {
+	onPress?: () => void;
+	onLongPress?: () => void;
+	isDisabled: boolean;
+}): ListGroupItemRender {
+	const hasHandler = options.onPress !== undefined || options.onLongPress !== undefined;
+	return hasHandler ? "pressable" : "static";
+}