[MOO-2434]: Rewrite progress bar and progress circle

packages/pluggableWidgets/progress-bar-native/CHANGELOG.md

@@ -8,7 +8,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Changed
 
--   We pinned react-native-progress to 5.0.1.
+-   Removed the react-native-progress dependency. There is no change in appearance or behavior.
+
+### Added
+
+-   The progress bar now announces itself to screen readers with a progress bar role and its current value.
 
 ## [4.3.1] - 2025-2-7
 

packages/pluggableWidgets/progress-bar-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "progress-bar-native",
   "widgetName": "ProgressBar",
-  "version": "4.4.1",
+  "version": "4.5.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -20,8 +20,7 @@
   },
   "dependencies": {
     "@mendix/piw-native-utils-internal": "*",
-    "@mendix/piw-utils-internal": "1.0.0",
-    "react-native-progress": "5.0.1"
+    "@mendix/piw-utils-internal": "1.0.0"
   },
   "devDependencies": {
     "@mendix/pluggable-widgets-tools": "*"

packages/pluggableWidgets/progress-bar-native/src/ProgressBar.tsx

@@ -1,14 +1,17 @@
-import { flattenStyles } from "@mendix/piw-native-utils-internal";
+import { Bar, flattenStyles } from "@mendix/piw-native-utils-internal";
 import { isAvailable } from "@mendix/piw-utils-internal";
 import { Text, View } from "react-native";
-import { Bar } from "react-native-progress";
 import { JSX } from "react";
 
 import { ProgressBarProps } from "../typings/ProgressBarProps";
 import { defaultProgressBarStyle, ProgressBarStyle } from "./ui/Styles";
 
 export type Props = ProgressBarProps<ProgressBarStyle>;
 
+// iOS reads accessibilityValue as now / (max - min), ignoring min, so the value is always reported on a 0-100 scale
+// to be announced correctly for any range (same approach as the Slider).
+const ACCESSIBILITY_SCALE = 100;
+
 export function ProgressBar(props: ProgressBarProps<ProgressBarStyle>): JSX.Element {
     const styles = flattenStyles(defaultProgressBarStyle, props.style);
 
@@ -55,15 +58,28 @@ export function ProgressBar(props: ProgressBarProps<ProgressBarStyle>): JSX.Elem
 
     return (
         <View style={styles.container}>
-            <Bar
-                testID={props.name}
-                height={Number(styles.bar.height)}
-                width={null}
-                progress={progress}
-                color={styles.fill.backgroundColor}
-                borderWidth={styles.bar.borderWidth}
-                style={styles.bar}
-            />
+            <View
+                accessible
+                accessibilityRole="progressbar"
+                accessibilityValue={{
+                    min: 0,
+                    max: ACCESSIBILITY_SCALE,
+                    now: Math.round(progress * ACCESSIBILITY_SCALE)
+                }}
+                accessibilityLabel="Progress bar"
+            >
+                <Bar
+                    testID={props.name}
+                    height={Number(styles.bar.height)}
+                    width={null}
+                    progress={progress}
+                    color={styles.fill.backgroundColor}
+                    borderWidth={styles.bar.borderWidth as number | undefined}
+                    borderColor={styles.bar.borderColor}
+                    borderRadius={styles.bar.borderRadius as number | undefined}
+                    unfilledColor={styles.bar.backgroundColor}
+                />
+            </View>
             {validationMessages.length > 0 && (
                 <Text style={styles.validationMessage}>{validationMessages.join("\n")}</Text>
             )}

packages/pluggableWidgets/progress-bar-native/src/__tests__/ProgressBar.spec.tsx

@@ -1,7 +1,7 @@
+import { Bar } from "@mendix/piw-native-utils-internal";
 import { dynamicValue } from "@mendix/piw-utils-internal";
 import { Big } from "big.js";
-import { Text } from "react-native";
-import { Bar } from "react-native-progress";
+import { Text, View } from "react-native";
 import { render } from "@testing-library/react-native";
 
 import { ProgressBar, Props } from "../ProgressBar";
@@ -47,6 +47,43 @@ describe("ProgressBar", () => {
         expect(component.UNSAFE_queryByType(Text)).toBeNull();
     });
 
+    it("has progressbar accessibility role", () => {
+        const component = render(<ProgressBar {...createProps(60, 0, 100)} />);
+        const views = component.UNSAFE_getAllByType(View);
+        // Find the View with accessibilityRole="progressbar"
+        const accessibleElement = views.find(view => view.props.accessibilityRole === "progressbar");
+        expect(accessibleElement).toBeDefined();
+        expect(accessibleElement?.props.accessibilityValue).toEqual({
+            min: 0,
+            max: 100,
+            now: 60
+        });
+    });
+
+    it("reports the accessibility value as a percentage of the range", () => {
+        const component = render(<ProgressBar {...createProps(25, 10, 50)} />);
+        const views = component.UNSAFE_getAllByType(View);
+        const accessibleElement = views.find(view => view.props.accessibilityRole === "progressbar");
+        // (25 - 10) / (50 - 10) = 37.5%, rounded
+        expect(accessibleElement?.props.accessibilityValue).toEqual({
+            min: 0,
+            max: 100,
+            now: 38
+        });
+    });
+
+    it("reports the percentage of the range when the range does not start at 0", () => {
+        const component = render(<ProgressBar {...createProps(49, 1, 100)} />);
+        const views = component.UNSAFE_getAllByType(View);
+        const accessibleElement = views.find(view => view.props.accessibilityRole === "progressbar");
+        // (49 - 1) / (100 - 1) = 48.5%; iOS divides by the range without subtracting min, so the scale must be 0-100
+        expect(accessibleElement?.props.accessibilityValue).toEqual({
+            min: 0,
+            max: 100,
+            now: 48
+        });
+    });
+
     it("preserves expected style key set", () => {
         const keys = Object.keys(defaultProgressBarStyle).sort();
         expect(keys).toEqual(["bar", "container", "fill", "validationMessage"]);

packages/pluggableWidgets/progress-bar-native/src/__tests__/__snapshots__/ProgressBar.spec.tsx.snap

@@ -5,58 +5,53 @@ exports[`ProgressBar renders 1`] = `
   style={{}}
 >
   <View
-    animated={true}
-    animationConfig={
+    accessibilityLabel="Progress bar"
+    accessibilityRole="progressbar"
+    accessibilityValue={
       {
-        "bounciness": 0,
+        "max": 100,
+        "min": 0,
+        "now": 50,
       }
     }
-    animationType="spring"
-    indeterminate={false}
-    indeterminateAnimationDuration={1000}
-    onLayout={[Function]}
-    progress={0.5}
-    style={
-      [
-        {
-          "backgroundColor": undefined,
-          "borderColor": "rgb(98,0,238)",
-          "borderRadius": 4,
-          "borderWidth": 0,
-          "overflow": "hidden",
-          "width": null,
-        },
-        {
-          "backgroundColor": "rgba(98,0,238, 0.2)",
-          "borderRadius": 0,
-          "borderWidth": 0,
-          "height": 6,
-        },
-      ]
-    }
-    testID="progress-bar-test"
-    useNativeDriver={false}
+    accessible={true}
   >
     <View
-      collapsable={false}
+      onLayout={[Function]}
       style={
-        {
-          "backgroundColor": "rgb(98,0,238)",
-          "height": 6,
-          "transform": [
-            {
-              "translateX": -0,
-            },
-            {
-              "translateX": -0,
-            },
-            {
-              "scaleX": 0.50005,
-            },
-          ],
-        }
+        [
+          {
+            "backgroundColor": "rgba(98,0,238, 0.2)",
+            "borderColor": "rgb(98,0,238)",
+            "borderRadius": 0,
+            "borderWidth": 0,
+            "overflow": "hidden",
+            "width": undefined,
+          },
+          undefined,
+        ]
       }
-    />
+      testID="progress-bar-test"
+    >
+      <View
+        style={
+          {
+            "backgroundColor": "rgb(98,0,238)",
+            "height": 6,
+            "transform": [
+              {
+                "translateX": -0,
+              },
+              {
+                "scaleX": 0.5,
+              },
+            ],
+            "width": "100%",
+          }
+        }
+        testID="progress-bar-test-fill"
+      />
+    </View>
   </View>
 </View>
 `;

packages/pluggableWidgets/progress-bar-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="ProgressBar" version="4.4.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="ProgressBar" version="4.5.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="ProgressBar.xml" />
         </widgetFiles>

packages/pluggableWidgets/progress-circle-native/CHANGELOG.md

@@ -8,7 +8,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Changed
 
--   We pinned react-native-progress to 5.0.1.
+-   Removed the react-native-progress dependency. There is no change in appearance or behavior.
+
+### Added
+
+-   The progress circle now announces itself to screen readers with a progress bar role and its current value.
 
 ## [3.2.1] - 2025-2-7
 

packages/pluggableWidgets/progress-circle-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "progress-circle-native",
   "widgetName": "ProgressCircle",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@mendix/piw-native-utils-internal": "*",
-    "react-native-progress": "5.0.1"
+    "react-native-svg": "15.15.4"
   },
   "devDependencies": {
     "@mendix/piw-utils-internal": "*",