feat: add accessibility support to loading state components by adrienzheng-cb · Pull Request #388 · coinbase/cds

adrienzheng-cb · 2026-02-10T19:42:13Z

Accessibility improvements:

Add role="status", aria-live="polite", and accessibilityLabel to Fallback, Spinner, and LottieStatusAnimation on web and mobile
LottieStatusAnimation auto-generates labels based on status
Update Fallback docs with accessibility guidance and grouping examples

Bug fixes:

Fix ProgressBar callback re-animation issue by storing callbacks in refs instead of including them in useEffect dependencies

Test improvements:

Add shape, width variant, and accessibility tests for Fallback
Add size variant and accessibility tests for Spinner
Add cardSuccess and status transition tests for LottieStatusAnimation

Refactoring:

Move useFallbackShape hook to @coinbase/cds-common for cross-platform use
Use shapeBorderRadius tokens in RemoteImage/RemoteImageGroup
Add LottieAccessibilityProps types to animation types

Also includes auto-generated icon updates (autoCar, birthcertificate, webhooks) and pencil icon active/inactive swap fix.

What changed? Why?

Root cause (required for bugfixes)

UI changes

iOS Old	iOS New
old screenshot	new screenshot

Android Old	Android New
old screenshot	new screenshot

Web Old	Web New
old screenshot	new screenshot

Testing

How has it been tested?

Testing instructions

Illustrations/Icons Checklist

Required if this PR changes files under packages/illustrations/** or packages/icons/**

verified visreg changes with Terran (include link to visreg run/approval)
all illustration/icons names have been reviewed by Dom and/or Terran

Change management

type=routine
risk=low
impact=sev5

automerge=false

cb-heimdall · 2026-02-10T19:42:19Z

🟡 Heimdall Review Status

Requirement Status More Info

Reviews

🟡 0/1

Denominator calculation

Show calculation

1 if user is bot 0

1 if user is external 0

2 if repo is sensitive 0

From .codeflow.yml 1

Additional review requirements

Show calculation

Max	0

0

From CODEOWNERS 1

Global minimum 0

Max 1

1

1 if commit is unverified 0

Sum 1

CODEOWNERS 🟡 See below

🟡 `CODEOWNERS`

Code Owner Status Calculation

ui-systems-eng-team

🟡 0/1

Denominator calculation

Additional CODEOWNERS Requirement

Show calculation

Sum	0

0

From CODEOWNERS 1

Sum 1

adrienzheng-cb · 2026-02-10T19:42:58Z

packages/mobile/src/animation/types.ts

+};
+
 export type LottieBaseProps<T extends LottieSource = LottieSource> = Omit<
  BoxBaseProps,


only optional new props are added, non-breaking

adrienzheng-cb · 2026-02-10T19:43:49Z

packages/mobile/src/visualizations/ProgressBar.tsx

      const animatedProgress = useRef(new Animated.Value(previousPercent));

-      const [innerWidth, setInnerWidth] = useState<number>(-1);
+      const [trackWidth, setTrackWidth] = useState<number>(-1);


changed to more accurate variable name

adrienzheng-cb · 2026-02-10T19:44:42Z

packages/mobile/src/visualizations/ProgressBar.tsx

+      const onAnimationEndRef = useRef(onAnimationEnd);
+      const onAnimationStartRef = useRef(onAnimationStart);
+      onAnimationEndRef.current = onAnimationEnd;
+      onAnimationStartRef.current = onAnimationStart;


ensure the ref is up-to-date whenever component rerenders. we should switch to useEffectCallback after react 19

hcopp · 2026-02-10T19:45:50Z

packages/mobile/src/animation/LottieStatusAnimation.tsx

+    testID,
+    accessibilityLabel,
+    ...otherProps
+  }: LottieStatusAnimationProps & { accessibilityLabel?: string }) => {


I wonder if we missed bringing this to web and mobile during v8 migration.

You think we would be better off here bringing this into mobile and web? Also we could do

import { LottieStatusAnimationProps as CommonLottieStatusAnimationProps, SharedAccessibilityProps } from ... type LottieStatusAnimationProps = CommonLottieStatusAnimationProps & { /** * Accessibility label shown along with the current state * @default 'Loading' when loading, ... (or whatever you want to say) */ accessibilityLabel?: SharedAccessibilityProps['accessibilityLabel']; }

This way people would know to override for i18n as well.

I thought v8 was trying to get away from defining common props in common package

Yep that's why I'm surprised we missed this in v8.

hcopp · 2026-02-10T19:46:21Z

packages/mobile/src/animation/types.ts

+  /** When true, indicates that the view is an accessibility element */
+  accessible?: boolean;
+  /** A string value that labels an interactive element for VoiceOver */
+  accessibilityLabel?: string;


Nit: could we pull from SharedAccessibilityProps or from BoxProps?

