@namiml/expo-sdk 3.4.6-dev.202607162357 → 3.4.6-dev.202607170209

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namiml/expo-sdk",
-  "version": "3.4.6-dev.202607162357",
+  "version": "3.4.6-dev.202607170209",
   "type": "module",
   "description": "Nami Expo SDK — paywall and subscription management for Expo apps",
   "main": "./dist/index.cjs",
@@ -29,8 +29,8 @@
     "prepublishOnly": "yarn clean && yarn build:prod"
   },
   "dependencies": {
-    "@namiml/expo-nami-iap": "3.4.6-dev.202607162357",
-    "@namiml/sdk-core": "3.4.6-dev.202607162357",
+    "@namiml/expo-nami-iap": "3.4.6-dev.202607170209",
+    "@namiml/sdk-core": "3.4.6-dev.202607170209",
     "react-native-qrcode-svg": "^6.3.21",
     "react-native-safe-area-context": "^5.6.0",
     "react-native-svg": "^15.15.4"

package/src/components/elements/NamiImage.tsx

@@ -3,6 +3,7 @@ import { Image as RNImage, View } from 'react-native';
 import { applyStyles, parseSizeOrPercent } from '../../utils/styles';
 import { usePaywallContext } from '../../context/PaywallContext';
 import { buildSmartTextReplacements, interpolateSmartText } from '../../utils/smartText';
+import { getImageAccessibilityProps } from './imageAccessibility';
 
 // Prefer expo-image when available; fall back to react-native Image
 let ImageComponent: typeof RNImage;
@@ -146,6 +147,10 @@ export const NamiImage: React.FC<Props> = ({ component, scaleFactor, parentDirec
     applyLoadedSource(event?.source);
   }, [applyLoadedSource]);
 
+  // NAM-1450: non-blank alt exposes the image to screen readers; otherwise the
+  // RN default accessible={false} keeps it decorative.
+  const accessibilityProps = getImageAccessibilityProps(component);
+
   return (
     <View style={containerStyle} pointerEvents="none">
       {shouldUseNativeEdgeFit ? (
@@ -155,6 +160,7 @@ export const NamiImage: React.FC<Props> = ({ component, scaleFactor, parentDirec
           blurRadius={component.blur}
           onLoad={shouldUseNativeEdgeFit ? onNativeImageLoad : undefined}
           resizeMode={contentFit}
+          {...accessibilityProps}
         />
       ) : (
         <ImageComponent
@@ -164,6 +170,7 @@ export const NamiImage: React.FC<Props> = ({ component, scaleFactor, parentDirec
           onLoad={shouldUseNativeEdgeFit ? onExpoImageLoad : undefined}
           {...(supportsContentPosition ? { contentPosition } : {})}
           {...(supportsContentFit ? { contentFit } : { resizeMode: contentFit })}
+          {...accessibilityProps}
         />
       )}
     </View>

package/src/components/elements/imageAccessibility.ts

@@ -0,0 +1,19 @@
+/**
+ * NAM-1450: accessibility props for the paywall image element (WCAG 1.1.1).
+ *
+ * A non-blank `alt` on the template's image component opts the image into screen
+ * reader exposure: accessible element, image role, label = alt (raw — no smart-text,
+ * matching the Web SDK's `<img alt>` handling). Anything else keeps RN's default
+ * `accessible={false}`, i.e. the image stays decorative.
+ *
+ * RN-free module so the jest node environment can unit-test it (see
+ * tests/components/elements/textInputStyle.test.ts for the pattern).
+ */
+export const getImageAccessibilityProps = (
+  component: unknown,
+): { accessible: true; accessibilityRole: 'image'; accessibilityLabel: string } | Record<string, never> => {
+  const alt = (component as { alt?: unknown } | null | undefined)?.alt;
+  const trimmed = typeof alt === 'string' ? alt.trim() : '';
+  if (!trimmed) return {};
+  return { accessible: true, accessibilityRole: 'image', accessibilityLabel: trimmed };
+};