diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
index 790204f4f8..858f31c0b2 100644
--- a/src/components/ProgressBar.tsx
+++ b/src/components/ProgressBar.tsx
@@ -205,7 +205,13 @@ const ProgressBar = ({
accessibilityValue={
indeterminate
? {}
- : { min: 0, max: 100, now: Math.round(progress * 100) }
+ : {
+ min: 0,
+ max: 100,
+ now: Math.round(
+ (animatedValue !== undefined ? animatedValue : progress) * 100
+ ),
+ }
}
style={isWeb && styles.webContainer}
testID={testID}
diff --git a/src/components/__tests__/ProgressBar.test.tsx b/src/components/__tests__/ProgressBar.test.tsx
index d995facdb9..cd82373b69 100644
--- a/src/components/__tests__/ProgressBar.test.tsx
+++ b/src/components/__tests__/ProgressBar.test.tsx
@@ -90,3 +90,45 @@ it('renders progress bar with custom style of filled part', async () => {
borderRadius: 4,
});
});
+
+it('sets correct accessibilityValue with progress prop', async () => {
+ const tree = render();
+ await waitFor(() => tree.getByRole(a11yRole).props.onLayout(layoutEvent));
+
+ expect(tree.getByRole(a11yRole).props.accessibilityValue).toEqual({
+ min: 0,
+ max: 100,
+ now: 20,
+ });
+});
+
+it('sets correct accessibilityValue with animatedValue prop', async () => {
+ const tree = render();
+ await waitFor(() => tree.getByRole(a11yRole).props.onLayout(layoutEvent));
+
+ expect(tree.getByRole(a11yRole).props.accessibilityValue).toEqual({
+ min: 0,
+ max: 100,
+ now: 40,
+ });
+});
+
+it('updates accessibilityValue when animatedValue changes', async () => {
+ const tree = render();
+ await waitFor(() => tree.getByRole(a11yRole).props.onLayout(layoutEvent));
+
+ tree.update();
+
+ expect(tree.getByRole(a11yRole).props.accessibilityValue).toEqual({
+ min: 0,
+ max: 100,
+ now: 60,
+ });
+});
+
+it('sets empty accessibilityValue when indeterminate is true', async () => {
+ const tree = render();
+ await waitFor(() => tree.getByRole(a11yRole).props.onLayout(layoutEvent));
+
+ expect(tree.getByRole(a11yRole).props.accessibilityValue).toEqual({});
+});