I attempted to do that, but it does not include role or aria-live prop :(.

Could we do LottieBaseProps<...> = Pick<SharedAccessibilityProps, 'accessibilityLabel> & ...?

I'm not seeing role or aria-live in this spot, I know I saw it elsewhere

adrienzheng-cb · 2026-02-10T19:49:29Z

packages/web/src/layout/Fallback.tsx

 import type { Polymorphic } from '../core/polymorphism';

 import { Box, type BoxBaseProps } from './Box';



updated to use the same useFallbackShape hook and type defined in common

hcopp · 2026-02-10T19:49:33Z

packages/mobile/src/animation/types.ts

+    /**
+     * A boolean flag indicating whether or not the animation should start automatically when
+     * mounted. This only affects the imperative API.
+     * @default false


nit: could we remove these falsy defaults

adrienzheng-cb · 2026-02-10T19:49:48Z

packages/web/src/layout/Fallback.tsx


 Fallback.displayName = 'Fallback';
+
+export { useFallbackShape, type UseFallbackShapeOptions };


re-export them for backward-compatibility

adrienzheng-cb · 2026-02-10T19:50:22Z

packages/web/src/media/RemoteImage.tsx

  hexagon: css`
-    border-radius: 0;
+    border-radius: ${shapeBorderRadius.hexagon}px;
  `,


remove hardcoded borderRadius value

hcopp · 2026-02-10T19:50:44Z

packages/mobile/src/visualizations/ProgressBar.tsx

+      const onAnimationEndRef = useRef(onAnimationEnd);
+      const onAnimationStartRef = useRef(onAnimationStart);
+      onAnimationEndRef.current = onAnimationEnd;
+      onAnimationStartRef.current = onAnimationStart;


What exactly was happening in your tests here?

hcopp · 2026-02-10T19:51:21Z

packages/mobile/src/visualizations/ProgressBar.tsx

hcopp · 2026-02-10T19:54:04Z

packages/web/src/animation/types.ts

+  role?: AriaRole;
+  /** ARIA live region setting for dynamic content announcements */
+  'aria-live'?: AriaAttributes['aria-live'];
+};


Do we want to include this as a separate type? Is this being used elsewhere or only in this file?

hcopp · 2026-02-12T18:45:27Z

packages/mobile/src/animation/LottieStatusAnimation.tsx

-import React from 'react';
-import type { LottieStatusAnimationProps } from '@coinbase/cds-common';
+import React, { memo, useMemo } from 'react';
+import type { LottieStatusAnimationProps, LottieStatusAnimationType } from '@coinbase/cds-common';


Do we want to mark LottieStatusAnimationProps as deprecated in common and then not reuse it but instead re-define here in mobile and web?

Accessibility improvements: - Add role="status", aria-live="polite", and accessibilityLabel to Fallback, Spinner, and LottieStatusAnimation on web and mobile - LottieStatusAnimation auto-generates labels based on status - Update Fallback docs with accessibility guidance and grouping examples Bug fixes: - Fix ProgressBar callback re-animation issue by storing callbacks in refs instead of including them in useEffect dependencies Test improvements: - Add shape, width variant, and accessibility tests for Fallback - Add size variant and accessibility tests for Spinner - Add cardSuccess and status transition tests for LottieStatusAnimation Refactoring: - Move useFallbackShape hook to @coinbase/cds-common for cross-platform use - Use shapeBorderRadius tokens in RemoteImage/RemoteImageGroup - Add LottieAccessibilityProps types to animation types Also includes auto-generated icon updates (autoCar, birthcertificate, webhooks) and pencil icon active/inactive swap fix. Co-authored-by: Cursor <cursoragent@cursor.com>

adrienzheng-cb requested review from hcopp and maximo-macchi-cb February 10, 2026 19:42

adrienzheng-cb temporarily deployed to production February 10, 2026 19:42 — with GitHub Actions Inactive

adrienzheng-cb commented Feb 10, 2026

View reviewed changes

github-actions bot added packages:web packages:mobile apps:docs apps:mobile-app packages:ui-mobile-playground packages:ui-mobile-visreg labels Feb 10, 2026

adrienzheng-cb commented Feb 10, 2026

View reviewed changes

hcopp reviewed Feb 10, 2026

View reviewed changes

adrienzheng-cb commented Feb 10, 2026

View reviewed changes

hcopp reviewed Feb 10, 2026

View reviewed changes

adrienzheng-cb commented Feb 10, 2026

View reviewed changes

hcopp reviewed Feb 10, 2026

View reviewed changes

packages/mobile/src/visualizations/ProgressBar.tsx

Copy link

Contributor

hcopp Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice

hcopp reviewed Feb 10, 2026

View reviewed changes

adrienzheng-cb temporarily deployed to production February 10, 2026 20:55 — with GitHub Actions Inactive

hcopp reviewed Feb 12, 2026

View reviewed changes

adrienzheng-cb and others added 3 commits February 18, 2026 14:53

rename variable

5202a5e

minor fix

f7567c4

adrienzheng-cb force-pushed the adrien/loading-a11y-updates branch from a0c602c to f7567c4 Compare February 19, 2026 23:45

adrienzheng-cb temporarily deployed to production February 19, 2026 23:45 — with GitHub Actions Inactive

		import type { Polymorphic } from '../core/polymorphism';

		import { Box, type BoxBaseProps } from './Box';


		Fallback.displayName = 'Fallback';

		export { useFallbackShape, type UseFallbackShapeOptions };

Comments

Conversation

adrienzheng-cb commented Feb 10, 2026

What changed? Why?

Root cause (required for bugfixes)

UI changes

Testing

How has it been tested?

Testing instructions

Illustrations/Icons Checklist

Change management

Uh oh!

cb-heimdall commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟡 Heimdall Review Status

🟡 CODEOWNERS

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

cb-heimdall commented Feb 10, 2026 •

edited

Loading

🟡 `CODEOWNERS`