@wlloyalty/wll-react-sdk 1.0.104 → 1.0.105

package/dist/web.js

@@ -18891,7 +18891,6 @@ var ProgressiveImage = function (_a) {
   var baseColor = theme.alphaDerivedPrimary[20];
   var desaturatedColor = desaturateColor(baseColor);
   var backgroundColor = isDesaturated ? desaturatedColor : baseColor;
-  // Create base animated image
   var baseImage = /*#__PURE__*/React.createElement(Animated$1.Image, __assign({}, props, {
     source: source,
     style: [styles$7.imageOverlay, __assign({
@@ -18900,7 +18899,9 @@ var ProgressiveImage = function (_a) {
       filter: isDesaturated ? 'grayscale(100%)' : undefined
     })],
     onLoad: onImageLoad,
-    accessibilityLabel: alt
+    accessibilityLabel: alt,
+    accessible: true,
+    role: "img"
   }));
   return /*#__PURE__*/React.createElement(View$2, {
     style: [styles$7.container, style, {
@@ -19008,10 +19009,35 @@ var Text = function (_a) {
       fontFamily: theme.fontFamily
     } : {}
   });
+  // 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 /*#__PURE__*/React__namespace.createElement(Text$3, __assign({
     style: combinedStyles
-  }, props));
+  }, props, {
+    accessible: true,
+    role: accessibilityRole
+  }));
 };
 
 var MAX_WIDTH = 1080;
@@ -19197,24 +19223,38 @@ var BaseBanner = function (_a) {
     ctaText = _b.ctaText;
   var handlePress = useHandleTilePress(tile, ctaLink, ctaLinkTarget);
   var hasCTA = Boolean(ctaText);
-  return /*#__PURE__*/React.createElement(BannerContext.Provider, {
-    value: tile
-  }, /*#__PURE__*/React.createElement(Pressable$1, {
-    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));
+  var isInteractive = Boolean(ctaLink && !hasCTA);
+  var commonStyles = [styles$6.container, style, {
+    backgroundColor: theme.surface,
+    borderRadius: theme.sizes.borderRadiusLg
+  }];
+  if (isInteractive) {
+    return /*#__PURE__*/React.createElement(BannerContext.Provider, {
+      value: tile
+    }, /*#__PURE__*/React.createElement(Pressable$1, {
+      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));
+  } else {
+    return /*#__PURE__*/React.createElement(BannerContext.Provider, {
+      value: tile
+    }, /*#__PURE__*/React.createElement(View$2, {
+      testID: testID || 'banner-tile',
+      style: commonStyles,
+      accessible: true,
+      role: "article",
+      accessibilityLabel: accessibilityLabel || title || 'Banner'
+    }, children));
+  }
 };
 var styles$6 = StyleSheet$1.create({
   container: {
@@ -19496,10 +19536,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,
@@ -19518,29 +19555,40 @@ var BaseTileContainer = function (_a) {
     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 /*#__PURE__*/React.createElement(Pressable$1, {
-    style: function (_a) {
-      var pressed = _a.pressed;
-      return [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);
+  if (isInteractive) {
+    return /*#__PURE__*/React.createElement(Pressable$1, {
+      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);
+  } else {
+    return /*#__PURE__*/React.createElement(View$2, {
+      style: [baseStyles.container, dynamicStyles.container, {
+        backgroundColor: theme.surface
+      }, layout, style],
+      accessible: true,
+      role: "article",
+      accessibilityLabel: title || 'Tile'
+    }, children);
+  }
 };
 /**
  * BaseTileRoot component to provide context and render children.
@@ -21195,7 +21243,8 @@ var Section = function (_a) {
     style: styles.section,
     accessible: true,
     accessibilityLabel: "Section: ".concat(sectionData.title || 'Untitled section'),
-    accessibilityHint: sectionData.description || undefined
+    accessibilityHint: sectionData.description || undefined,
+    role: "region"
   }, renderSectionContent()))) : null;
 };
 
@@ -21377,7 +21426,8 @@ var GroupSections = function () {
   var Container = IS_WEB ? View$2 : ScrollView$2;
   return /*#__PURE__*/React.createElement(Container, {
     accessible: true,
-    accessibilityLabel: "Group: ".concat(groupData.name || 'Unnamed group')
+    accessibilityLabel: "Group: ".concat(groupData.name || 'Unnamed group'),
+    role: "region"
   }, sortedSections.map(function (section) {
     return /*#__PURE__*/React.createElement(Section, {
       key: section.id,