@wlloyalty/wll-react-sdk 1.0.103 → 1.0.105

package/dist/index.d.ts

@@ -196,6 +196,7 @@ declare class BadgeTileConfig {
     emptyBadgeArtworkUrl?: string;
     awardedDatePrefix?: string;
     badgeNotEarnedMessage?: string;
+    lastEarnedAt?: string;
 }
 type BadgeDetail = {
     name: string;

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: {
@@ -2649,7 +2677,7 @@ var BaseTileBody = function (props) {
             return undefined;
         return isDesktop ? 3 : isTablet ? 4 : 3;
     };
-    return (jsxRuntimeExports.jsx(Text, __assign({ variant: "body" }, props, { accessibilityRole: "text", accessibilityLabel: body, numberOfLines: getNumberOfLines(), testID: "tile-body", children: body })));
+    return (jsxRuntimeExports.jsx(Text, __assign({ variant: "body" }, props, { role: "article", accessibilityLabel: body, numberOfLines: getNumberOfLines(), testID: "tile-body", children: body })));
 };
 
 /**
@@ -2761,7 +2789,7 @@ var BaseTileContent = function (_a) {
                 justifyContent: 'center',
                 height: !artworkUrl ? '100%' : undefined,
             },
-        ], accessibilityRole: "none", children: children }));
+        ], role: "none", children: children }));
 };
 
 /**
@@ -2784,7 +2812,7 @@ var BaseTileHeader = function (_a) {
         return null;
     var dynamicStyles = useBaseTileStyles();
     var combinedStyle = __assign(__assign(__assign({}, dynamicStyles.header), { marginTop: sizeInfo.isHalfSize ? 0 : dynamicStyles.header.marginTop }), (sizeInfo.isHalfSize ? { alignItems: 'center' } : {}));
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: combinedStyle, testID: "tile-header", accessibilityRole: "header", children: children }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: combinedStyle, testID: "tile-header", role: "heading", children: children }));
 };
 
 /**
@@ -2801,7 +2829,7 @@ var BaseTileMedia = function (props) {
     var styles = useBaseTileStyles();
     if (!artworkUrl)
         return null;
-    return (jsxRuntimeExports.jsx(ProgressiveImage, __assign({}, props, { source: { uri: artworkUrl }, testID: "tile-media", style: [props.style, baseStyles.media, styles.media], alt: "Content image".concat(title ? " for ".concat(title) : ''), accessibilityRole: "image" })));
+    return (jsxRuntimeExports.jsx(ProgressiveImage, __assign({}, props, { source: { uri: artworkUrl }, testID: "tile-media", style: [props.style, baseStyles.media, styles.media], alt: "Content image".concat(title ? " for ".concat(title) : ''), role: "img" })));
 };
 
 /**
@@ -2824,7 +2852,7 @@ var BaseTileTitle = function () {
     // Don't show title for half tiles with image
     if ((isHalfSize && artworkUrl) || !title)
         return null;
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Text, { variant: "title", accessibilityRole: "header", accessibilityLabel: title, numberOfLines: 1, testID: "tile-title", children: title }), ctaLink && (jsxRuntimeExports.jsx(Icon, { name: "ChevronRight", color: (_b = (_a = sdk.theme) === null || _a === void 0 ? void 0 : _a.derivedSurfaceText) === null || _b === void 0 ? void 0 : _b[20], accessibilityLabel: "View details" }))] }));
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Text, { variant: "title", role: "heading", accessibilityLabel: title, numberOfLines: 1, testID: "tile-title", children: title }), ctaLink && (jsxRuntimeExports.jsx(Icon, { name: "ChevronRight", color: (_b = (_a = sdk.theme) === null || _a === void 0 ? void 0 : _a.derivedSurfaceText) === null || _b === void 0 ? void 0 : _b[20], accessibilityLabel: "View details" }))] }));
 };
 
 /**
@@ -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, accessibilityRole: "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.
@@ -3102,6 +3141,63 @@ function withTileFetching(WrappedComponent) {
     };
 }
 
+/**
+ * Sorts tiles by priority (higher priority first) and maintains original order for equal priorities
+ * @param tiles Array of tiles to sort
+ * @returns Sorted array of tiles
+ */
+var sortByPriority = function (tiles) {
+    return __spreadArray([], tiles, true).sort(function (a, b) {
+        // Sort by priority (higher priority first)
+        if (a.priority !== b.priority) {
+            return b.priority - a.priority;
+        }
+        // If priorities are equal, maintain original order
+        return tiles.indexOf(a) - tiles.indexOf(b);
+    });
+};
+/**
+ * Transforms locale to a locale that is supported by the browser
+ * @param locale Two-letter locale code to transform (en, fr, etc.)
+ * @returns Full locale string (e.g., en-GB, fr-FR)
+ */
+var transformLocale = function (locale) {
+    var localeMapping = {
+        en: 'en-GB',
+        fr: 'fr-FR',
+        es: 'es-ES',
+        de: 'de-DE',
+        it: 'it-IT',
+        pt: 'pt-PT',
+        us: 'en-US',
+    };
+    var languageCode = (locale !== null && locale !== void 0 ? locale : 'en').toLowerCase();
+    return localeMapping[languageCode] || 'en-GB';
+};
+/**
+ * Formats a date string to a localized date string based on user locale
+ * @param date Date string to format
+ * @param userLocale User's locale (defaults to 'en')
+ * @returns Formatted date string or fallback message
+ */
+var handleLastEarnedDate = function (date, userLocale) {
+    if (userLocale === void 0) { userLocale = 'en'; }
+    if (!date)
+        return 'Date not available';
+    try {
+        var formattedLocale = transformLocale(userLocale);
+        var dateObj = new Date(date);
+        if (isNaN(dateObj.getTime())) {
+            return 'Invalid Date';
+        }
+        return dateObj.toLocaleDateString(formattedLocale);
+    }
+    catch (error) {
+        console.error('Error formatting date:', error);
+        return 'Invalid Date';
+    }
+};
+
 /**
  * Custom hook that returns the styles for the BadgeTile component.
  * Applies responsive styling based on the current device.
@@ -3165,7 +3261,7 @@ var BadgeTileDateEarned = function () {
     var theme = useWllSdk().theme;
     if (!isContextValid(tileContext))
         return null;
-    var _a = tileContext.configuration, count = _a.count, awardedDatePrefix = _a.awardedDatePrefix, createdAt = _a.createdAt, badgeNotEarnedMessage = _a.badgeNotEarnedMessage, type = _a.type;
+    var _a = tileContext.configuration, count = _a.count, awardedDatePrefix = _a.awardedDatePrefix, lastEarnedAt = _a.lastEarnedAt, badgeNotEarnedMessage = _a.badgeNotEarnedMessage, type = _a.type, locale = _a.locale;
     // Don't show for Latest type with count=0
     if (type === exports.BadgeTileType.Latest && count === 0) {
         return null;
@@ -3181,10 +3277,10 @@ var BadgeTileDateEarned = function () {
     var textColor = getReadableTextColor(backgroundColor);
     var displayText = count === 0
         ? badgeNotEarnedMessage
-        : "".concat(awardedDatePrefix, " ").concat(new Date(createdAt).toLocaleDateString());
+        : "".concat(awardedDatePrefix, " ").concat(handleLastEarnedDate(lastEarnedAt, locale));
     var accessibilityLabel = count === 0
         ? 'Badge not yet earned'
-        : "Badge earned on ".concat(new Date(createdAt).toLocaleDateString());
+        : "Badge earned on ".concat(handleLastEarnedDate(lastEarnedAt, locale));
     return (jsxRuntimeExports.jsx(reactNative.View, { style: containerStyle, accessible: true, accessibilityLabel: accessibilityLabel, testID: "badge-tile-date-earned", children: jsxRuntimeExports.jsx(Text, { variant: "label", style: [styles.dateEarnedText, { color: textColor }], numberOfLines: 1, ellipsizeMode: "tail", accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: displayText }) }));
 };
 
@@ -3366,7 +3462,7 @@ var BannerTileDescription = function () {
     var description = bannerContext.configuration.description;
     if (!description)
         return null;
-    return (jsxRuntimeExports.jsx(Text, { style: styles.description, accessibilityRole: "text", accessibilityLabel: description, testID: "banner-tile-description", children: description }));
+    return (jsxRuntimeExports.jsx(Text, { style: styles.description, role: "article", accessibilityLabel: description, testID: "banner-tile-description", children: description }));
 };
 
 /**
@@ -3386,7 +3482,7 @@ var BannerTileMedia = function (_a) {
     var containerStyle = {
         width: isArtworkOnly ? '100%' : '30%',
     };
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.mediaContainer, containerStyle], accessibilityRole: "image", accessibilityLabel: "Banner image".concat(title ? " for ".concat(title) : ''), testID: "banner-tile-media", children: jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.media, alt: "Banner image".concat(title ? " for ".concat(title) : '') }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.mediaContainer, containerStyle], role: "img", accessibilityLabel: "Banner image".concat(title ? " for ".concat(title) : ''), testID: "banner-tile-media", children: jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.media, alt: "Banner image".concat(title ? " for ".concat(title) : '') }) }));
 };
 
 /**
@@ -3402,7 +3498,7 @@ var BannerTileTitle = function () {
     var title = bannerContext.configuration.title;
     if (!title)
         return null;
-    return (jsxRuntimeExports.jsx(Text, { variant: "title", testID: "banner-tile-title", style: styles.title, accessibilityRole: "header", accessibilityLabel: title, children: title }));
+    return (jsxRuntimeExports.jsx(Text, { variant: "title", testID: "banner-tile-title", style: styles.title, role: "heading", accessibilityLabel: title, children: title }));
 };
 
 /**
@@ -3508,7 +3604,7 @@ var ContentTileMedia = function (_a) {
     var containerStyle = {
         flexBasis: isArtworkOnly ? '100%' : '50%',
     };
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.imageContainer, containerStyle], testID: "content-tile-media", accessibilityRole: "image", accessibilityLabel: "Image for ".concat(title), children: jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.image, alt: "Image for ".concat(title) }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.imageContainer, containerStyle], testID: "content-tile-media", role: "img", accessibilityLabel: "Image for ".concat(title), children: jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.image, alt: "Image for ".concat(title) }) }));
 };
 
 var ContentTileSummary = function () {
@@ -3525,7 +3621,7 @@ var ContentTileSummary = function () {
     var getNumberOfLines = function () {
         return isFullSize ? 3 : isHalfSize ? 4 : 3;
     };
-    return (jsxRuntimeExports.jsx(Text, { variant: "body", accessibilityRole: "text", accessibilityLabel: body, numberOfLines: getNumberOfLines(), testID: "content-tile-summary", children: body }));
+    return (jsxRuntimeExports.jsx(Text, { variant: "body", role: "article", accessibilityLabel: body, numberOfLines: getNumberOfLines(), testID: "content-tile-summary", children: body }));
 };
 
 var ContentTileTitle = function () {
@@ -3541,7 +3637,7 @@ var ContentTileTitle = function () {
             return styles.titleWithLink;
         }
     };
-    return (jsxRuntimeExports.jsx(Text, { variant: "title", accessibilityRole: "header", accessibilityLabel: title, numberOfLines: 1, style: handleTitleWidth(), testID: "content-tile-title", children: title }));
+    return (jsxRuntimeExports.jsx(Text, { variant: "title", role: "heading", accessibilityLabel: title, numberOfLines: 1, style: handleTitleWidth(), testID: "content-tile-title", children: title }));
 };
 
 /**
@@ -3583,22 +3679,6 @@ var ContentTile = Object.assign(ContentTileRoot, {
 });
 var ContentTile$1 = withTileFetching(ContentTile);
 
-/**
- * Sorts tiles by priority (higher priority first) and maintains original order for equal priorities
- * @param tiles Array of tiles to sort
- * @returns Sorted array of tiles
- */
-var sortByPriority = function (tiles) {
-    return __spreadArray([], tiles, true).sort(function (a, b) {
-        // Sort by priority (higher priority first)
-        if (a.priority !== b.priority) {
-            return b.priority - a.priority;
-        }
-        // If priorities are equal, maintain original order
-        return tiles.indexOf(a) - tiles.indexOf(b);
-    });
-};
-
 exports.SectionType = void 0;
 (function (SectionType) {
     SectionType["Grid"] = "GRID";
@@ -4073,7 +4153,7 @@ var useSectionData = function (section, sectionId) {
  */
 var EmptyState = function (_a) {
     var message = _a.message;
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: commonStyles.emptyContainer, accessibilityRole: "text", accessibilityLabel: "Empty state: ".concat(message), children: jsxRuntimeExports.jsx(reactNative.Text, { children: message }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: commonStyles.emptyContainer, role: "article", accessibilityLabel: "Empty state: ".concat(message), children: jsxRuntimeExports.jsx(reactNative.Text, { children: message }) }));
 };
 /**
  * The Section component renders a section based on its type (e.g., Banner, Grid).
@@ -4119,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;
 };
 
 /**
@@ -4268,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.
@@ -4508,7 +4588,7 @@ var PointsTileFormattedPoints = function () {
         return null;
     var calculatedPoints = applyMultiplier(points, pointsMultiplier);
     var fullPointsText = "".concat(pointsPrefix).concat(calculatedPoints, " ").concat(pointsSuffix).trim();
-    return (jsxRuntimeExports.jsx(reactNative.View, { testID: "points-tile-points", accessibilityRole: "text", accessibilityLabel: "Points value: ".concat(fullPointsText), children: jsxRuntimeExports.jsxs(Row, { align: "center", justify: "start", children: [pointsPrefix ? (jsxRuntimeExports.jsx(Text, { variant: "caption", testID: "points-tile-prefix", children: pointsPrefix })) : null, jsxRuntimeExports.jsx(Text, { variant: "caption", testID: "points-tile-value", children: calculatedPoints }), pointsSuffix ? (jsxRuntimeExports.jsx(Text, { variant: "caption", style: styles.suffix, testID: "points-tile-suffix", children: pointsSuffix })) : null] }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { testID: "points-tile-points", role: "article", accessibilityLabel: "Points value: ".concat(fullPointsText), children: jsxRuntimeExports.jsxs(Row, { align: "center", justify: "start", children: [pointsPrefix ? (jsxRuntimeExports.jsx(Text, { variant: "caption", testID: "points-tile-prefix", children: pointsPrefix })) : null, jsxRuntimeExports.jsx(Text, { variant: "caption", testID: "points-tile-value", children: calculatedPoints }), pointsSuffix ? (jsxRuntimeExports.jsx(Text, { variant: "caption", style: styles.suffix, testID: "points-tile-suffix", children: pointsSuffix })) : null] }) }));
 };
 
 /**
@@ -4525,7 +4605,7 @@ var PointsTileMedia = function (_a) {
     var styles = usePointsTileStyles(isFullSize);
     if (!artworkUrl)
         return null;
-    return (jsxRuntimeExports.jsx(reactNative.View, { testID: "points-tile-media", style: styles.imageContainer, accessibilityRole: "image", accessibilityLabel: "Points tile image for ".concat(title), children: jsxRuntimeExports.jsx(reactNative.Image, { source: { uri: artworkUrl }, style: styles.image, resizeMode: isFullSize ? 'cover' : 'contain' }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { testID: "points-tile-media", style: styles.imageContainer, role: "img", accessibilityLabel: "Points tile image for ".concat(title), children: jsxRuntimeExports.jsx(reactNative.Image, { source: { uri: artworkUrl }, style: styles.image, resizeMode: isFullSize ? 'cover' : 'contain' }) }));
 };
 
 /**
@@ -4540,7 +4620,7 @@ var PointsTileTitle = function () {
     var title = tileContext.configuration.title;
     if (!title)
         return null;
-    return (jsxRuntimeExports.jsx(Text, { variant: "eyebrow", testID: "points-tile-title", accessibilityRole: "header", accessibilityLabel: title, children: title }));
+    return (jsxRuntimeExports.jsx(Text, { variant: "eyebrow", testID: "points-tile-title", role: "heading", accessibilityLabel: title, children: title }));
 };
 
 /**
@@ -4619,7 +4699,7 @@ var RewardCategoryHeader = function () {
     var _a = tileContext.configuration, _b = _a.showName, showName = _b === void 0 ? true : _b, _c = _a.name, name = _c === void 0 ? '' : _c;
     if (!showName || !name)
         return null;
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.header, { backgroundColor: theme.primary }], testID: "reward-category-header", accessibilityRole: "header", accessibilityLabel: "Reward category: ".concat(name), children: jsxRuntimeExports.jsx(Text, { style: [styles.headerText, { color: theme.primaryText }], ellipsizeMode: "tail", numberOfLines: 1, children: name }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.header, { backgroundColor: theme.primary }], testID: "reward-category-header", role: "heading", accessibilityLabel: "Reward category: ".concat(name), children: jsxRuntimeExports.jsx(Text, { style: [styles.headerText, { color: theme.primaryText }], ellipsizeMode: "tail", numberOfLines: 1, children: name }) }));
 };
 
 /**
@@ -4635,7 +4715,7 @@ var RewardCategoryMedia = function () {
     var _a = tileContext.configuration, artworkUrl = _a.artworkUrl, _b = _a.name, name = _b === void 0 ? 'Reward' : _b;
     if (!artworkUrl)
         return null;
-    return (jsxRuntimeExports.jsx(ProgressiveImage, { testID: "reward-category-media", source: { uri: artworkUrl }, style: styles.background, alt: "Reward category image for ".concat(name), accessibilityRole: "image" }));
+    return (jsxRuntimeExports.jsx(ProgressiveImage, { testID: "reward-category-media", source: { uri: artworkUrl }, style: styles.background, alt: "Reward category image for ".concat(name), role: "img" }));
 };
 
 /**
@@ -4668,7 +4748,7 @@ var RewardCategoryTile$1 = withTileFetching(RewardCategoryTile);
 var RewardTileChevron = function () {
     var _a;
     var theme = useWllSdk().theme;
-    return (jsxRuntimeExports.jsx(Icon, { name: "ChevronRight", size: IS_MOBILE ? 16 : undefined, color: ((_a = theme === null || theme === void 0 ? void 0 : theme.derivedSurfaceText) === null || _a === void 0 ? void 0 : _a[20]) || '#000000', accessibilityRole: "image", accessibilityLabel: "View reward details" }));
+    return (jsxRuntimeExports.jsx(Icon, { name: "ChevronRight", size: IS_MOBILE ? 16 : undefined, color: ((_a = theme === null || theme === void 0 ? void 0 : theme.derivedSurfaceText) === null || _a === void 0 ? void 0 : _a[20]) || '#000000', role: "img", accessibilityLabel: "View reward details" }));
 };
 
 /**
@@ -4742,7 +4822,7 @@ var RewardTileMedia = function (_a) {
     var containerStyle = {
         flexBasis: isArtworkOnly ? '100%' : '50%',
     };
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.imageContainer, containerStyle], testID: "reward-tile-media", accessibilityRole: "image", accessibilityLabel: "Reward image for ".concat(name), children: jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.image, alt: "Reward image for ".concat(name) }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles.imageContainer, containerStyle], testID: "reward-tile-media", role: "img", accessibilityLabel: "Reward image for ".concat(name), children: jsxRuntimeExports.jsx(ProgressiveImage, { source: { uri: artworkUrl }, style: styles.image, alt: "Reward image for ".concat(name) }) }));
 };
 
 /**
@@ -4760,7 +4840,7 @@ var RewardTilePoints = function () {
         return null;
     var calculatedPoints = applyMultiplier(price, pointsMultiplier);
     var accessibilityLabel = getPointsLabel('Reward points:', calculatedPoints, pointsPrefix, pointsSuffix);
-    return (jsxRuntimeExports.jsx(reactNative.View, { testID: "reward-tile-points", accessibilityRole: "text", accessibilityLabel: accessibilityLabel, children: jsxRuntimeExports.jsxs(Row, { align: "center", justify: "start", style: { marginTop: 8 }, children: [pointsPrefix ? jsxRuntimeExports.jsx(Text, { variant: "caption", children: pointsPrefix }) : null, jsxRuntimeExports.jsx(Text, { variant: "caption", testID: "reward-tile-points-value", children: calculatedPoints }), pointsSuffix ? (jsxRuntimeExports.jsx(Text, { variant: "caption", style: styles.suffix, children: pointsSuffix })) : null] }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { testID: "reward-tile-points", role: "article", accessibilityLabel: accessibilityLabel, children: jsxRuntimeExports.jsxs(Row, { align: "center", justify: "start", style: { marginTop: 8 }, children: [pointsPrefix ? jsxRuntimeExports.jsx(Text, { variant: "caption", children: pointsPrefix }) : null, jsxRuntimeExports.jsx(Text, { variant: "caption", testID: "reward-tile-points-value", children: calculatedPoints }), pointsSuffix ? (jsxRuntimeExports.jsx(Text, { variant: "caption", style: styles.suffix, children: pointsSuffix })) : null] }) }));
 };
 
 /**
@@ -4775,7 +4855,7 @@ var RewardTileSummary = function () {
     var summary = tileContext.configuration.summary;
     if (!summary)
         return null;
-    return (jsxRuntimeExports.jsx(Text, { variant: "body", accessibilityRole: "text", accessibilityLabel: summary, testID: "reward-tile-summary", children: summary }));
+    return (jsxRuntimeExports.jsx(Text, { variant: "body", role: "article", accessibilityLabel: summary, testID: "reward-tile-summary", children: summary }));
 };
 
 /**
@@ -4796,7 +4876,7 @@ var RewardTileTitle = function () {
             return styles.titleWithLink;
         }
     };
-    return (jsxRuntimeExports.jsx(Text, { variant: "title", ellipsizeMode: "tail", numberOfLines: 1, accessibilityRole: "header", accessibilityLabel: "Reward title: ".concat(name), testID: "reward-tile-title", style: handleTitleWidth(), children: name }));
+    return (jsxRuntimeExports.jsx(Text, { variant: "title", ellipsizeMode: "tail", numberOfLines: 1, role: "heading", accessibilityLabel: "Reward title: ".concat(name), testID: "reward-tile-title", style: handleTitleWidth(), children: name }));
 };
 
 /**