@coinbase/cds-mobile 8.50.0 → 8.52.0

package/CHANGELOG.md

@@ -8,6 +8,17 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.52.0 (3/10/2026 PST)
+
+#### 🚀 Updates
+
+- A11y improvements to Fallback, Spinner, and LottieStatusAnimation. [[#388](https://github.com/coinbase/cds/pull/388)]
+- Simplify the ProgressBar component implementation. [[#388](https://github.com/coinbase/cds/pull/388)]
+
+## 8.51.0 ((3/9/2026, 06:39 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.50.0 (3/6/2026 PST)
 
 #### 🚀 Updates

package/dts/animation/Lottie.d.ts

@@ -22,7 +22,26 @@ export declare const Lottie: React.MemoExoticComponent<
       style?: Animated.WithAnimatedValue<
         import('react-native').StyleProp<import('react-native').ViewStyle>
       >;
-    } & React.RefAttributes<LottieView>
+    } & import('../styles/styleProps').StyleProps & {
+        children?: React.ReactNode;
+        style?: Animated.WithAnimatedValue<
+          import('react-native').StyleProp<import('react-native').ViewStyle>
+        >;
+        animated?: boolean;
+        elevation?: import('@coinbase/cds-common').ElevationLevels;
+        font?: import('@coinbase/cds-common').ThemeVars.FontFamily | 'inherit';
+        pin?: import('@coinbase/cds-common').PinningDirection;
+        bordered?: boolean;
+        borderedTop?: boolean;
+        borderedBottom?: boolean;
+        borderedStart?: boolean;
+        borderedEnd?: boolean;
+        borderedHorizontal?: boolean;
+        borderedVertical?: boolean;
+        dangerouslySetBackground?: string;
+        testID?: string;
+      } & Omit<import('react-native').ViewProps, 'style'> &
+      React.RefAttributes<LottieView>
   >
 >;
 //# sourceMappingURL=Lottie.d.ts.map

package/dts/animation/Lottie.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Lottie.d.ts","sourceRoot":"","sources":["../../src/animation/Lottie.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAO7C,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;AAiD7D,eAAO,MAAM,MAAM;;;;;;;;;;;;;qCAKlB,CAAC"}
+{"version":3,"file":"Lottie.d.ts","sourceRoot":"","sources":["../../src/animation/Lottie.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAO7C,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;AAiD7D,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uFAKlB,CAAC"}

package/dts/animation/LottieStatusAnimation.d.ts

@@ -1,8 +1,31 @@
-import type { LottieStatusAnimationProps } from '@coinbase/cds-common';
-export declare const LottieStatusAnimation: ({
-  status,
-  onFinish,
-  testID,
-  ...otherProps
-}: LottieStatusAnimationProps) => import('react/jsx-runtime').JSX.Element;
+import type { DimensionValue } from '@coinbase/cds-common/types/DimensionStyles';
+import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
+import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
+import type { LottieStatus } from 'packages/common/dts/types/LottieStatus';
+type LottieStatusAnimationBaseProps = {
+  status?: LottieStatus;
+  onFinish?: () => void;
+};
+type LottieStatusAnimationPropsWithWidth = {
+  width: DimensionValue;
+} & LottieStatusAnimationBaseProps;
+type LottieStatusAnimationPropsWithHeight = {
+  height: DimensionValue;
+} & LottieStatusAnimationBaseProps;
+export type LottieStatusAnimationProps = (
+  | LottieStatusAnimationPropsWithWidth
+  | LottieStatusAnimationPropsWithHeight
+) &
+  SharedProps &
+  SharedAccessibilityProps;
+export declare const LottieStatusAnimation: import('react').MemoExoticComponent<
+  ({
+    status,
+    onFinish,
+    testID,
+    accessibilityLabel,
+    ...otherProps
+  }: LottieStatusAnimationProps) => import('react/jsx-runtime').JSX.Element
+>;
+export {};
 //# sourceMappingURL=LottieStatusAnimation.d.ts.map

package/dts/animation/LottieStatusAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LottieStatusAnimation.d.ts","sourceRoot":"","sources":["../../src/animation/LottieStatusAnimation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,sBAAsB,CAAC;AAMvE,eAAO,MAAM,qBAAqB,GAAI,6CAKnC,0BAA0B,4CAK5B,CAAC"}
+{"version":3,"file":"LottieStatusAnimation.d.ts","sourceRoot":"","sources":["../../src/animation/LottieStatusAnimation.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AACjF,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAE1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAI3E,KAAK,8BAA8B,GAAG;IACpC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,KAAK,mCAAmC,GAAG;IACzC,KAAK,EAAE,cAAc,CAAC;CACvB,GAAG,8BAA8B,CAAC;AAEnC,KAAK,oCAAoC,GAAG;IAC1C,MAAM,EAAE,cAAc,CAAC;CACxB,GAAG,8BAA8B,CAAC;AAEnC,MAAM,MAAM,0BAA0B,GAAG,CACrC,mCAAmC,GACnC,oCAAoC,CACvC,GACC,WAAW,GACX,wBAAwB,CAAC;AAE3B,eAAO,MAAM,qBAAqB,wGAO7B,0BAA0B,6CAoB9B,CAAC"}

package/dts/animation/types.d.ts

@@ -1,6 +1,6 @@
 import type { Animated, StyleProp, ViewStyle } from 'react-native';
 import type { LottieSource } from '@coinbase/cds-common/types';
-import type { BoxBaseProps } from '../layout';
+import type { BoxBaseProps, BoxProps } from '../layout';
 export type LottieBaseProps<T extends LottieSource = LottieSource> = Omit<
   BoxBaseProps,
   'alignContent' | 'justifyContent' | 'flexWrap' | 'flexDirection'
@@ -8,12 +8,10 @@ export type LottieBaseProps<T extends LottieSource = LottieSource> = Omit<
   /**
    * A boolean flag indicating whether or not the animation should start automatically when
    * mounted. This only affects the imperative API.
-   * @default false
    */
   autoplay?: boolean;
   /**
    * A boolean flag indicating whether or not the animation should loop.
-   * @default false
    */
   loop?: boolean;
   /**
@@ -50,5 +48,5 @@ export type LottieBaseProps<T extends LottieSource = LottieSource> = Omit<
   animated?: boolean;
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 };
-export type LottieProps<T extends LottieSource = LottieSource> = LottieBaseProps<T>;
+export type LottieProps<T extends LottieSource = LottieSource> = LottieBaseProps<T> & BoxProps;
 //# sourceMappingURL=types.d.ts.map

package/dts/animation/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/animation/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,IAAI,IAAI,CACvE,YAAY,EACZ,cAAc,GAAG,gBAAgB,GAAG,UAAU,GAAG,eAAe,CACjE,GAAG;IACF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC5C;;;OAGG;IACH,MAAM,EAAE,CAAC,CAAC;IACV;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAC5E;;OAEG;IACH,YAAY,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;CAC1D,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/animation/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAExD,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,IAAI,IAAI,CACvE,YAAY,EACZ,cAAc,GAAG,gBAAgB,GAAG,UAAU,GAAG,eAAe,CACjE,GAAG;IACF;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC5C;;;OAGG;IACH,MAAM,EAAE,CAAC,CAAC;IACV;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAC5E;;OAEG;IACH,YAAY,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;CAC1D,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,IAAI,eAAe,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC"}

package/dts/cells/ContentCellFallback.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { FallbackRectWidthProps } from '@coinbase/cds-common/types';
+import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
 import type { CellSpacing } from './Cell';
 import type { CellAccessoryType } from './CellAccessory';
 import type { CellMediaType } from './CellMedia';
@@ -9,7 +10,8 @@ type ContentCellFallbackSpacingProps = {
   spacingVariant?: 'normal' | 'compact' | 'condensed';
 };
 export type ContentCellFallbackProps = FallbackRectWidthProps &
-  ContentCellFallbackSpacingProps & {
+  ContentCellFallbackSpacingProps &
+  Pick<SharedAccessibilityProps, 'accessibilityLabel'> & {
     /** Accessory to display at the end of the cell. */
     accessory?: CellAccessoryType;
     /** Custom accessory rendered at the end of the cell. Takes precedence over `accessory`. */

package/dts/cells/ContentCellFallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ContentCellFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAMzE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAKjD,KAAK,+BAA+B,GAAG;IACrC,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAC;CACrD,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,sBAAsB,GAC3D,+BAA+B,GAAG;IAChC,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEJ,eAAO,MAAM,mBAAmB,sDAuG9B,CAAC"}
+{"version":3,"file":"ContentCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ContentCellFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAE7C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AAMpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAKjD,KAAK,+BAA+B,GAAG;IACrC,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAC;CACrD,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,sBAAsB,GAC3D,+BAA+B,GAC/B,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEJ,eAAO,MAAM,mBAAmB,sDA+G9B,CAAC"}

package/dts/cells/ListCellFallback.d.ts

@@ -1,11 +1,13 @@
 import { type ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import { type StyleProp, type ViewStyle } from 'react-native';
 import type { FallbackRectWidthProps, SharedProps } from '@coinbase/cds-common/types';
+import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
 import { type CellAccessoryType } from './CellAccessory';
 import type { CellMediaType } from './CellMedia';
 import { type ListCellBaseProps } from './ListCell';
 export type ListCellFallbackBaseProps = SharedProps &
   FallbackRectWidthProps &
+  Pick<SharedAccessibilityProps, 'accessibilityLabel'> &
   Pick<ListCellBaseProps, 'compact' | 'innerSpacing' | 'outerSpacing' | 'spacingVariant'> & {
     /** Accessory to display at the end of the cell. */
     accessory?: CellAccessoryType;

package/dts/cells/ListCellFallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ListCellFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAQtF,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAgD,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGlG,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,sBAAsB,GACtB,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,cAAc,GAAG,cAAc,GAAG,gBAAgB,CAAC,GAAG;IACxF,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAAG;IAC9D,+DAA+D;IAC/D,MAAM,CAAC,EAAE;QACP,kEAAkE;QAClE,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC,4CAA4C;QAC5C,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC9B,+CAA+C;QAC/C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,2CAA2C;QAC3C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,iDAAiD;QACjD,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACnC,8CAA8C;QAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAChC,iDAAiD;QACjD,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAClC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,gBAAgB,6DAuL3B,CAAC"}
+{"version":3,"file":"ListCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ListCellFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,KAAK,SAAS,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACtF,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AAQpG,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAgD,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGlG,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,sBAAsB,GACtB,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GACpD,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,cAAc,GAAG,cAAc,GAAG,gBAAgB,CAAC,GAAG;IACxF,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAAG;IAC9D,+DAA+D;IAC/D,MAAM,CAAC,EAAE;QACP,kEAAkE;QAClE,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC,4CAA4C;QAC5C,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC9B,+CAA+C;QAC/C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,2CAA2C;QAC3C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,iDAAiD;QACjD,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACnC,8CAA8C;QAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAChC,iDAAiD;QACjD,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAClC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,gBAAgB,6DAgM3B,CAAC"}

package/dts/cells/MediaFallback.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
-import type { SharedProps } from '@coinbase/cds-common';
+import { type FallbackProps } from '../layout/Fallback';
 import type { CellMediaType } from './CellMedia';
 export type MediaFallbackProps = {
   type: CellMediaType;
-} & SharedProps;
-export declare const MediaFallback: React.NamedExoticComponent<MediaFallbackProps>;
+} & Omit<FallbackProps, 'width' | 'height' | 'shape'>;
+export declare const MediaFallback: import('react').NamedExoticComponent<MediaFallbackProps>;
 //# sourceMappingURL=MediaFallback.d.ts.map

package/dts/cells/MediaFallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaFallback.d.ts","sourceRoot":"","sources":["../../src/cells/MediaFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,aAAa,CAAC;CACrB,GAAG,WAAW,CAAC;AAEhB,eAAO,MAAM,aAAa,gDAMxB,CAAC"}
+{"version":3,"file":"MediaFallback.d.ts","sourceRoot":"","sources":["../../src/cells/MediaFallback.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAElE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,aAAa,CAAC;CACrB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAC;AAEtD,eAAO,MAAM,aAAa,0DASxB,CAAC"}

package/dts/layout/Fallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Fallback.d.ts","sourceRoot":"","sources":["../../src/layout/Fallback.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAKhE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAM9D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,uDAAuD;IACvD,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG,iBAAiB,CAAC;AAEpG,eAAO,MAAM,QAAQ,2CA2FnB,CAAC"}
+{"version":3,"file":"Fallback.d.ts","sourceRoot":"","sources":["../../src/layout/Fallback.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAKhE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAM9D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,uDAAuD;IACvD,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG,iBAAiB,CAAC;AAEpG,eAAO,MAAM,QAAQ,2CA6FnB,CAAC"}

package/dts/loaders/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/loaders/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAI3D,eAAO,MAAM,OAAO,oDASlB,CAAC"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/loaders/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAI3D,eAAO,MAAM,OAAO,oDAoBlB,CAAC"}

package/dts/visualizations/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8E,MAAM,OAAO,CAAC;AACnG,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAMhG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,GAClD,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,CAAC;IACjB;;SAEK;IACL,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEJ,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,yEAAyE;IACzE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,WAAW;IApCpB,8DAA8D;cACpD,MAAM;IAChB;;SAEK;aACI,MAAM;IACf;;OAEG;eACQ,OAAO;IAClB;;;OAGG;YACK,SAAS,CAAC,KAAK;IACvB;;OAEG;qBACc,MAAM,IAAI;IAC3B;;OAEG;uBACgB,MAAM,IAAI;;YAIvB,SAAS,CAAC,SAAS,CAAC;IAC5B,yEAAyE;aAChE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC;+BAwHF,CAAC"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8E,MAAM,OAAO,CAAC;AACnG,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAMhG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,GAClD,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,CAAC;IACjB;;SAEK;IACL,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEJ,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,yEAAyE;IACzE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,WAAW;IApCpB,8DAA8D;cACpD,MAAM;IAChB;;SAEK;aACI,MAAM;IACf;;OAEG;eACQ,OAAO;IAClB;;;OAGG;YACK,SAAS,CAAC,KAAK;IACvB;;OAEG;qBACc,MAAM,IAAI;IAC3B;;OAEG;uBACgB,MAAM,IAAI;;YAIvB,SAAS,CAAC,SAAS,CAAC;IAC5B,yEAAyE;aAChE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC;+BAiHF,CAAC"}

package/esm/animation/LottieStatusAnimation.js

@@ -1,16 +1,18 @@
-const _excluded = ["status", "onFinish", "testID"];
+const _excluded = ["status", "onFinish", "testID", "accessibilityLabel"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React from 'react';
-import { useStatusAnimationPoller } from '@coinbase/cds-common';
+import { memo, useMemo } from 'react';
+import { lottieStatusToAccessibilityLabel } from '@coinbase/cds-common/lottie/statusToAccessibilityLabel';
+import { useStatusAnimationPoller } from '@coinbase/cds-common/lottie/useStatusAnimationPoller';
 import { tradeStatus } from '@coinbase/cds-lottie-files/tradeStatus';
 import { useLottie } from './useLottie';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const LottieStatusAnimation = _ref => {
+export const LottieStatusAnimation = /*#__PURE__*/memo(_ref => {
   let {
       status = 'loading',
       onFinish,
-      testID
+      testID,
+      accessibilityLabel
     } = _ref,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
@@ -22,8 +24,12 @@ export const LottieStatusAnimation = _ref => {
     playMarkers,
     onFinish
   });
+  const label = useMemo(() => accessibilityLabel != null ? accessibilityLabel : lottieStatusToAccessibilityLabel[status], [accessibilityLabel, status]);
   return /*#__PURE__*/_jsx(Lottie, _extends({}, otherProps, {
+    accessible: true,
+    accessibilityLabel: label,
+    accessibilityLiveRegion: "polite",
     onAnimationFinish: handlePolling,
     testID: testID
   }));
-};
+});

package/esm/cells/ContentCellFallback.js

@@ -1,11 +1,12 @@
 import React, { memo, useMemo } from 'react';
+import { StyleSheet, Text } from 'react-native';
 import { getRectWidthVariant } from '@coinbase/cds-common/utils/getRectWidthVariant';
 import { useTheme } from '../hooks/useTheme';
-import { Fallback } from '../layout';
+import { Box, Fallback } from '../layout';
 import { ContentCell } from './ContentCell';
 import { condensedInnerSpacing, condensedOuterSpacing } from './ListCell';
 import { MediaFallback } from './MediaFallback';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ContentCellFallback = /*#__PURE__*/memo(function ContentCellFallback(_ref) {
   let {
     accessory,
@@ -19,7 +20,8 @@ export const ContentCellFallback = /*#__PURE__*/memo(function ContentCellFallbac
     rectWidthVariant,
     spacingVariant = 'normal',
     innerSpacing,
-    outerSpacing
+    outerSpacing,
+    accessibilityLabel = 'Loading'
   } = _ref;
   const theme = useTheme();
   const descriptionHeight = spacingVariant === 'condensed' ? theme.lineHeight.label2 : theme.lineHeight.body;
@@ -30,6 +32,7 @@ export const ContentCellFallback = /*#__PURE__*/memo(function ContentCellFallbac
       return undefined;
     }
     return /*#__PURE__*/_jsx(Fallback, {
+      "aria-hidden": true,
       disableRandomRectWidth: disableRandomRectWidth,
       height: theme.lineHeight.label2,
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 0),
@@ -41,6 +44,7 @@ export const ContentCellFallback = /*#__PURE__*/memo(function ContentCellFallbac
       return undefined;
     }
     return /*#__PURE__*/_jsx(Fallback, {
+      "aria-hidden": true,
       disableRandomRectWidth: disableRandomRectWidth,
       height: titleHeight,
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 1),
@@ -52,6 +56,7 @@ export const ContentCellFallback = /*#__PURE__*/memo(function ContentCellFallbac
       return undefined;
     }
     return /*#__PURE__*/_jsx(Fallback, {
+      "aria-hidden": true,
       disableRandomRectWidth: disableRandomRectWidth,
       height: subtitleHeight,
       paddingBottom: description ? 0.5 : undefined,
@@ -65,6 +70,7 @@ export const ContentCellFallback = /*#__PURE__*/memo(function ContentCellFallbac
       return undefined;
     }
     return /*#__PURE__*/_jsx(Fallback, {
+      "aria-hidden": true,
       disableRandomRectWidth: disableRandomRectWidth,
       height: descriptionHeight,
       paddingTop: 0.5,
@@ -72,18 +78,34 @@ export const ContentCellFallback = /*#__PURE__*/memo(function ContentCellFallbac
       width: 110
     });
   }, [description, disableRandomRectWidth, rectWidthVariant, descriptionHeight]);
-  return /*#__PURE__*/_jsx(ContentCell, {
-    accessory: accessory,
-    accessoryNode: accessoryNode,
-    descriptionNode: descriptionNode,
-    innerSpacing: innerSpacing != null ? innerSpacing : spacingVariant === 'condensed' ? condensedInnerSpacing : undefined,
-    media: media ? /*#__PURE__*/_jsx(MediaFallback, {
-      type: media
-    }) : undefined,
-    metaNode: metaNode,
-    outerSpacing: outerSpacing != null ? outerSpacing : spacingVariant === 'condensed' ? condensedOuterSpacing : undefined,
-    spacingVariant: spacingVariant,
-    subtitleNode: subtitleNode,
-    titleNode: titleNode
+  return /*#__PURE__*/_jsxs(Box, {
+    position: "relative",
+    children: [accessibilityLabel && /*#__PURE__*/_jsx(Text, {
+      style: localStyles.visuallyHidden,
+      children: accessibilityLabel
+    }), /*#__PURE__*/_jsx(ContentCell, {
+      accessory: accessory,
+      accessoryNode: accessoryNode,
+      descriptionNode: descriptionNode,
+      innerSpacing: innerSpacing != null ? innerSpacing : spacingVariant === 'condensed' ? condensedInnerSpacing : undefined,
+      media: media ? /*#__PURE__*/_jsx(MediaFallback, {
+        "aria-hidden": true,
+        type: media
+      }) : undefined,
+      metaNode: metaNode,
+      outerSpacing: outerSpacing != null ? outerSpacing : spacingVariant === 'condensed' ? condensedOuterSpacing : undefined,
+      spacingVariant: spacingVariant,
+      subtitleNode: subtitleNode,
+      titleNode: titleNode
+    })]
   });
+});
+const localStyles = StyleSheet.create({
+  visuallyHidden: {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    margin: -1,
+    overflow: 'hidden'
+  }
 });

package/esm/cells/ListCellFallback.js

@@ -1,7 +1,8 @@
-const _excluded = ["accessory", "accessoryNode", "title", "description", "detail", "subdetail", "media", "disableRandomRectWidth", "rectWidthVariant", "helperText", "subtitle", "styles", "compact", "spacingVariant", "innerSpacing", "outerSpacing"];
+const _excluded = ["accessory", "accessoryNode", "title", "description", "detail", "subdetail", "media", "disableRandomRectWidth", "rectWidthVariant", "helperText", "subtitle", "styles", "compact", "spacingVariant", "innerSpacing", "outerSpacing", "accessibilityLabel"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { memo, useMemo } from 'react';
+import { StyleSheet, Text } from 'react-native';
 import { getRectWidthVariant } from '@coinbase/cds-common/utils/getRectWidthVariant';
 import { useTheme } from '../hooks/useTheme';
 import { VStack } from '../layout';
@@ -28,7 +29,8 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       compact,
       spacingVariant = compact ? 'compact' : 'normal',
       innerSpacing,
-      outerSpacing
+      outerSpacing,
+      accessibilityLabel = 'Loading'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -37,6 +39,7 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       return null;
     }
     return /*#__PURE__*/_jsx(Fallback, {
+      "aria-hidden": true,
       disableRandomRectWidth: disableRandomRectWidth,
       height: spacingVariant === 'condensed' ? theme.lineHeight.label2 : theme.lineHeight.body,
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 0),
@@ -55,6 +58,7 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       gap: 0.5,
       justifyContent: "center",
       children: [!!detail && /*#__PURE__*/_jsx(Fallback, {
+        "aria-hidden": true,
         disableRandomRectWidth: disableRandomRectWidth,
         height: theme.lineHeight.body,
         rectWidthVariant: getRectWidthVariant(rectWidthVariant, 1),
@@ -62,6 +66,7 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
         testID: "list-cell-fallback-detail",
         width: 60
       }), !!subdetail && /*#__PURE__*/_jsx(Fallback, {
+        "aria-hidden": true,
         disableRandomRectWidth: disableRandomRectWidth,
         height: spacingVariant === 'condensed' ? theme.lineHeight.label2 : theme.lineHeight.body,
         rectWidthVariant: getRectWidthVariant(rectWidthVariant, 1),
@@ -76,6 +81,7 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       return null;
     }
     return /*#__PURE__*/_jsx(Fallback, {
+      "aria-hidden": true,
       disableRandomRectWidth: disableRandomRectWidth,
       height: theme.lineHeight.body,
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 4),
@@ -89,6 +95,7 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       return null;
     }
     return /*#__PURE__*/_jsx(Fallback, {
+      "aria-hidden": true,
       disableRandomRectWidth: disableRandomRectWidth,
       height: theme.lineHeight.label1,
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 2),
@@ -102,6 +109,7 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       return;
     }
     return /*#__PURE__*/_jsx(MediaFallback, {
+      "aria-hidden": true,
       testID: "list-cell-fallback-media",
       type: media
     });
@@ -111,6 +119,7 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       return null;
     }
     return /*#__PURE__*/_jsx(Fallback, {
+      "aria-hidden": true,
       disableRandomRectWidth: disableRandomRectWidth,
       height: theme.lineHeight.headline,
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 3),
@@ -119,7 +128,7 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       width: 90
     });
   }, [disableRandomRectWidth, rectWidthVariant, styles == null ? void 0 : styles.title, theme.lineHeight.headline, title]);
-  return /*#__PURE__*/_jsx(Cell, _extends({
+  return /*#__PURE__*/_jsxs(Cell, _extends({
     accessory: accessory ? /*#__PURE__*/_jsx(CellAccessory, {
       type: accessory
     }) : undefined,
@@ -129,13 +138,26 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
     innerSpacing: innerSpacing != null ? innerSpacing : spacingVariant === 'condensed' ? condensedInnerSpacing : undefined,
     media: mediaFallback,
     outerSpacing: outerSpacing != null ? outerSpacing : spacingVariant === 'condensed' ? condensedOuterSpacing : undefined,
+    position: "relative",
     styles: {
       accessory: styles == null ? void 0 : styles.accessory
     }
   }, props, {
-    children: /*#__PURE__*/_jsxs(VStack, {
+    children: [accessibilityLabel && /*#__PURE__*/_jsx(Text, {
+      style: localStyles.visuallyHidden,
+      children: accessibilityLabel
+    }), /*#__PURE__*/_jsxs(VStack, {
       gap: 0.5,
       children: [titleFallback, subtitleFallback, descriptionFallback]
-    })
+    })]
   }));
+});
+const localStyles = StyleSheet.create({
+  visuallyHidden: {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    margin: -1,
+    overflow: 'hidden'
+  }
 });

package/esm/cells/MediaFallback.js

@@ -1,23 +1,25 @@
-import React, { memo } from 'react';
+const _excluded = ["type"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo } from 'react';
 import { imageSize, mediaSize } from '@coinbase/cds-common/tokens/cell';
 import { Fallback } from '../layout/Fallback';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const MediaFallback = /*#__PURE__*/memo(function MediaFallback(_ref) {
   let {
-    type,
-    testID
-  } = _ref;
+      type
+    } = _ref,
+    fallbackProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   if (type === 'image') {
-    return /*#__PURE__*/_jsx(Fallback, {
+    return /*#__PURE__*/_jsx(Fallback, _extends({}, fallbackProps, {
       height: imageSize,
       shape: "squircle",
       width: imageSize
-    });
+    }));
   }
-  return /*#__PURE__*/_jsx(Fallback, {
+  return /*#__PURE__*/_jsx(Fallback, _extends({}, fallbackProps, {
     height: mediaSize,
     shape: "circle",
-    testID: testID,
     width: mediaSize
-  });
+  }));
 });

package/esm/layout/Fallback.js

@@ -1,22 +1,23 @@
-const _excluded = ["height", "shape", "width", "disableRandomRectWidth", "rectWidthVariant"];
+const _excluded = ["height", "shape", "width", "disableRandomRectWidth", "rectWidthVariant", "accessibilityLabel"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 // Simplified version of https://github.com/tomzaku/react-native-shimmer-placeholder/blob/master/lib/ShimmerPlaceholder.js
 import React, { memo, useEffect, useMemo, useRef } from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
+import { Animated, StyleSheet, Text, View } from 'react-native';
 import { useFallbackShape } from '@coinbase/cds-common/hooks/useFallbackShape';
 import { LinearGradient } from '../gradients/LinearGradient';
 import { useTheme } from '../hooks/useTheme';
 import { fallbackShimmer } from '../styles/fallbackShimmer';
 import { Box } from './Box';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Fallback = /*#__PURE__*/memo(function Fallback(_ref) {
   let {
       height,
       shape = 'rectangle',
       width: baseWidth,
       disableRandomRectWidth,
-      rectWidthVariant
+      rectWidthVariant,
+      accessibilityLabel = 'Loading'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const fallbackShapeOptions = useMemo(() => ({
@@ -57,10 +58,15 @@ export const Fallback = /*#__PURE__*/memo(function Fallback(_ref) {
     borderRadius
   }), [width, height, shimmerColor, borderRadius]);
   const outputRange = useMemo(() => typeof width === 'number' ? [-width, width] : [-400, 400], [width]);
-  return /*#__PURE__*/_jsx(Box, _extends({
+  return /*#__PURE__*/_jsxs(Box, _extends({
+    position: "relative",
     width: width
   }, props, {
-    children: /*#__PURE__*/_jsx(View, {
+    children: [accessibilityLabel && /*#__PURE__*/_jsx(Text, {
+      style: styles.visuallyHidden,
+      children: accessibilityLabel
+    }), /*#__PURE__*/_jsx(View, {
+      "aria-hidden": true,
       style: containerStyle,
       children: /*#__PURE__*/_jsx(Animated.View, {
         style: [styles.child, {
@@ -79,7 +85,7 @@ export const Fallback = /*#__PURE__*/memo(function Fallback(_ref) {
           style: styles.child
         })
       })
-    })
+    })]
   }));
 });
 const gradStart = {
@@ -94,5 +100,12 @@ const gradLocations = [0.3, 0.5, 0.7];
 const styles = StyleSheet.create({
   child: {
     flex: 1
+  },
+  visuallyHidden: {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    margin: -1,
+    overflow: 'hidden'
   }
 });

package/esm/layout/__stories__/Fallback.stories.js

@@ -0,0 +1,146 @@
+import React from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Box } from '../Box';
+import { Fallback } from '../Fallback';
+import { HStack } from '../HStack';
+import { VStack } from '../VStack';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FallbackScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Basic",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 1,
+        children: [/*#__PURE__*/_jsx(Fallback, {
+          height: 45,
+          width: 150
+        }), /*#__PURE__*/_jsx(Fallback, {
+          height: 45,
+          width: 65
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Shapes",
+      children: /*#__PURE__*/_jsxs(HStack, {
+        gap: 1,
+        children: [/*#__PURE__*/_jsx(Fallback, {
+          height: 50,
+          shape: "square",
+          width: 50
+        }), /*#__PURE__*/_jsx(Fallback, {
+          height: 50,
+          shape: "squircle",
+          width: 50
+        }), /*#__PURE__*/_jsx(Fallback, {
+          height: 50,
+          shape: "circle",
+          width: 50
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Random Rectangle Width",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 1,
+        children: [/*#__PURE__*/_jsx(Fallback, {
+          height: 20,
+          width: 150
+        }), /*#__PURE__*/_jsx(Fallback, {
+          height: 20,
+          width: 150
+        }), /*#__PURE__*/_jsx(Fallback, {
+          height: 20,
+          width: 150
+        }), /*#__PURE__*/_jsx(Fallback, {
+          height: 20,
+          width: 150
+        }), /*#__PURE__*/_jsx(Fallback, {
+          height: 20,
+          width: 150
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Disabled Random Width",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 1,
+        children: [/*#__PURE__*/_jsx(Fallback, {
+          disableRandomRectWidth: true,
+          height: 20,
+          width: 150
+        }), /*#__PURE__*/_jsx(Fallback, {
+          disableRandomRectWidth: true,
+          height: 20,
+          width: 150
+        }), /*#__PURE__*/_jsx(Fallback, {
+          disableRandomRectWidth: true,
+          height: 20,
+          width: 150
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Width Variants (Deterministic)",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 1,
+        children: [/*#__PURE__*/_jsx(Fallback, {
+          height: 20,
+          rectWidthVariant: 0,
+          width: 150
+        }), /*#__PURE__*/_jsx(Fallback, {
+          height: 20,
+          rectWidthVariant: 1,
+          width: 150
+        }), /*#__PURE__*/_jsx(Fallback, {
+          height: 20,
+          rectWidthVariant: 2,
+          width: 150
+        }), /*#__PURE__*/_jsx(Fallback, {
+          height: 20,
+          rectWidthVariant: 3,
+          width: 150
+        }), /*#__PURE__*/_jsx(Fallback, {
+          height: 20,
+          rectWidthVariant: 4,
+          width: 150
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Accessibility Label",
+      children: /*#__PURE__*/_jsx(Fallback, {
+        accessibilityLabel: "Loading user profile",
+        height: 45,
+        width: 150
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Grouped Fallbacks (Accessible Container)",
+      children: /*#__PURE__*/_jsx(Box, {
+        accessible: true,
+        accessibilityLabel: "Loading table data",
+        accessibilityState: {
+          busy: true
+        },
+        children: /*#__PURE__*/_jsxs(VStack, {
+          gap: 1,
+          children: [/*#__PURE__*/_jsx(Fallback, {
+            accessibilityElementsHidden: true,
+            accessible: false,
+            height: 20,
+            importantForAccessibility: "no-hide-descendants",
+            width: 150
+          }), /*#__PURE__*/_jsx(Fallback, {
+            accessibilityElementsHidden: true,
+            accessible: false,
+            height: 20,
+            importantForAccessibility: "no-hide-descendants",
+            width: 150
+          }), /*#__PURE__*/_jsx(Fallback, {
+            accessibilityElementsHidden: true,
+            accessible: false,
+            height: 20,
+            importantForAccessibility: "no-hide-descendants",
+            width: 150
+          })]
+        })
+      })
+    })]
+  });
+};
+export default FallbackScreen;

package/esm/loaders/Spinner.js

@@ -1,4 +1,4 @@
-const _excluded = ["size", "animating"];
+const _excluded = ["size", "animating", "accessibilityLabel"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { memo } from 'react';
@@ -8,12 +8,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const Spinner = /*#__PURE__*/memo(function Spinner(_ref) {
   let {
       size = 'small',
-      animating
+      animating,
+      accessibilityLabel = 'Loading'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
   const color = theme.color.bgPrimary;
   return /*#__PURE__*/_jsx(ActivityIndicator, _extends({
+    accessible: true,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityLiveRegion: "polite",
     animating: animating,
     color: color,
     size: size

package/esm/visualizations/ProgressBar.js

@@ -2,14 +2,12 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, I18nManager } from 'react-native';
 import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress';
-import { usePreviousValues } from '@coinbase/cds-common/hooks/usePreviousValues';
 import { useProgressSize } from '@coinbase/cds-common/visualizations/useProgressSize';
 import { convertMotionConfig } from '../animation/convertMotionConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Box, HStack } from '../layout';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
-  var _getPreviousPercent;
   let {
     weight = 'normal',
     progress,
@@ -25,16 +23,10 @@ export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forw
   } = _ref;
   const theme = useTheme();
   const height = useProgressSize(weight);
-  const {
-    getPreviousValue: getPreviousPercent,
-    addPreviousValue: addPreviousPercent
-  } = usePreviousValues([disableAnimateOnMount ? progress : 0]);
-  addPreviousPercent(progress);
-  const previousPercent = (_getPreviousPercent = getPreviousPercent()) != null ? _getPreviousPercent : 0;
-  const animatedProgress = useRef(new Animated.Value(previousPercent));
-  const [innerWidth, setInnerWidth] = useState(-1);
+  const animatedProgress = useRef(new Animated.Value(disableAnimateOnMount ? progress : 0));
+  const [trackWidth, setTrackWidth] = useState(-1);
   useEffect(() => {
-    if (innerWidth > -1) {
+    if (trackWidth > -1) {
       var _Animated$timing;
       onAnimationStart == null || onAnimationStart();
       (_Animated$timing = Animated.timing(animatedProgress.current, convertMotionConfig(_extends({
@@ -48,11 +40,11 @@ export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forw
         if (finished) onAnimationEnd == null || onAnimationEnd();
       });
     }
-  }, [progress, animatedProgress, innerWidth, onAnimationStart, onAnimationEnd]);
+  }, [progress, trackWidth, onAnimationEnd, onAnimationStart]);
   const handleLayout = useCallback(event => {
-    setInnerWidth(event.nativeEvent.layout.width);
+    setTrackWidth(event.nativeEvent.layout.width);
   }, []);
-  const rootStyle = useMemo(() => {
+  const trackStyle = useMemo(() => {
     const justifyContent = I18nManager.isRTL ? 'flex-end' : 'flex-start';
     return [{
       borderRadius: 200,
@@ -64,14 +56,14 @@ export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forw
     }, style, styles == null ? void 0 : styles.root];
   }, [style, styles == null ? void 0 : styles.root, theme.color.bgLine, height]);
   const progressStyle = useMemo(() => [{
-    opacity: innerWidth > -1 ? 1 : 0,
+    opacity: trackWidth > -1 ? 1 : 0,
     transform: [{
       translateX: animatedProgress.current.interpolate({
         inputRange: [0, 1],
-        outputRange: I18nManager.isRTL ? [innerWidth, 0] : [innerWidth * -1, 0]
+        outputRange: I18nManager.isRTL ? [trackWidth, 0] : [-trackWidth, 0]
       })
     }]
-  }, styles == null ? void 0 : styles.progress], [innerWidth, styles == null ? void 0 : styles.progress]);
+  }, styles == null ? void 0 : styles.progress], [trackWidth, styles == null ? void 0 : styles.progress]);
   return /*#__PURE__*/_jsx(HStack, {
     ref: forwardedRef,
     accessible: true,
@@ -86,13 +78,13 @@ export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forw
     flexGrow: 1,
     flexShrink: 0,
     onLayout: handleLayout,
-    style: rootStyle,
+    style: trackStyle,
     testID: testID,
     children: /*#__PURE__*/_jsx(Box, {
       animated: true,
       alignItems: "flex-start",
+      background: !disabled ? color : 'bgLineHeavy',
       borderRadius: 200,
-      dangerouslySetBackground: !disabled ? theme.color[color] : theme.color.bgLineHeavy,
       flexGrow: 0,
       flexShrink: 0,
       height: "100%",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.50.0",
+  "version": "8.52.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -198,7 +198,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.50.0",
+    "@coinbase/cds-common": "^8.52.0",
     "@coinbase/cds-icons": "^5.12.0",
     "@coinbase/cds-illustrations": "^4.32.0",
     "@coinbase/cds-lottie-files": "^3.3.4",