accessibilityLabel & accessibilityRole

import type { PressableProps } from "react-native";
import { Pressable, Text, StyleSheet } from "react-native";
 
type AppButtonProps = PressableProps & {
  label: string;
  hint?: string;
  variant?: "primary" | "ghost";
};
 
export function AppButton({
  label,
  hint,
  variant = "primary",
  accessibilityState,
  ...rest
}: AppButtonProps) {
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={label}
      accessibilityHint={hint}
      accessibilityState={accessibilityState}
      style={[styles.base, variant === "primary" ? styles.primary : styles.ghost]}
      {...rest}
    >
      <Text style={styles.text} importantForAccessibility="no">
        {label}
      </Text>
    </Pressable>
  );
}
 
const styles = StyleSheet.create({
  base: { minHeight: 44, paddingHorizontal: 16, borderRadius: 8, justifyContent: "center" },
  primary: { backgroundColor: "#2563eb" },
  ghost: { backgroundColor: "transparent" },
  text: { color: "#fff", fontWeight: "600", textAlign: "center" },
});

import { Pressable, Text, View, StyleSheet } from "react-native";
 
type SettingsRowProps = {
  title: string;
  subtitle?: string;
  onPress: () => void;
};
 
export function SettingsRow({ title, subtitle, onPress }: SettingsRowProps) {
  const label = subtitle ? `${title}, ${subtitle}` : title;
 
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={label}
      accessibilityHint="Abre configuración"
      onPress={onPress}
      style={styles.row}
    >
      <View
        style={styles.content}
        importantForAccessibility="no-hide-descendants"
        accessibilityElementsHidden
      >
        <Text style={styles.title}>{title}</Text>
        {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
        <Text style={styles.chevron} accessible={false}>
          ›
        </Text>
      </View>
    </Pressable>
  );
}
 
const styles = StyleSheet.create({
  row: { paddingVertical: 14, paddingHorizontal: 16, minHeight: 48 },
  content: { flexDirection: "row", alignItems: "center", gap: 8 },
  title: { flex: 1, fontSize: 16, fontWeight: "600" },
  subtitle: { fontSize: 14, color: "#64748b" },
  chevron: { fontSize: 20, color: "#94a3b8" },
});

import type { PressableProps, ViewProps } from "react-native";
import { Pressable, View } from "react-native";
 
type CardProps = ViewProps & {
  onPress?: PressableProps["onPress"];
  accessibilityLabel: string;
};
 
export function Card({ onPress, accessibilityLabel, children, ...viewProps }: CardProps) {
  if (onPress) {
    return (
      <Pressable
        accessibilityRole="button"
        accessibilityLabel={accessibilityLabel}
        onPress={onPress}
        style={viewProps.style}
      >
        {children}
      </Pressable>
    );
  }
 
  return (
    <View
      accessibilityRole="summary"
      accessibilityLabel={accessibilityLabel}
      {...viewProps}
    >
      {children}
    </View>
  );
}

import { Text, TextInput, View, StyleSheet } from "react-native";
 
export function Field({ label, value, onChangeText }: { label: string; value: string; onChangeText: (t: string) => void }) {
  const labelId = `field-${label.replace(/\s/g, "-").toLowerCase()}`;
 
  return (
    <View style={styles.field}>
      <Text nativeID={labelId} style={styles.label}>
        {label}
      </Text>
      <TextInput
        value={value}
        onChangeText={onChangeText}
        accessibilityLabelledBy={labelId}
        accessibilityLabel={label}
      />
    </View>
  );
}
 
const styles = StyleSheet.create({
  field: { gap: 4 },
  label: { fontWeight: "600" },
});

<Pressable
  accessibilityRole="button"
  accessibilityLabel="Agregar a favoritos"
  accessibilityState={{
    disabled: isLoading,
    selected: isFavorite,
    busy: isLoading,
  }}
/>

import { Pressable, Text, View, StyleSheet } from "react-native";
 
export function QuantityStepper({
  value,
  onIncrement,
  onDecrement,
}: {
  value: number;
  onIncrement: () => void;
  onDecrement: () => void;
}) {
  return (
    <View
      accessible
      accessibilityRole="adjustable"
      accessibilityLabel="Cantidad"
      accessibilityValue={{ text: String(value) }}
      accessibilityActions={[
        { name: "increment", label: "Aumentar cantidad" },
        { name: "decrement", label: "Disminuir cantidad" },
      ]}
      onAccessibilityAction={(e) => {
        if (e.nativeEvent.actionName === "increment") onIncrement();
        if (e.nativeEvent.actionName === "decrement") onDecrement();
      }}
      style={styles.row}
    >
      <Pressable accessibilityLabel="Disminuir" onPress={onDecrement}>
        <Text>−</Text>
      </Pressable>
      <Text>{value}</Text>
      <Pressable accessibilityLabel="Aumentar" onPress={onIncrement}>
        <Text>+</Text>
      </Pressable>
    </View>
  );
}
 
const styles = StyleSheet.create({
  row: { flexDirection: "row", alignItems: "center", gap: 12 },
});

<Pressable
  accessibilityRole="button"
  accessibilityLabel={`Mensajes, ${unread} sin leer`}
  accessibilityHint="Abre la bandeja de entrada"
/>

features/** → debe importar { AppButton, IconButton } desde @/shared/ui