@wlloyalty/wll-react-sdk 1.0.104 → 1.0.105

package/dist/native.js

@@ -2312,13 +2312,12 @@ var ProgressiveImage = function (_a) {
     var baseColor = theme.alphaDerivedPrimary[20];
     var desaturatedColor = desaturateColor(baseColor);
     var backgroundColor = isDesaturated ? desaturatedColor : baseColor;
-    // Create base animated image
     var baseImage = (jsxRuntimeExports.jsx(reactNative.Animated.Image, __assign({}, props, { source: source, style: [
             styles$7.imageOverlay,
             __assign({ opacity: imageAnimated }, (IS_WEB && {
                 filter: isDesaturated ? 'grayscale(100%)' : undefined,
             })),
-        ], onLoad: onImageLoad, accessibilityLabel: alt })));
+        ], onLoad: onImageLoad, accessibilityLabel: alt, accessible: true, role: "img" })));
     return (jsxRuntimeExports.jsxs(reactNative.View, { style: [styles$7.container, style, { backgroundColor: backgroundColor }], children: [jsxRuntimeExports.jsx(reactNative.Animated.View, { style: [
                     styles$7.imageOverlay,
                     {
@@ -2405,13 +2404,35 @@ var Text = function (_a) {
             }
             : {},
     });
+    // Determine appropriate accessibility role based on variant
+    // This helps screen readers understand the semantic meaning
+    var accessibilityRole;
+    switch (variant) {
+        case 'title':
+            accessibilityRole = 'header';
+            break;
+        case 'caption':
+            accessibilityRole = 'text';
+            break;
+        case 'eyebrow':
+            accessibilityRole = 'text';
+            break;
+        case 'description':
+            accessibilityRole = 'paragraph';
+            break;
+        case 'label':
+            accessibilityRole = 'text';
+            break;
+        default:
+            accessibilityRole = 'text';
+    }
     var combinedStyles = [
         styles.base,
         variantStyle,
         styles.webOverrides,
         style,
     ];
-    return jsxRuntimeExports.jsx(reactNative.Text, __assign({ style: combinedStyles }, props));
+    return (jsxRuntimeExports.jsx(reactNative.Text, __assign({ style: combinedStyles }, props, { accessible: true, role: accessibilityRole })));
 };
 
 var MAX_WIDTH = 1080;
@@ -2592,19 +2613,26 @@ var BaseBanner = function (_a) {
     var _b = tile.configuration, ctaLink = _b.ctaLink, ctaLinkTarget = _b.ctaLinkTarget, title = _b.title, ctaText = _b.ctaText;
     var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
     var hasCTA = Boolean(ctaText);
-    return (jsxRuntimeExports.jsx(BannerContext.Provider, { value: tile, children: jsxRuntimeExports.jsx(reactNative.Pressable, { testID: testID || 'banner-tile', style: function (_a) {
-                var pressed = _a.pressed;
-                return [
-                    styles$6.container,
-                    style,
-                    {
-                        backgroundColor: theme.surface,
-                        borderRadius: theme.sizes.borderRadiusLg,
-                        opacity: pressed ? 0.7 : 1,
-                    },
-                ];
-            }, onPress: hasCTA ? undefined : handlePress, disabled: !ctaLink || hasCTA, accessible: true, role: hasCTA ? 'article' : 'button', accessibilityLabel: accessibilityLabel ||
-                "".concat(title).concat(!hasCTA && ctaLink ? ' - Click to open' : ''), children: children }) }));
+    var isInteractive = Boolean(ctaLink && !hasCTA);
+    var commonStyles = [
+        styles$6.container,
+        style,
+        {
+            backgroundColor: theme.surface,
+            borderRadius: theme.sizes.borderRadiusLg,
+        },
+    ];
+    if (isInteractive) {
+        return (jsxRuntimeExports.jsx(BannerContext.Provider, { value: tile, children: jsxRuntimeExports.jsx(reactNative.Pressable, { testID: testID || 'banner-tile', style: function (_a) {
+                    var pressed = _a.pressed;
+                    return __spreadArray(__spreadArray([], commonStyles, true), [
+                        { opacity: pressed ? 0.7 : 1 },
+                    ], false);
+                }, onPress: handlePress, accessible: true, role: "button", accessibilityLabel: accessibilityLabel || "".concat(title, " - Click to open"), children: children }) }));
+    }
+    else {
+        return (jsxRuntimeExports.jsx(BannerContext.Provider, { value: tile, children: jsxRuntimeExports.jsx(reactNative.View, { testID: testID || 'banner-tile', style: commonStyles, accessible: true, role: "article", accessibilityLabel: accessibilityLabel || title || 'Banner', children: children }) }));
+    }
 };
 var styles$6 = reactNative.StyleSheet.create({
     container: {
@@ -2845,10 +2873,7 @@ var useTileContext = function () {
     return context;
 };
 /**
- * BaseTileContainer component to handle layout and pressable behavior.
- *
- * @param {BaseTileRootProps} props - Component props
- * @returns {JSX.Element} The rendered BaseTileContainer
+ * BaseTileContainer component with dynamic accessibility role based on CTA link
  */
 var BaseTileContainer = function (_a) {
     var children = _a.children, style = _a.style;
@@ -2859,25 +2884,39 @@ var BaseTileContainer = function (_a) {
     var _b = tile.configuration, _c = _b.ctaLink, ctaLink = _c === void 0 ? '' : _c, ctaLinkTarget = _b.ctaLinkTarget, _d = _b.title, title = _d === void 0 ? 'Tile' : _d;
     var theme = (sdk === null || sdk === void 0 ? void 0 : sdk.theme) || { surface: '#ffffff' };
     var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
+    var isInteractive = Boolean(ctaLink || tile.type === 'REWARD' || tile.type === 'REWARD_CATEGORY');
     var layout = {
         flexDirection: 'column',
         justifyContent: isHalfSize ? 'center' : 'flex-start',
         alignItems: 'stretch',
     };
     var dynamicStyles = useBaseTileStyles();
-    return (jsxRuntimeExports.jsx(reactNative.Pressable, { style: function (_a) {
-            var pressed = _a.pressed;
-            return [
+    if (isInteractive) {
+        return (jsxRuntimeExports.jsx(reactNative.Pressable, { style: function (_a) {
+                var pressed = _a.pressed;
+                return [
+                    baseStyles.container,
+                    dynamicStyles.container,
+                    {
+                        backgroundColor: theme.surface,
+                        opacity: pressed ? 0.7 : 1,
+                    },
+                    layout,
+                    style,
+                ];
+            }, onPress: handlePress, accessible: true, role: "button", accessibilityLabel: "".concat(title, " - Click to open"), accessibilityState: { disabled: !ctaLink }, children: children }));
+    }
+    else {
+        return (jsxRuntimeExports.jsx(reactNative.View, { style: [
                 baseStyles.container,
                 dynamicStyles.container,
                 {
                     backgroundColor: theme.surface,
-                    opacity: pressed ? 0.7 : 1,
                 },
                 layout,
                 style,
-            ];
-        }, onPress: handlePress, disabled: tile.type !== 'REWARD' && tile.type !== 'REWARD_CATEGORY' && !ctaLink, accessible: true, role: "button", accessibilityLabel: "".concat(title).concat(ctaLink ? ' - Click to open' : ''), accessibilityState: { disabled: !ctaLink }, children: children }));
+            ], accessible: true, role: "article", accessibilityLabel: title || 'Tile', children: children }));
+    }
 };
 /**
  * BaseTileRoot component to provide context and render children.
@@ -4160,7 +4199,7 @@ var Section = function (_a) {
                 return jsxRuntimeExports.jsx(EmptyState, { message: "Unknown section type." });
         }
     };
-    return sectionData ? (jsxRuntimeExports.jsx(SectionContext.Provider, { value: { sectionData: sectionData }, children: jsxRuntimeExports.jsx(reactNative.View, { style: styles.section, accessible: true, accessibilityLabel: "Section: ".concat(sectionData.title || 'Untitled section'), accessibilityHint: sectionData.description || undefined, children: renderSectionContent() }) })) : null;
+    return sectionData ? (jsxRuntimeExports.jsx(SectionContext.Provider, { value: { sectionData: sectionData }, children: jsxRuntimeExports.jsx(reactNative.View, { style: styles.section, accessible: true, accessibilityLabel: "Section: ".concat(sectionData.title || 'Untitled section'), accessibilityHint: sectionData.description || undefined, role: "region", children: renderSectionContent() }) })) : null;
 };
 
 /**
@@ -4309,7 +4348,7 @@ var GroupSections = function () {
     }
     var sortedSections = sortByPriority(activeSections);
     var Container = IS_WEB ? reactNative.View : reactNative.ScrollView;
-    return (jsxRuntimeExports.jsx(Container, { accessible: true, accessibilityLabel: "Group: ".concat(groupData.name || 'Unnamed group'), children: sortedSections.map(function (section) { return (jsxRuntimeExports.jsx(Section, { section: section }, section.id)); }) }));
+    return (jsxRuntimeExports.jsx(Container, { accessible: true, accessibilityLabel: "Group: ".concat(groupData.name || 'Unnamed group'), role: "region", children: sortedSections.map(function (section) { return (jsxRuntimeExports.jsx(Section, { section: section }, section.id)); }) }));
 };
 /**
  * A page-level component that represents a Group view in the application.