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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namiml/expo-sdk",
-  "version": "3.4.6-dev.202607170209",
+  "version": "3.4.6-dev.202607171421",
   "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.202607170209",
-    "@namiml/sdk-core": "3.4.6-dev.202607170209",
+    "@namiml/expo-nami-iap": "3.4.6-dev.202607171421",
+    "@namiml/sdk-core": "3.4.6-dev.202607171421",
     "react-native-qrcode-svg": "^6.3.21",
     "react-native-safe-area-context": "^5.6.0",
     "react-native-svg": "^15.15.4"

package/src/components/containers/NamiCollapseContainer.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { View, Pressable, Animated } from 'react-native';
 import { useFirstFocusReadyContext, usePaywallContext } from '../../context/PaywallContext';
 import { applyStyles, childSpacingStyle, focusedStyleOverrides, parseSizeOrPercent } from '../../utils/styles';
+import { collapseHeaderA11yProps, collapseBodyA11yProps } from '../../utils/rendering';
 import { TemplateRenderer } from '../TemplateRenderer';
 import type { TComponent, TCollapseContainer } from '@namiml/sdk-core';
 import { FocusedStyleProvider, FocusScope, useFocusableState, useFocusEnabled, useRegisterPreferredFocus } from '../../context/FocusContext';
@@ -96,13 +97,17 @@ export const NamiCollapseContainer: React.FC<Props> = ({ component, scaleFactor,
             onFocus={handleFocus}
             onBlur={onBlur}
             hasTVPreferredFocus={focusEnabled && initialFocus}
+            {...collapseHeaderA11yProps(isOpen)}
             style={({ pressed }) => [{ opacity: pressed ? 0.7 : 1 }]}
           >
             {headerContainer ? (
               <TemplateRenderer component={headerContainer as any} scaleFactor={scaleFactor} onClose={onClose} parentDirection={direction} />
             ) : null}
           </Pressable>
-          <Animated.View style={[{ maxHeight, overflow: 'hidden' }, bodySizeStyle, headerSpacing]}>
+          <Animated.View
+            {...collapseBodyA11yProps(isOpen)}
+            style={[{ maxHeight, overflow: 'hidden' }, bodySizeStyle, headerSpacing]}
+          >
             {bodyComponents.map((child: TComponent, i: number) => (
               <View key={child.id ?? i} style={childSpacingStyle(i, { spacing: component.spacing, direction: component.direction }, scaleFactor)}>
                 <TemplateRenderer component={child} scaleFactor={scaleFactor} onClose={onClose} parentDirection={direction} />

package/src/utils/rendering.ts

@@ -214,6 +214,28 @@ export function getRepeatingListBlocks(ctx: any, component: any): TComponent[][]
   return result;
 }
 
+/**
+ * Accessibility props for a collapse container's trigger (NAM-2528): a button
+ * whose expanded/collapsed state is announced by VoiceOver/TalkBack.
+ */
+export function collapseHeaderA11yProps(isOpen: boolean) {
+  return {
+    accessibilityRole: 'button' as const,
+    accessibilityState: { expanded: isOpen },
+  };
+}
+
+/**
+ * Accessibility props for a collapse container's body, which stays mounted at
+ * maxHeight 0 while collapsed and must be hidden from assistive tech then.
+ */
+export function collapseBodyA11yProps(isOpen: boolean) {
+  return {
+    accessibilityElementsHidden: !isOpen,
+    importantForAccessibility: (isOpen ? 'auto' : 'no-hide-descendants') as 'auto' | 'no-hide-descendants',
+  };
+}
+
 function testObjectMatches(
   ctx: any,
   { value: rawValue, expected, operator }: { value: any; expected: any; operator: string },